/* ===== Mapa mental (13/11) ==========================================
   Pedido dele: ver a EQUIPE (interno e vendedores) e os PROCESSOS, e
   depois "montar o fluxo da rotina dele e dos processos para ficar
   mais claro e visualmente melhor". Por isso a tela não é lista: é
   linha do tempo (Rotina), fluxo com caixas e setas (Processos) e
   quadro de gente (Gente).

   DE ONDE VEM O CONTEÚDO
   Da transcrição da reunião com o Paulo em 13/11. As frases entre
   aspas são dele. O que ele NÃO disse aparece como "A confirmar" e
   nunca foi preenchido por conta própria.

   HORÁRIOS: ele descreveu a ordem do dia, não o relógio. Por isso a
   trilha usa momentos ("começo da manhã"), não horas inventadas.

   Onde o sistema já ataca a dor, o nó diz qual agente cobre. Isso tem
   que continuar verdadeiro: ao mexer na lógica, conferir aqui.

   Nomes de classe de CSS ficam sem acento de propósito.
   ================================================================== */

const MM_MARCA = {
  dor:       {rot:'Dói hoje',        pill:'p-manutencao'},
  confirmar: {rot:'A confirmar',     pill:'p-carregando'},
  coberto:   {rot:'O sistema cobre', pill:'p-base'},
  /* 14/11: nos mapas numerados é preciso separar o que já roda do que
     foi desenhado e ainda não existe. Sem isso o mapa vira promessa. */
  pronto:    {rot:'Já funciona',     pill:'p-base'},
  construir: {rot:'A construir',     pill:'p-rota'},
};

/* ---- Rotina: o dia dele, na ordem em que ele contou -------------- */
const MM_ROTINA = [
  {q:'Antes do sol', t:'Os caminhões saem de Barretos', quem:'Motoristas',
   d:'Um motorista por caminhão. O que cada um carrega já tinha que estar decidido na véspera.'},
  {q:'Começo da manhã', t:'Preço do dia, vendedor por vendedor', quem:'Paulo',
   d:'Ele passa o preço individualmente, para cada um. Não é tabela: sai do preço médio do estoque mais barato, e abaixa quando precisa de caixa.', m:'dor'},
  {q:'Manhã', t:'A maior parte das vendas acontece', quem:'Vendedores',
   d:'Cada um na carteira da cidade dele. O pedido volta por WhatsApp, um a um, sem grupo. "Tem falha humana do cara... tirando o pedido, não ouviu."', m:'dor'},
  {q:'O dia inteiro, por trás', t:'Corretor mandando preço', quem:'Paulo',
   d:'"Tem que estar ligado o dia inteiro... tem que especular o dia inteiro." Contrato fechado tem data para tirar: se não carregar, o contrato devolve o dinheiro.', m:'dor'},
  {q:'Meio do dia', t:'Montar a carga no Excel', quem:'Paulo, sozinho',
   d:'Divide por região e por caminhão, compartimento a compartimento, com pedido novo entrando enquanto ele monta. "Isso me prende muito na tela do computador."', m:'dor', agente:'Alocador de carga'},
  {q:'Tarde', t:'Pedido continua chegando', quem:'Vendedores',
   d:'Os caminhões já estão na estrada. Cada pedido novo mexe no que ele acabou de montar.', m:'coberto', agente:'Encaixe de pedido'},
  {q:'Fim do dia', t:'Fecha o dia seguinte', quem:'Paulo',
   d:'Define o que cada caminhão carrega e onde. O motorista recebe a rota pronta.'},
  {q:'A qualquer hora', t:'O que atravessa a rotina', quem:'Ninguém planeja',
   d:'Caminhão quebra, revisão vence, pedido grande entra fora de hora. "Acontece muito problema."', m:'coberto', agente:'Encaixe de pedido'},
];

/* ---- Processos: as quatro etapas em sequência -------------------- */
const MM_ETAPAS = [
  {n:'1', t:'Compra', quem:'Paulo e os corretores', hoje:'WhatsApp, o dia inteiro',
   itens:[
     {t:'Corretor manda o preço', d:'Vários corretores, o dia todo.'},
     {t:'Paulo decide na hora', d:'"Tem que saber o que vai acontecer no mercado."'},
     {t:'Contrato tem data para tirar', d:'20 centavos abaixo do mercado = R$ 10 mil num caminhão de 50 mil litros.', m:'dor'},
   ], sistema:''},
  {n:'2', t:'Preço e venda', quem:'Paulo e os vendedores', hoje:'WhatsApp, um vendedor por vez',
   itens:[
     {t:'Preço do dia, individual', d:'Para cada vendedor, toda manhã.', m:'dor'},
     {t:'Vendedor vende na carteira', d:'A maioria das vendas sai de manhã.'},
     {t:'Pedido volta por WhatsApp', d:'É daqui que nasce o Excel. A mensagem continua chegando por WhatsApp: o que mudou é que agora ela vira pedido dentro do sistema.', m:'dor'},
   ], sistema:'Preço e pedidos'},
  {n:'3', t:'Logística', quem:'Paulo, sozinho', hoje:'Excel, compartimento a compartimento',
   itens:[
     {t:'Carrega antes de ter destino', d:'"Eu não sei nem para onde ele vai."', m:'coberto', agente:'Encaixe de pedido'},
     {t:'Monta a carga no Excel', d:'Por região e por caminhão. A dor número um, nas palavras dele.', m:'dor', agente:'Alocador de carga'},
     {t:'Tem que estar pronto de manhã', d:'O caminhão não pode esperar.'},
   ], sistema:'Quadro de espaço'},
  {n:'4', t:'Entrega', quem:'Motoristas', hoje:'Rota combinada por telefone',
   itens:[
     {t:'Motorista cumpre a rota', d:'Entrega nos postos da região.'},
     {t:'Recarrega perto do fim', d:'Para andar menos no dia seguinte.', m:'coberto', agente:'Alocador de carga'},
     {t:'Cliente que retira', d:'Alguns postos mandam caminhão próprio. O preço muda.'},
   ], sistema:'Rastreamento e Carteira'},
];

const MM_ERRO = {
  t:'Quando dá errado',
  d:'Não é uma quinta etapa: corta qualquer uma das quatro, a qualquer hora.',
  itens:[
    {t:'Caminhão quebra', d:'Dele ou de concorrente, e a carga precisa trocar de dono.', agente:'Encaixe de pedido'},
    {t:'Pedido novo com a carga fechada', d:'"Daqui a quarenta e cinco minutos... a gente fechou a carga, não tem mais espaço."', agente:'Encaixe de pedido'},
    {t:'Revisão vencendo', d:'Caminhão que não pode pegar a viagem inteira.', agente:'Vigia da frota'},
  ],
};

/* ⚠️ FORA DE USO desde 14/11. A aba Gente passou a ler a tabela `mapas`
   do banco (decisão dele: fonte única). Este conteúdo continua aqui, sem
   ser chamado, até ele ver como ficou e autorizar apagar. O mesmo vale
   para MM_ETAPAS, MM_ERRO, MmGente e MmProcessos. */
const MM_GENTE = [
  {g:'Dentro de casa', s:'Trabalham para a Iunes, no dia a dia dele.', pill:'p-base', gente:[
    {t:'Paulo Iunes', p:'Decide tudo', l:['O que comprar e quando','O preço do dia','Montar a logística','O fluxo de pagamento'],
     obs:'"O que me prende hoje é isso, é montar a logística."', m:'dor'},
    {t:'Equipe interna', p:'Lança no sistema', l:['Estoque','Compras','Vendas','Caixa e boletos'],
     obs:'"Eu não faço nada de alimento. Hoje quem faz é o pessoal que trabalha comigo."',
     falta:'Quantas pessoas são e quem faz o quê.'},
    {t:'Motoristas', p:'Um por caminhão', l:['Recebem a rota pronta','Recarregam perto do fim da rota'],
     obs:'Sete caminhões na frota.', falta:'Se são contratados ou terceiros.'},
  ]},
  {g:'Na rua, pela Iunes', s:'Vendem no nome dele, mas não ficam na empresa.', pill:'p-rota', gente:[
    {t:'Vendedores', p:'Carteira por região', l:['Cada um atende as cidades dele','Pedido chega por WhatsApp, um a um','Sem grupo, porque as regiões são diferentes'],
     obs:'"Os vendedores não trabalham fisicamente comigo, cada um tem o seu trabalho na sua cidade."',
     falta:'Quantos são e os nomes.', m:'dor'},
  ]},
  {g:'Fora', s:'De quem ele depende e não manda.', pill:'p-carregando', gente:[
    {t:'Corretores', p:'Vendem o combustível', l:['Mandam preço o dia inteiro','Contrato tem data para tirar'],
     obs:'"Tem que estar ligado o dia inteiro."', m:'dor'},
    {t:'Usinas e terminal', p:'Onde ele carrega', l:['Usinas Mandu, Barrinha e Buritizal','Terminal de Ribeirão Preto'],
     obs:'O produto parado lá é dele, com prazo de retirada.', falta:'A lista completa de usinas.'},
    {t:'Postos clientes', p:'Quem compra', l:['Uns retiram com caminhão próprio','Outros ele entrega'],
     obs:'O preço muda conforme quem leva.'},
  ]},
];

/* ===== Mapas numerados da operação (14/11) ========================
   Pedido dele: "a ideia é ter classificações e subclassificações.
   Ex: Logística (Master) / 1 Compra / 2 Venda / 2.1 / 2.2".

   Cada mapa desses mora no SEU PRÓPRIO ARQUIVO e se registra aqui.
   Motivo: já estão encomendados os mapas de Rotas, Compras,
   Administrativo, RH e Frotas — se todos viessem para dentro deste
   arquivo ele passaria do tamanho que dá para publicar. */
const MM_OPER = [];

function MmNumerado({nos, prefixo}){
  return <ol className="mm-num">
    {nos.map((n,i)=>{
      const num = (prefixo?prefixo+'.':'') + (i+1);
      return <li key={num} className={'mm-nv'+(prefixo?prefixo.split('.').length:0)}>
        <div className="mm-nu-cx">
          <span className="mm-nu-id">{num}</span>
          <div className="mm-nu-txt">
            <div className="mm-top"><b>{n.t}</b><MmPill m={n.m}/></div>
            {n.quem && <p className="mm-quem">{n.quem}</p>}
            {n.d && <p className="mm-det">{n.d}</p>}
            <MmAgente nome={n.agente}/>
          </div>
        </div>
        {n.filhos && n.filhos.length>0 && <MmNumerado nos={n.filhos} prefixo={num}/>}
      </li>;
    })}
  </ol>;
}

function MmPill({m}){ const k=m&&MM_MARCA[m]; return k?<span className={`pill ${k.pill}`}>{k.rot}</span>:null; }
function MmAgente({nome}){ return nome?<p className="rs good mm-ag">Agente que cobre: {nome}</p>:null; }

/* ---- Rotina ------------------------------------------------------ */
function MmRotina(){
  return <section className="panel mm-painel">
    <ol className="mm-rot">
      {MM_ROTINA.map((r,i)=>
        <li key={r.t} className={`mm-item${i===MM_ROTINA.length-1?' fim':''}`}>
          <div className="mm-quando">{r.q}</div>
          <div className="mm-trilho">
            <div className="mm-top"><b>{r.t}</b><MmPill m={r.m}/></div>
            <p className="mm-quem">{r.quem}</p>
            <p className="mm-det">{r.d}</p>
            <MmAgente nome={r.agente}/>
          </div>
        </li>)}
    </ol>
  </section>;
}

/* ---- Processos --------------------------------------------------- */
function MmEtapa({e}){
  return <article className="panel mm-etapa">
    <div className="mm-et-topo"><span className="mm-num">{e.n}</span><b>{e.t}</b></div>
    <p className="mm-quem">{e.quem}</p>
    <p className="mm-hoje"><span>Hoje roda em</span><b>{e.hoje}</b></p>
    <ul className="mm-et-lista">
      {e.itens.map(it=><li key={it.t}>
        <div className="mm-top"><b>{it.t}</b><MmPill m={it.m}/></div>
        <p className="mm-det">{it.d}</p>
        <MmAgente nome={it.agente}/>
      </li>)}
    </ul>
    {e.sistema
      ? <p className="mm-sist">No sistema: <b>{e.sistema}</b></p>
      : <p className="mm-sist fora">Ainda <b>fora do sistema</b></p>}
  </article>;
}

function MmProcessos(){
  return <div>
    <div className="mm-fluxo">
      {MM_ETAPAS.map((e,i)=><React.Fragment key={e.n}>
        {i>0&&<span className="mm-seta" aria-hidden="true"/>}
        <MmEtapa e={e}/>
      </React.Fragment>)}
    </div>
    <section className="panel mm-erro">
      <div className="mm-top"><b>{MM_ERRO.t}</b><span className="pill p-manutencao">Corta qualquer etapa</span></div>
      <p className="mm-det">{MM_ERRO.d}</p>
      <div className="mm-erro-grid">
        {MM_ERRO.itens.map(it=><div key={it.t}>
          <b>{it.t}</b><p className="mm-det">{it.d}</p><MmAgente nome={it.agente}/>
        </div>)}
      </div>
    </section>
  </div>;
}

/* ---- Gente ------------------------------------------------------- */
function MmGente(){
  return <div className="mm-eq">
    {MM_GENTE.map(bl=><section key={bl.g} className="panel mm-bloco">
      <div className="mm-top"><b>{bl.g}</b><span className={`pill ${bl.pill}`}>{bl.gente.length}</span></div>
      <p className="mm-det mm-bl-sub">{bl.s}</p>
      <div className="mm-cards">
        {bl.gente.map(p=><div key={p.t} className="mm-pessoa">
          <div className="mm-top"><b>{p.t}</b><MmPill m={p.m}/></div>
          <p className="mm-quem">{p.p}</p>
          <ul className="mm-faz">{p.l.map(x=><li key={x}>{x}</li>)}</ul>
          {p.obs&&<p className="mm-det mm-obs">{p.obs}</p>}
          {p.falta&&<p className="mm-det mm-falta"><span className="pill p-carregando">A confirmar</span> {p.falta}</p>}
        </div>)}
      </div>
    </section>)}
  </div>;
}

/* ---- A tela ------------------------------------------------------ */
const MM_BASE = [
  ['rotina','Rotina','O dia do Paulo, na ordem em que ele contou',
   'Ele descreveu a ordem do dia, não o relógio: por isso a trilha usa momentos, não horários.'],
  ['processos','Processos','Os processos da operação, um a um',
   'Vem da tabela do banco: com duração, frequência e se já foi confirmado com o Paulo.'],
  ['gente','Gente','Quem faz o quê na operação',
   'Vem da tabela do banco: a mesma lista que o Hub sincroniza e que a tela Mapa da equipe edita.'],
];
const mmAbas = () => MM_BASE.concat(MM_OPER.map(m=>[m.id, m.aba, m.titulo, m.nota]));

function MapaMental(){
  const abas = mmAbas();
  const [aba, setAba] = useState('rotina');
  const info = abas.find(a=>a[0]===aba) || abas[0];
  const oper = MM_OPER.find(m=>m.id===aba);

  const contarNos = (nos,f)=>nos.reduce((s,n)=>s+(f(n)?1:0)+contarNos(n.filhos||[],f),0);
  const doBanco = (aba==='gente' || aba==='processos');
  const dores = (oper&&oper.nos) ? contarNos(oper.nos, n=>n.m==='dor')
              : aba==='rotina' ? MM_ROTINA.filter(r=>r.m==='dor').length
              : aba==='processos' ? MM_ETAPAS.reduce((s,e)=>s+e.itens.filter(i=>i.m==='dor').length,0)
              : MM_GENTE.reduce((s,b)=>s+b.gente.filter(p=>p.m==='dor').length,0);
  const faltas = MM_GENTE.reduce((s,b)=>s+b.gente.filter(p=>p.falta).length,0);
  /* num mapa de operação o que importa não é a dor: é quanto já roda */
  const prontos = (oper&&oper.nos) ? contarNos(oper.nos, n=>n.m==='pronto') : 0;
  const construir = (oper&&oper.nos) ? contarNos(oper.nos, n=>n.m==='construir') : 0;

  return <div className="content mm-content">
    <div className="page-heading">
      <div>
        <p>COMO A OPERAÇÃO FUNCIONA</p>
        <h1>Mapa mental</h1>
        <span>{oper
        ? (oper.nos ? `${oper.fonte} · ${prontos} já funcionam · ${construir} a construir` : oper.fonte)
        : doBanco ? 'Vem da tabela do banco, editável no app e no Hub'
        : `Levantado na reunião de 13/11/2026 · ${dores} ${dores===1?'ponto que dói':'pontos que doem'} nesta visão`}</span>
      </div>
    </div>

    <div className="qe-tabs" role="tablist">
      {abas.map(([k,l])=>
        <button key={k} role="tab" aria-selected={aba===k} className={aba===k?'on':''}
                onClick={()=>setAba(k)}>{l}</button>)}
    </div>

    <section className="ai-tip mm-tip">
      <span>✦</span>
      <div>
        <strong>{info[2]}</strong>
        <p>{doBanco ? info[3] : <>As frases entre aspas são do Paulo. {info[3]}</>}</p>
      </div>
    </section>

    {aba==='rotina'&&<MmRotina/>}

    {/* 14/11 — decisão dele: a tabela `mapas` do banco é a fonte única.
        Estas duas abas liam o que estava escrito aqui no código; agora
        leem o banco. O conteúdo antigo (MM_GENTE, MM_ETAPAS, MM_ERRO e
        os componentes MmGente/MmProcessos) continua no arquivo, SEM SER
        USADO, à espera do ok dele para apagar. */}
    {aba==='processos'&&(typeof MbDoBanco!=='undefined'
      ? <MbDoBanco tipo="processos" telaRot="Mapa de processos"/>
      : <MmProcessos/>)}
    {aba==='gente'&&(typeof MbDoBanco!=='undefined'
      ? <MbDoBanco tipo="equipe" telaRot="Mapa da equipe"/>
      : <MmGente/>)}
    {oper&&(oper.render
      ? oper.render()
      : <section className="panel mm-painel"><MmNumerado nos={oper.nos} prefixo=""/></section>)}

    {!doBanco && <p className="calc-note">
      Conteúdo levantado na reunião de 13/11/2026, não é suposição do sistema.
      <b> Dói hoje</b> é o que ele mesmo chamou de problema; <b>O sistema cobre</b> indica o agente que já ataca aquilo;
      <b> A confirmar</b> é o que ele não disse e eu não preenchi.
    </p>}
  </div>;
}

/* Logo depois de Agentes: os dois são leitura do sistema, não operação */
(function(){
  const i = navItems.findIndex(x=>x.id==='agentes');
  navItems.splice(i<0?navItems.length:i+1, 0,
    {id:'mapa', label:'Mapa mental', short:'Mapa', icon:'❖', tag:'novo'});
})();