/* ===== Central Logística com sugestão do melhor caminhão ===== */
function TripCard({trip,onAdvance}) {
  const pctCap=Math.round(trip.volume/trip.capacity*100);
  return <article className="trip-card"><div className="trip-head"><strong>{trip.id}</strong><span className={`status status-${trip.status.toLowerCase().replace('í','i').replace(' ','-')}`}>{trip.status}</span></div><p className="trip-route">{trip.route}</p><div className="trip-people"><span>▰</span><div><b>{trip.truck}</b><small>{trip.driver}</small></div></div><div className="capacity-line"><span>{fmt(trip.volume)} / {fmt(trip.capacity)} L</span><b>{pctCap}%</b></div><div className="capacity-bar"><i style={{width:`${Math.min(pctCap,100)}%`}} /></div><footer><span>{trip.orders} {trip.orders===1?'pedido':'pedidos'}</span><span>{trip.eta}</span></footer>{trip.status!=='Concluída'&&<button className="advance" onClick={()=>onAdvance(trip.id)}>Avançar status →</button>}</article>;
}

function Candidate({c,best,on,onPick}) {
  return <div role="radio" aria-checked={on} tabIndex={0} className={`cand ${on?'on':''}`} onClick={onPick} onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();onPick();}}}>
    <div className="cand-head"><strong>{c.t.id} · {c.t.plate}</strong>{best&&<em>Recomendado</em>}<span className={`cand-mode m-${c.mode}`}>{modeLabel[c.mode]}</span></div>
    <div className="cand-sub">{c.t.driver} · {fmt(c.t.cap)} L · {c.t.comp} compartimentos{c.base?<> · carrega em <b>{c.base.name}</b></>:null}</div>
    <div className="cand-nums"><span><b>{c.km} km</b>a mais rodados</span><span><b>{brl(c.cost)}</b>custo estimado</span><span><b>{clock(c.arrival)}</b>1ª entrega</span><span><b>{c.occ}%</b>{c.mode==='encaixe'?'da sobra':'ocupação'}</span></div>
    <div className="reasons">{c.reasons.map((r,j)=><span key={j} className={`rs ${r.tone}`}>{r.text}</span>)}</div>
  </div>;
}

function Logistics({notify,orders,setOrders,trips,setTrips,fleet,setFleet,bases,go,setDeliveries}) {
  const [selected,setSelected]=useState(['#PED-2841','#PED-2834']);
  const [modal,setModal]=useState(false);
  const [pick,setPick]=useState(null);
  const [driver,setDriver]=useState('');
  const [tab,setTab]=useState('pedidos');
  const selectedOrders=orders.filter(o=>selected.includes(o.id));
  const selectedVolume=selectedOrders.reduce((s,o)=>s+o.volume,0);
  const sug=useMemo(()=>suggest(fleet,selectedOrders,bases),[fleet,orders,selected,bases]);
  const chosen=sug.ranked.find(c=>c.t.id===pick);
  const drivers=[...new Set(fleet.map(t=>t.driver))];
  const toggle=(id)=>setSelected(cur=>cur.includes(id)?cur.filter(x=>x!==id):[...cur,id]);
  const openModal=()=>{const b=sug.ranked[0];setPick(b?b.t.id:null);setDriver(b?b.t.driver:drivers[0]);setModal(true);};
  const choose=(c)=>{setPick(c.t.id);setDriver(c.t.driver);};
  const only=(id)=>{setSelected([id]);setTab('pedidos');};
  const advance=(id)=>{setTrips(cur=>cur.map(trip=>trip.id===id?{...trip,status:trip.status==='Programada'?'Carregando':trip.status==='Carregando'?'Em rota':'Concluída'}:trip));notify(`Status da viagem ${id} atualizado.`)};
  const createTrip=()=>{
    if(!chosen) return;
    let tripId='', tripEta='';
    if(chosen.mode==='encaixe'){
      setTrips(cur=>cur.map(tr=>tr.id===chosen.t.trip?{...tr,route:`${tr.route} / ${chosen.seq.join(' / ')}`,orders:tr.orders+selectedOrders.length,volume:tr.volume+selectedVolume}:tr));
      setFleet(cur=>cur.map(t=>t.id===chosen.t.id?{...t,sobra:{...t.sobra,vol:t.sobra.vol-selectedVolume}}:t));
      tripId=chosen.t.trip; tripEta=`previsão ${clock(chosen.arrival)}`;
      notify(`Pedido encaixado na ${chosen.t.trip} (${chosen.t.id}): só ${chosen.km} km a mais.`);
    } else {
      const id=`VG-${1088+trips.length}`;
      setTrips(cur=>[...cur,{id,truck:`${chosen.t.id} · ${chosen.t.plate}`,driver,route:`${chosen.base.city} → ${chosen.seq.join(' / ')}`,volume:selectedVolume,capacity:chosen.t.cap,status:'Programada',eta:`Carrega ${clock(chosen.readyH)}`,orders:selectedOrders.length}]);
      setFleet(cur=>cur.map(t=>t.id===chosen.t.id?{...t,status:'carregando',trip:id}:t));
      tripId=id; tripEta=`previsão ${clock(chosen.arrival)}`;
      notify(`${id} criada com ${chosen.t.id}, carregando na ${chosen.base.name}.`);
    }
    if(setDeliveries) setDeliveries(cur=>[...selectedOrders.map(o=>({id:o.id,client:o.client,city:o.city,volume:o.volume,product:o.product,window:o.window,stage:'programado',trip:tripId,eta:tripEta})),...cur]);
    setOrders(cur=>cur.filter(o=>!selected.includes(o.id)));
    setSelected([]); setModal(false); setTab('viagens');
  };
  const statuses=['Programada','Carregando','Em rota','Concluída'];
  const allocCap=chosen?chosen.cap:0;
  const pending=orders.reduce((s,o)=>s+o.volume,0);
  return <div className="content logistics-content">
    <div className="page-heading logistics-heading"><div><p>OPERAÇÃO EM TEMPO REAL</p><h1>Central Logística</h1><span>Planeje cargas, aloque recursos e acompanhe as viagens.</span></div><div className="heading-actions"><button className="secondary" onClick={()=>go('cadastros','bases')}>Bases de carregamento</button><button className="primary" onClick={openModal} disabled={!selected.length}>＋ Criar viagem</button></div></div>
    <section className="log-metrics"><article><span>Pedidos na fila</span><strong>{orders.length}</strong><small>{fmt(pending)} L pendentes</small></article><article><span>Viagens hoje</span><strong>{trips.length}</strong><small>{trips.filter(t=>t.status==='Em rota').length} em rota agora</small></article><article><span>Bases de carregamento</span><strong>{bases.length}</strong><small>{bases.map(b=>b.city).filter((v,i,a)=>a.indexOf(v)===i).length} cidades</small></article><article><span>Entregas no prazo</span><strong>94%</strong><small>Meta operacional: 95%</small></article></section>
    <section className="ai-tip"><span>✦</span><div><strong>Sugestão inteligente de caminhão</strong><p>O sistema compara a frota inteira com todas as bases de carregamento: quem está na garagem, quem está voltando, quem termina uma entrega perto de uma usina e quem já está na rua com produto a bordo. Experimente: <button className="inline-link" onClick={()=>only('#PED-2834')}>só o #PED-2834</button> (etanol em Olímpia, carrega na usina) ou <button className="inline-link" onClick={()=>only('#PED-2845')}>só o #PED-2845</button> (encaixe em rota).</p></div></section>
    <div className="log-tabs"><button className={tab==='viagens'?'active':''} onClick={()=>setTab('viagens')}>Quadro de viagens</button><button className={tab==='pedidos'?'active':''} onClick={()=>setTab('pedidos')}>Pedidos aguardando <b>{orders.length}</b></button><div><button>Filtros</button><button>Atualizar</button></div></div>
    {tab==='viagens'?<section className="kanban">{statuses.map(status=><div className="kanban-column" key={status}><header><span className={`column-dot ${status.toLowerCase().replace('í','i').replace(' ','-')}`}/><strong>{status}</strong><b>{trips.filter(t=>t.status===status).length}</b></header>{trips.filter(t=>t.status===status).map(trip=><TripCard key={trip.id} trip={trip} onAdvance={advance}/>)}{!trips.some(t=>t.status===status)&&<div className="empty-column">Nenhuma viagem</div>}</div>)}</section>:<section className="panel logistics-orders"><div className="selection-summary"><span>{selected.length} selecionados</span><strong>{fmt(selectedVolume)} L</strong><button className="primary" disabled={!selected.length} onClick={openModal}>Criar viagem</button></div><div className="table-wrap"><table><thead><tr><th></th><th>Pedido</th><th>Cliente / destino</th><th>Produto</th><th>Volume</th><th>Janela de entrega</th><th>Prioridade</th></tr></thead><tbody>{orders.map(order=><tr key={order.id}><td><input id={`sel-${order.id}`} type="checkbox" checked={selected.includes(order.id)} onChange={()=>toggle(order.id)} aria-label={`Selecionar ${order.id}`}/></td><td className="order-id">{order.id}</td><td><b>{order.client}</b><small className="cell-sub">{order.city} · SP</small></td><td>{order.product}</td><td>{fmt(order.volume)} L</td><td>{order.window}</td><td><span className={`priority ${order.priority==='Alta'?'high':''}`}>{order.priority}</span></td></tr>)}{!orders.length&&<tr><td colSpan="7">Todos os pedidos foram programados.</td></tr>}</tbody></table></div></section>}
    {modal&&<div className="modal-backdrop" role="presentation" onMouseDown={()=>setModal(false)}><section className="modal wide" role="dialog" aria-modal="true" aria-labelledby="modal-title" onMouseDown={e=>e.stopPropagation()}><header><div><p>NOVA PROGRAMAÇÃO</p><h2 id="modal-title">Criar viagem</h2></div><button onClick={()=>setModal(false)} aria-label="Fechar">×</button></header><div className="modal-body">
      <div className="modal-step"><span>1</span><div><strong>Pedidos selecionados</strong><small>{selectedOrders.length} {selectedOrders.length===1?'pedido':'pedidos'} · {fmt(selectedVolume)} L</small></div></div>
      <div className="selected-orders">{selectedOrders.map(order=><p key={order.id}><span><b>{order.client}</b><small>{order.city} · {order.product} · até {order.window}</small></span><strong>{fmt(order.volume)} L</strong></p>)}</div>
      <div className="modal-step"><span>2</span><div><strong>Caminhão e base sugeridos</strong><small>Ordem por km a mais, prazo, aproveitamento do tanque e manutenção</small></div></div>
      {sug.note&&<p className="sug-empty">{sug.note}</p>}
      {!sug.note&&!sug.ranked.length&&<p className="sug-empty">Nenhum caminhão atende esta carga agora. Veja os motivos abaixo.</p>}
      <div className="cands" role="radiogroup" aria-label="Caminhões sugeridos">{sug.ranked.slice(0,4).map((c,i)=><Candidate key={c.t.id} c={c} best={i===0} on={pick===c.t.id} onPick={()=>choose(c)}/>)}</div>
      {sug.ranked.length>1&&sug.ranked[0].t.id===pick&&<p className="saving">A recomendada custa {brl(sug.ranked[1].score-sug.ranked[0].score)} a menos que a 2ª opção, somando km, atraso e capacidade parada.</p>}
      {sug.excluded.length>0&&<details className="excluded"><summary>{sug.excluded.length} caminhões descartados: ver motivo</summary><ul>{sug.excluded.map(e=><li key={e.t.id}><b>{e.t.id}</b> {e.why}</li>)}</ul></details>}
      <label className="field">Motorista<select id="driver" value={driver} onChange={e=>setDriver(e.target.value)}>{drivers.map(d=><option key={d}>{d}</option>)}</select></label>
      {chosen&&<div className={`allocation ${selectedVolume>allocCap?'over':''}`}><div><span>{chosen.mode==='encaixe'?'Uso da sobra a bordo':'Ocupação prevista'}</span><strong>{Math.round(selectedVolume/allocCap*100)}%</strong></div><div className="capacity-bar"><i style={{width:`${Math.min(selectedVolume/allocCap*100,100)}%`}} /></div><small>{fmt(selectedVolume)} de {fmt(allocCap)} L</small></div>}
      <p className="calc-note">Cálculo demonstrativo: distância aproximada (linha reta × 1,3), R$ 7,20/km, 55 km/h e tempo de carregamento de cada base. "Km a mais" desconta o trajeto que o caminhão faria de qualquer jeito para voltar à garagem. Parâmetros fictícios, a validar com a operação.</p>
    </div><footer><button className="secondary" onClick={()=>setModal(false)}>Cancelar</button><button className="primary" disabled={!chosen} onClick={createTrip}>{chosen&&chosen.mode==='encaixe'?'Encaixar na viagem':'Confirmar viagem'}</button></footer></section></div>}
  </div>;
}