/* ===== Frota: onde está cada caminhão, KM, revisões, pneus e alertas ===== */

/* "Onde está cada caminhão agora": a situação operacional em uma frase, por veículo.
   Usa o mesmo vocabulário de statusLabel (core.jsx) para a Frota e a Visão geral falarem igual.
   Cores: tokens da camada de marca (valoria-tema.css). */
const ONDE_ORDEM=['rota','carregando','base','retorno','manutencao'];
const ondeTexto=(t)=>{
  if(t.status==='manutencao') return t.note||'Parado na oficina';
  if(t.status==='carregando') return `Carregando em ${t.pos}${t.trip?` · viagem ${t.trip}`:''}`;
  if(t.status==='rota') return `Entregando · último ponto ${t.pos}${t.trip?` · viagem ${t.trip}`:''}`;
  if(t.status==='retorno') return `Voltando vazio · passou por ${t.pos}`;
  return `Parado em ${t.pos}, pronto para sair`;
};
const ondeGrid={display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:'10px',padding:'4px 20px 18px'};
const ondeCol={background:'var(--va-bg2)',border:'1px solid var(--va-line)',borderRadius:'10px',padding:'11px 12px'};
const ondeHead={display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:'9px'};
const ondeCount={fontSize:'15px',fontWeight:800,color:'var(--va-text)',fontVariantNumeric:'tabular-nums'};
const ondeList={listStyle:'none',margin:0,padding:0,display:'flex',flexDirection:'column',gap:'8px'};
const ondeB={display:'block',fontSize:'11px',color:'var(--va-text)'};
const ondeS={display:'block',fontSize:'9px',color:'var(--va-text3)',marginTop:'2px',lineHeight:1.5};

function OndeEstaFrota({fleet}) {
  const grupos=ONDE_ORDEM.filter(s=>fleet.some(t=>t.status===s));
  const fora=fleet.filter(t=>t.status==='manutencao').length;
  return <section className="panel" style={{marginBottom:'16px'}}>
    <div className="panel-title"><div><h2>Onde está cada caminhão agora</h2><p>{fleet.length} veículos · {fleet.length-fora} disponíveis para a operação · situação de demonstração</p></div></div>
    <div style={ondeGrid}>{grupos.map(s=>{
      const list=fleet.filter(t=>t.status===s);
      return <div key={s} style={ondeCol}>
        <div style={ondeHead}><span className={`pill p-${s}`}>{statusLabel[s]}</span><span style={ondeCount}>{list.length}</span></div>
        <ul style={ondeList}>{list.map(t=><li key={t.id}><b style={ondeB}>{t.id} · {t.plate}</b><small style={ondeS}>{ondeTexto(t)}</small></li>)}</ul>
      </div>;
    })}</div>
    <p className="calc-note" style={{padding:'0 20px 16px',margin:0}}>Situação fictícia de demonstração. Na operação real ela vem do rastreador do caminhão ou do lançamento de quem programa.</p>
  </section>;
}

function Fleet({fleet,setFleet,notify}) {
  const [kmFor,setKmFor]=useState(null);
  const [odo,setOdo]=useState('');
  const [rev,setRev]=useState(false);
  const [tire,setTire]=useState(false);
  const [err,setErr]=useState('');
  const rows=fleet.map(fleetInfo);
  const alerts=rows.flatMap(r=>r.alerts.map(a=>({...a,t:r})));
  const c=(s)=>fleet.filter(t=>s.includes(t.status)).length;
  const open=(t)=>{setKmFor(t.id);setOdo(String(t.odo));setRev(false);setTire(false);setErr('');};
  const cur=rows.find(r=>r.id===kmFor);
  const save=()=>{
    const v=parseInt(String(odo).replace(/\D/g,''),10);
    if(!v||v<cur.odo){setErr(`Informe um KM igual ou maior que o atual (${fmt(cur.odo)} km).`);return;}
    if(v-cur.odo>5000){setErr('Diferença acima de 5.000 km desde o último lançamento. Confira o hodômetro.');return;}
    setFleet(list=>list.map(x=>x.id!==cur.id?x:{...x,odo:v,nextRev:rev?v+INTERVALO_REVISAO:x.nextRev,lastRev:rev?'21/09/2026':x.lastRev,tireKm:tire?v:x.tireKm}));
    setKmFor(null); notify(`KM do ${cur.id} atualizado para ${fmt(v)} km.`);
  };
  return <div className="content fleet-content">
    <div className="page-heading"><div><p>FROTA</p><h1>Caminhões, KM e manutenção</h1><span>Onde cada caminhão está agora, e o que precisa de oficina antes de virar problema.</span></div></div>
    <section className="log-metrics"><article><span>Livres agora</span><strong>{c(['base','retorno'])}</strong><small>na base ou voltando</small></article><article><span>Em operação</span><strong>{c(['rota','carregando'])}</strong><small>em rota ou carregando</small></article><article><span>Em manutenção</span><strong>{c(['manutencao'])}</strong><small>parados na oficina</small></article><article><span>Alertas</span><strong className={alerts.length?'warn-num':''}>{alerts.length}</strong><small>revisão, pneus e oficina</small></article></section>
    <OndeEstaFrota fleet={fleet}/>
    {alerts.length>0&&<section className="panel fleet-alerts"><div className="panel-title"><div><h2>Precisa de atenção</h2><p>Gerado automaticamente a partir do KM lançado</p></div></div><ul>{alerts.map((a,i)=><li key={i} className={a.tone}><span className="fa-dot"/><b>{a.t.id} · {a.t.plate}</b><span>{a.text}</span><button className="link-btn" onClick={()=>open(a.t)}>Lançar KM</button></li>)}</ul></section>}
    <section className="panel"><div className="panel-title"><div><h2>Frota cadastrada</h2><p>{fleet.length} veículos · revisão a cada {fmt(INTERVALO_REVISAO)} km · pneus com vida útil de {fmt(VIDA_PNEU)} km (parâmetros fictícios)</p></div></div>
      <div className="table-wrap"><table className="fleet-table"><thead><tr><th>Veículo</th><th>Motorista</th><th>Situação</th><th>KM atual</th><th>Próxima revisão</th><th>Pneus</th><th></th></tr></thead><tbody>{rows.map(t=><tr key={t.id}>
        <td><b className="strong">{t.id} · {t.plate}</b><small className="cell-sub">{fmt(t.cap)} L · {t.comp} compartimentos</small></td>
        <td>{t.driver}</td>
        <td><span className={`pill p-${t.status}`}>{statusLabel[t.status]}</span><small className="cell-sub">{ondeTexto(t)}</small></td>
        <td className="num">{fmt(t.odo)} km<small className="cell-sub">~{fmt(t.dailyKm)} km/dia</small></td>
        <td><div className="meter"><i className={t.kmLeft<=3000?'warn':''} style={{width:`${clamp(100-t.kmLeft/INTERVALO_REVISAO*100)}%`}}/></div><small className="cell-sub">{t.kmLeft>0?`faltam ${fmt(t.kmLeft)} km · previsão ${t.revDate}`:'vencida'}</small></td>
        <td><div className="meter"><i className={t.tirePct>=85?'warn':''} style={{width:`${clamp(t.tirePct)}%`}}/></div><small className="cell-sub">{t.tirePct}% da vida útil</small></td>
        <td><button className="link-btn" onClick={()=>open(t)}>Lançar KM</button></td>
      </tr>)}</tbody></table></div>
    </section>
    <section className="how"><div><h3>Preventiva</h3><p>Revisão por quilometragem: o sistema compara o KM lançado com o KM da próxima revisão e avisa quando faltarem menos de 3.000 km.</p></div><div><h3>Preditiva (versão simples)</h3><p>Usa o KM médio por dia de cada caminhão para prever a <b>data</b> da próxima revisão. Assim dá para planejar a oficina sem tirar caminhão de viagem.</p></div><div><h3>Próxima fase</h3><p>KM lançado pelo motorista no celular, histórico de peças e custos por caminhão. Depois, telemetria para prever falhas.</p></div></section>
    {cur&&<div className="modal-backdrop" role="presentation" onMouseDown={()=>setKmFor(null)}><section className="modal" role="dialog" aria-modal="true" aria-labelledby="km-title" onMouseDown={e=>e.stopPropagation()}><header><div><p>LANÇAMENTO</p><h2 id="km-title">Lançar KM · {cur.id}</h2></div><button onClick={()=>setKmFor(null)} aria-label="Fechar">×</button></header><div className="modal-body">
      <div className="km-facts"><p><span>Placa</span><b>{cur.plate}</b></p><p><span>KM atual</span><b>{fmt(cur.odo)} km</b></p><p><span>Próxima revisão</span><b>{fmt(cur.nextRev)} km</b></p><p><span>Última revisão</span><b>{cur.lastRev}</b></p></div>
      <label className="field">Novo KM do hodômetro<input id="odo" inputMode="numeric" value={odo} onChange={e=>{setOdo(e.target.value);setErr('');}}/></label>
      {err&&<p className="form-err" role="alert">{err}</p>}
      <label className="check"><input id="rev" type="checkbox" checked={rev} onChange={e=>setRev(e.target.checked)}/> Revisão feita neste KM (próxima em +{fmt(INTERVALO_REVISAO)} km)</label>
      <label className="check"><input id="tire" type="checkbox" checked={tire} onChange={e=>setTire(e.target.checked)}/> Pneus trocados neste KM</label>
    </div><footer><button className="secondary" onClick={()=>setKmFor(null)}>Cancelar</button><button className="primary" onClick={save}>Salvar KM</button></footer></section></div>}
  </div>;
}