/* Admin extras: Chargeback (importar + disputas), Antifraude, Relatórios, Config (usuários + auditoria) */

/* ----------------- CHARGEBACK IMPORTAR ----------------- */
function AdminChargebackImportar() {
  const toast = useToast();
  const [step, setStep] = useState(0);
  const [file, setFile] = useState(null);
  return (
    <>
      <PageHeader breadcrumb={['Chargeback','Importar']} title="Importar arquivo CIP / CSV"
        subtitle="Suba o arquivo enviado pela adquirente para registrar os chargebacks"/>
      <Card className="p-6 max-w-3xl">
        {step === 0 && (
          <>
            <div className="rounded-2xl border-2 border-dashed border-line-300 hover:border-violet-400 hover:bg-violet-50/30 transition p-10 text-center cursor-pointer"
                 onClick={()=>setFile({name:'cip-rede-20260512.csv', size:'247 KB', rows:14})}>
              <div className="mx-auto h-14 w-14 rounded-xl bg-violet-50 text-violet-600 flex items-center justify-center mb-3"><Icon name="upload" size={24}/></div>
              <div className="text-[14px] font-semibold">Arraste o arquivo aqui ou clique para selecionar</div>
              <div className="text-[12px] text-ink-500 mt-1">Formatos suportados: CSV, TXT, XLS (até 10 MB)</div>
            </div>
            {file && (
              <div className="mt-4 rounded-lg border border-line-200 p-4 flex items-center gap-3">
                <span className="h-9 w-9 rounded-md bg-paper-200 flex items-center justify-center"><Icon name="receipt"/></span>
                <div className="flex-1">
                  <div className="font-semibold">{file.name}</div>
                  <div className="text-[11.5px] text-ink-500">{file.size} · {file.rows} linhas detectadas</div>
                </div>
                <IconBtn icon="x" tone="danger" label="Remover" onClick={()=>setFile(null)}/>
              </div>
            )}
            <div className="flex items-center justify-between mt-5">
              <Select label="Adquirente origem" value="rede" onChange={()=>{}} options={MOCK.ADQUIRENTES.map(a=>({value:a.id,label:a.nome}))}/>
              <Button icon="arrowRight" disabled={!file} onClick={()=>setStep(1)}>Validar arquivo</Button>
            </div>
          </>
        )}
        {step === 1 && (
          <>
            <div className="text-[13px] font-semibold mb-2">Pré-visualização</div>
            <div className="rounded-lg border border-line-200 overflow-hidden">
              <Table>
                <THead><tr><TH>NSU</TH><TH>Bandeira</TH><TH align="right">Valor</TH><TH>Motivo</TH><TH>Status</TH></tr></THead>
                <TBody>
                  {[
                    ['9201441','visa',420.00,'4837 — Fraud Card not present','novo'],
                    ['9201448','master',180.00,'4853 — Cardholder dispute','novo'],
                    ['9201452','elo',1200.00,'4855 — Goods/Services not provided','duplicado'],
                    ['9201459','visa',89.90,'4863 — Cardholder does not recognize','novo'],
                  ].map((r,i) => (
                    <TR key={i}>
                      <TD mono>{r[0]}</TD><TD><BandeiraBadge id={r[1]}/></TD>
                      <TD align="right" mono>{MOCK.fmtBRL(r[2])}</TD>
                      <TD className="text-ink-700">{r[3]}</TD>
                      <TD><Badge tone={r[4]==='duplicado'?'warn':'info'}>{r[4]}</Badge></TD>
                    </TR>
                  ))}
                </TBody>
              </Table>
            </div>
            <div className="mt-4 rounded-lg bg-violet-50 border border-violet-100 p-3 text-[12.5px] text-ink-700 flex items-center gap-2">
              <Icon name="info" className="text-violet-600"/> 13 novos chargebacks · 1 duplicado será ignorado · valor total <b>R$ 4.842,00</b>
            </div>
            <div className="flex items-center justify-between mt-5">
              <Button variant="secondary" icon="arrowLeft" onClick={()=>setStep(0)}>Voltar</Button>
              <Button icon="check" onClick={()=>{toast.success('14 chargebacks importados'); setStep(0); setFile(null);}}>Confirmar importação</Button>
            </div>
          </>
        )}
      </Card>
    </>
  );
}

/* ----------------- CHARGEBACK DISPUTAS ----------------- */
function AdminChargebackDisputas({ onNavigate = () => {} }) {
  const [open, setOpen] = useState(null);
  const list = MOCK.CHARGEBACKS.map(c => ({
    ...c,
    abertoEm: c.abertoEm || c.abertura,
    transacao: c.transacao || c.txId,
    motivoCode: c.motivoCode || (c.motivo && c.motivo.match(/\((\d+)\)/) ? c.motivo.match(/\((\d+)\)/)[1] : '4837'),
    bandeira: c.bandeira || 'visa',
    aluno: c.aluno || 'Aluno ' + (c.id || '').slice(-3),
    prazoDias: c.prazoDias != null ? c.prazoDias : Math.max(0, Math.round((new Date(c.prazoResposta) - new Date()) / 86400000)),
  }));
  return (
    <>
      <PageHeader breadcrumb={['Chargeback','Disputas']} title="Disputas de chargeback"
        subtitle={`${list.filter(c => c.status==='aberto'||c.status==='em_disputa').length} em aberto · prazo médio resposta: 5 dias`}
        actions={<>
          <Button variant="secondary" icon="upload" onClick={()=>onNavigate('admin/chargeback/importar')}>Importar arquivo</Button>
        </>}/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Em aberto" value={list.filter(c=>c.status==='aberto').length} icon="alertTriangle" sub="aguardando ação"/>
        <KpiCard label="Em disputa" value={list.filter(c=>c.status==='em_disputa').length} icon="shield" sub="evidências enviadas"/>
        <KpiCard label="Vencidos esta semana" value="6" icon="zap" deltaTone="err" delta="atenção"/>
        <KpiCard label="Taxa de reversão" value="62%" icon="check" deltaTone="ok" delta="acima da meta"/>
      </div>
      <Card>
        <FilterBar>
          <div className="flex-1"><SearchBar placeholder="Buscar por ID, transação ou motivo…" kbd={null}/></div>
          <Select value="todos" onChange={()=>{}} options={[{value:'todos',label:'Todos status'},{value:'aberto',label:'Aberto'},{value:'em_disputa',label:'Em disputa'},{value:'ganho',label:'Ganho'},{value:'perdido',label:'Perdido'}]}/>
        </FilterBar>
        <Table>
          <THead><tr><TH>ID</TH><TH>Aberto em</TH><TH>Transação</TH><TH>Unidade</TH><TH align="right">Valor</TH><TH>Motivo</TH><TH>Prazo</TH><TH>Status</TH></tr></THead>
          <TBody>
            {list.map(c => {
              const sb = MOCK.statusBadge(c.status);
              const prazo = c.prazoDias;
              return (
                <TR key={c.id} onClick={()=>setOpen(c)}>
                  <TD mono className="font-semibold">{c.id}</TD>
                  <TD mono className="text-ink-500">{MOCK.fmtDate(c.abertoEm)}</TD>
                  <TD mono className="text-ink-700">{c.transacao}</TD>
                  <TD className="text-ink-700">{c.unidadeNome}</TD>
                  <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(c.valor)}</TD>
                  <TD className="text-ink-700">{c.motivoCode} — {c.motivo}</TD>
                  <TD><Badge tone={prazo<=2?'err':prazo<=5?'warn':'neutral'}>{prazo}d</Badge></TD>
                  <TD><Badge tone={sb.tone} dot>{sb.label}</Badge></TD>
                </TR>
              );
            })}
          </TBody>
        </Table>
      </Card>

      <Drawer open={!!open} onClose={()=>setOpen(null)}
        title={open?open.id:''} subtitle={open?open.motivo:''}
        footer={open && <>
          <Button variant="secondary" icon="x">Aceitar perda</Button>
          <Button icon="upload">Enviar evidências</Button>
        </>}>
        {open && <ChargebackDetail c={open}/>}
      </Drawer>
    </>
  );
}

function ChargebackDetail({ c }) {
  return (
    <div>
      <div className="p-5 grid grid-cols-3 gap-4 border-b border-line-100">
        <div><div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Valor</div>
          <div className="text-[22px] font-semibold tabular-nums">{MOCK.fmtBRL(c.valor)}</div></div>
        <div><div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Prazo restante</div>
          <div className="text-[22px] font-semibold tabular-nums">{c.prazoDias} dias</div></div>
        <div><div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">Status</div>
          <div className="mt-1"><Badge tone={MOCK.statusBadge(c.status).tone} dot>{MOCK.statusBadge(c.status).label}</Badge></div></div>
      </div>
      <div className="p-5 grid grid-cols-2 gap-x-6 gap-y-2 border-b border-line-100 text-[13px]">
        <Row k="Motivo" v={`${c.motivoCode} — ${c.motivo}`}/>
        <Row k="Transação" v={<span className="font-mono">{c.transacao}</span>}/>
        <Row k="Bandeira" v={<BandeiraBadge id={c.bandeira}/>}/>
        <Row k="Adquirente" v={<AdqBadge id={c.adquirente}/>}/>
        <Row k="Unidade" v={c.unidadeNome}/>
        <Row k="Aluno" v={c.aluno}/>
      </div>
      <div className="p-5">
        <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mb-3">Linha do tempo</div>
        <ol className="relative pl-7">
          <div className="absolute left-2 top-2 bottom-2 w-px bg-line-200"/>
          {[
            { t:'Chargeback aberto', when:MOCK.fmtDateTime(c.abertoEm), s:'err', d:`Notificação recebida via ${MOCK.adqById(c.adquirente).nome}` },
            { t:'Notificado o lojista', when:MOCK.fmtDateTime(c.abertoEm), s:'ok', d:'Webhook chargeback.opened disparado' },
            ...(c.status==='em_disputa'||c.status==='ganho'||c.status==='perdido' ? [{t:'Evidências enviadas', when:MOCK.fmtDateTime(MOCK.daysAgo(2)), s:'ok', d:'4 arquivos · 1.2 MB · resposta automática emissora 24-48h'}] : []),
            ...(c.status==='ganho' ? [{t:'Disputa ganha', when:MOCK.fmtDate(MOCK.daysAgo(5)), s:'ok', d:'Reversão integral · R$ '+c.valor.toLocaleString('pt-BR',{minimumFractionDigits:2})}] : []),
            ...(c.status==='perdido' ? [{t:'Disputa perdida', when:MOCK.fmtDate(MOCK.daysAgo(5)), s:'err', d:'Valor não recuperado'}] : []),
          ].map((s,i) => (
            <li key={i} className="mb-4 relative">
              <span className={`absolute -left-7 top-0.5 h-4 w-4 rounded-full flex items-center justify-center ${
                s.s==='ok'?'bg-ok-500 text-white':s.s==='err'?'bg-err-500 text-white':'bg-paper-200 border border-line-300'}`}>
                {s.s === 'ok' && <Icon name="check" size={10}/>}
                {s.s === 'err' && <Icon name="x" size={10}/>}
              </span>
              <div className="text-[13px] font-semibold">{s.t}</div>
              <div className="text-[11px] text-ink-400 font-mono">{s.when}</div>
              <div className="text-[12.5px] text-ink-600 mt-0.5">{s.d}</div>
            </li>
          ))}
        </ol>
        <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mt-4 mb-2">Anexar evidências</div>
        <div className="rounded-xl border-2 border-dashed border-line-300 hover:border-violet-400 hover:bg-violet-50/30 transition p-6 text-center">
          <Icon name="upload" className="text-violet-500 mb-1.5 inline-block"/>
          <div className="text-[12.5px] font-semibold">Arraste arquivos ou clique para enviar</div>
          <div className="text-[11px] text-ink-500 mt-1">Comprovante de uso da academia, contrato, registro de catraca…</div>
        </div>
        <div className="mt-3 space-y-1.5">
          {[
            ['contrato-aluno.pdf','312 KB'],
            ['historico-catraca-2026-03.csv','89 KB'],
            ['mensagem-aluno.png','420 KB'],
          ].map((f,i)=>(
            <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-md bg-paper-100 text-[12.5px]">
              <Icon name="receipt" className="text-ink-400"/><span className="flex-1">{f[0]}</span><span className="text-ink-400">{f[1]}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ----------------- ANTIFRAUDE ----------------- */
function AdminAntifraude() {
  const toast = useToast();
  const fila = MOCK.range(8).map(i => {
    const t = MOCK.TRANSACOES[i*5];
    return { ...t, score: 30 + Math.floor(Math.random()*70), motivos: [
      ['Cartão usado em 3 unidades em < 1h','Velocidade alta de tentativas','Mismatch país emissão × IP','Histórico de chargeback no aluno','Valor 4× acima do ticket médio'][i%5]
    ]};
  });
  return (
    <>
      <PageHeader title="Antifraude" subtitle="Transações em análise + regras de risco"
        actions={<Button variant="secondary" icon="settings">Configurar regras</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Em revisão" value={fila.length} icon="shield" delta="fila aberta" deltaTone="warn"/>
        <KpiCard label="Bloqueadas hoje" value="14" icon="ban" delta="−R$ 4.220,00" deltaTone="ok"/>
        <KpiCard label="Score médio" value="34" sub="0=ok · 100=fraude" icon="activity"/>
        <KpiCard label="Falso positivo (30d)" value="2,1%" deltaTone="ok" delta="abaixo do alvo" icon="check"/>
      </div>
      <Card>
        <CardHeader title="Fila de revisão" subtitle="Aprovar ou rejeitar manualmente"
          right={<div className="flex gap-2"><Button size="sm" variant="ghost" icon="filter">Filtros</Button></div>}/>
        <Table>
          <THead><tr><TH>Quando</TH><TH>ID</TH><TH>Aluno / unidade</TH><TH>Bandeira</TH><TH align="right">Valor</TH><TH>Score</TH><TH>Sinal</TH><TH/></tr></THead>
          <TBody>
            {fila.map(t => (
              <TR key={t.id}>
                <TD mono className="text-ink-500">{MOCK.fmtDateTime(t.data)}</TD>
                <TD mono>{t.id}</TD>
                <TD>
                  <div className="font-medium text-ink-900">{t.aluno}</div>
                  <div className="text-[11px] text-ink-400">{t.unidadeNome}</div>
                </TD>
                <TD><BandeiraBadge id={t.bandeira}/></TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valor)}</TD>
                <TD>
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-16 bg-paper-200 rounded-full overflow-hidden">
                      <div className="h-full" style={{width:t.score+'%', background:t.score>70?'#FF4D4F':t.score>50?'#FFA600':'#22C55E'}}/>
                    </div>
                    <span className="font-mono text-[12px] tabular-nums">{t.score}</span>
                  </div>
                </TD>
                <TD className="text-[12px] text-ink-500">{t.motivos[0]}</TD>
                <TD><div className="flex gap-1">
                  <IconBtn icon="check" tone="primary" label="Aprovar" onClick={()=>toast.success('Aprovada')}/>
                  <IconBtn icon="x" tone="danger" label="Rejeitar" onClick={()=>toast.error('Rejeitada')}/>
                </div></TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
      <Card className="mt-4">
        <CardHeader title="Regras antifraude ativas" subtitle="Em vigor para todas as unidades"/>
        <div className="p-4 space-y-2">
          {[
            ['Velocidade — máx. 3 tentativas em 5 min', true, 'block'],
            ['Geo — IP fora do país × cartão BR', true, 'review'],
            ['Valor — &gt; 5× ticket médio do aluno', true, 'review'],
            ['Lista negra — cartão com chargeback prévio', true, 'block'],
            ['Horário — débito automático fora de 06h–23h', false, 'review'],
          ].map((r,i) => (
            <div key={i} className="flex items-center gap-3 rounded-lg border border-line-200 p-3">
              <div className={`h-7 w-7 rounded-md flex items-center justify-center ${r[1]?'bg-violet-50 text-violet-600':'bg-paper-200 text-ink-400'}`}><Icon name="shield"/></div>
              <div className="flex-1">
                <div className="text-[13px] font-medium" dangerouslySetInnerHTML={{__html:r[0]}}/>
                <div className="text-[11.5px] text-ink-400">Ação: {r[2]==='block'?'Bloquear':'Enviar para revisão'}</div>
              </div>
              <Toggle checked={r[1]} onChange={()=>toast.success('Regra atualizada')}/>
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}

/* ----------------- RELATÓRIOS ----------------- */
function AdminRelatorios({ onNavigate }) {
  const toast = useToast();
  const galeria = [
    { i:'banknote', t:'Conciliação financeira', d:'Vendas × depósitos por adquirente', tag:'Financeiro' },
    { i:'activity', t:'Performance de roteamento', d:'Decisões do orquestrador + economia', tag:'Operação' },
    { i:'shield', t:'Chargeback consolidado', d:'Casos por motivo, bandeira e estágio', tag:'Risco' },
    { i:'zap', t:'Antecipações pagas', d:'Volume, taxa média e lucratividade', tag:'Financeiro' },
    { i:'users', t:'Vendas por unidade', d:'Top performers + média por aluno', tag:'Comercial' },
    { i:'network', t:'Saúde das adquirentes', d:'Aprov %, latência, incidentes', tag:'Operação' },
  ];
  return (
    <>
      <PageHeader title="Relatórios" subtitle="Galeria + construtor de consultas customizadas"
        actions={<Button icon="plus">Novo relatório</Button>}/>
      <Card className="mb-4">
        <CardHeader title="Pré-configurados" subtitle="Toque para executar agora ou agendar envio recorrente"/>
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 p-5">
          {galeria.map((r,i) => (
            <div key={i} className="rounded-xl border border-line-200 p-4 hover:shadow-card hover:border-violet-200 transition cursor-pointer"
                 onClick={()=>toast.success('Gerando relatório · '+r.t)}>
              <div className="flex items-center gap-3">
                <span className="h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center"><Icon name={r.i}/></span>
                <div className="flex-1 min-w-0">
                  <div className="font-semibold text-ink-900">{r.t}</div>
                  <div className="text-[11.5px] text-ink-500">{r.d}</div>
                </div>
              </div>
              <div className="border-t border-line-100 mt-3 pt-3 flex items-center justify-between">
                <Badge tone="neutral">{r.tag}</Badge>
                <div className="flex gap-1">
                  <IconBtn icon="download" label="CSV" onClick={()=>toast.success('Baixando CSV')}/>
                  <IconBtn icon="receipt" label="PDF" onClick={()=>toast.success('Baixando PDF')}/>
                  <IconBtn icon="clock" label="Agendar" onClick={()=>toast.success('Agendado')}/>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <Card>
        <CardHeader title="Construtor simples" subtitle="Monte um relatório sob medida"/>
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 p-5">
          <Select label="Fonte" value="transacoes" onChange={()=>{}} options={[{value:'transacoes',label:'Transações'},{value:'antecipacoes',label:'Antecipações'},{value:'chargebacks',label:'Chargebacks'},{value:'recebiveis',label:'Recebíveis'}]}/>
          <Select label="Agrupar por" value="adq" onChange={()=>{}} options={[{value:'adq',label:'Adquirente'},{value:'unidade',label:'Unidade'},{value:'bandeira',label:'Bandeira'},{value:'rede',label:'Rede'}]}/>
          <Select label="Período" value="30d" onChange={()=>{}} options={[{value:'7d',label:'Últimos 7 dias'},{value:'30d',label:'Últimos 30 dias'},{value:'mes',label:'Mês corrente'},{value:'custom',label:'Personalizado'}]}/>
          <div className="self-end"><Button className="w-full" icon="play">Executar</Button></div>
        </div>
        <div className="px-5 pb-5">
          <div className="rounded-xl bg-paper-100 border border-line-200 p-6 text-center text-[13px] text-ink-500">
            <Icon name="activity" className="text-violet-500 mb-2 inline-block"/><br/>
            Resultado do relatório aparecerá aqui após executar.
          </div>
        </div>
      </Card>
    </>
  );
}

/* ----------------- CONFIG USUÁRIOS ----------------- */
function AdminConfigUsuarios() {
  const toast = useToast();
  const users = [
    { n:'Renato Cardoso', e:'renato@pactopay', p:'Admin', s:'ativo', last:'agora' },
    { n:'Larissa Mendes', e:'larissa@pactopay', p:'Financeiro', s:'ativo', last:'14 min atrás' },
    { n:'Bruno Tavares', e:'bruno@pactopay', p:'Operador', s:'ativo', last:'2h atrás' },
    { n:'Camila Souza', e:'camila@pactopay', p:'Suporte', s:'ativo', last:'ontem' },
    { n:'Vinicius Lima', e:'vini@pactopay', p:'Admin', s:'inativo', last:'12 dias atrás' },
    { n:'Patrícia Ramos', e:'pat@pactopay', p:'Operador', s:'convite_pendente', last:'—' },
  ];
  return (
    <>
      <PageHeader breadcrumb={['Configurações','Usuários']} title="Usuários e perfis"
        subtitle="Quem tem acesso ao painel administrativo"
        actions={<Button icon="plus" onClick={()=>toast.success('Convite enviado')}>Convidar usuário</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        {[
          ['Admin','Acesso total · 2 usuários','crown','var(--accent-500)'],
          ['Financeiro','Antecipações, conciliação · 1 usuário','banknote','#22C55E'],
          ['Operador','Transações e clientes · 2 usuários','activity','#0066FF'],
          ['Suporte','Leitura geral · 1 usuário','message','#697386'],
        ].map((p,i) => (
          <Card key={i} className="p-4">
            <div className="flex items-center gap-2">
              <span className="h-8 w-8 rounded-md flex items-center justify-center text-white" style={{background:p[3]}}><Icon name={p[2]}/></span>
              <div className="font-semibold">{p[0]}</div>
            </div>
            <div className="text-[11.5px] text-ink-500 mt-2">{p[1]}</div>
          </Card>
        ))}
      </div>
      <Card>
        <FilterBar>
          <div className="flex-1"><SearchBar placeholder="Buscar usuário…" kbd={null}/></div>
          <Select value="todos" onChange={()=>{}} options={[{value:'todos',label:'Todos perfis'},{value:'admin',label:'Admin'},{value:'fin',label:'Financeiro'},{value:'op',label:'Operador'},{value:'sup',label:'Suporte'}]}/>
        </FilterBar>
        <Table>
          <THead><tr><TH>Usuário</TH><TH>Perfil</TH><TH>Último acesso</TH><TH>Status</TH><TH/></tr></THead>
          <TBody>
            {users.map((u,i) => (
              <TR key={i}>
                <TD>
                  <div className="flex items-center gap-3">
                    <Avatar name={u.n}/>
                    <div>
                      <div className="font-semibold text-ink-900">{u.n}</div>
                      <div className="text-[11.5px] text-ink-400">{u.e}</div>
                    </div>
                  </div>
                </TD>
                <TD><Badge tone={u.p==='Admin'?'info':'neutral'}>{u.p}</Badge></TD>
                <TD className="text-ink-500">{u.last}</TD>
                <TD><Badge tone={u.s==='ativo'?'ok':u.s==='convite_pendente'?'warn':'neutral'} dot>{u.s==='convite_pendente'?'Convite pendente':u.s==='ativo'?'Ativo':'Inativo'}</Badge></TD>
                <TD><div className="flex gap-1">
                  <IconBtn icon="edit" label="Editar" onClick={()=>{}}/>
                  <IconBtn icon="more" label="Mais" onClick={()=>{}}/>
                </div></TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- CONFIG AUDITORIA ----------------- */
function AdminConfigAuditoria() {
  const events = MOCK.range(20).map((_, i) => {
    const types = [
      ['admin.user.signed_in','Login no painel','Renato Cardoso'],
      ['orchestrator.rule.toggled','Regra ativada/desativada','Bruno Tavares'],
      ['tax.updated','Taxa adquirente alterada','Renato Cardoso'],
      ['client.created','Nova academia cadastrada','Larissa Mendes'],
      ['chargeback.evidence_uploaded','Evidências enviadas','Camila Souza'],
      ['anticipation.approved','Antecipação aprovada','Larissa Mendes'],
      ['anticipation.batch_rejected','Lote rejeitado (3 itens)','Larissa Mendes'],
      ['user.invited','Usuário convidado','Renato Cardoso'],
      ['transaction.canceled','Cancelamento manual de transação','Bruno Tavares'],
      ['settings.webhook.updated','Webhook URL alterado','Renato Cardoso'],
    ];
    const t = types[i % types.length];
    return { when: MOCK.daysAgo((i+1)*0.4), code:t[0], desc:t[1], by:t[2], ip:`200.${10+i%30}.${i%255}.${(i*7)%255}` };
  });
  return (
    <>
      <PageHeader breadcrumb={['Configurações','Auditoria']} title="Log de auditoria"
        subtitle="Todos os eventos sensíveis do sistema"
        actions={<>
          <Button variant="secondary" icon="filter">Filtros avançados</Button>
          <Button variant="secondary" icon="download">Exportar</Button>
        </>}/>
      <Card>
        <FilterBar>
          <div className="flex-1"><SearchBar placeholder="Buscar por evento, usuário, IP…" kbd={null}/></div>
          <Select value="7d" onChange={()=>{}} options={[{value:'24h',label:'24h'},{value:'7d',label:'7 dias'},{value:'30d',label:'30 dias'}]}/>
        </FilterBar>
        <Table>
          <THead><tr><TH>Quando</TH><TH>Evento</TH><TH>Descrição</TH><TH>Por</TH><TH>IP</TH></tr></THead>
          <TBody>
            {events.map((e,i) => (
              <TR key={i}>
                <TD mono className="text-ink-500">{MOCK.fmtDateTime(e.when)}</TD>
                <TD><span className="font-mono text-[11.5px] px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-100">{e.code}</span></TD>
                <TD className="text-ink-700">{e.desc}</TD>
                <TD>{e.by}</TD>
                <TD mono className="text-ink-500">{e.ip}</TD>
              </TR>
            ))}
          </TBody>
        </Table>
        <Pagination page={1} pages={9} onChange={()=>{}} total={180}/>
      </Card>
    </>
  );
}

Object.assign(window, { AdminChargebackImportar, AdminChargebackDisputas, ChargebackDetail, AdminAntifraude, AdminRelatorios, AdminConfigUsuarios, AdminConfigAuditoria });