/* Admin core screens: Dashboard, Adquirentes (list + detail), Taxas */

const RC = (typeof window !== 'undefined') ? window.Recharts : {};

/* ----------------- DASHBOARD GLOBAL ----------------- */
function AdminDashboard({ onNavigate }) {
  const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
          PieChart, Pie, Cell, Legend, BarChart, Bar, LineChart, Line } = RC;

  const k = MOCK.KPIs;
  const data = MOCK.VOLUME_DIARIO;
  const volPorAdq = MOCK.VOLUME_POR_ADQ.map(a => ({ ...a, value: a.valor }));
  const volPorBand = MOCK.VOLUME_POR_BANDEIRA;
  const heat = MOCK.HEATMAP;
  const heatMax = Math.max(...heat.flat());

  return (
    <>
      <PageHeader
        title="Visão geral"
        subtitle="Tudo que está acontecendo na plataforma agora."
        actions={
          <div className="flex items-center gap-2">
            <Select value="30d" onChange={()=>{}} options={[
              {value:'24h',label:'Últimas 24h'},{value:'7d',label:'Últimos 7 dias'},{value:'30d',label:'Últimos 30 dias'},{value:'60d',label:'Últimos 60 dias'}
            ]} />
            <Button variant="secondary" icon="download">Exportar</Button>
            <Button icon="refresh" onClick={()=>{}}>Atualizar</Button>
          </div>
        }
      />

      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3 mb-5">
        <KpiCard label="Volume processado" value={MOCK.fmtBRL(k.volume)} delta="+8,4%" deltaTone="ok" sub="vs período anterior" icon="banknote"/>
        <KpiCard label="Transações" value={MOCK.fmtNum(k.qtd)} delta="+12,1%" deltaTone="ok" sub="aprovadas + recusadas" icon="activity"/>
        <KpiCard label="Aprovação" value={MOCK.fmtPct(k.aprovPct)} delta="+0,6pp" deltaTone="ok" sub="média ponderada" icon="check"/>
        <KpiCard label="Chargeback" value={MOCK.fmtPct(k.cbPct)} delta="−0,1pp" deltaTone="ok" sub="alvo: ≤ 0,5%" icon="shield"/>
        <KpiCard label="Antecipação pendente" value={MOCK.fmtBRL(k.antecPend)} delta={MOCK.fmtNum(MOCK.ANTECIPACOES.filter(a=>a.status==='solicitada'||a.status==='em_analise').length)+' fila'} deltaTone="neutral" icon="zap"/>
      </div>

      {/* Volume diário */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-5">
        <Card className="xl:col-span-2">
          <CardHeader title="Volume diário · últimos 30 dias"
            subtitle="Empilhado por adquirente roteada"
            right={
              <div className="flex items-center gap-3">
                {MOCK.ADQUIRENTES.map(a => (
                  <span key={a.id} className="inline-flex items-center gap-1.5 text-[12px] text-ink-500">
                    <span className="h-2 w-2 rounded-sm" style={{background:a.cor}} />{a.nome}
                  </span>
                ))}
              </div>
            }/>
          <div className="px-2 pb-3 pt-4 h-[280px]">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={data}>
                <defs>
                  <linearGradient id="cielo" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#0099CC" stopOpacity={0.35}/><stop offset="100%" stopColor="#0099CC" stopOpacity={0}/>
                  </linearGradient>
                  <linearGradient id="rede" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#E60000" stopOpacity={0.32}/><stop offset="100%" stopColor="#E60000" stopOpacity={0}/>
                  </linearGradient>
                  <linearGradient id="getnet" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#EC3237" stopOpacity={0.30}/><stop offset="100%" stopColor="#EC3237" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <CartesianGrid stroke="#EEF1F6" vertical={false} />
                <XAxis dataKey="dia" tickLine={false} axisLine={false} fontSize={11} stroke="#697386"/>
                <YAxis tickLine={false} axisLine={false} fontSize={11} stroke="#697386"
                  tickFormatter={v => 'R$' + (v/1000).toFixed(0) + 'k'}/>
                <Tooltip
                  contentStyle={{borderRadius:8, border:'1px solid #E3E8EE', boxShadow:'0 10px 30px rgba(10,37,64,.1)'}}
                  formatter={(v, n) => [MOCK.fmtBRL(v), n.charAt(0).toUpperCase()+n.slice(1)]}
                  labelStyle={{color:'#525F7F', fontWeight:600, fontSize:12}}
                />
                <Area type="monotone" stackId="a" dataKey="cielo"  stroke="#0099CC" strokeWidth={1.5} fill="url(#cielo)" />
                <Area type="monotone" stackId="a" dataKey="rede"   stroke="#E60000" strokeWidth={1.5} fill="url(#rede)" />
                <Area type="monotone" stackId="a" dataKey="getnet" stroke="#EC3237" strokeWidth={1.5} fill="url(#getnet)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </Card>

        <Card>
          <CardHeader title="Share por adquirente" subtitle="Roteamento dos últimos 30 dias" />
          <div className="px-5 pb-5 pt-2">
            <div className="h-[180px]">
              <ResponsiveContainer>
                <PieChart>
                  <Pie data={volPorAdq} dataKey="value" innerRadius={50} outerRadius={75} paddingAngle={2}>
                    {volPorAdq.map(a => <Cell key={a.id} fill={a.cor} />)}
                  </Pie>
                </PieChart>
              </ResponsiveContainer>
            </div>
            <div className="space-y-2 mt-2">
              {volPorAdq.map(a => {
                const total = volPorAdq.reduce((s,x)=>s+x.valor,0);
                const pct = total ? (a.valor/total)*100 : 0;
                return (
                  <div key={a.id} className="flex items-center gap-3">
                    <span className="h-2.5 w-2.5 rounded-sm" style={{background:a.cor}}/>
                    <div className="flex-1 text-[13px] font-medium text-ink-700">{a.nome}</div>
                    <div className="text-[12.5px] text-ink-500 tabular-nums">{MOCK.fmtPct(pct,1)}</div>
                    <div className="text-[12.5px] font-semibold text-ink-900 tabular-nums w-24 text-right">{MOCK.fmtBRL(a.valor)}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>
      </div>

      {/* Volume por bandeira + Heatmap */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-5">
        <Card className="xl:col-span-1">
          <CardHeader title="Volume por bandeira" subtitle="Top bandeiras pelo período" />
          <div className="px-5 pb-5 pt-3 space-y-2.5">
            {volPorBand.slice(0,8).map(b => {
              const max = volPorBand[0].valor;
              return (
                <div key={b.id}>
                  <div className="flex items-center justify-between text-[12.5px] mb-1">
                    <span className="flex items-center gap-2 font-medium text-ink-700">
                      <span className="h-2 w-2 rounded-sm" style={{background:b.cor}}/>{b.nome}
                    </span>
                    <span className="tabular-nums text-ink-500">{MOCK.fmtBRL(b.valor)}</span>
                  </div>
                  <div className="h-1.5 bg-paper-200 rounded-full overflow-hidden">
                    <div className="h-full rounded-full" style={{width: (b.valor/max*100)+'%', background:b.cor}}/>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card className="xl:col-span-2">
          <CardHeader title="Heatmap de roteamento" subtitle="Transações por hora × dia da semana"
            right={<Badge tone="info" dot>Aprov. médio 95,4%</Badge>}/>
          <div className="px-5 pb-5 pt-3">
            <div className="grid grid-cols-[40px_1fr] gap-2">
              <div className="flex flex-col justify-around text-[10.5px] text-ink-400 pt-3">
                {['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'].map(d => <div key={d}>{d}</div>)}
              </div>
              <div>
                <div className="grid grid-cols-24 gap-[3px]" style={{gridTemplateColumns:'repeat(24,minmax(0,1fr))'}}>
                  {heat.flatMap((row, dow) => row.map((v, h) => {
                    const intensity = heatMax > 0 ? v / heatMax : 0;
                    return <div key={dow+'-'+h} title={`${['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][dow]} ${MOCK.pad(h)}h · ${v} tx`}
                      className="hm-cell h-5 rounded-[3px]"
                      style={{background: intensity > 0 ? `rgba(var(--accent-rgb),${0.12 + intensity*0.88})` : '#F1F4F9'}} />;
                  }))}
                </div>
                <div className="flex items-center justify-between mt-2 text-[10.5px] text-ink-400 font-mono">
                  <span>00h</span><span>06h</span><span>12h</span><span>18h</span><span>23h</span>
                </div>
              </div>
            </div>
            <div className="flex items-center justify-between mt-3 text-[11.5px] text-ink-500">
              <span>Pico: <b className="text-ink-900">Seg 19h–21h</b></span>
              <span className="flex items-center gap-1.5">Menos <span className="h-3 w-12 rounded" style={{background:'linear-gradient(to right, #F1F4F9, var(--accent-500))'}}/> Mais</span>
            </div>
          </div>
        </Card>
      </div>

      {/* Adquirentes status + Top redes */}
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5">
        <Card>
          <CardHeader title="Status das adquirentes" subtitle="Health em tempo real"
            right={<Button variant="ghost" size="sm" iconRight="arrowRight" onClick={()=>onNavigate('admin/adquirentes')}>Ver detalhes</Button>} />
          <div className="p-5 grid grid-cols-3 gap-3">
            {MOCK.ADQUIRENTES.map(a => (
              <div key={a.id} className="rounded-xl border border-line-200 p-4 hover:shadow-card transition cursor-pointer"
                   onClick={()=>onNavigate('admin/adquirentes')}>
                <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 font-bold text-[12px]"
                          style={{background:a.cor}}>{a.nome.slice(0,1)}</span>
                    <div className="font-semibold text-ink-900">{a.nome}</div>
                  </div>
                  <StatusDot tone={a.status==='ok'?'ok':'warn'} />
                </div>
                <div className="mt-3 grid grid-cols-2 gap-2 text-[11.5px]">
                  <div>
                    <div className="text-ink-400">Aprov. 24h</div>
                    <div className="font-semibold text-ink-900 text-[14px] tabular-nums">{MOCK.fmtPct(a.aprov24h,1)}</div>
                  </div>
                  <div>
                    <div className="text-ink-400">Latência</div>
                    <div className="font-semibold text-ink-900 text-[14px] tabular-nums">{a.msResp}ms</div>
                  </div>
                </div>
                <div className="mt-3 text-[11px] text-ink-400">Última tx · <b className="text-ink-600">{a.ultTx}</b></div>
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <CardHeader title="Top redes por volume (30d)"
            right={<Button variant="ghost" size="sm" iconRight="arrowRight" onClick={()=>onNavigate('admin/clientes')}>Ver todas</Button>}/>
          <Table>
            <THead>
              <tr>
                <TH>Rede</TH>
                <TH>Unidades</TH>
                <TH align="right">Volume</TH>
                <TH align="right">Aprov.</TH>
                <TH>Adq. preferida</TH>
              </tr>
            </THead>
            <TBody>
              {MOCK.REDES.map((r, i) => {
                const us = MOCK.UNIDADES.filter(u => u.rede === r.id);
                const vol = us.reduce((s,u)=>s+u.volume30d,0);
                const aprov = 92 + (i*0.7);
                return (
                  <TR key={r.id} onClick={()=>onNavigate('admin/clientes')}>
                    <TD>
                      <div className="font-semibold text-ink-900">{r.nome}</div>
                      <div className="text-[11.5px] text-ink-400 font-mono">{r.cnpj}</div>
                    </TD>
                    <TD mono>{us.length}</TD>
                    <TD align="right" mono className="font-semibold text-ink-900">{MOCK.fmtBRL(vol)}</TD>
                    <TD align="right" mono>{MOCK.fmtPct(aprov,1)}</TD>
                    <TD><AdqBadge id={us[0]?.adquirentePref || 'cielo'}/></TD>
                  </TR>
                );
              })}
            </TBody>
          </Table>
        </Card>
      </div>

      {/* Alertas */}
      <Card className="mb-5">
        <CardHeader title="Alertas operacionais" subtitle="Eventos das últimas 24h que demandam atenção"/>
        <div className="divide-y divide-line-100">
          {[
            { i:'shield', t:'err', title:'2 chargebacks abertos sem resposta há > 5 dias', d:'Smart Fit Pinheiros · BodyTech Itaim', cta:'Abrir disputas', go:'admin/chargeback/disputas' },
            { i:'alertTriangle', t:'warn', title:'Rede com aprovação abaixo de 85% das 18h às 19h', d:'Falha intermitente · failover automático para Cielo ativado', cta:'Detalhes', go:'admin/adquirentes' },
            { i:'zap', t:'info', title:'4 solicitações de antecipação aguardando aprovação', d:'Total R$ 218.430,00 · prazo SLA 24h', cta:'Ir para fila', go:'admin/antecipacoes/aprovacoes' },
            { i:'check', t:'ok', title:'Conciliação automática D-1 concluída', d:'12 unidades · 0 divergências · 487 transações casadas', cta:'Ver relatório', go:'admin/conciliacao' },
          ].map((a, i) => (
            <div key={i} className="px-5 py-3.5 flex items-center gap-4">
              <div className={`h-9 w-9 rounded-lg flex items-center justify-center shrink-0 ${
                a.t==='err'?'bg-err-50 text-err-500':a.t==='warn'?'bg-warn-50 text-warn-500':a.t==='ok'?'bg-ok-50 text-ok-500':'bg-violet-50 text-violet-600'
              }`}>
                <Icon name={a.i} />
              </div>
              <div className="flex-1">
                <div className="text-[13.5px] font-semibold text-ink-900">{a.title}</div>
                <div className="text-[12px] text-ink-500">{a.d}</div>
              </div>
              <Button variant="secondary" size="sm" iconRight="arrowRight" onClick={()=>onNavigate(a.go)}>{a.cta}</Button>
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}

/* ----------------- ADQUIRENTES (cards) ----------------- */
function AdminAdquirentes({ onNavigate }) {
  return (
    <>
      <PageHeader title="Adquirentes" subtitle="Estado das integrações com Cielo, Rede e GetNet"
        actions={<Button icon="plus" variant="secondary" disabled>Conectar adquirente</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-5">
        {MOCK.ADQUIRENTES.map(a => (
          <Card key={a.id} className="overflow-hidden">
            <div className="h-1.5" style={{background:a.cor}} />
            <div className="p-5">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="h-10 w-10 rounded-lg flex items-center justify-center text-white font-bold text-[16px]" style={{background:a.cor}}>{a.nome[0]}</span>
                  <div>
                    <div className="text-[17px] font-semibold text-ink-900">{a.nome}</div>
                    <div className="text-[12px] text-ink-500">Contrato direto · Acquirer</div>
                  </div>
                </div>
                <Badge tone={a.status==='ok'?'ok':'warn'} dot>{a.status==='ok'?'Operacional':'Atenção'}</Badge>
              </div>
              <div className="mt-5 grid grid-cols-3 gap-3">
                <div><div className="text-[10.5px] uppercase tracking-wider text-ink-400 font-semibold">Aprov. 24h</div>
                     <div className="text-[18px] font-semibold tabular-nums">{MOCK.fmtPct(a.aprov24h,1)}</div></div>
                <div><div className="text-[10.5px] uppercase tracking-wider text-ink-400 font-semibold">Latência</div>
                     <div className="text-[18px] font-semibold tabular-nums">{a.msResp}<span className="text-[12px] text-ink-400 ml-0.5">ms</span></div></div>
                <div><div className="text-[10.5px] uppercase tracking-wider text-ink-400 font-semibold">Share</div>
                     <div className="text-[18px] font-semibold tabular-nums">{a.share}%</div></div>
              </div>
              <div className="mt-4">
                <Sparkline data={MOCK.VOLUME_DIARIO.slice(-14).map((d,i)=>({i, v:d[a.id]}))} dataKey="v" color={a.cor} height={56}/>
              </div>
              <div className="mt-4 flex items-center justify-between border-t border-line-100 pt-3">
                <div className="text-[11.5px] text-ink-400">Última tx · <b className="text-ink-600">{a.ultTx}</b></div>
                <Button size="sm" variant="secondary" iconRight="arrowRight" onClick={()=>onNavigate('admin/adquirentes/'+a.id)}>Configurações</Button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader title="Eventos de saúde · últimos 7 dias"/>
        <Table>
          <THead><tr><TH>Quando</TH><TH>Adquirente</TH><TH>Tipo</TH><TH>Mensagem</TH><TH align="right">Duração</TH></tr></THead>
          <TBody>
            {[
              { w:'Hoje 14:38', a:'rede', t:'warn', m:'Aprovação caiu para 88,2% por 8 min · failover ativo', d:'8m12s'},
              { w:'Ontem 22:14', a:'getnet', t:'ok', m:'Janela de manutenção programada concluída', d:'18m'},
              { w:'Ontem 09:02', a:'cielo', t:'warn', m:'Latência média acima de 800ms por 4 min', d:'4m32s'},
              { w:'-3d 18:50', a:'rede', t:'err', m:'Indisponibilidade total · roteamento 100% via Cielo/GetNet', d:'12m'},
              { w:'-5d 06:00', a:'cielo', t:'ok', m:'Deploy de nova chave HSM (1.4.7) concluído', d:'—'},
            ].map((e,i)=>(
              <TR key={i}>
                <TD mono>{e.w}</TD>
                <TD><AdqBadge id={e.a}/></TD>
                <TD><Badge tone={e.t}>{e.t==='err'?'Incidente':e.t==='warn'?'Degradação':'Manutenção'}</Badge></TD>
                <TD className="text-ink-700">{e.m}</TD>
                <TD align="right" mono>{e.d}</TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- ADQUIRENTE DETAIL ----------------- */
function AdminAdquirenteDetail({ id, onNavigate }) {
  const a = MOCK.adqById(id);
  const [tab, setTab] = useState('cred');
  return (
    <>
      <PageHeader breadcrumb={['Adquirentes', a.nome]} title={a.nome}
        subtitle="Configurações da integração e histórico"
        actions={
          <>
            <Button variant="secondary" icon="arrowLeft" onClick={()=>onNavigate('admin/adquirentes')}>Voltar</Button>
            <Button icon="refresh">Testar conexão</Button>
          </>
        }/>
      <Card className="mb-4 p-5 flex items-center gap-4">
        <span className="h-12 w-12 rounded-lg flex items-center justify-center text-white font-bold text-[20px]" style={{background:a.cor}}>{a.nome[0]}</span>
        <div className="flex-1">
          <div className="flex items-center gap-2"><span className="text-[16px] font-semibold">{a.nome}</span><Badge tone="ok" dot>Operacional</Badge></div>
          <div className="text-[12px] text-ink-500">Conta master · contrato direto · onboarded em 14/03/2024</div>
        </div>
        <div className="text-right">
          <div className="text-[11px] text-ink-400">Volume processado 30d</div>
          <div className="text-[18px] font-semibold tabular-nums">{MOCK.fmtBRL(MOCK.VOLUME_POR_ADQ.find(x=>x.id===a.id)?.valor || 0)}</div>
        </div>
      </Card>

      <Tabs tabs={[{id:'cred',label:'Credenciais'},{id:'health',label:'Histórico de saúde'},{id:'regras',label:'Regras específicas'},{id:'tarifas',label:'Tarifas contratadas'}]} value={tab} onChange={setTab} className="mb-4"/>

      {tab==='cred' && (
        <Card className="p-5 space-y-4 max-w-3xl">
          <Input label="Merchant ID Master" value="MID-PACTO-MASTER-447829" readOnly icon="copy"/>
          <Input label="API Key (mascarada)" value="ak_live_•••••••••••••••••••••" readOnly icon="eyeOff"/>
          <Input label="Secret" value="sk_live_•••••••••••••••••••••" readOnly icon="eyeOff"/>
          <div className="grid grid-cols-2 gap-3">
            <Input label="Webhook URL" value={`https://api.pactopay.com.br/hooks/${a.id}`} readOnly/>
            <Input label="Ambiente" value="Produção" readOnly/>
          </div>
          <div className="border-t border-line-100 pt-3 flex items-center justify-between">
            <div className="text-[12px] text-ink-500">Últimas rotações: chave em 12/04/2026 · secret em 14/02/2026</div>
            <Button variant="outline" icon="refresh">Rotacionar credenciais</Button>
          </div>
        </Card>
      )}
      {tab==='health' && (
        <Card>
          <Table>
            <THead><tr><TH>Quando</TH><TH>Tipo</TH><TH>Mensagem</TH><TH align="right">Duração</TH><TH align="right">Aprov.</TH></tr></THead>
            <TBody>
              {[
                { w:'Hoje 14:38', t:'warn', m:'Aprovação degradada após nova regra antifraude', d:'8m', a: '88,2%'},
                { w:'-2d 03:10', t:'ok', m:'Janela de manutenção (sem impacto)', d:'30m', a:'95,9%'},
                { w:'-5d 22:01', t:'err', m:'Erro 503 intermitente · 14 transações afetadas', d:'12m', a:'81,7%'},
                { w:'-8d 10:14', t:'ok', m:'Adição de nova bandeira: Aura', d:'—', a:'96,1%'},
              ].map((e,i)=><TR key={i}><TD mono>{e.w}</TD><TD><Badge tone={e.t}>{e.t==='err'?'Incidente':e.t==='warn'?'Degradação':'Info'}</Badge></TD><TD>{e.m}</TD><TD align="right" mono>{e.d}</TD><TD align="right" mono>{e.a}</TD></TR>)}
            </TBody>
          </Table>
        </Card>
      )}
      {tab==='regras' && (
        <Card className="p-5 space-y-3">
          <div className="text-[13px] text-ink-500">Regras específicas que se aplicam exclusivamente a {a.nome}:</div>
          {[
            'Captura automática · imediata (não usar pré-autorização)',
            'Recorrência: retry inteligente em D+1, D+3, D+7',
            a.id==='cielo' ? 'Bandeira Amex roteada exclusivamente aqui' : 'Não habilitado para Amex',
            'Antifraude: regras de risco do PACTO sobrescrevem motor da adquirente',
          ].map((r,i) => (
            <div key={i} className="flex items-center gap-3 p-3 rounded-lg bg-paper-100">
              <Icon name="check" className="text-ok-500"/><div className="text-[13px] text-ink-700">{r}</div>
            </div>
          ))}
        </Card>
      )}
      {tab==='tarifas' && (
        <Card>
          <Table>
            <THead><tr><TH>Bandeira</TH>{MOCK.FAIXAS.map(f=><TH key={f.id} align="right">{f.nome}</TH>)}</tr></THead>
            <TBody>
              {MOCK.BANDEIRAS.map(b => (
                <TR key={b.id}>
                  <TD><BandeiraBadge id={b.id}/></TD>
                  {MOCK.FAIXAS.map(f => {
                    const t = MOCK.TAXAS_ADQUIRENTE.find(x=>x.bandeira===b.id&&x.faixa===f.id&&x.adquirente===a.id);
                    return <TD key={f.id} align="right" mono>{t ? MOCK.fmtPct(t.taxa,2) : '—'}</TD>;
                  })}
                </TR>
              ))}
            </TBody>
          </Table>
        </Card>
      )}
    </>
  );
}

/* ----------------- TAXAS ADQUIRENTES ----------------- */
function AdminTaxasAdquirentes() {
  const [adq, setAdq] = useState('cielo');
  const [edit, setEdit] = useState(null);
  const toast = useToast();
  return (
    <>
      <PageHeader title="Taxas adquirentes" subtitle="Taxas contratadas com cada adquirente (custo PACTO PAY)"
        actions={
          <>
            <Select value={adq} onChange={setAdq} options={MOCK.ADQUIRENTES.map(a => ({ value:a.id, label:a.nome }))} />
            <Button variant="secondary" icon="upload">Importar planilha</Button>
            <Button icon="plus">Adicionar regra</Button>
          </>
        }/>
      <Card>
        <div className="px-5 py-3 border-b border-line-100 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <AdqBadge id={adq}/>
            <span className="text-[12.5px] text-ink-500">9 bandeiras · 5 faixas · {9*5} células editáveis</span>
          </div>
          <div className="text-[11.5px] text-ink-400">Última atualização: 18/04/2026 por <b className="text-ink-600">Renato Cardoso</b></div>
        </div>
        <Table>
          <THead><tr><TH>Bandeira</TH>{MOCK.FAIXAS.map(f=><TH key={f.id} align="right">{f.nome}</TH>)}</tr></THead>
          <TBody>
            {MOCK.BANDEIRAS.map(b => (
              <TR key={b.id}>
                <TD><BandeiraBadge id={b.id}/></TD>
                {MOCK.FAIXAS.map(f => {
                  const t = MOCK.TAXAS_ADQUIRENTE.find(x=>x.bandeira===b.id&&x.faixa===f.id&&x.adquirente===adq);
                  return <TD key={f.id} align="right" mono>
                    <button className="px-1.5 py-0.5 -mr-1.5 rounded hover:bg-violet-50 hover:text-violet-700"
                      onClick={()=>setEdit({b:b.id,f:f.id,v:t?.taxa})}>{t ? MOCK.fmtPct(t.taxa,2) : '—'}</button>
                  </TD>;
                })}
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>

      <Modal open={!!edit} onClose={()=>setEdit(null)} title="Editar taxa"
        footer={<><Button variant="secondary" onClick={()=>setEdit(null)}>Cancelar</Button>
          <Button onClick={()=>{ toast.success('Taxa atualizada'); setEdit(null); }}>Salvar</Button></>}>
        {edit && (
          <>
            <div className="text-[13px] text-ink-500 mb-3">
              <BandeiraBadge id={edit.b}/> · <b>{MOCK.FAIXAS.find(f=>f.id===edit.f)?.nome}</b> · <AdqBadge id={adq}/>
            </div>
            <Input label="Nova taxa (%)" defaultValue={edit.v} type="number" step="0.01"/>
            <Input label="Vigência a partir de" type="date" defaultValue="2026-05-12" containerClassName="mt-3"/>
            <Input label="Motivo / observação" defaultValue="Renegociação trimestral" containerClassName="mt-3"/>
          </>
        )}
      </Modal>
    </>
  );
}

/* ----------------- TAXAS CLIENTES / PLANOS ----------------- */
function AdminTaxasClientes() {
  const [simulador, setSimulador] = useState({ valor: 250, bandeira:'visa', faixa: 'cred2_6', plano: 'prata' });

  const adqOpts = MOCK.TAXAS_ADQUIRENTE.filter(t => t.bandeira === simulador.bandeira && t.faixa === simulador.faixa);
  const plano = MOCK.PLANOS.find(p => p.id === simulador.plano);

  return (
    <>
      <PageHeader title="Planos & Spread" subtitle="Margens aplicadas sobre o custo da adquirente"
        actions={<Button icon="plus">Criar plano</Button>}/>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-5">
        {MOCK.PLANOS.map(p => {
          const used = MOCK.UNIDADES.filter(u => u.plano.toLowerCase() === p.nome.toLowerCase()).length;
          return (
            <Card key={p.id} className="p-5">
              <div className="flex items-center gap-2">
                <span className={`h-8 w-8 rounded-lg flex items-center justify-center text-white text-[12px] font-bold ${
                  p.id==='bronze'?'bg-warn-500':p.id==='prata'?'bg-ink-300':p.id==='ouro'?'bg-amber-400':'bg-violet-500'}`}
                  style={p.id==='diamante'?{background:'linear-gradient(135deg,var(--accent-300),var(--accent-500))'}:{}}>
                  <Icon name="award"/>
                </span>
                <div>
                  <div className="font-semibold text-ink-900">{p.nome}</div>
                  <div className="text-[11px] text-ink-400">{p.descricao}</div>
                </div>
              </div>
              <div className="mt-4 text-[28px] font-semibold tabular-nums">{MOCK.fmtPct(p.spread,2)}</div>
              <div className="text-[11.5px] text-ink-500">spread fixo sobre custo da adquirente</div>
              <div className="border-t border-line-100 mt-4 pt-3 flex items-center justify-between text-[12px]">
                <span className="text-ink-500">{used} unidades</span>
                <Button variant="ghost" size="sm" iconRight="arrowRight">Editar</Button>
              </div>
            </Card>
          );
        })}
      </div>

      <Card>
        <CardHeader title="Simulador de spread" subtitle="Calcule o custo final para uma transação hipotética"/>
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-5">
          <Input label="Valor (R$)" type="number" value={simulador.valor} onChange={e=>setSimulador({...simulador, valor:+e.target.value})}/>
          <Select label="Bandeira" value={simulador.bandeira} onChange={v=>setSimulador({...simulador,bandeira:v})} options={MOCK.BANDEIRAS.map(b=>({value:b.id,label:b.nome}))}/>
          <Select label="Faixa" value={simulador.faixa} onChange={v=>setSimulador({...simulador,faixa:v})} options={MOCK.FAIXAS.map(f=>({value:f.id,label:f.nome}))}/>
          <Select label="Plano do cliente" value={simulador.plano} onChange={v=>setSimulador({...simulador,plano:v})} options={MOCK.PLANOS.map(p=>({value:p.id,label:`${p.nome} · ${MOCK.fmtPct(p.spread,2)}`}))}/>
          <div className="self-end"><Button className="w-full" icon="zap">Recalcular</Button></div>
        </div>
        <div className="border-t border-line-100">
          <Table>
            <THead><tr><TH>Adquirente</TH><TH align="right">Taxa adq.</TH><TH align="right">Spread PACTO</TH><TH align="right">Taxa total</TH><TH align="right">Custo academia</TH><TH align="right">Líquido</TH><TH align="right">Margem PACTO</TH></tr></THead>
            <TBody>
              {adqOpts.sort((a,b)=>a.taxa-b.taxa).map((o,i) => {
                const total = +(o.taxa + plano.spread).toFixed(2);
                const custo = +(simulador.valor * total/100).toFixed(2);
                const liq = +(simulador.valor - custo).toFixed(2);
                const margem = +(simulador.valor * plano.spread/100).toFixed(2);
                return (
                  <TR key={o.adquirente} className={i===0?'bg-violet-50/40':''}>
                    <TD><div className="flex items-center gap-2"><AdqBadge id={o.adquirente}/>{i===0 && <Badge tone="info">Melhor opção</Badge>}</div></TD>
                    <TD align="right" mono>{MOCK.fmtPct(o.taxa)}</TD>
                    <TD align="right" mono>+ {MOCK.fmtPct(plano.spread)}</TD>
                    <TD align="right" mono className="font-semibold">{MOCK.fmtPct(total)}</TD>
                    <TD align="right" mono className="text-err-600">−{MOCK.fmtBRL(custo)}</TD>
                    <TD align="right" mono className="font-semibold text-ink-900">{MOCK.fmtBRL(liq)}</TD>
                    <TD align="right" mono className="text-violet-700 font-semibold">{MOCK.fmtBRL(margem)}</TD>
                  </TR>
                );
              })}
            </TBody>
          </Table>
        </div>
      </Card>
    </>
  );
}

Object.assign(window, { AdminDashboard, AdminAdquirentes, AdminAdquirenteDetail, AdminTaxasAdquirentes, AdminTaxasClientes });