/* ===== 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:'0.9375rem',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:'0.8125rem',color:'var(--va-text)'};
const ondeS={display:'block',fontSize:'0.6875rem',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>;
}

/* ===== Ficha dos veiculos (12/11) ===================================
   Pedido dele: "cadastrar com modelo, ano, eixos, placa e uma foto" e
   "km/litro por veiculo, se e economico ou nao".

   A FOTO nao existe: nao temos imagem da frota do Paulo, e imagem de
   banco tem licenca. No lugar entra um DESENHO esquematico por tipo de
   veiculo, feito por nos - diz o que precisa dizer (quantos tanques,
   quantos eixos) e nao finge ser foto. Quando ele mandar as fotos
   reais, troca-se o desenho pela imagem.
   =================================================================== */
const vwBox={truck:'0 0 200 70',carreta:'0 0 230 70',bitrem:'0 0 260 70'};

function Desenho({tipo}) {
  const eixo=(x)=><g key={x}><circle cx={x} cy="56" r="8"/><circle cx={x} cy="56" r="3.2" className="vw-aro"/></g>;
  const cabine=<g><path d="M6 46 L6 24 Q6 20 10 19 L26 17 L34 30 L46 30 L46 46 Z" className="vw-cab"/>
    <path d="M12 24 L24 22 L30 30 L12 30 Z" className="vw-vidro"/></g>;
  if(tipo==='truck') return <svg viewBox={vwBox.truck} className="vw"><g>
    {cabine}<rect x="48" y="22" width="120" height="24" rx="11" className="vw-tanque"/>
    <rect x="46" y="44" width="126" height="6" className="vw-chassi"/>
    {[20,78,108].map(eixo)}</g></svg>;
  if(tipo==='carreta') return <svg viewBox={vwBox.carreta} className="vw"><g>
    {cabine}<rect x="44" y="40" width="20" height="8" className="vw-chassi"/>
    <rect x="60" y="20" width="150" height="26" rx="12" className="vw-tanque"/>
    <rect x="58" y="44" width="156" height="6" className="vw-chassi"/>
    {[20,42,160,182,204].map(eixo)}</g></svg>;
  return <svg viewBox={vwBox.bitrem} className="vw"><g>
    {cabine}<rect x="44" y="40" width="18" height="8" className="vw-chassi"/>
    <rect x="58" y="22" width="92" height="24" rx="11" className="vw-tanque"/>
    <rect x="156" y="22" width="86" height="24" rx="11" className="vw-tanque"/>
    <rect x="56" y="44" width="188" height="6" className="vw-chassi"/>
    <rect x="148" y="34" width="10" height="5" className="vw-chassi"/>
    {[20,42,112,134,176,198,230].map(eixo)}</g></svg>;
}

function FichaVeiculos({fleet}) {
  const ref=consumoFrota(fleet);
  const ord=[...fleet].sort((a,b)=>(b.kmL||0)-(a.kmL||0));
  const melhor=ord[0], pior=ord[ord.length-1];
  const economia=(pior&&melhor)?(custoCombKm(pior.kmL)-custoCombKm(melhor.kmL)):0;
  return <section className="panel" style={{marginBottom:'16px'}}>
    <div className="panel-title"><div><h2>Ficha dos veículos</h2>
      <p>Modelo, ano, eixos, placa e autonomia &middot; {fleet.length} veículos &middot; média da frota {String(ref.media.toFixed(2)).replace('.',',')} km/L</p></div>
      <span className="ro-tag">ficha técnica simulada</span></div>
    {melhor&&pior&&melhor.id!==pior.id&&<section className="insight vw-topo">
      <b>{melhor.id}</b> ({melhor.modelo}) faz {String(melhor.kmL).replace('.',',')} km/L e <b>{pior.id}</b> ({pior.modelo}) faz {String(pior.kmL).replace('.',',')} km/L.
      Em combustível isso dá <b>{brl2(economia)} de diferença por quilômetro rodado</b> &mdash; numa viagem de 500 km, {brl(economia*500)}.
      Por isso a escolha do caminhão para cada entrega pesa no resultado.
    </section>}
    <div className="vw-grid">{fleet.map(t=>{
      const f=faixaConsumo(t.kmL,ref.media);
      return <article key={t.id} className="vw-card">
        <header><b>{t.id}</b><span className="qe-placa">{t.plate}</span>
          <span className={`pill p-${t.status}`}>{statusLabel[t.status]}</span></header>
        <div className="vw-art"><Desenho tipo={t.tipo}/></div>
        <p className="vw-modelo">{t.modelo}</p>
        <dl className="vw-specs">
          <div><dt>Tipo</dt><dd>{TIPO_LABEL[t.tipo]}</dd></div>
          <div><dt>Ano</dt><dd>{t.ano}</dd></div>
          <div><dt>Eixos</dt><dd>{t.eixos}</dd></div>
          <div><dt>Capacidade</dt><dd>{fmt(t.cap)} L</dd></div>
          <div><dt>Compart.</dt><dd>{t.comp}</dd></div>
          <div><dt>Motorista</dt><dd className="vw-nome">{t.driver}</dd></div>
        </dl>
        <footer className={'vw-cons c-'+f.k}>
          <div><b>{String(t.kmL).replace('.',',')} km/L</b><small>{brl2(custoCombKm(t.kmL))}/km em diesel</small></div>
          <span>{f.rot}</span>
        </footer>
      </article>;})}</div>
    <p className="calc-note" style={{padding:'0 20px 16px',margin:'12px 0 0'}}>
      <b>Desenho, não foto.</b> Modelo, ano, eixos e autonomia são dados de demonstração, coerentes com a capacidade de cada caminhão. O desenho mostra o tipo (quantos tanques, quantos eixos) e não tenta parecer uma foto. Com as fotos reais da frota, o desenho é trocado pela imagem. &ldquo;Econômico&rdquo; e &ldquo;gasta mais&rdquo; comparam cada caminhão com a <b>média da própria frota</b>, não com tabela de fabricante.
    </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>
    <FichaVeiculos fleet={fleet}/>
    <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>Autonomia</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">{t.modelo} · {t.ano}</small><small className="cell-sub">{fmt(t.cap)} L · {t.comp} compartimentos · {t.eixos} eixos</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"><b>{String(t.kmL).replace('.',',')}</b> km/L<small className="cell-sub">{brl2(custoCombKm(t.kmL))}/km</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>;
}