/* ===== Agentes (12/11) ==============================================
   Pedido dele: uma aba no sistema do cliente para "enxergar o fluxo
   desse agente, tarefa que ele vai fazer".
   Materializa a hipótese já registrada no projeto: a entrega tem duas
   camadas, AGENTES (executam tarefas) e PAINEL (mostra o estado).

   REGRA DE HONESTIDADE DESTA TELA
   O app hoje tem lógica automática, mas quase nada que rode sozinho:
   a maior parte calcula quando alguém abre a tela. Por isso cada
   agente carrega DUAS marcas, e elas nunca podem sumir:
     situacao = ativo (a lógica está no app) | proposto (ainda não existe)
     gatilho = automatico (acorda sozinho) | manual (roda ao abrir a tela)
   Vender "ativo + automático" o que é "ativo + manual" seria mentira
   na frente do cliente.

   Esta lista descreve o que o app REALMENTE faz hoje. Ao mexer na
   lógica de qualquer tela, conferir o agente correspondente aqui.
   ================================================================== */

const AG_SIT = {
  ativo: {rot:'Ativo', pill:'p-base'},
  proposto: {rot:'Proposto', pill:'p-carregando'},
};
const AG_GAT = {
  automatico: {rot:'Roda sozinho', tom:'good'},
  manual: {rot:'Roda quando a tela é aberta', tom:'neutral'},
};

const AGENTES = [
  {
    id:'alocador', nome:'Alocador de carga', situacao:'ativo', gatilho:'manual',
    tela:'Pedidos e viagens',
    resumo:'Escolhe o melhor caminhão e a base de carregamento para os pedidos selecionados.',
    fluxo:[
      ['Gatilho','Você seleciona os pedidos e abre "Criar viagem".'],
      ['O que olha','Frota inteira: onde cada caminhão está, status, capacidade, compartimentos, km até a revisão, vida do pneu e km/L. Mais as bases que têm o produto e a janela de entrega do pedido.'],
      ['O que decide','Para cada caminhão, testa todas as bases e fica com a melhor. Ordena por custo do km a mais (já com o diesel do próprio veículo), atraso na janela, tanque mal aproveitado e manutenção perto de vencer.'],
      ['O que entrega','Ranking com o motivo escrito de cada caminhão, e a lista dos descartados com o porquê de cada descarte.'],
      ['Quem aprova','Você. Nenhuma viagem é criada sem confirmação.'],
    ],
  },
  {
    id:'encaixe', nome:'Encaixe de pedido', situacao:'ativo', gatilho:'manual',
    tela:'Quadro de espaço',
    resumo:'Acha onde cabe um pedido novo sem precisar de um caminhão a mais.',
    fluxo:[
      ['Gatilho','Você preenche o pedido e pede "Ver onde cabe".'],
      ['O que olha','O que cada caminhão já leva a bordo, a rota do dia, o espaço livre e em qual base ele carrega.'],
      ['O que decide','Compara quatro saídas: usar quem já está carregado e sem destino, aumentar a carga de quem ainda não saiu, mandar um caminhão novo carregar, ou trocar uma entrega de caminhão para abrir espaço.'],
      ['O que entrega','As quatro opções lado a lado com custo, horário de chegada e as ressalvas de cada uma.'],
      ['Quem aprova','Você. O agente avisa e nunca bloqueia.'],
    ],
  },
  {
    id:'comprador', nome:'Comprador de combustível', situacao:'ativo', gatilho:'manual',
    tela:'Mercado e cotações',
    resumo:'Aponta os dias mais baratos para comprar cada produto.',
    fluxo:[
      ['Gatilho','Você abre o calendário de compra.'],
      ['O que olha','Curva de preço do ano por produto, efeito do dia da semana e a variação própria de cada dia.'],
      ['O que decide','Compara os dias da janela escolhida (diária, semanal, mensal ou anual) e separa os mais baratos.'],
      ['O que entrega','Os três dias mais baratos destacados e um veredito em uma frase.'],
      ['Quem aprova','Você. É sugestão de timing, não ordem de compra.'],
    ],
  },
  {
    id:'estoque', nome:'Controlador de estoque', situacao:'ativo', gatilho:'manual',
    tela:'Estoque',
    resumo:'Diz quanto dá para vender agora e quanto comprar da distribuidora.',
    fluxo:[
      ['Gatilho','Você abre a tela de Estoque ou corrige o litro no tanque.'],
      ['O que olha','Litros no tanque de cada produto, capacidade e ritmo médio de venda.'],
      ['O que decide','Cobertura em dias. Guarda 3 dias de reserva para dizer quanto ainda dá para vender, e busca 10 dias de cobertura para dizer quanto comprar, sem passar do que cabe no tanque.'],
      ['O que entrega','Por produto: pode vender até X litros, comprar Y litros (em carretas), e o semáforo pode vender / programar compra / comprar agora.'],
      ['Quem aprova','Você. O número do tanque é digitado por quem está na operação.'],
    ],
  },
  {
    id:'vigia-frota', nome:'Vigia da frota', situacao:'ativo', gatilho:'manual',
    tela:'Frota',
    resumo:'Avisa de revisão e pneu antes de virar problema no meio da estrada.',
    fluxo:[
      ['Gatilho','Você abre Frota ou a Visão geral.'],
      ['O que olha','Odômetro, km da próxima revisão, km rodado desde a troca de pneu e a média de km por dia de cada caminhão.'],
      ['O que decide','Faixa de alerta por km restante e por vida do pneu, e converte em dias no ritmo atual.'],
      ['O que entrega','Lista de alertas por caminhão. E, dentro do Alocador, descarta o caminhão cuja revisão venceria no meio da viagem.'],
      ['Quem aprova','Informativo. O descarte na sugestão aparece com o motivo escrito.'],
    ],
  },
  {
    id:'mercado', nome:'Leitor de mercado', situacao:'ativo', gatilho:'automatico',
    tela:'Mercado e cotações',
    resumo:'Busca sozinho a cotação de petróleo, derivados e dólar.',
    fluxo:[
      ['Gatilho','Sozinho, em ciclo, enquanto a tela estiver aberta. É o único agente de hoje que não espera por você.'],
      ['O que olha','Contratos futuros (Brent, WTI, diesel e gasolina) e o dólar, em fontes públicas.'],
      ['O que decide','Compara com o fechamento anterior e marca quem subiu e quem caiu.'],
      ['O que entrega','Faixa de cotações ao vivo, sinal de atualização e destaque quando a variação é relevante.'],
      ['Quem aprova','Informativo.'],
    ],
  },

  {
    id:'alerta-estoque', nome:'Vigia de estoque', situacao:'proposto', gatilho:'automatico',
    tela:'—',
    resumo:'Avisa no WhatsApp quando um produto furar a reserva, sem ninguém precisar abrir o sistema.',
    fluxo:[
      ['Gatilho','Sozinho, algumas vezes ao dia.'],
      ['O que olha','Cobertura de cada produto e os pedidos já prometidos que ainda não saíram.'],
      ['O que decide','Se a cobertura cair abaixo da reserva combinada, ou se os pedidos prometidos passarem do que tem no tanque.'],
      ['O que entrega','Mensagem para quem compra, com o produto, quantos dias faltam e quanto comprar.'],
      ['Quem aprova','Só avisa. A compra continua sendo decisão de gente.'],
    ],
    falta:'Depende de integração com WhatsApp e de o estoque vir da medição do tanque, não digitado.',
  },
  {
    id:'fecha-viagem', nome:'Fechamento de viagem', situacao:'proposto', gatilho:'automatico',
    tela:'—',
    resumo:'Lança o KM rodado e o abastecimento quando a viagem é concluída.',
    fluxo:[
      ['Gatilho','Quando o motorista ou a logística marca a viagem como concluída.'],
      ['O que olha','Rota percorrida, odômetro anterior e os abastecimentos do período.'],
      ['O que decide','KM da viagem, novo odômetro e o km/L real daquele caminhão naquela viagem.'],
      ['O que entrega','Odômetro atualizado, consumo real substituindo a estimativa e a revisão recalculada sozinha.'],
      ['Quem aprova','Lançamento automático, com histórico para corrigir.'],
    ],
    falta:'Hoje o km/L é dado de demonstração. Este agente é o que troca estimativa por medição.',
  },
  {
    id:'pedido-parado', nome:'Cobrança de pedido parado', situacao:'proposto', gatilho:'automatico',
    tela:'—',
    resumo:'Não deixa pedido do vendedor dormir na fila sem programação.',
    fluxo:[
      ['Gatilho','Sozinho, de hora em hora no horário comercial.'],
      ['O que olha','Pedidos na fila, há quanto tempo estão lá e qual a janela de entrega prometida.'],
      ['O que decide','Se o tempo parado ameaça a janela combinada com o posto.'],
      ['O que entrega','Aviso para a logística e para o vendedor que abriu o pedido.'],
      ['Quem aprova','Só avisa.'],
    ],
    falta:'Depende de definir o tempo limite com a operação e do canal de aviso.',
  },
];

function AgenteCard({a, aberto, onToggle}){
  const s = AG_SIT[a.situacao], g = AG_GAT[a.gatilho];
  return <article className={`panel ag-card ${a.situacao}`}>
    <button className="ag-btn" onClick={onToggle} aria-expanded={aberto}>
      <div className="ag-head">
        <b className="strong">{a.nome}</b>
        <span className={`pill ${s.pill}`}>{s.rot}</span>
      </div>
      <p className="ag-resumo">{a.resumo}</p>
      <div className="ag-meta">
        <span className={`rs ${g.tom}`}>{g.rot}</span>
        {a.tela !== '—' && <em>vive na tela {a.tela}</em>}
      </div>
    </button>

    {aberto && <div className="ag-fluxo">
      <ol className="en-passos">
        {a.fluxo.map(([titulo, texto], i) =>
          <li key={titulo}><i>{i+1}</i><div><b>{titulo}</b><small>{texto}</small></div></li>)}
      </ol>
      {a.falta && <p className="rs warn ag-falta">Falta para existir: {a.falta}</p>}
    </div>}
  </article>;
}

function Agentes(){
  const [filtro, setFiltro] = useState('todos');
  const [aberto, setAberto] = useState('alocador');

  const nAtivo = AGENTES.filter(a=>a.situacao==='ativo').length;
  const nProp = AGENTES.filter(a=>a.situacao==='proposto').length;
  const nAuto = AGENTES.filter(a=>a.situacao==='ativo' && a.gatilho==='automatico').length;
  const vis = AGENTES.filter(a=>filtro==='todos' || a.situacao===filtro);

  return <div className="content ag-content">
    <div className="page-heading">
      <div>
        <p>CAMADA DE INTELIGÊNCIA</p>
        <h1>Agentes</h1>
        <span>O que o sistema decide sozinho, o que ele só sugere e o que ainda não existe. {nAtivo} ativos · {nProp} propostos</span>
      </div>
    </div>

    <section className="ai-tip">
      <span>✦</span>
      <div>
        <strong>Como ler esta tela</strong>
        <p>
          <b>Ativo</b> é lógica que já está no sistema. <b>Proposto</b> é desenho, ainda não construído.
          Separado disso: dos {nAtivo} ativos, só <b>{nAuto}</b> roda sozinho — o resto calcula quando alguém abre a tela.
          Um agente que "roda quando a tela é aberta" ajuda a decidir; um que "roda sozinho" tira trabalho de alguém.
          A diferença está escrita em cada cartão de propósito.
        </p>
      </div>
    </section>

    <div className="qe-filters ag-filtros">
      {[['todos','Todos'],['ativo','Ativos'],['proposto','Propostos']].map(([k,l])=>
        <button key={k} className={filtro===k?'on':''} aria-pressed={filtro===k}
                onClick={()=>setFiltro(k)}>{l}</button>)}
    </div>

    <div className="ag-lista">
      {vis.map(a => <AgenteCard key={a.id} a={a} aberto={aberto===a.id}
        onToggle={()=>setAberto(aberto===a.id?null:a.id)}/>)}
    </div>

    <p className="calc-note">
      Esta tela descreve o que o sistema faz hoje, não o que ele poderia fazer.
      Agente marcado como proposto não está construído e não roda.
      Sistema da ValorIA; os dados são da Transportadora Iunes.
    </p>
  </div>;
}

/* Última posição antes de Cadastros: é a camada do sistema, não da operação */
(function(){
  const i = navItems.findIndex(x=>x.id==='cadastros');
  navItems.splice(i<0?navItems.length:i, 0,
    {id:'agentes', label:'Agentes', short:'Agentes', icon:'✦', tag:'novo'});
})();