/* Portal Cliente — extras: Agenda, Antecipações, Assinaturas, Conciliação, Relatórios, Config, Integração */

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

/* ----------------- AGENDA PREVISÃO (calendário) ----------------- */
function PortalAgendaPrevisao({ scope }) {
  const [month, setMonth] = useState(() => { const d = new Date(); d.setDate(1); return d; });
  // Build a deterministic month grid
  const first = new Date(month.getFullYear(), month.getMonth(), 1);
  const startDow = first.getDay();
  const daysInMonth = new Date(month.getFullYear(), month.getMonth()+1, 0).getDate();
  const cells = MOCK.range(42).map(i => {
    const d = i - startDow + 1;
    if (d < 1 || d > daysInMonth) return { empty: true };
    // mock values
    const seed = (d * 31 + month.getMonth() * 7) % 100;
    const valor = d % 7 === 0 ? 0 : 2400 + seed * 480;
    const qtd = d % 7 === 0 ? 0 : 3 + (seed % 18);
    return { d, valor, qtd, isHoje: d === new Date().getDate() && month.getMonth() === new Date().getMonth() };
  });
  const total = cells.reduce((s,c)=>s+(c.valor||0),0);
  const max = Math.max(1, ...cells.map(c => c.valor || 0));

  function changeMonth(dir) {
    setMonth(m => {
      const n = new Date(m); n.setMonth(m.getMonth() + dir); return n;
    });
  }

  return (
    <>
      <PageHeader breadcrumb={['Agenda','Previsão']} title="Previsão de recebíveis"
        subtitle="Liquidações esperadas para os próximos dias"
        actions={<>
          <Button variant="secondary" icon="download">Exportar</Button>
          <Button icon="zap">Antecipar recebíveis</Button>
        </>}/>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Total previsto no mês" value={MOCK.fmtBRL(total)} icon="banknote"/>
        <KpiCard label="Próximo crédito" value="Seg, 18/05" sub={MOCK.fmtBRL(8420)} icon="clock"/>
        <KpiCard label="Maior dia do mês" value={MOCK.fmtBRL(max)} sub="quinta-feira" icon="trending"/>
        <KpiCard label="Liquidação média/dia" value={MOCK.fmtBRL(Math.round(total/30))} icon="activity"/>
      </div>

      <Card>
        <div className="px-5 py-3 border-b border-line-100 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <IconBtn icon="chevronLeft" label="Anterior" onClick={()=>changeMonth(-1)}/>
            <div className="text-[15px] font-semibold capitalize">{MOCK.fmtMonthYear(month)}</div>
            <IconBtn icon="chevronRight" label="Próximo" onClick={()=>changeMonth(1)}/>
          </div>
          <div className="flex items-center gap-2 text-[11.5px] text-ink-500">
            Menos <span className="h-3 w-12 rounded" style={{background:'linear-gradient(to right, #F1F4F9, var(--accent-500))'}}/> Mais
          </div>
        </div>

        <div className="grid grid-cols-7 border-b border-line-100 bg-paper-100">
          {['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'].map(d => (
            <div key={d} className="px-3 py-2 text-[11px] uppercase tracking-wider font-semibold text-ink-500 text-center">{d}</div>
          ))}
        </div>
        <div className="grid grid-cols-7">
          {cells.map((c, i) => c.empty ? <div key={i} className="aspect-square border-r border-b border-line-100 last:border-r-0 bg-paper-100/40"/> : (
            <div key={i} className={`aspect-square border-r border-b border-line-100 p-2 relative cursor-pointer hover:bg-violet-50/40 ${c.isHoje?'ring-2 ring-violet-400 ring-inset':''}`}
                 style={{background: c.valor > 0 ? `rgba(var(--accent-rgb),${0.05 + (c.valor/max)*0.20})` : 'white'}}>
              <div className="flex items-center justify-between">
                <div className={`text-[12px] font-semibold ${c.isHoje?'text-violet-700':'text-ink-700'}`}>{c.d}</div>
                {c.qtd > 0 && <div className="text-[10px] text-ink-400 tabular-nums">{c.qtd}</div>}
              </div>
              {c.valor > 0 && (
                <div className="absolute bottom-1.5 left-2 right-2">
                  <div className="text-[10.5px] font-semibold text-ink-900 tabular-nums leading-tight">{MOCK.fmtBRLShort(c.valor)}</div>
                  <div className="h-1 bg-paper-200 rounded-full mt-1 overflow-hidden">
                    <div className="h-full bg-violet-500" style={{width:(c.valor/max*100)+'%'}}/>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}

/* ----------------- AGENDA REALIZADOS ----------------- */
function PortalAgendaRealizados({ scope }) {
  const items = MOCK.range(20).map(i => {
    const dia = MOCK.daysAgo(i + 1);
    const valor = 4200 + ((i * 13) % 19) * 1200;
    return {
      data: dia,
      adq: ['cielo','rede','getnet'][i % 3],
      valor,
      qtd: 8 + ((i * 7) % 30),
      ref: 'PAY-' + (200001 + i),
    };
  });
  const total = items.reduce((s,i)=>s+i.valor, 0);
  return (
    <>
      <PageHeader breadcrumb={['Agenda','Realizados']} title="Depósitos realizados"
        subtitle="Histórico de liquidações já creditadas na sua conta"
        actions={<Button variant="secondary" icon="download">Exportar OFX</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4">
        <KpiCard label="Total recebido (60d)" value={MOCK.fmtBRL(total)} delta="+22,1%" deltaTone="ok" icon="banknote"/>
        <KpiCard label="Última liquidação" value="ontem" sub={MOCK.fmtBRL(items[0].valor)} icon="check"/>
        <KpiCard label="Em conta hoje" value={MOCK.fmtBRL(items[0].valor)} sub="Itaú · CC 12.345-6" icon="banknote"/>
      </div>
      <Card>
        <Table>
          <THead><tr><TH>Data</TH><TH>Referência</TH><TH>Adquirente</TH><TH align="right">Qtd.</TH><TH align="right">Valor depositado</TH><TH>Banco</TH></tr></THead>
          <TBody>
            {items.map((r,i)=>(
              <TR key={i}>
                <TD mono>{MOCK.fmtDate(r.data)}</TD>
                <TD mono className="font-medium">{r.ref}</TD>
                <TD><AdqBadge id={r.adq}/></TD>
                <TD align="right" mono>{r.qtd}</TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(r.valor)}</TD>
                <TD className="text-ink-700">341 — Itaú · CC 12.345-6</TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- ANTECIPAÇÕES SOLICITAR ----------------- */
function PortalAntecipacaoSolicitar({ scope }) {
  const toast = useToast();
  const recebiveis = useMemo(() => MOCK.range(14).map(i => {
    const d = (i+1) * 4 + 2;
    return {
      id: 'rcv_' + (10000 + i*7),
      data: MOCK.daysAgo(-d),
      valor: 1200 + ((i * 17) % 30) * 240,
      adq: ['cielo','rede','getnet'][i % 3],
      modalidade: i % 4 === 0 ? 'Crédito 2-12x' : 'Crédito à vista',
      dias: d,
    };
  }), []);
  const [sel, setSel] = useState(new Set());
  const all = recebiveis.length;
  const selecionados = recebiveis.filter(r => sel.has(r.id));
  const valor = selecionados.reduce((s,r)=>s+r.valor, 0);
  const taxa = 1.95 - Math.min(0.95, valor/200000); // melhor taxa quanto mais
  const taxaFinal = Math.max(1.0, +taxa.toFixed(2));
  const custo = +(valor * taxaFinal/100).toFixed(2);
  const liquido = +(valor - custo).toFixed(2);

  return (
    <>
      <PageHeader breadcrumb={['Antecipações','Solicitar']} title="Solicitar antecipação"
        subtitle="Escolha os recebíveis que você quer adiantar — quanto mais selecionar, melhor a taxa."/>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Card className="xl:col-span-2">
          <div className="px-5 py-3 border-b border-line-100 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <input type="checkbox" className="accent-violet-500 rounded" checked={sel.size === all}
                onChange={e => setSel(e.target.checked ? new Set(recebiveis.map(r=>r.id)) : new Set())}/>
              <span className="text-[13px]"><b>{sel.size}</b> de {all} selecionados</span>
              {sel.size > 0 && <Badge tone="info">Total {MOCK.fmtBRL(valor)}</Badge>}
            </div>
            <div className="text-[11.5px] text-ink-400">Mostrando próximos 60 dias</div>
          </div>
          <Table>
            <THead><tr>
              <TH/>
              <TH>ID</TH><TH>Vence em</TH><TH>Modalidade</TH><TH>Adq.</TH>
              <TH align="right">Valor bruto</TH><TH>Carência</TH>
            </tr></THead>
            <TBody>
              {recebiveis.map(r => (
                <TR key={r.id}>
                  <TD><input type="checkbox" className="accent-violet-500 rounded" checked={sel.has(r.id)}
                    onChange={e => setSel(s => { const cp = new Set(s); e.target.checked ? cp.add(r.id) : cp.delete(r.id); return cp; })}/></TD>
                  <TD mono className="font-medium">{r.id}</TD>
                  <TD mono>{MOCK.fmtDate(r.data)}</TD>
                  <TD>{r.modalidade}</TD>
                  <TD><AdqBadge id={r.adq}/></TD>
                  <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(r.valor)}</TD>
                  <TD><Badge tone={r.dias<10?'ok':r.dias<25?'info':'neutral'}>D+{r.dias}</Badge></TD>
                </TR>
              ))}
            </TBody>
          </Table>
        </Card>

        <div className="space-y-4">
          <Card className="overflow-hidden">
            <div className="bg-gradient-to-br from-violet-600 to-violet-800 p-5 text-white">
              <div className="text-[10.5px] uppercase tracking-[0.18em] font-semibold text-violet-200 mb-1">Você receberá</div>
              <div className="text-[36px] font-semibold tabular-nums leading-tight">{MOCK.fmtBRL(liquido)}</div>
              <div className="text-[12.5px] text-violet-100 mt-1">crédito previsto para <b className="text-white">amanhã</b></div>
            </div>
            <div className="p-5 space-y-3">
              <div className="flex items-center justify-between text-[13px]">
                <span className="text-ink-500">Valor bruto solicitado</span>
                <span className="font-semibold tabular-nums">{MOCK.fmtBRL(valor)}</span>
              </div>
              <div className="flex items-center justify-between text-[13px]">
                <span className="text-ink-500">Taxa de antecipação</span>
                <span className="font-semibold tabular-nums">{MOCK.fmtPct(taxaFinal,2)}</span>
              </div>
              <div className="flex items-center justify-between text-[13px]">
                <span className="text-ink-500">Custo</span>
                <span className="font-semibold tabular-nums text-err-600">−{MOCK.fmtBRL(custo)}</span>
              </div>
              {sel.size >= 5 && (
                <div className="rounded-lg bg-violet-50 border border-violet-100 p-3 text-[11.5px] text-violet-700 flex items-start gap-2">
                  <Icon name="sparkles" size={14} className="mt-0.5"/>
                  <div>Você desbloqueou taxa <b>{MOCK.fmtPct(taxaFinal,2)}</b> ao selecionar 5+ recebíveis.</div>
                </div>
              )}
              <Button className="w-full mt-1" icon="zap" disabled={sel.size === 0}
                onClick={()=>{toast.success('Solicitação enviada · análise em até 1h útil'); setSel(new Set());}}>
                Solicitar antecipação
              </Button>
              <div className="text-[11px] text-ink-400 text-center">O crédito acontece após aprovação do PACTO PAY (em geral, ainda hoje).</div>
            </div>
          </Card>

          <Card className="p-4">
            <div className="text-[12px] font-semibold mb-2">Como funciona</div>
            <div className="space-y-2 text-[12px] text-ink-600">
              {[
                ['1','Selecione os recebíveis · taxa final atualiza em tempo real'],
                ['2','Envie a solicitação · análise expressa em até 1h útil'],
                ['3','Receba o valor líquido na sua conta bancária'],
              ].map(p => (
                <div key={p[0]} className="flex items-start gap-2">
                  <span className="h-5 w-5 rounded-full bg-violet-100 text-violet-700 text-[10px] font-bold flex items-center justify-center shrink-0">{p[0]}</span>
                  <span>{p[1]}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

/* ----------------- ANTECIPAÇÕES CONSULTA ----------------- */
function PortalAntecipacoesConsulta({ scope }) {
  const list = MOCK.ANTECIPACOES.slice(0, 20);
  return (
    <>
      <PageHeader breadcrumb={['Antecipações','Consulta']} title="Histórico de antecipações"
        subtitle="Solicitações enviadas e seu status"/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Antecipado em 30d" value={MOCK.fmtBRL(184200)} delta="+34%" deltaTone="ok" icon="zap"/>
        <KpiCard label="Em aprovação" value={list.filter(a=>a.status==='solicitada'||a.status==='em_analise').length} icon="clock"/>
        <KpiCard label="Taxa média" value="1,87%" deltaTone="ok" delta="−0,12pp" icon="trending"/>
        <KpiCard label="Antecipações totais (12m)" value="142" icon="activity"/>
      </div>
      <Card>
        <Table>
          <THead><tr><TH>ID</TH><TH>Solicitada</TH><TH align="right">Bruto</TH><TH align="right">Taxa</TH><TH align="right">Líquido</TH><TH align="right">Recebíveis</TH><TH>Status</TH><TH>Crédito em</TH></tr></THead>
          <TBody>
            {list.map(a => {
              const sb = MOCK.statusBadge(a.status);
              return (
                <TR key={a.id}>
                  <TD mono className="font-medium">{a.id}</TD>
                  <TD mono className="text-ink-500">{MOCK.fmtDate(a.criada)}</TD>
                  <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(a.valor)}</TD>
                  <TD align="right" mono>{MOCK.fmtPct(a.taxa,2)}</TD>
                  <TD align="right" mono>{MOCK.fmtBRL(a.liquido)}</TD>
                  <TD align="right" mono>{a.recebiveis}</TD>
                  <TD><Badge tone={sb.tone} dot>{sb.label}</Badge></TD>
                  <TD mono className="text-ink-500">{a.status==='paga' ? MOCK.fmtDate(MOCK.daysAgo(2)) : a.status==='aprovada'?'amanhã':'—'}</TD>
                </TR>
              );
            })}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- ASSINATURAS PLANOS (CRUD academia) ----------------- */
function PortalAssinaturasPlanos({ scope }) {
  const toast = useToast();
  const [planos, setPlanos] = useState([
    { id:'p1', nome:'Mensal Standard', valor: 159.90, period:'Mensal', modalidade:'Recorrente', ativos: 412, ativo:true },
    { id:'p2', nome:'Trimestral Plus', valor: 419.00, period:'Trimestral', modalidade:'Recorrente', ativos: 184, ativo:true },
    { id:'p3', nome:'Semestral Pro', valor: 779.00, period:'Semestral', modalidade:'Crédito parcelado', ativos: 96, ativo:true },
    { id:'p4', nome:'Anual VIP', valor: 1490.00, period:'Anual', modalidade:'Crédito parcelado', ativos: 67, ativo:true },
    { id:'p5', nome:'Day-pass', valor: 39.90, period:'Avulso', modalidade:'PIX', ativos: 0, ativo:false },
  ]);
  return (
    <>
      <PageHeader breadcrumb={['Assinaturas','Planos']} title="Planos de assinatura"
        subtitle="Os planos que sua academia oferece para os alunos"
        actions={<Button icon="plus">Novo plano</Button>}/>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Assinaturas ativas" value={MOCK.fmtNum(planos.reduce((s,p)=>s+p.ativos,0))} icon="users" delta="+38" deltaTone="ok"/>
        <KpiCard label="MRR estimado" value={MOCK.fmtBRL(187420)} delta="+12,4%" deltaTone="ok" icon="trending"/>
        <KpiCard label="Churn 30d" value="2,1%" deltaTone="warn" delta="+0,3pp" icon="alertTriangle"/>
        <KpiCard label="Novos no mês" value={MOCK.fmtNum(184)} icon="plus"/>
      </div>

      <Card>
        <Table>
          <THead><tr><TH>Plano</TH><TH>Periodicidade</TH><TH>Modalidade cobrança</TH><TH align="right">Valor</TH><TH align="right">Ativos</TH><TH>Status</TH><TH/></tr></THead>
          <TBody>
            {planos.map(p => (
              <TR key={p.id}>
                <TD>
                  <div className="flex items-center gap-3">
                    <span className="h-9 w-9 rounded-md bg-violet-50 text-violet-600 flex items-center justify-center"><Icon name="award"/></span>
                    <div>
                      <div className="font-semibold text-ink-900">{p.nome}</div>
                      <div className="text-[11px] text-ink-400 font-mono">{p.id}</div>
                    </div>
                  </div>
                </TD>
                <TD>{p.period}</TD>
                <TD><Badge tone="neutral">{p.modalidade}</Badge></TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(p.valor)}</TD>
                <TD align="right" mono>{MOCK.fmtNum(p.ativos)}</TD>
                <TD>
                  <Toggle checked={p.ativo} onChange={() => {
                    setPlanos(ps => ps.map(x => x.id===p.id ? {...x, ativo:!x.ativo} : x));
                    toast.success('Plano atualizado');
                  }}/>
                </TD>
                <TD><div className="flex gap-1">
                  <IconBtn icon="edit" label="Editar" onClick={()=>{}}/>
                  <IconBtn icon="copy" label="Duplicar" onClick={()=>toast.success('Plano duplicado')}/>
                  <IconBtn icon="more" label="Mais" onClick={()=>{}}/>
                </div></TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- ASSINATURAS VENDA ----------------- */
function PortalAssinaturasVenda({ scope }) {
  const toast = useToast();
  const [data, setData] = useState({
    aluno:'', email:'', cpf:'', plano:'p1', modalidade:'recorrente', cartao:'',
    venc:'12', cobranca:'mensal', diasGracia: '7',
  });
  return (
    <>
      <PageHeader breadcrumb={['Assinaturas','Nova venda']} title="Nova venda de assinatura"
        subtitle="Cadastre o aluno e gere a primeira cobrança"/>
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Card className="xl:col-span-2 p-5">
          <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mb-3">Aluno</div>
          <div className="grid grid-cols-2 gap-3">
            <Input className="col-span-2" label="Nome completo" value={data.aluno} onChange={e=>setData({...data, aluno:e.target.value})} placeholder="Maria Souza" icon="user"/>
            <Input label="E-mail" type="email" value={data.email} onChange={e=>setData({...data, email:e.target.value})} placeholder="maria@email.com"/>
            <Input label="CPF" value={data.cpf} onChange={e=>setData({...data, cpf:e.target.value})} placeholder="000.000.000-00"/>
          </div>
          <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mt-6 mb-3">Plano</div>
          <div className="grid grid-cols-2 gap-3">
            <Select label="Plano contratado" value={data.plano} onChange={v=>setData({...data, plano:v})} options={[
              {value:'p1', label:'Mensal Standard · R$ 159,90'},
              {value:'p2', label:'Trimestral Plus · R$ 419,00'},
              {value:'p3', label:'Semestral Pro · R$ 779,00'},
              {value:'p4', label:'Anual VIP · R$ 1.490,00'},
            ]}/>
            <Select label="Modalidade de cobrança" value={data.modalidade} onChange={v=>setData({...data, modalidade:v})} options={[
              {value:'recorrente',label:'Crédito recorrente (recomendado)'},
              {value:'debito',label:'Débito automático'},
              {value:'pix_rec',label:'PIX Recorrente'},
              {value:'boleto',label:'Boleto avulso'},
            ]}/>
            <Select label="Periodicidade" value={data.cobranca} onChange={v=>setData({...data, cobranca:v})} options={['mensal','trimestral','semestral','anual']}/>
            <Select label="Dia de vencimento" value={data.venc} onChange={v=>setData({...data, venc:v})} options={MOCK.range(28).map(i => String(i+1))}/>
          </div>
          <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mt-6 mb-3">Pagamento</div>
          <div className="rounded-xl border border-line-200 p-4 bg-paper-100/40">
            <div className="text-[13px] mb-2 font-medium">Cartão para cobrança recorrente</div>
            <div className="grid grid-cols-3 gap-3">
              <Input className="col-span-2" label="Número do cartão" placeholder="•••• •••• •••• ••••" icon="creditCard"/>
              <Input label="Titular" placeholder="MARIA SOUZA"/>
              <Input label="Validade" placeholder="MM/AA"/>
              <Input label="CVV" placeholder="000"/>
              <Input label="Bandeira" value="Visa" readOnly/>
            </div>
          </div>
          <Input className="mt-4" label="Dias de carência antes da 1ª cobrança" type="number" value={data.diasGracia} onChange={e=>setData({...data, diasGracia:e.target.value})}/>
        </Card>

        <Card className="overflow-hidden">
          <div className="bg-gradient-to-br from-violet-600 to-violet-800 p-5 text-white">
            <div className="text-[10.5px] uppercase tracking-[0.18em] font-semibold text-violet-200 mb-1">Resumo</div>
            <div className="text-[14px] font-medium">Cobrança recorrente</div>
            <div className="text-[36px] font-semibold tabular-nums leading-tight mt-1">R$ 159,90</div>
            <div className="text-[12.5px] text-violet-100">/mês · primeira cobrança em <b className="text-white">19/05/2026</b></div>
          </div>
          <div className="p-5 space-y-3 text-[13px]">
            <Row k="Aluno" v={data.aluno || '—'}/>
            <Row k="Plano" v="Mensal Standard"/>
            <Row k="Modalidade" v="Crédito recorrente"/>
            <Row k="Próxima cobrança" v="19/05/2026"/>
            <Row k="Próximas 12 cobranças" v="—"/>
            <div className="rounded-lg bg-violet-50 border border-violet-100 p-3 text-[11.5px] text-ink-700 flex items-start gap-2">
              <Icon name="info" className="text-violet-600 mt-0.5"/>
              <div>Em caso de falha, o orquestrador faz retry inteligente em D+1, D+3 e D+7 automaticamente.</div>
            </div>
            <Button className="w-full" icon="check" onClick={()=>toast.success('Assinatura ativada · primeira cobrança em 7 dias')}>Ativar assinatura</Button>
          </div>
        </Card>
      </div>
    </>
  );
}

/* ----------------- CONCILIAÇÃO VENDAS ----------------- */
function PortalConciliacaoVendas({ scope }) {
  const txs = txNoEscopo(scope).slice(0, 14);
  return (
    <>
      <PageHeader breadcrumb={['Conciliação','Vendas']} title="O que você vendeu"
        subtitle="Tudo que entrou como venda no período"
        actions={<Button variant="secondary" icon="download">Exportar</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Total bruto" value={MOCK.fmtBRL(txs.reduce((s,t)=>s+t.valor,0))} icon="banknote"/>
        <KpiCard label="Taxas pagas" value={MOCK.fmtBRL(txs.reduce((s,t)=>s+(t.valor-t.valorLiquido),0))} icon="receipt"/>
        <KpiCard label="Líquido projetado" value={MOCK.fmtBRL(txs.reduce((s,t)=>s+t.valorLiquido,0))} icon="trending"/>
        <KpiCard label="Transações" value={MOCK.fmtNum(txs.length)} icon="activity"/>
      </div>
      <Card>
        <Table>
          <THead><tr><TH>Data</TH><TH>ID</TH><TH>Aluno</TH><TH>Modalidade</TH><TH>Adq.</TH><TH align="right">Bruto</TH><TH align="right">Taxa</TH><TH align="right">Líquido</TH><TH>Casamento</TH></tr></THead>
          <TBody>
            {txs.map((t,i) => {
              const stat = i % 7 === 0 ? 'aberto' : 'casado';
              return (
                <TR key={t.id}>
                  <TD mono>{MOCK.fmtDate(t.data)}</TD>
                  <TD mono>{t.id}</TD>
                  <TD className="text-ink-700">{t.aluno}</TD>
                  <TD>{t.modalidadeNome}</TD>
                  <TD><AdqBadge id={t.adquirente}/></TD>
                  <TD align="right" mono>{MOCK.fmtBRL(t.valor)}</TD>
                  <TD align="right" mono>{MOCK.fmtPct(t.taxaTotal,2)}</TD>
                  <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valorLiquido)}</TD>
                  <TD><Badge tone={stat==='casado'?'ok':'warn'} dot>{stat==='casado'?'Conciliado':'Em aberto'}</Badge></TD>
                </TR>
              );
            })}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- CONCILIAÇÃO PAGAMENTOS ----------------- */
function PortalConciliacaoPagamentos({ scope }) {
  const items = MOCK.range(12).map(i => {
    const dia = MOCK.daysAgo(i + 1);
    const valor = 4200 + ((i * 13) % 19) * 1200;
    const diff = i % 5 === 0 ? -340 - (i*30) : 0;
    return { data: dia, adq:['cielo','rede','getnet'][i % 3], esperado: valor, recebido: valor + diff, diff, ref:'PAY-'+(200001+i) };
  });
  return (
    <>
      <PageHeader breadcrumb={['Conciliação','Pagamentos']} title="O que você recebeu"
        subtitle="Cruzamento entre depósitos esperados e efetivos"/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Pagamentos casados" value={items.filter(i=>i.diff===0).length} icon="check" deltaTone="ok" delta="100% esperado"/>
        <KpiCard label="Divergências" value={items.filter(i=>i.diff!==0).length} deltaTone="warn" icon="alertTriangle"/>
        <KpiCard label="Valor divergente" value={MOCK.fmtBRL(items.reduce((s,i)=>s+(i.diff<0?-i.diff:0),0))} icon="banknote" deltaTone="err"/>
        <KpiCard label="Última atualização" value="agora" sub="próximo run às 19h" icon="refresh"/>
      </div>
      <Card>
        <Table>
          <THead><tr><TH>Data</TH><TH>Ref.</TH><TH>Adq.</TH><TH align="right">Esperado</TH><TH align="right">Recebido</TH><TH align="right">Diferença</TH><TH>Status</TH><TH>Ação</TH></tr></THead>
          <TBody>
            {items.map((r,i)=>(
              <TR key={i} className={r.diff!==0?'bg-warn-50/30':''}>
                <TD mono>{MOCK.fmtDate(r.data)}</TD>
                <TD mono className="font-medium">{r.ref}</TD>
                <TD><AdqBadge id={r.adq}/></TD>
                <TD align="right" mono>{MOCK.fmtBRL(r.esperado)}</TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(r.recebido)}</TD>
                <TD align="right" mono className={r.diff<0?'text-err-600 font-semibold':r.diff>0?'text-ok-600 font-semibold':'text-ink-500'}>{r.diff===0?'—':MOCK.fmtBRL(r.diff)}</TD>
                <TD><Badge tone={r.diff===0?'ok':'warn'} dot>{r.diff===0?'Casado':'Divergente'}</Badge></TD>
                <TD>{r.diff!==0 && <Button size="sm" variant="ghost">Investigar</Button>}</TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

/* ----------------- PORTAL RELATÓRIOS ----------------- */
function PortalRelatorios() {
  const toast = useToast();
  const gal = [
    ['Vendas por modalidade','Distribuição mensal por crédito, débito, PIX, recorrente','activity','Comercial'],
    ['Inadimplência detalhada','Mensalidades em atraso por aluno e plano','alertTriangle','Risco'],
    ['Receita líquida','O que efetivamente entrou no caixa','banknote','Financeiro'],
    ['Antecipações realizadas','Histórico + taxas pagas','zap','Financeiro'],
    ['Conciliação bancária','Cruzamento por dia/adquirente','check','Financeiro'],
    ['Aprovação por bandeira','Performance Visa/Master/Elo/Amex','shield','Operação'],
  ];
  return (
    <>
      <PageHeader title="Relatórios" subtitle="Gere relatórios em CSV ou PDF prontos para auditoria"/>
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
        {gal.map((r,i) => (
          <div key={i} className="rounded-xl border border-line-200 bg-white p-5 hover:shadow-card hover:border-violet-200 transition">
            <div className="flex items-center gap-3 mb-3">
              <span className="h-10 w-10 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center"><Icon name={r[2]}/></span>
              <Badge tone="neutral">{r[3]}</Badge>
            </div>
            <div className="font-semibold text-ink-900 text-[15px]">{r[0]}</div>
            <div className="text-[12px] text-ink-500 mt-1">{r[1]}</div>
            <div className="border-t border-line-100 mt-4 pt-3 flex items-center justify-between">
              <Select value="30d" onChange={()=>{}} options={[{value:'7d',label:'7d'},{value:'30d',label:'30d'},{value:'90d',label:'90d'}]}/>
              <div className="flex gap-1">
                <Button size="sm" variant="secondary" icon="download" onClick={()=>toast.success('CSV gerado')}>CSV</Button>
                <Button size="sm" variant="secondary" icon="receipt" onClick={()=>toast.success('PDF gerado')}>PDF</Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* ----------------- PORTAL CONFIG ----------------- */
function PortalConfig({ scope }) {
  const toast = useToast();
  const [tab, setTab] = useState('dados');
  const u = MOCK.UNIDADES[0];
  return (
    <>
      <PageHeader title="Configurações" subtitle="Dados da sua academia, usuários e webhook"/>
      <Tabs value={tab} onChange={setTab} className="mb-4" tabs={[
        {id:'dados',label:'Dados cadastrais'},
        {id:'usuarios',label:'Usuários'},
        {id:'hook',label:'Webhook'},
      ]}/>
      {tab === 'dados' && (
        <Card className="p-5 max-w-3xl grid grid-cols-2 gap-x-8 gap-y-3">
          {[
            ['Razão social','Academia Saúde Total Ltda.'],
            ['Nome fantasia',u.nome],
            ['CNPJ',u.cnpj],
            ['MCC','7997 — Clubes esportivos'],
            ['Endereço','Av. Brigadeiro Faria Lima, 4400 · São Paulo/SP'],
            ['Telefone','(11) 3000-0100'],
            ['E-mail responsável','financeiro@saudetotal.com.br'],
            ['Plano contratado','Prata · spread 0,40%'],
            ['Banco','341 — Itaú · Ag 0001 · CC 12.345-6'],
            ['Status','Ativo desde 14/03/2024'],
          ].map(r => (
            <div key={r[0]} className="flex items-center justify-between border-b border-line-100 pb-2">
              <span className="text-[12.5px] text-ink-500">{r[0]}</span>
              <span className="text-[13px] font-medium text-ink-900">{r[1]}</span>
            </div>
          ))}
          <div className="col-span-2 mt-2 text-[12px] text-ink-400">Para alterar dados cadastrais, abra um chamado pelo suporte.</div>
        </Card>
      )}
      {tab === 'usuarios' && (
        <Card>
          <div className="flex items-center justify-between px-5 py-3 border-b border-line-100">
            <div className="text-[13px] text-ink-700">4 usuários nesta academia</div>
            <Button size="sm" icon="plus" onClick={()=>toast.success('Convite enviado')}>Convidar</Button>
          </div>
          <Table>
            <THead><tr><TH>Usuário</TH><TH>Perfil</TH><TH>Último acesso</TH><TH>Status</TH><TH/></tr></THead>
            <TBody>
              {[
                ['Carla Mendes','carla@saudetotal.com.br','Admin','hoje','ativo'],
                ['Lucas Pinheiro','lucas@saudetotal.com.br','Financeiro','ontem','ativo'],
                ['Patricia Silva','patricia@saudetotal.com.br','Recepção','-3d','ativo'],
                ['Diego Tavares','diego@saudetotal.com.br','Recepção','-30d','inativo'],
              ].map((u,i)=>(
                <TR key={i}>
                  <TD>
                    <div className="flex items-center gap-3">
                      <Avatar name={u[0]}/>
                      <div>
                        <div className="font-semibold">{u[0]}</div>
                        <div className="text-[11.5px] text-ink-400">{u[1]}</div>
                      </div>
                    </div>
                  </TD>
                  <TD><Badge tone={u[2]==='Admin'?'info':'neutral'}>{u[2]}</Badge></TD>
                  <TD className="text-ink-500">{u[3]}</TD>
                  <TD><Badge tone={u[4]==='ativo'?'ok':'neutral'} dot>{u[4]==='ativo'?'Ativo':'Inativo'}</Badge></TD>
                  <TD><div className="flex gap-1"><IconBtn icon="edit" label="Editar"/><IconBtn icon="more" label="Mais"/></div></TD>
                </TR>
              ))}
            </TBody>
          </Table>
        </Card>
      )}
      {tab === 'hook' && (
        <Card className="p-5 max-w-3xl space-y-3">
          <Input label="Webhook URL" defaultValue="https://saudetotal.com.br/api/pacto-events" icon="link"/>
          <Input label="Secret HMAC (para validar assinatura)" value="whsec_•••••••••••••••••••••" readOnly icon="eyeOff"/>
          <div className="grid grid-cols-2 gap-3">
            <Input label="Retry policy" value="Exponencial · 1, 5, 25, 125 min" readOnly/>
            <Input label="Timeout" value="10 segundos" readOnly/>
          </div>
          <div className="border-t border-line-100 pt-3 flex items-center justify-between">
            <div className="text-[12px] text-ink-500">Última entrega: <b className="text-ink-900">há 4 min</b> · 99,98% sucesso (7d)</div>
            <Button icon="zap" onClick={()=>toast.success('Evento de teste enviado')}>Enviar evento de teste</Button>
          </div>
        </Card>
      )}
    </>
  );
}

/* ----------------- PORTAL INTEGRAÇÃO ----------------- */
function PortalIntegracao() {
  const toast = useToast();
  const [reveal, setReveal] = useState(false);
  const apiKey = 'sk_live_h9_R7XaV2pBmK4eLs_qZ1JoTfYwUuC8H';
  const masked = 'sk_live_•••••••••••••••••••••';
  const codeWebhook = `// Endpoint que recebe eventos do PACTO PAY (Node.js)
app.post('/api/pacto-events', (req, res) => {
  const sig = req.headers['x-pactopay-signature'];
  const event = pactopay.webhooks.verify(req.body, sig, WHSEC);

  switch (event.type) {
    case 'transaction.approved':
      console.log('Venda aprovada:', event.data.id, event.data.amount);
      break;
    case 'chargeback.opened':
      alertOps(event.data); // 🚨 abra o caso no seu CRM
      break;
    case 'payout.completed':
      reconcilePayout(event.data.deposit_id);
      break;
  }
  res.status(200).send('ok');
});`;
  const eventos = MOCK.EVENTOS_WEBHOOK;
  const [sandboxEvent, setSandboxEvent] = useState(eventos[0]);
  return (
    <>
      <PageHeader title="Integração & API"
        subtitle="Chave de API, exemplos de código e sandbox para testar webhooks"/>

      <div className="grid grid-cols-1 xl:grid-cols-5 gap-4">
        <div className="xl:col-span-3 space-y-4">
          <Card className="p-5">
            <div className="flex items-center justify-between mb-2">
              <div className="text-[13px] font-semibold">Chave de API · produção</div>
              <Badge tone="ok" dot>Ativa</Badge>
            </div>
            <div className="flex gap-2">
              <Input value={reveal ? apiKey : masked} readOnly icon="key" className="flex-1"/>
              <Button variant="secondary" icon={reveal?'eyeOff':'eye'} onClick={()=>setReveal(r=>!r)}>{reveal?'Ocultar':'Revelar'}</Button>
              <Button variant="secondary" icon="copy" onClick={()=>toast.success('Copiado')}>Copiar</Button>
              <Button variant="outline" icon="refresh" onClick={()=>toast.success('Nova chave gerada · a anterior expira em 24h')}>Rotacionar</Button>
            </div>
            <div className="mt-3 text-[11.5px] text-ink-500">
              Use esta chave nos headers <span className="font-mono px-1 py-0.5 rounded bg-paper-200">Authorization: Bearer {'{key}'}</span>.
              Mantenha-a segura — não publique no front-end.
            </div>
          </Card>

          <Card className="p-5">
            <div className="text-[13px] font-semibold mb-3">Exemplo · receber webhook</div>
            <pre className="rounded-xl bg-[#0F1B2D] text-[12px] text-paper-100 overflow-auto p-4 font-mono leading-relaxed"
              style={{boxShadow:'inset 0 0 0 1px rgba(255,255,255,0.06)'}}>
{codeWebhook}
            </pre>
            <div className="flex items-center gap-2 mt-3">
              <Button variant="secondary" size="sm" icon="copy" onClick={()=>toast.success('Copiado')}>Copiar</Button>
              <Button variant="ghost" size="sm" icon="receipt">Ver doc completa</Button>
            </div>
          </Card>

          <Card>
            <CardHeader title="Eventos disponíveis"
              subtitle="Assine os eventos que sua academia precisa receber"/>
            <Table>
              <THead><tr><TH>Evento</TH><TH>Descrição</TH><TH>Assinado</TH></tr></THead>
              <TBody>
                {[
                  ['transaction.created','Toda venda registrada (mesmo antes de autorização)', true],
                  ['transaction.approved','Transação aprovada pela adquirente', true],
                  ['transaction.failed','Recusada (com motivo da emissora)', true],
                  ['chargeback.opened','Notificação de chargeback recebida', true],
                  ['chargeback.won','Disputa ganha · valor revertido', false],
                  ['payout.completed','Depósito creditado na sua conta', true],
                  ['subscription.canceled','Aluno cancelou ou expirou', false],
                  ['anticipation.approved','Antecipação aprovada · crédito a caminho', true],
                ].map((e,i)=>(
                  <TR key={i}>
                    <TD><span className="font-mono text-[12px] px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-100">{e[0]}</span></TD>
                    <TD className="text-ink-700">{e[1]}</TD>
                    <TD><Toggle checked={e[2]} onChange={()=>toast.success('Preferência salva')}/></TD>
                  </TR>
                ))}
              </TBody>
            </Table>
          </Card>
        </div>

        <Card className="xl:col-span-2 overflow-hidden">
          <CardHeader title="Sandbox · webhook" subtitle="Dispare um evento de teste para o seu endpoint"
            right={<Badge tone="info" dot>Modo seguro</Badge>}/>
          <div className="px-5 pt-3 pb-2">
            <Select label="Evento a disparar" value={sandboxEvent.tipo}
              onChange={v => setSandboxEvent(eventos.find(e => e.tipo === v) || eventos[0])}
              options={eventos.map(e => ({ value:e.tipo, label:e.tipo }))}/>
          </div>
          <div className="px-5">
            <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold mb-1.5">Payload de exemplo</div>
            <pre className="rounded-lg bg-[#0F1B2D] text-[11px] text-paper-100 overflow-auto p-3 font-mono leading-relaxed max-h-[260px]">
{JSON.stringify(sandboxEvent.payload, null, 2)}
            </pre>
          </div>
          <div className="p-5 flex items-center gap-2">
            <Button className="flex-1" icon="zap" onClick={()=>toast.success('Evento enviado · resposta 200 OK em 312ms')}>Disparar</Button>
            <Button variant="secondary" icon="copy" onClick={()=>toast.success('Payload copiado')}/>
          </div>
          <div className="px-5 pb-5 border-t border-line-100 pt-4">
            <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold mb-2">Últimas entregas</div>
            <div className="space-y-1.5">
              {MOCK.range(4).map(i => (
                <div key={i} className="flex items-center justify-between text-[11.5px]">
                  <div className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-ok-500"/>200 OK · {eventos[i].tipo}</div>
                  <span className="font-mono text-ink-400">há {i*4+3}min</span>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

Object.assign(window, {
  PortalAgendaPrevisao, PortalAgendaRealizados,
  PortalAntecipacaoSolicitar, PortalAntecipacoesConsulta,
  PortalAssinaturasPlanos, PortalAssinaturasVenda,
  PortalConciliacaoVendas, PortalConciliacaoPagamentos,
  PortalRelatorios, PortalConfig, PortalIntegracao,
});