/* ===== Relatórios gerenciais (dados fictícios) ===== */
/* Cor: o que é estilo inline usa token var(--va-*); o que é atributo de SVG
   (fill="#...") fica no valor original e é recolorido pela camada de marca —
   atributo de SVG não aceita var(). */
const WEEKS=['03/08','10/08','17/08','24/08','31/08','07/09','14/09','21/09'];
const WEEK_VOL=[1510,1580,1490,1620,1700,1655,1730,1690]; // mil litros por semana
const WEEK_COST=[0.031,0.030,0.032,0.029,0.028,0.028,0.027,0.026]; // R$ por litro entregue
const WEEK_ONTIME=[91,92,90,93,94,93,95,94]; // % entregas no prazo
/* 13/11: so existe um produto (etanol), entao o mix por produto perdeu sentido.
   Virou mix por COMO o volume sai, que e a divisao que muda o preco. */
const MIX=[{p:'Nós entregamos',v:72,c:'var(--va-turq)'},{p:'O cliente retira',v:28,c:'var(--va-ambar)'}];

function BarChart({labels,values,fmtV,title,unit,color='#2f7ddd'}) {
  const W=560,H=190,pl=44,pb=26,pt=22;
  const max=Math.max(...values)*1.15, bw=(W-pl-12)/values.length;
  const y=(v)=>pt+(H-pt-pb)*(1-v/max);
  const ticks=[0,max/2,max];
  return <svg viewBox={`0 0 ${W} ${H}`} className="chart-svg" role="img" aria-label={title}>
    {ticks.map((t,i)=><g key={i}><line x1={pl} x2={W-8} y1={y(t)} y2={y(t)} stroke="#e7eaf0"/><text x={pl-6} y={y(t)+3} fontSize="11" fill="#8993a2" textAnchor="end">{fmtV(t)}</text></g>)}
    {values.map((v,i)=>{const x=pl+i*bw+bw*0.2,w=bw*0.6,last=i===values.length-1;return <g key={i}><title>{`${labels[i]}: ${fmtV(v)} ${unit}`}</title><path d={`M${x},${y(0)} V${y(v)+4} Q${x},${y(v)} ${x+4},${y(v)} H${x+w-4} Q${x+w},${y(v)} ${x+w},${y(v)+4} V${y(0)} Z`} fill={color} fillOpacity={last?1:0.45}/>{last&&<text x={x+w/2} y={y(v)-6} fontSize="12" fontWeight="700" fill="#1f2b40" textAnchor="middle">{fmtV(v)}</text>}<text x={x+w/2} y={H-8} fontSize="11" fill="#8993a2" textAnchor="middle">{labels[i]}</text></g>;})}
  </svg>;
}

function HBars({rows,fmtV,color='var(--va-turq)'}) {
  const max=Math.max(1,...rows.map(r=>r.v));
  return <div className="hbars">{rows.map(r=><div key={r.label} className="hbar" title={`${r.label}: ${fmtV(r.v)}`}><span className="hb-label">{r.label}{r.sub?<small>{r.sub}</small>:null}</span><div className="hb-track"><i style={{width:`${Math.max(2,r.v/max*100)}%`,background:r.color||color}}/></div><b>{fmtV(r.v)}</b></div>)}</div>;
}

/* Quebra de linha sem barra invertida. O transporte de arquivo ate a
   publicacao nao preserva esse tipo de escape, e o CSV exportado saia
   com tudo em uma linha so. Ver padrao-visual-apps.md. */
const NL=String.fromCharCode(10);
function downloadCsv(name,rows){
  const csv=rows.map(r=>r.map(v=>`"${String(v).replace(/"/g,'""')}"`).join(';')).join(NL);
  const url=URL.createObjectURL(new Blob([''+csv],{type:'text/csv;charset=utf-8'}));
  const a=document.createElement('a'); a.href=url; a.download=name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(url),1000);
}

/* ===== Rankings (12/11) ==============================================
   Pedido dele: ranking de vendedores (o que mais vende x o melhor) e
   ranking de motoristas (entrega mais rapido, nao toma multa).

   VENDEDORES: sai tudo de dado que ja existe (carteira + margem + custo
   de entrega). Nada inventado.

   MOTORISTAS: pontualidade, tempo de entrega e multa NAO existem no
   cadastro. Sao gerados aqui por semente fixa a partir do nome, entao
   nao mudam a cada abertura da tela. E dado de demonstracao, dito na
   propria tela. Com fonte real (rastreador, Detran, planilha) troca-se
   so a funcao statsMotorista.
   =================================================================== */
/* semente e faixa agora vivem em core.jsx (vaSemente / vaDado),
   porque o calendário também precisa delas */
const dado=(nome,campo,min,max)=>vaDado(nome+'#'+campo,min,max);

function statsMotorista(t){
  const n=t.driver;
  const m=dado(n,'multa',0,1);
  return {
    entregas:Math.round(dado(n,'entregas',34,72)),
    prazo:Math.round(dado(n,'prazo',84,99)),
    minEnt:Math.round(dado(n,'tempo',52,96)),
    multas:m<0.12?3:m<0.28?2:m<0.5?1:0,
    kmL:t.kmL,            /* autonomia e do veiculo, nao do motorista (core.jsx) */
  };
}

function Rank({titulo,sub,linhas,fmtV,nota}) {
  const max=linhas.length?Math.max(...linhas.map(l=>Math.abs(l.v))):0;
  return <section className="panel">
    <div className="panel-title"><div><h2>{titulo}</h2><p>{sub}</p></div></div>
    <ol className="rk">{linhas.map((l,i)=>
      <li key={l.k} className={i===0?'rk-1':''}>
        <span className="rk-pos">{i+1}</span>
        <div className="rk-main"><b>{l.n}</b><small>{l.s}</small>
          <div className="rk-track"><i style={{width:`${max>0?Math.max(5,Math.abs(l.v)/max*100):0}%`}}/></div>
        </div>
        <b className="rk-val">{fmtV(l.v)}</b>
      </li>)}</ol>
    {nota&&<p className="rk-nota">{nota}</p>}
  </section>;
}

function RankVendedores({rated,sellers}) {
  const base=sellers.map(s=>{
    const m=rated.filter(c=>c.sellerId===s.id);
    const v=m.reduce((t,c)=>t+c.vol,0);
    const res=m.reduce((t,c)=>t+c.result,0);
    return {k:s.id,n:s.name,reg:s.region,v,res,porL:v?res/v:0,n_cli:m.length};
  }).filter(r=>r.v>0);
  const volume=[...base].sort((a,b)=>b.v-a.v);
  const margem=[...base].sort((a,b)=>b.porL-a.porL);
  const mesmo=volume[0]&&margem[0]&&volume[0].k===margem[0].k;
  return <>
    <div className="rep-grid">
      <Rank titulo="Quem mais vende" sub="Volume da carteira, litros por mês"
        linhas={volume.map(r=>({k:r.k,n:r.n,s:`${r.reg} · ${r.n_cli} clientes`,v:r.v}))}
        fmtV={v=>`${fmt(v)} L`}/>
      <Rank titulo="Quem vende melhor" sub="Resultado por litro, depois do custo de entrega"
        linhas={margem.map(r=>({k:r.k,n:r.n,s:`${fmt(r.v)} L · ${brl(r.res)}/mês`,v:r.porL}))}
        fmtV={v=>`${brl3(v)}/L`}/>
    </div>
    <section className={mesmo?'insight':'alert-strip'}>
      {mesmo
        ? <><b>{volume[0].n}</b> lidera nos dois: vende mais volume <em>e</em> entrega o melhor resultado por litro ({brl3(volume[0].porL)}).</>
        : <><span className="alert-icon">!</span><p><b>O que mais vende não é o melhor.</b> {volume[0].n} tira {fmt(volume[0].v)} L por mês a {brl3(volume[0].porL)}/L. {margem[0].n} vende {fmt(margem[0].v)} L, {Math.round((1-margem[0].v/volume[0].v)*100)}% menos, mas a {brl3(margem[0].porL)}/L — {Math.round((margem[0].porL/volume[0].porL-1)*100)}% a mais por litro. Se {volume[0].n} vendesse na margem de {margem[0].n}, seriam {brl(volume[0].v*(margem[0].porL-volume[0].porL))} a mais por mês na mesma carteira.</p></>}
    </section>
  </>;
}

function RankMotoristas({fleet}) {
  const linhas=fleet.map(t=>{
    const st=statsMotorista(t);
    return {k:t.id,nome:t.driver,truck:`${t.id} · ${t.plate}`,...st};
  });
  const minMin=Math.min(...linhas.map(l=>l.minEnt)), maxMin=Math.max(...linhas.map(l=>l.minEnt));
  const com=linhas.map(l=>{
    const vel=maxMin===minMin?100:Math.round((maxMin-l.minEnt)/(maxMin-minMin)*100);
    const limpo=l.multas===0?100:l.multas===1?55:15;
    return {...l,vel,nota:Math.round(l.prazo*0.40+vel*0.35+limpo*0.25)};
  }).sort((a,b)=>b.nota-a.nota);
  const semMulta=com.filter(l=>l.multas===0).length;
  const rapido=[...com].sort((a,b)=>a.minEnt-b.minEnt)[0];
  return <section className="panel">
    <div className="panel-title"><div><h2>Ranking de motoristas</h2>
      <p>Nota = 40% pontualidade + 35% velocidade de entrega + 25% sem multa</p></div>
      <span className="ro-tag">dados simulados</span></div>
    <section className="insight rk-topo">
      <b>{com[0].nome}</b> lidera com nota {com[0].nota}: {com[0].prazo}% no prazo, {com[0].minEnt} min por entrega e {com[0].multas===0?'nenhuma multa':com[0].multas+(com[0].multas===1?' multa':' multas')}. {rapido.k!==com[0].k&&<>O mais rápido é <b>{rapido.nome}</b> ({rapido.minEnt} min), mas {rapido.multas>0?`levou ${rapido.multas} ${rapido.multas===1?'multa':'multas'}`:`fica em ${com.findIndex(l=>l.k===rapido.k)+1}º por pontualidade`}. </>}{semMulta} de {com.length} fecharam o mês sem multa.
    </section>
    <div className="table-wrap"><table><thead><tr><th>Motorista</th><th>Entregas</th><th>No prazo</th><th>Tempo médio</th><th>Multas</th><th>km/L</th><th>Nota</th></tr></thead>
      <tbody>{com.map((l,i)=><tr key={l.k}>
        <td><div className="rk-cel"><span className={`rk-pos rk-mini${i===0?' rk-ouro':''}`}>{i+1}</span><div><b className="strong">{l.nome}</b><small className="cell-sub">{l.truck}</small></div></div></td>
        <td className="num">{l.entregas}</td>
        <td className="num"><b className={l.prazo>=95?'ok-num':l.prazo>=90?'':'warn-num'}>{l.prazo}%</b></td>
        <td className="num">{l.minEnt} min</td>
        <td className="num">{l.multas===0?<b className="ok-num">0</b>:<b className={l.multas>1?'bad-num':'warn-num'}>{l.multas}</b>}</td>
        <td className="num">{String(l.kmL).replace('.',',')}</td>
        <td><div className="meta-cell"><div className="meter"><i className={l.nota>=85?'ok':l.nota>=70?'':'warn'} style={{width:`${clamp(l.nota)}%`}}/></div><b>{l.nota}</b></div></td>
      </tr>)}</tbody></table></div>
    <p className="rk-nota">Pontualidade, tempo de entrega e multa <b>não estão no cadastro do app</b>. Os números acima são de demonstração, gerados por regra fixa a partir do nome — não mudam ao reabrir a tela. Com rastreador, Detran ou planilha ligados, entram os números reais sem mexer no resto. O km/L vem da ficha do veículo, na tela de Frota.</p>
  </section>;
}

function Reports({clients,sellers,bases,fleet}) {
  /* Visualizacao real: sem carteira, sem vendedor e sem frota nao ha
     resultado para comparar. Sem esta saida a tela quebrava o app inteiro. */
  if(!clients.length || !sellers.length || !fleet.length) return <div className="content reports-content">
    <div className="page-heading"><div>
      <p>RELATÓRIOS</p><h1>Resultado do mês</h1>
      <span>Ainda não há o que medir nesta visualização.</span>
    </div></div>
    <section className="panel rp-vazio">
      <p><b>Sem dados para fechar o mês.</b></p>
      <p>Os relatórios comparam vendedores, clientes e caminhões entre si.
        Eles aparecem quando houver carteira, vendedores e frota cadastrados.</p>
    </section>
  </div>;

  const garage=(bases.find(b=>b.garage)||{city:'Barretos'}).city;
  const rated=useMemo(()=>rateClients(clients,sellers,garage),[clients,sellers,garage]);
  const vol=rated.reduce((s,c)=>s+c.vol,0), bruta=rated.reduce((s,c)=>s+c.vol*c.margem,0), logi=rated.reduce((s,c)=>s+c.vol*c.custoL,0), liq=bruta-logi;
  const bySeller=sellers.map(s=>{const m=rated.filter(c=>c.sellerId===s.id);const v=m.reduce((t,c)=>t+c.vol,0);return {s,n:m.length,v,res:m.reduce((t,c)=>t+c.result,0),pm:s.meta?Math.round(v/s.meta*100):0};}).sort((a,b)=>b.res-a.res);
  const top=[...rated].sort((a,b)=>b.result-a.result).slice(0,5);
  const attention=rated.filter(c=>c.rating==='D'||c.atraso>=10).sort((a,b)=>a.score-b.score);
  const kmMonth=fleet.map(t=>({label:t.id,sub:t.plate,v:t.dailyKm*21})).sort((a,b)=>b.v-a.v);
  const c0=WEEK_COST[0],c1=WEEK_COST[WEEK_COST.length-1];
  const exportClients=()=>downloadCsv('carteira-iunes.csv',[['Cliente','Cidade','Vendedor','Postos','Volume/mês (L)','Margem R$/L','Custo entrega R$/L','Resultado/mês R$','Rating','Nota'],...rated.map(c=>[c.name,c.city,c.seller,c.postos,c.vol,c.margem.toFixed(3).replace('.',','),c.custoL.toFixed(3).replace('.',','),Math.round(c.result),c.rating,c.score])]);
  return <div className="content reports-content">
    <div className="page-heading"><div><p>RELATÓRIOS</p><h1>Resultado do mês</h1><span>Setembro/2026 · números fictícios de demonstração, calculados a partir dos cadastros.</span></div><div className="heading-actions"><button className="secondary" onClick={exportClients}>Exportar carteira (CSV)</button></div></div>
    <section className="kpis">{[
      {l:'Volume vendido',v:`${mi(vol)} L`,s:'soma da carteira'},
      {l:'Faturamento estimado',v:brl(vol*PRECO_MEDIO),s:`a ${brl2(PRECO_MEDIO)}/L médio`},
      {l:'Margem bruta',v:brl(bruta),s:`${brl3(bruta/vol)}/L`},
      {l:'Custo logístico',v:brl(logi),s:`${brl3(logi/vol)}/L entregue`},
      {l:'Resultado líquido',v:brl(liq),s:`${Math.round(liq/bruta*100)}% da margem bruta`,hl:true},
    ].map(k=><article key={k.l} className={k.hl?'hl':''}><span>{k.l}</span><strong>{k.v}</strong><small>{k.s}</small></article>)}</section>
    <section className="insight"><b>Leitura rápida:</b> o custo logístico caiu de {brl3(c0)} para {brl3(c1)} por litro em 8 semanas ({Math.round((c1/c0-1)*100)}%). {bySeller[0]&&<>{bySeller[0].s.name} lidera o resultado da carteira ({brl(bySeller[0].res)}/mês). </>}{attention.length>0&&<>{attention.length} {attention.length===1?'cliente pede':'clientes pedem'} atenção por nota baixa ou atraso no pagamento.</>}</section>
    <div className="rep-grid">
      <section className="panel"><div className="panel-title"><div><h2>Volume vendido por semana</h2><p>Mil litros · últimas 8 semanas</p></div></div><div className="chart-pad"><BarChart labels={WEEKS} values={WEEK_VOL} fmtV={v=>fmt(Math.round(v))} unit="mil L" title="Volume vendido por semana"/></div></section>
      <section className="panel"><div className="panel-title"><div><h2>Custo logístico por litro entregue</h2><p>R$ por litro · quanto menor, melhor</p></div></div><div className="chart-pad"><BarChart labels={WEEKS} values={WEEK_COST} fmtV={v=>v.toFixed(3).replace('.',',')} unit="R$/L" title="Custo logístico por litro" color="#1f9d63"/></div></section>
    </div>
    <section className="panel"><div className="panel-title"><div><h2>Desempenho por vendedor</h2><p>Volume da carteira contra a meta mensal</p></div></div><div className="table-wrap"><table><thead><tr><th>Vendedor</th><th>Clientes</th><th>Volume/mês</th><th>Meta</th><th>Atingido</th><th>Resultado/mês</th></tr></thead><tbody>{bySeller.map(r=><tr key={r.s.id}><td><b className="strong">{r.s.name}</b><small className="cell-sub">{r.s.region}</small></td><td>{r.n}</td><td className="num">{fmt(r.v)} L</td><td className="num">{r.s.meta?`${fmt(r.s.meta)} L`:'—'}</td><td><div className="meta-cell"><div className="meter"><i className={r.pm>=100?'ok':''} style={{width:`${clamp(r.pm)}%`}}/></div><b>{r.s.meta?`${r.pm}%`:'—'}</b></div></td><td className="num strong">{brl(r.res)}</td></tr>)}</tbody></table></div></section>
    <RankVendedores rated={rated} sellers={sellers}/>
    <RankMotoristas fleet={fleet}/>
    <div className="rep-grid">
      <section className="panel"><div className="panel-title"><div><h2>Como o volume sai</h2><p>% do volume do mês · entrega nossa x cliente retira</p></div></div><div className="mix"><div className="mix-bar">{MIX.map(m=><i key={m.p} title={`${m.p}: ${m.v}%`} style={{width:`${m.v}%`,background:m.c}}/>)}</div><ul className="mix-legend">{MIX.map(m=><li key={m.p}><span style={{background:m.c}}/>{m.p}<b>{m.v}%</b><small>{fmt(Math.round(vol*m.v/100))} L</small></li>)}</ul></div></section>
      <section className="panel"><div className="panel-title"><div><h2>Top 5 clientes por resultado</h2><p>R$ por mês, depois do custo de entrega</p></div></div><div className="chart-pad"><HBars rows={top.map(c=>({label:c.name,sub:`rating ${c.rating}`,v:c.result}))} fmtV={brl}/></div></section>
    </div>
    <div className="rep-grid">
      <section className="panel"><div className="panel-title"><div><h2>Clientes que pedem atenção</h2><p>Nota D ou atraso de 10 dias ou mais</p></div></div><ul className="attn">{attention.map(c=><li key={c.id}><span className={`rating r${c.rating}`}>{c.rating}</span><div><b>{c.name}</b><small>{c.city} · {c.seller}</small></div><p>{[c.atraso>=10?`${c.atraso} dias de atraso`:null,c.liq<0.07?`margem líquida de ${brl3(c.liq)}/L`:null,c.compras<10?`só ${c.compras} compras/mês`:null].filter(Boolean).join(' · ')||'nota baixa'}</p></li>)}{!attention.length&&<li className="empty">Nenhum cliente em alerta.</li>}</ul></section>
      <section className="panel"><div className="panel-title"><div><h2>Frota: km rodados no mês</h2><p>Estimativa pelo km médio diário × 21 dias úteis</p></div></div><div className="chart-pad"><HBars rows={kmMonth} fmtV={v=>`${fmt(v)} km`} color="rgba(255,255,255,.3)"/></div></section>
    </div>
    <section className="panel"><div className="panel-title"><div><h2>Entregas no prazo</h2><p>% por semana · meta operacional 95%</p></div></div><div className="ontime">{WEEKS.map((w,i)=><div key={w} className={WEEK_ONTIME[i]>=95?'ok':''}><b>{WEEK_ONTIME[i]}%</b><small>{w}</small></div>)}</div></section>
  </div>;
}