/* ===== Consumo real por caminhão (14/11) ============================
   Vem do ramo 2 e 3 do mapa de Frotas. Hoje o km/L que o app usa para
   escolher caminhão é GERADO, não medido — e o custo por km de cada
   veículo sai dele. Ou seja: o sistema decide com um número inventado.

   COMO O DADO ENTRA, do jeito que ele descreveu:
   saiu com quanto · abasteceu quanto no caminho · voltou com quanto
   · quantos km rodou. Daí sai o consumo da viagem.

        gasto = saiu + abastecido - voltou
        km/L  = km rodados / gasto

   De onde vem o número: do painel do caminhão. Ou o motorista olha e
   passa para quem cuida da frota, ou o registro acontece na hora de
   reabastecer. É MANUAL, e está dito na tela: não adianta desenhar
   automático o que depende de alguém olhar um painel.

   O QUE A TELA FAZ COM ISSO
   - média real por caminhão, e comparação com a do cadastro;
   - queda de consumo entre a média antiga e as últimas viagens, que
     costuma ser sintoma mecânico antes de virar quebra;
   - diferença entre motoristas no mesmo caminhão.

   ⚠️ Os lançamentos ficam no navegador até existir tabela no banco.
   ================================================================== */

const CS_QUEDA_ALERTA = 6;   /* % de piora que acende o alerta */

/* Exemplos só na visualização simulada. As datas são geradas em
   relação a HOJE, não escritas à mão: assim a janela de comparação do
   painel (últimos 30 dias contra os 30 anteriores) continua fazendo
   sentido daqui a um mês, em vez de a demonstração envelhecer sozinha. */
function csAtras(n){
  const d = new Date(); d.setDate(d.getDate()-n);
  const dd = (x)=>(x<10?'0':'')+x;
  return `${dd(d.getDate())}/${dd(d.getMonth()+1)}/${d.getFullYear()}`;
}
const initialConsumo = [
  /* janela atual */
  {id:'CS-1', truck:'TRK-01', data:csAtras(4),  motorista:'Rogério Lima', km:780, saiu:400, abast:0,   voltou:82},
  {id:'CS-2', truck:'TRK-01', data:csAtras(9),  motorista:'Rogério Lima', km:810, saiu:400, abast:0,   voltou:72},
  {id:'CS-3', truck:'TRK-01', data:csAtras(16), motorista:'Rogério Lima', km:760, saiu:400, abast:0,   voltou:94},
  {id:'CS-4', truck:'TRK-03', data:csAtras(3),  motorista:'Sérgio Nunes', km:600, saiu:400, abast:120, voltou:190},
  {id:'CS-5', truck:'TRK-03', data:csAtras(11), motorista:'Sérgio Nunes', km:700, saiu:400, abast:0,   voltou:106},
  {id:'CS-6', truck:'TRK-03', data:csAtras(21), motorista:'Sérgio Nunes', km:720, saiu:400, abast:0,   voltou:92},
  {id:'CS-7', truck:'TRK-05', data:csAtras(5),  motorista:'Wagner Dias',  km:690, saiu:400, abast:0,   voltou:118},
  {id:'CS-8', truck:'TRK-05', data:csAtras(12), motorista:'Diego Rocha',  km:700, saiu:400, abast:0,   voltou:94},
  /* janela anterior: é ela que faz a tendência existir */
  {id:'CS-9',  truck:'TRK-01', data:csAtras(34), motorista:'Rogério Lima', km:700, saiu:400, abast:0, voltou:94},
  {id:'CS-10', truck:'TRK-01', data:csAtras(41), motorista:'Rogério Lima', km:690, saiu:400, abast:0, voltou:98},
  {id:'CS-11', truck:'TRK-03', data:csAtras(36), motorista:'Sérgio Nunes', km:760, saiu:400, abast:0, voltou:86},
  {id:'CS-12', truck:'TRK-03', data:csAtras(44), motorista:'Sérgio Nunes', km:740, saiu:400, abast:0, voltou:94},
  {id:'CS-13', truck:'TRK-05', data:csAtras(38), motorista:'Wagner Dias',  km:680, saiu:400, abast:0, voltou:108},
];

const csGasto = (l) => Math.max(0, (l.saiu||0) + (l.abast||0) - (l.voltou||0));
const csKmL = (l) => { const g = csGasto(l); return g>0 ? (l.km||0)/g : 0; };
const csFmt = (v) => (Math.round(v*100)/100).toFixed(2).replace('.',',');
const csMedia = (ls) => { const km = ls.reduce((s,l)=>s+(l.km||0),0), g = ls.reduce((s,l)=>s+csGasto(l),0);
  return g>0 ? km/g : 0; };

function CsLancar({fleet, onLancar, onFechar}){
  const hoje = new Date(); const dd=(n)=>(n<10?'0':'')+n;
  const [f,setF] = useState({truck: fleet[0]?fleet[0].id:'',
    data:`${dd(hoje.getDate())}/${dd(hoje.getMonth()+1)}/${hoje.getFullYear()}`,
    motorista: fleet[0]?fleet[0].driver:'', km:'', saiu:'', abast:'', voltou:''});
  const set=(k,v)=>setF(c=>({...c,[k]:v}));
  const trocarTruck=(id)=>{ const t=fleet.find(x=>x.id===id); setF(c=>({...c, truck:id, motorista:(t&&t.driver)||c.motorista})); };
  const n = (v)=>mnNum(v);
  const previa = {km:n(f.km), saiu:n(f.saiu), abast:n(f.abast), voltou:n(f.voltou)};
  const gasto = csGasto(previa), kml = csKmL(previa);
  const pronto = f.truck && f.data.trim() && previa.km>0 && gasto>0;

  return <div className="np-modal" role="dialog" aria-modal="true" aria-label="Lançar viagem">
    <div className="np-cx mb-cx">
      <p className="np-cx-tit">Lançar consumo da viagem</p>
      <label className="field mb-f"><span>Caminhão</span>
        <select value={f.truck} onChange={e=>trocarTruck(e.target.value)}>
          {fleet.map(t=><option key={t.id} value={t.id}>{t.id} · {t.plate}</option>)}
        </select></label>
      <label className="field mb-f"><span>Quando voltou</span>
        <input value={f.data} onChange={e=>set('data',e.target.value)} placeholder="dd/mm/aaaa"/></label>
      <label className="field mb-f"><span>Motorista</span>
        <input value={f.motorista} onChange={e=>set('motorista',e.target.value)}/></label>
      <label className="field mb-f"><span>KM rodados na viagem</span>
        <input value={f.km} onChange={e=>set('km',e.target.value)} inputMode="numeric" placeholder="780"/></label>
      <label className="field mb-f"><span>Saiu com (litros no tanque)</span>
        <input value={f.saiu} onChange={e=>set('saiu',e.target.value)} inputMode="numeric" placeholder="400"/></label>
      <label className="field mb-f"><span>Abasteceu no caminho (litros)</span>
        <input value={f.abast} onChange={e=>set('abast',e.target.value)} inputMode="numeric" placeholder="0"/></label>
      <label className="field mb-f"><span>Voltou com (litros)</span>
        <input value={f.voltou} onChange={e=>set('voltou',e.target.value)} inputMode="numeric" placeholder="80"/></label>

      <p className={'calc-note cs-previa'+(pronto?' ok':'')}>
        {pronto
          ? <>Gastou <b>{fmt(gasto)} L</b> para rodar <b>{fmt(previa.km)} km</b> — <b>{csFmt(kml)} km/L</b>.</>
          : <>Preencha os km e os litros. A conta é: saiu + abasteceu − voltou.</>}
      </p>

      <div className="np-cx-acoes">
        <button className="secondary" onClick={onFechar}>Cancelar</button>
        <button className="primary" disabled={!pronto} onClick={()=>onLancar({
          id:'CS-'+Date.now().toString(36).toUpperCase().slice(-5),
          truck:f.truck, data:f.data.trim(), motorista:f.motorista.trim(),
          km:previa.km, saiu:previa.saiu, abast:previa.abast, voltou:previa.voltou,
        })}>Lançar</button>
      </div>
    </div>
  </div>;
}

function Consumo({fleet, notify, readOnly}){
  /* Simulada: navegador. Real: tabela frota_consumo no banco. */
  const dados = useFrotaDados('frota_consumo', 'consumo', initialConsumo,
    (r)=>({id:r.id, caminhao:r.truck, data: bancoDataIso(r.data), motorista:r.motorista,
           km:r.km, saiu:r.saiu, abastecido:r.abast, voltou:r.voltou}),
    (b)=>({id:b.id, truck:b.caminhao, data: bancoDataBr(b.data), motorista:b.motorista||'',
           km:Number(b.km)||0, saiu:Number(b.saiu)||0, abast:Number(b.abastecido)||0, voltou:Number(b.voltou)||0}));
  const regs = dados.linhas;
  /* o painel conta dias parado e custo de oficina: lê a manutenção pela
     MESMA camada, senão em Real o painel ficaria sem os serviços. */
  const oficina = useFrotaDados('frota_manutencao', 'manutencoes',
    (typeof initialManutencoes!=='undefined'?initialManutencoes:[]),
    (h)=>({id:h.id, caminhao:h.truck, servico:h.servico, nome:h.nome,
           data: bancoDataIso(h.data), custo:h.custo, dias:h.dias, obs:h.obs}),
    (r)=>({id:r.id, truck:r.caminhao, servico:r.servico, nome:r.nome,
           data: bancoDataBr(r.data), custo:Number(r.custo)||0, dias:Number(r.dias)||0, obs:r.obs||''}));
  const [lancando,setLancando] = useState(false);
  const [verTruck,setVerTruck] = useState('Todos');

  const porTruck = (fleet||[]).map(t=>{
    const ls = regs.filter(r=>r.truck===t.id);
    const ordenado = ls.slice();              /* lançamentos entram por cima */
    const real = csMedia(ordenado);
    const ultimas = csMedia(ordenado.slice(0,2));
    const antigas = csMedia(ordenado.slice(2));
    const queda = (antigas>0 && ultimas>0) ? (1 - ultimas/antigas)*100 : 0;
    return {t, n: ls.length, real, ultimas, antigas, queda, cadastro: t.kmL||0};
  });
  const comDado = porTruck.filter(x=>x.n>0);
  const mediaFrota = csMedia(regs);
  const alertas = comDado.filter(x=>x.n>=3 && x.queda>=CS_QUEDA_ALERTA);
  const litrosMes = regs.reduce((s,r)=>s+csGasto(r),0);

  /* diferença entre motoristas no mesmo caminhão */
  const porMotorista = {};
  regs.forEach(r=>{ const k=r.truck+'|'+(r.motorista||'sem nome');
    (porMotorista[k]=porMotorista[k]||{truck:r.truck, nome:r.motorista||'sem nome', ls:[]}).ls.push(r); });
  const duplas = Object.values(porMotorista).reduce((acc,x)=>{
    (acc[x.truck]=acc[x.truck]||[]).push(x); return acc; },{});
  const comparaveis = Object.keys(duplas).filter(k=>duplas[k].length>1)
    .map(k=>({truck:k, gente: duplas[k].map(x=>({nome:x.nome, kml: csMedia(x.ls), n:x.ls.length}))
      .sort((a,b)=>b.kml-a.kml)}));

  const lista = regs.filter(r=>verTruck==='Todos'||r.truck===verTruck);

  return <div className="content mn-content">
    <div className="page-heading">
      <div><p>FROTA · DESEMPENHO</p><h1>Desempenho da frota</h1>
        <span>Quanto cada caminhão roda, bebe e para — medido, não estimado.</span></div>
      {!readOnly && !dados.precisaConta && <div className="heading-actions">
        <button className="primary" onClick={()=>setLancando(true)}>Lançar viagem</button></div>}
    </div>

    {dados.noBanco && <p className={'rs '+(dados.precisaConta?'warn':dados.erro?'bad':'good')+' mn-fonte'}>
      {dados.precisaConta
        ? 'Visualização Real: as viagens vêm do banco e pedem login. Saia e entre com a sua conta.'
        : dados.erro ? dados.erro
        : dados.carregando ? 'Lendo o banco...'
        : 'Viagens vindo do banco: o que for lançado aqui aparece em qualquer computador.'}
    </p>}

    <section className="ai-tip mn-tip">
      <span>!</span>
      <div>
        <strong>O km/L que o sistema usa hoje é inventado</strong>
        <p>O custo por km de cada caminhão — que decide qual vai para cada carga — sai de um consumo que ninguém mediu.
          Cada viagem lançada aqui troca um palpite por um número.</p>
      </div>
    </section>

    {dados.noBanco && !dados.precisaConta && !(fleet||[]).length &&
      <section className="panel mn-sem-frota">
        <p><b>Os lançamentos funcionam, mas não há caminhão cadastrado.</b></p>
        <p>Na visualização Real o cadastro da frota ainda não existe: ele vive no código, não no banco.
          Enquanto a tabela de frota não for criada, esta tela consegue ler e gravar no banco,
          mas não tem a quem atribuir o serviço.</p>
      </section>}

    {typeof FrotaPainel!=='undefined' && <FrotaPainel fleet={fleet} regs={regs} manut={oficina.linhas}/>}

    {alertas.length>0 && <section className="panel mn-tab cs-alerta">
      <div className="panel-title"><div><h2>Consumo piorando</h2>
        <p>Queda entre a média antiga e as duas últimas viagens. Costuma ser sintoma mecânico antes de virar quebra.</p></div></div>
      {alertas.map(x=><p key={x.t.id} className="rs bad cs-al-l">
        <b>{x.t.id}</b> caiu de {csFmt(x.antigas)} para {csFmt(x.ultimas)} km/L — <b>{Math.round(x.queda)}% pior</b>. Vale olhar antes da próxima viagem longa.</p>)}
    </section>}

    <section className="panel mn-topo">
      <div className="mg-kpis">
        <div><span>Viagens lançadas</span><b>{regs.length}</b><small>em {comDado.length} de {(fleet||[]).length} caminhões</small></div>
        <div><span>Diesel medido</span><b>{fmt(Math.round(litrosMes))} L</b><small>somando o que foi lançado</small></div>
        <div className="hl"><span>Média real da frota</span><b>{mediaFrota>0?csFmt(mediaFrota)+' km/L':'—'}</b>
          <small>{mediaFrota>0?'contra o que está no cadastro, caminhão a caminhão abaixo':'ainda sem viagem lançada'}</small></div>
      </div>
    </section>

    <section className="panel mn-tab">
      <div className="panel-title"><div><h2>Medido contra cadastrado</h2>
        <p>Onde os dois números discordam, o cadastro é que está errado.</p></div></div>
      <div className="table-wrap"><table>
        <thead><tr><th>Caminhão</th><th className="num">Viagens</th><th className="num">Cadastro</th>
          <th className="num">Medido</th><th className="num">Diferença</th><th>Leitura</th></tr></thead>
        <tbody>{porTruck.map(x=>{
          const dif = x.n>0 ? x.real - x.cadastro : 0;
          return <tr key={x.t.id} className={x.queda>=CS_QUEDA_ALERTA&&x.n>=3?'row-on':''}>
            <td><b className="strong">{x.t.id}</b><small className="cell-sub">{x.t.plate} · {x.t.driver}</small></td>
            <td className="num">{x.n||'—'}</td>
            <td className="num">{csFmt(x.cadastro)}</td>
            <td className="num strong">{x.n>0?csFmt(x.real):'—'}</td>
            <td className="num">{x.n>0?(dif>=0?'+':'')+csFmt(dif):'—'}</td>
            <td><small className="cell-sub">{x.n===0?'sem viagem lançada'
              : x.n<3 ? 'poucas viagens: a média ainda oscila'
              : x.queda>=CS_QUEDA_ALERTA ? 'piorando nas últimas viagens'
              : dif<=-0.05 ? 'bebe mais do que o cadastro diz'
              : dif>=0.05 ? 'bebe menos do que o cadastro diz'
              : 'bate com o cadastro'}</small></td>
          </tr>;
        })}</tbody>
      </table></div>
      <p className="calc-note">Com três viagens ou mais a média já serve para decidir. Abaixo disso ela pula muito com um abastecimento fora de hora.</p>
    </section>

    {comparaveis.length>0 && <section className="panel mn-tab">
      <div className="panel-title"><div><h2>Mesmo caminhão, motoristas diferentes</h2>
        <p>Quando o veículo é o mesmo, a diferença é condução.</p></div></div>
      {comparaveis.map(c=><p key={c.truck} className="cs-mot">
        <b>{c.truck}</b>{c.gente.map((g,i)=><span key={g.nome}>{i?' · ':' — '}{g.nome} <b>{csFmt(g.kml)}</b> km/L <em>({g.n} {g.n===1?'viagem':'viagens'})</em></span>)}
      </p>)}
      <p className="calc-note">Com poucas viagens isto é indício, não conclusão: rota, carga e trânsito também pesam.</p>
    </section>}

    <section className="panel mn-tab">
      <div className="panel-title"><div><h2>Viagens lançadas</h2>
        <p>{lista.length} {lista.length===1?'viagem':'viagens'}</p></div>
        <div className="heading-actions">
          <label className="seller-filter">Caminhão
            <select value={verTruck} onChange={e=>setVerTruck(e.target.value)}>
              <option value="Todos">Todos</option>
              {(fleet||[]).map(t=><option key={t.id} value={t.id}>{t.id}</option>)}
            </select></label>
        </div>
      </div>
      {lista.length===0
        ? <p className="mn-vazio">Nada lançado ainda. A cada volta de viagem: quantos km rodou, com quantos litros saiu, quanto abasteceu e com quanto voltou.</p>
        : <div className="table-wrap"><table>
            <thead><tr><th>Quando</th><th>Caminhão</th><th>Motorista</th><th className="num">KM</th>
              <th className="num">Saiu</th><th className="num">Abast.</th><th className="num">Voltou</th>
              <th className="num">Gastou</th><th className="num">km/L</th></tr></thead>
            <tbody>{lista.map(r=><tr key={r.id}>
              <td>{r.data}</td><td><b className="strong">{r.truck}</b></td><td>{r.motorista}</td>
              <td className="num">{fmt(r.km)}</td><td className="num">{fmt(r.saiu)}</td>
              <td className="num">{r.abast?fmt(r.abast):'—'}</td><td className="num">{fmt(r.voltou)}</td>
              <td className="num">{fmt(csGasto(r))} L</td><td className="num strong">{csFmt(csKmL(r))}</td>
            </tr>)}</tbody>
          </table></div>}
    </section>

    <p className="calc-note">O número vem do painel do caminhão: ou o motorista olha e passa para quem cuida da frota,
      ou o registro acontece na hora de reabastecer. É manual — não adianta desenhar automático o que depende de alguém olhar um painel.
      {dados.noBanco
        ? ' Na visualização Real as viagens vão para o banco, com data e autor.'
        : ' Na visualização Simulada nada é gravado de verdade. Troque para Real e entre com a sua conta para valer.'}</p>

    {lancando && <CsLancar fleet={fleet||[]} onFechar={()=>setLancando(false)}
      onLancar={async (r)=>{ const res = await dados.inserir(r); setLancando(false);
        notify && notify(res.ok ? ('Viagem lançada '+(res.onde==='banco'?'no banco. ':'')+'A média deste caminhão foi recalculada.') : res.erro); }}/>}
  </div>;
}

/* Logo depois de Manutenção: é a mesma área */
(function(){
  const i = navItems.findIndex(x=>x.id==='manutencao');
  navItems.splice(i<0?navItems.length:i+1, 0,
    {id:'consumo', label:'Desempenho', short:'Desempenho', icon:'◔'});
})();