/* Orquestrador — HERO screen of the product */

function AdminOrquestrador({ onNavigate }) {
  const toast = useToast();
  const [regras, setRegras] = useState(MOCK.REGRAS_ORQUESTRADOR.map(r => ({ ...r })));
  const [dragId, setDragId] = useState(null);
  const [sim, setSim] = useState({ valor: 480, bandeira: 'visa', modalidade: 'cred_parc', parcelas: 6, plano: 'prata' });

  // Compute simulator result
  const result = useMemo(() => {
    let faixa = 'cred1';
    if (sim.modalidade === 'cred1') faixa = 'cred1';
    else if (sim.modalidade === 'cred_parc') faixa = sim.parcelas <= 6 ? 'cred2_6' : 'cred7_12';
    else if (sim.modalidade === 'recorrente') faixa = 'recorrente';
    else faixa = 'debito';

    const plano = MOCK.PLANOS.find(p => p.id === sim.plano);
    const opts = MOCK.TAXAS_ADQUIRENTE.filter(t => t.bandeira === sim.bandeira && t.faixa === faixa)
      .map(o => {
        const total = +(o.taxa + plano.spread).toFixed(2);
        const custo = +(sim.valor * total/100).toFixed(2);
        const liq = +(sim.valor - custo).toFixed(2);
        const adq = MOCK.adqById(o.adquirente);
        // Apply rules
        let blocked = false;
        let blockReason = null;
        if (regras.find(r => r.id === 'g3' && r.ativa) && sim.bandeira === 'amex' && o.adquirente !== 'cielo') {
          blocked = true; blockReason = 'Amex obrigatória via Cielo';
        }
        if (regras.find(r => r.id === 'g5' && r.ativa) && sim.modalidade === 'recorrente' && o.adquirente !== 'getnet') {
          blockReason = 'Preferência recorrência (GetNet)';
        }
        return { ...o, total, custo, liq, plano: plano.spread, adq, blocked, blockReason };
      })
      .sort((a, b) => {
        if (a.blocked && !b.blocked) return 1;
        if (!a.blocked && b.blocked) return -1;
        return a.total - b.total;
      });
    return { opts, faixa, plano };
  }, [sim, regras]);

  const winner = result.opts.find(o => !o.blocked);
  const otherBest = result.opts.filter(o => !o.blocked).slice(1, 3);
  const economy = winner && otherBest[0]
    ? +(otherBest[0].custo - winner.custo).toFixed(2)
    : 0;

  function toggleRule(id) {
    setRegras(rs => rs.map(r => r.id === id ? { ...r, ativa: !r.ativa } : r));
    toast.success('Regra atualizada');
  }
  function moveRule(id, dir) {
    setRegras(rs => {
      const idx = rs.findIndex(r => r.id === id);
      const ni = idx + dir;
      if (ni < 0 || ni >= rs.length) return rs;
      const cp = [...rs];
      [cp[idx], cp[ni]] = [cp[ni], cp[idx]];
      return cp.map((r, i) => ({ ...r, ordem: i + 1 }));
    });
  }
  function onDragStart(id) { setDragId(id); }
  function onDragOver(e, overId) {
    e.preventDefault();
    if (!dragId || dragId === overId) return;
    setRegras(rs => {
      const fromIdx = rs.findIndex(r => r.id === dragId);
      const toIdx = rs.findIndex(r => r.id === overId);
      const cp = [...rs];
      const [m] = cp.splice(fromIdx, 1);
      cp.splice(toIdx, 0, m);
      return cp.map((r, i) => ({ ...r, ordem: i + 1 }));
    });
  }
  function onDragEnd() { setDragId(null); }

  const ruleIcons = { cost:'scale', failover:'shieldCheck', override:'shuffle', preference:'star' };

  return (
    <>
      <PageHeader
        title="Orquestrador"
        subtitle="O coração da plataforma — defina como cada transação é roteada e simule o resultado."
        actions={
          <>
            <Button variant="secondary" icon="archive">Histórico de versões</Button>
            <Button icon="check" onClick={()=>toast.success('Regras publicadas em produção')}>Publicar alterações</Button>
          </>
        }
      />

      {/* Hero banner */}
      <Card className="overflow-hidden mb-5">
        <div className="grid grid-cols-1 lg:grid-cols-3">
          <div className="p-6 lg:col-span-2 relative"
               style={{background:'linear-gradient(135deg, var(--accent-deep1) 0%, var(--accent-600) 50%, var(--accent-500) 100%)'}}>
            <div className="text-violet-200 text-[11px] uppercase tracking-[0.18em] font-semibold mb-2 flex items-center gap-2">
              <Icon name="route"/> Como decisões são tomadas
            </div>
            <h2 className="text-white text-[22px] leading-snug font-semibold tracking-tight max-w-2xl">
              Para cada transação, o orquestrador escolhe a adquirente onde
              <span className="bg-white/20 rounded px-1.5 py-0.5 mx-1.5 font-mono text-[18px]">taxa + spread</span>
              é menor — respeitando regras de override e failover.
            </h2>
            <div className="mt-5 grid grid-cols-3 gap-3 max-w-xl">
              {[
                { l:'Decisões/seg (pico)', v:'182' },
                { l:'Tempo médio decisão', v:'4ms' },
                { l:'Economia 30d vs gateway anterior', v:'R$ 487k' },
              ].map((k,i) => (
                <div key={i} className="rounded-lg bg-white/10 border border-white/15 px-3 py-3">
                  <div className="text-[10px] uppercase tracking-wider text-violet-200 font-semibold">{k.l}</div>
                  <div className="text-white text-[18px] font-semibold mt-0.5 tabular-nums">{k.v}</div>
                </div>
              ))}
            </div>
            {/* Mini diagram */}
            <svg className="absolute right-6 top-6 hidden md:block" width="220" height="170" viewBox="0 0 220 170">
              <defs>
                <linearGradient id="dl" x1="0" x2="1"><stop stopColor="#fff" stopOpacity="0.8"/><stop offset="1" stopColor="#fff" stopOpacity="0.2"/></linearGradient>
              </defs>
              <g fill="none" stroke="url(#dl)" strokeWidth="1.5" strokeLinecap="round">
                <path d="M20 85 Q 90 30, 200 30"/>
                <path d="M20 85 Q 90 85, 200 85"/>
                <path d="M20 85 Q 90 140, 200 140"/>
              </g>
              <circle cx="20" cy="85" r="8" fill="#fff"/>
              <circle cx="20" cy="85" r="14" fill="#fff" fillOpacity="0.15"/>
              <text x="38" y="90" fill="#fff" fontSize="11" fontWeight="600">tx</text>
              {[
                {y:30, c:'#0099CC', l:'Cielo'},
                {y:85, c:'#E60000', l:'Rede'},
                {y:140, c:'#EC3237', l:'GetNet'},
              ].map((n,i) => (
                <g key={i}>
                  <circle cx="200" cy={n.y} r="10" fill={n.c}/>
                  <text x="180" y={n.y + 26} fill="#fff" fontSize="10" textAnchor="middle" opacity="0.85">{n.l}</text>
                </g>
              ))}
            </svg>
          </div>
          <div className="bg-paper-50 p-6 border-l border-line-200">
            <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Última publicação</div>
            <div className="text-[14px] font-semibold text-ink-900 mt-1">hoje, 09:14 · v 23</div>
            <div className="text-[12px] text-ink-500 mt-0.5">por Renato Cardoso</div>
            <div className="border-t border-line-100 my-3"/>
            <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Regras ativas</div>
            <div className="text-[14px] font-semibold text-ink-900 mt-1">{regras.filter(r=>r.ativa).length} de {regras.length}</div>
            <div className="border-t border-line-100 my-3"/>
            <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Próxima janela</div>
            <div className="text-[14px] font-semibold text-ink-900 mt-1">Dom 22h — manutenção Rede</div>
            <div className="text-[12px] text-ink-500 mt-0.5">Failover automático ativo</div>
          </div>
        </div>
      </Card>

      <div className="grid grid-cols-1 xl:grid-cols-5 gap-4">
        {/* ===== Rules stack ===== */}
        <div className="xl:col-span-2">
          <Card>
            <CardHeader title="Regras de roteamento" subtitle="Arraste para reordenar · prioridade decresce de cima para baixo"
              right={<Button size="sm" variant="soft" icon="plus">Nova regra</Button>}/>
            <div className="p-3 space-y-2">
              {regras.map((r, i) => (
                <div key={r.id}
                  draggable
                  onDragStart={() => onDragStart(r.id)}
                  onDragOver={e => onDragOver(e, r.id)}
                  onDragEnd={onDragEnd}
                  className={`group rounded-xl border bg-white p-3 flex items-start gap-3 hover:border-violet-200 transition cursor-grab active:cursor-grabbing ${dragId===r.id?'opacity-50':''} ${r.ativa?'border-line-200':'border-dashed border-line-300 bg-paper-50'}`}>
                  <div className="flex flex-col items-center text-ink-300 pt-0.5">
                    <Icon name="more" /><Icon name="more" className="-mt-1.5"/>
                  </div>
                  <div className={`h-8 w-8 rounded-lg flex items-center justify-center shrink-0 ${r.ativa?'bg-violet-50 text-violet-600':'bg-paper-200 text-ink-400'}`}>
                    <Icon name={ruleIcons[r.tipo]||'zap'} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-[10.5px] font-mono text-ink-400">#{r.ordem}</span>
                      <span className={`text-[13.5px] font-semibold ${r.ativa?'text-ink-900':'text-ink-400'}`}>{r.nome}</span>
                      <Badge tone={r.tipo==='cost'?'info':r.tipo==='failover'?'warn':r.tipo==='override'?'neutral':'info'} className="text-[10px]">{r.tipo}</Badge>
                    </div>
                    <div className="text-[12px] text-ink-500 mt-0.5">{r.descricao}</div>
                  </div>
                  <div className="flex items-center gap-1">
                    <IconBtn icon="chevronUp" label="Subir" onClick={() => moveRule(r.id, -1)} />
                    <IconBtn icon="chevronDown" label="Descer" onClick={() => moveRule(r.id, +1)} />
                    <Toggle checked={r.ativa} onChange={() => toggleRule(r.id)} />
                  </div>
                </div>
              ))}
            </div>
            <div className="px-3 pb-4 pt-1">
              <div className="rounded-lg border border-dashed border-line-300 px-4 py-3 text-[12px] text-ink-500 flex items-center gap-2">
                <Icon name="info" className="text-violet-500" />
                Quando duas regras conflitam, vale a de maior prioridade (mais ao topo).
              </div>
            </div>
          </Card>
        </div>

        {/* ===== Simulator ===== */}
        <div className="xl:col-span-3">
          <Card>
            <CardHeader title="Simulador de decisão"
              subtitle="Como o orquestrador decidiria agora?"
              right={<Badge tone="info" dot>Tempo real</Badge>}/>
            <div className="grid grid-cols-2 lg:grid-cols-5 gap-3 p-5">
              <Input label="Valor (R$)" type="number" value={sim.valor} onChange={e => setSim({ ...sim, valor: +e.target.value || 0 })}/>
              <Select label="Bandeira" value={sim.bandeira} onChange={v => setSim({ ...sim, bandeira: v })} options={MOCK.BANDEIRAS.map(b=>({value:b.id,label:b.nome}))}/>
              <Select label="Modalidade" value={sim.modalidade} onChange={v => setSim({ ...sim, modalidade: v })} options={[
                {value:'cred1',label:'Crédito à vista'},
                {value:'cred_parc',label:'Crédito parcelado'},
                {value:'recorrente',label:'Recorrente'},
                {value:'debito',label:'Débito'},
              ]}/>
              {sim.modalidade === 'cred_parc' ? (
                <Select label="Parcelas" value={String(sim.parcelas)} onChange={v => setSim({ ...sim, parcelas: +v })}
                  options={MOCK.range(11).map(i => ({ value: String(i+2), label: `${i+2}x` }))}/>
              ) : <div/>}
              <Select label="Plano cliente" value={sim.plano} onChange={v => setSim({ ...sim, plano: v })}
                options={MOCK.PLANOS.map(p=>({value:p.id,label:`${p.nome} · ${MOCK.fmtPct(p.spread,2)}`}))}/>
            </div>

            {/* Winner highlight */}
            {winner && (
              <div className="mx-5 mb-5 rounded-xl2 p-5 relative overflow-hidden"
                   style={{background:'linear-gradient(120deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.02))', border:'1px solid var(--accent-200)'}}>
                <div className="absolute top-0 left-0 w-1 h-full" style={{background:'linear-gradient(180deg,var(--accent-500),var(--accent-300))'}}/>
                <div className="flex items-start gap-4">
                  <div className="h-12 w-12 rounded-xl flex items-center justify-center text-white font-bold text-[18px]" style={{background:winner.adq.cor}}>
                    {winner.adq.nome[0]}
                  </div>
                  <div className="flex-1">
                    <div className="text-[10.5px] uppercase tracking-wider font-semibold text-violet-700">Decisão do orquestrador</div>
                    <div className="text-[20px] font-semibold text-ink-900 mt-0.5">Rotear para <span style={{color:winner.adq.cor}}>{winner.adq.nome}</span></div>
                    <div className="text-[13px] text-ink-500 mt-0.5">
                      Custo total <b className="text-ink-900 tabular-nums">{MOCK.fmtPct(winner.total,2)}</b>
                      {' '}({MOCK.fmtPct(winner.taxa,2)} adq. + {MOCK.fmtPct(winner.plano,2)} spread)
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-[11px] text-ink-500">Valor líquido para academia</div>
                    <div className="text-[24px] font-semibold tabular-nums text-ink-900">{MOCK.fmtBRL(winner.liq)}</div>
                    {economy > 0 && (
                      <div className="text-[11.5px] font-semibold text-violet-700 mt-0.5 inline-flex items-center gap-1">
                        <Icon name="sparkles" size={12}/> economia de {MOCK.fmtBRL(economy)} vs 2ª opção
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

            {/* Comparison */}
            <div className="px-5 pb-5">
              <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mb-3">Comparativo entre adquirentes</div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                {result.opts.map((o, i) => (
                  <div key={o.adquirente} className={`rounded-xl border p-4 ${o.blocked ? 'border-line-200 opacity-60' : i===0 ? 'border-violet-300 bg-violet-50/40 shadow-card' : 'border-line-200 bg-white'}`}>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="h-7 w-7 rounded-md flex items-center justify-center text-white text-[12px] font-bold" style={{background:o.adq.cor}}>{o.adq.nome[0]}</span>
                        <div className="font-semibold text-ink-900">{o.adq.nome}</div>
                      </div>
                      {i===0 && !o.blocked && <Badge tone="info">Escolhida</Badge>}
                      {o.blocked && <Badge tone="err">Bloqueada</Badge>}
                    </div>
                    <div className="mt-3 grid grid-cols-2 gap-y-1.5 text-[12px]">
                      <div className="text-ink-500">Taxa adq.</div><div className="text-right font-mono">{MOCK.fmtPct(o.taxa,2)}</div>
                      <div className="text-ink-500">Spread</div><div className="text-right font-mono">{MOCK.fmtPct(o.plano,2)}</div>
                      <div className="text-ink-700 font-semibold">Total</div><div className="text-right font-mono font-semibold">{MOCK.fmtPct(o.total,2)}</div>
                      <div className="text-ink-500">Custo</div><div className="text-right font-mono text-err-600">−{MOCK.fmtBRL(o.custo)}</div>
                      <div className="text-ink-500">Líquido</div><div className="text-right font-mono font-semibold text-ink-900">{MOCK.fmtBRL(o.liq)}</div>
                    </div>
                    {o.blockReason && (
                      <div className="mt-3 text-[11.5px] text-err-600 flex items-center gap-1.5">
                        <Icon name="ban" size={12}/> {o.blockReason}
                      </div>
                    )}
                    {/* Aprovação 24h bar */}
                    <div className="mt-3 pt-3 border-t border-line-100">
                      <div className="flex items-center justify-between text-[10.5px] text-ink-400">
                        <span>Aprov. 24h</span><span className="tabular-nums">{MOCK.fmtPct(o.adq.aprov24h,1)}</span>
                      </div>
                      <div className="h-1 bg-paper-200 rounded-full mt-1 overflow-hidden">
                        <div className="h-full" style={{width: o.adq.aprov24h+'%', background: o.adq.cor}}/>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Decision trace */}
            <div className="border-t border-line-100 px-5 py-4 bg-paper-100">
              <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold mb-2 flex items-center gap-1.5">
                <Icon name="code"/> Trace da decisão
              </div>
              <div className="font-mono text-[11.5px] space-y-1 text-ink-600">
                <div><span className="text-ink-300">01</span>  <span className="text-violet-600">eval</span> rule#1 <i>“Roteamento por menor custo total”</i> · ranking calculado</div>
                <div><span className="text-ink-300">02</span>  <span className="text-violet-600">eval</span> rule#2 <i>“Failover automático”</i> · todas adquirentes &gt; 85% aprov. → ok</div>
                <div><span className="text-ink-300">03</span>  <span className="text-violet-600">eval</span> rule#3 <i>“Amex sempre via Cielo”</i> · {sim.bandeira==='amex' ? <b className="text-warn-600">match — Cielo forçada</b> : 'não aplicável'}</div>
                <div><span className="text-ink-300">04</span>  <span className="text-violet-600">eval</span> rule#5 <i>“Recorrente preferencial GetNet”</i> · {sim.modalidade==='recorrente' ? <b className="text-warn-600">match — preferência aplicada</b> : 'não aplicável'}</div>
                <div><span className="text-ink-300">05</span>  <span className="text-ok-600">decision</span> rotear para <b>{winner?.adq.nome || '—'}</b> · custo total <b>{winner?MOCK.fmtPct(winner.total,2):'—'}</b></div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Recent decisions */}
      <Card className="mt-5">
        <CardHeader title="Decisões recentes" subtitle="Amostra das últimas transações roteadas"
          right={<Button size="sm" variant="ghost" iconRight="arrowRight" onClick={()=>onNavigate('admin/acoes/transacoes')}>Ver tudo</Button>}/>
        <Table>
          <THead><tr>
            <TH>Quando</TH><TH>Unidade</TH><TH>Bandeira</TH><TH>Modalidade</TH><TH align="right">Valor</TH>
            <TH>Rota</TH><TH align="right">Total</TH><TH>Regra aplicada</TH>
          </tr></THead>
          <TBody>
            {MOCK.TRANSACOES.slice(0,12).map(t => (
              <TR key={t.id}>
                <TD mono className="text-ink-500">{MOCK.fmtDateTime(t.data)}</TD>
                <TD className="text-ink-700">{t.unidadeNome}</TD>
                <TD><BandeiraBadge id={t.bandeira}/></TD>
                <TD>{t.modalidadeNome}{t.parcelas>1?` · ${t.parcelas}x`:''}</TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valor)}</TD>
                <TD><AdqBadge id={t.adquirente}/></TD>
                <TD align="right" mono>{MOCK.fmtPct(t.taxaTotal,2)}</TD>
                <TD className="text-[11.5px] text-ink-500">{t.bandeira==='amex'?'#3 Amex → Cielo':t.modalidade==='recorrente'?'#5 Recorrente → GetNet':'#1 Menor custo'}</TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

Object.assign(window, { AdminOrquestrador });