/* Portal Cliente — core screens: Dashboard, Simulador, Vendas, Carência */

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

/* Helpers — get data filtered by scope */
function unidadesNoEscopo(scope) {
  if (scope.kind === 'rede') return MOCK.UNIDADES.filter(u => u.rede === scope.id);
  if (scope.kind === 'filial') return MOCK.UNIDADES.filter(u => u.filial === scope.id);
  return MOCK.UNIDADES.filter(u => u.id === scope.id);
}
function txNoEscopo(scope) {
  const ids = new Set(unidadesNoEscopo(scope).map(u => u.id));
  return MOCK.TRANSACOES.filter(t => ids.has(t.unidade));
}

/* ----------------- DASHBOARD PORTAL ----------------- */
function PortalDashboard({ scope, onNavigate }) {
  const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } = RC2;

  const txs = txNoEscopo(scope);
  const hoje = txs.filter(t => MOCK.sameDayHoje(t.data));
  const mes = txs.filter(t => MOCK.thisMonth(t.data));
  const vendasHoje = hoje.reduce((s,t)=>s+t.valor,0);
  const vendasMes = mes.reduce((s,t)=>s+t.valor,0);
  const ticketMedio = txs.length ? txs.reduce((s,t)=>s+t.valor,0)/txs.length : 0;
  const aprov = txs.length ? (txs.filter(t=>t.status==='aprovada').length / txs.length * 100) : 0;

  // Build 30d series
  const series30 = MOCK.range(30).map(i => {
    const dia = MOCK.daysAgo(29 - i);
    const dayTx = txs.filter(t => MOCK.sameDay(t.data, dia));
    return {
      dia: MOCK.fmtDayShort(dia),
      bruto: Math.round(dayTx.reduce((s,t)=>s+t.valor,0)),
      liquido: Math.round(dayTx.reduce((s,t)=>s+t.valorLiquido,0)),
    };
  });

  // Inadimplência series (mock)
  const inad = MOCK.range(12).map(i => ({
    mes: MOCK.MES_LABELS[i],
    atraso: 12 + Math.round(Math.random()*8 + (i>8?6:0)),
    falhas: 4 + Math.round(Math.random()*4 + (i>8?3:0)),
  }));

  // Próximos recebíveis
  const proximos = MOCK.range(6).map(i => ({
    data: MOCK.daysAgo(-(i*5+2)),
    valor: 14000 + Math.round(Math.random()*22000),
    qtd: 12 + Math.round(Math.random()*22),
    adq: MOCK.ADQUIRENTES[i % 3].id,
  }));

  return (
    <>
      <PageHeader title={`Olá, ${scope.kind==='rede'?'time '+(MOCK.redeById(scope.id)?.nome||''):scope.kind==='filial'?(MOCK.filialById(scope.id)?.nome||''):(MOCK.unidById(scope.id)?.nome||'')} 👋`.replace(' 👋','')}
        subtitle="Visão consolidada das suas operações de pagamento"
        actions={<>
          <Button variant="secondary" icon="zap" onClick={()=>onNavigate('portal/antecipacoes/solicitar')}>Antecipar recebíveis</Button>
          <Button icon="plus" onClick={()=>onNavigate('portal/vendas/simulador')}>Nova venda</Button>
        </>}/>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
        <KpiCard label="Vendas hoje" value={MOCK.fmtBRL(vendasHoje)} delta="+8 vendas" deltaTone="ok" icon="banknote"/>
        <KpiCard label="Vendas neste mês" value={MOCK.fmtBRL(vendasMes)} delta="+12,4%" deltaTone="ok" sub="vs mês anterior" icon="trending"/>
        <KpiCard label="Ticket médio" value={MOCK.fmtBRL(ticketMedio)} delta="−R$ 4,12" deltaTone="warn" icon="receipt"/>
        <KpiCard label="Aprovação" value={MOCK.fmtPct(aprov,1)} delta="+0,6pp" deltaTone="ok" icon="check"/>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-5">
        <Card className="xl:col-span-2">
          <CardHeader title="Vendas dos últimos 30 dias"
            subtitle="Bruto vs líquido"
            right={
              <div className="flex items-center gap-3 text-[12px]">
                <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-sm bg-violet-500"/>Bruto</span>
                <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-sm bg-ok-500"/>Líquido</span>
              </div>
            }/>
          <div className="px-2 pb-3 pt-4 h-[260px]">
            <ResponsiveContainer>
              <AreaChart data={series30}>
                <defs>
                  <linearGradient id="pdBruto" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent-500)" stopOpacity={0.32}/>
                    <stop offset="100%" stopColor="var(--accent-500)" stopOpacity={0}/>
                  </linearGradient>
                  <linearGradient id="pdLiq" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#22C55E" stopOpacity={0.25}/>
                    <stop offset="100%" stopColor="#22C55E" 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==='bruto'?'Bruto':'Líquido']}
                  labelStyle={{color:'#525F7F', fontWeight:600, fontSize:12}}/>
                <Area type="monotone" dataKey="bruto" stroke="var(--accent-500)" strokeWidth={2} fill="url(#pdBruto)"/>
                <Area type="monotone" dataKey="liquido" stroke="#22C55E" strokeWidth={1.5} fill="url(#pdLiq)"/>
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </Card>

        <Card>
          <CardHeader title="Próximos recebíveis" subtitle="Liquidações previstas"
            right={<Button size="sm" variant="ghost" iconRight="arrowRight" onClick={()=>onNavigate('portal/agenda/previsao')}>Calendário</Button>}/>
          <div className="p-3 space-y-1">
            {proximos.map((r,i) => (
              <div key={i} className="flex items-center gap-3 p-2.5 rounded-lg hover:bg-paper-100">
                <div className="h-10 w-10 rounded-lg bg-violet-50 text-violet-700 flex flex-col items-center justify-center">
                  <div className="text-[9px] uppercase font-bold tracking-wider">{MOCK.fmtMonShort(r.data)}</div>
                  <div className="text-[14px] font-bold leading-none -mt-0.5">{r.data.getDate()}</div>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="font-semibold tabular-nums">{MOCK.fmtBRL(r.valor)}</div>
                  <div className="text-[11.5px] text-ink-500 flex items-center gap-2">
                    <AdqBadge id={r.adq}/> · {r.qtd} recebíveis
                  </div>
                </div>
                <Icon name="chevronRight" className="text-ink-300"/>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Inadimplência + composição */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-5">
        <Card className="xl:col-span-2">
          <CardHeader title="Inadimplência" subtitle="Mensalidades em atraso e recorrências que falharam (12 meses)"
            right={<Badge tone="warn" dot>Tendência alta no trimestre</Badge>}/>
          <div className="px-2 pb-3 pt-3 h-[200px]">
            <ResponsiveContainer>
              <LineChart data={inad}>
                <CartesianGrid stroke="#EEF1F6" vertical={false}/>
                <XAxis dataKey="mes" tickLine={false} axisLine={false} fontSize={11} stroke="#697386"/>
                <YAxis tickLine={false} axisLine={false} fontSize={11} stroke="#697386"/>
                <Tooltip contentStyle={{borderRadius:8, border:'1px solid #E3E8EE'}} formatter={(v,n) => [v, n==='atraso'?'Atrasos':'Falhas recorrência']}/>
                <Line type="monotone" dataKey="atraso" stroke="#FFA600" strokeWidth={2} dot={false}/>
                <Line type="monotone" dataKey="falhas" stroke="#FF4D4F" strokeWidth={2} dot={false}/>
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>

        <Card>
          <CardHeader title="Composição das vendas (mês)"/>
          <div className="p-5 space-y-3">
            {[
              ['Crédito à vista', 38, 'var(--accent-500)'],
              ['Crédito parcelado', 27, 'var(--accent-300)'],
              ['Recorrente', 19, '#22C55E'],
              ['Débito', 11, '#0066FF'],
              ['PIX', 5, '#00B07F'],
            ].map(c => (
              <div key={c[0]}>
                <div className="flex items-center justify-between text-[12.5px] mb-1">
                  <span className="font-medium text-ink-700">{c[0]}</span>
                  <span className="tabular-nums text-ink-500">{c[1]}%</span>
                </div>
                <div className="h-1.5 bg-paper-200 rounded-full overflow-hidden">
                  <div className="h-full rounded-full" style={{width:c[1]+'%', background:c[2]}}/>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Top + Atalhos */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Card className="xl:col-span-2">
          <CardHeader title="Últimas vendas"
            right={<Button size="sm" variant="ghost" iconRight="arrowRight" onClick={()=>onNavigate('portal/vendas')}>Ver todas</Button>}/>
          <Table>
            <THead><tr>
              <TH>Quando</TH><TH>Aluno</TH><TH>Modalidade</TH><TH>Bandeira</TH>
              <TH align="right">Valor</TH><TH>Status</TH>
            </tr></THead>
            <TBody>
              {txs.slice(0,7).map(t => {
                const sb = MOCK.statusBadge(t.status);
                return (
                  <TR key={t.id} onClick={()=>onNavigate('portal/vendas')}>
                    <TD mono className="text-ink-500">{MOCK.fmtDateTime(t.data)}</TD>
                    <TD className="text-ink-700">{t.aluno}</TD>
                    <TD>{t.modalidadeNome}{t.parcelas>1?` · ${t.parcelas}x`:''}</TD>
                    <TD><BandeiraBadge id={t.bandeira}/></TD>
                    <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valor)}</TD>
                    <TD><Badge tone={sb.tone} dot>{sb.label}</Badge></TD>
                  </TR>
                );
              })}
            </TBody>
          </Table>
        </Card>

        <Card>
          <CardHeader title="Ações rápidas"/>
          <div className="p-3 space-y-1">
            {[
              ['Simular venda','calculator','portal/vendas/simulador'],
              ['Solicitar antecipação','zap','portal/antecipacoes/solicitar'],
              ['Cadastrar plano','award','portal/assinaturas/planos'],
              ['Vender assinatura','users','portal/assinaturas/venda'],
              ['Ver chave API','key','portal/integracao'],
            ].map(a => (
              <button key={a[0]} onClick={()=>onNavigate(a[2])}
                className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-violet-50/40 group">
                <span className="h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center group-hover:bg-violet-100"><Icon name={a[1]}/></span>
                <span className="flex-1 text-[13px] font-medium text-left">{a[0]}</span>
                <Icon name="chevronRight" className="text-ink-300"/>
              </button>
            ))}
          </div>
        </Card>
      </div>
    </>
  );
}

/* ----------------- SIMULADOR DE VENDAS (Portal) ----------------- */
function PortalSimulador({ scope }) {
  const toast = useToast();
  const [m, setM] = useState({ modalidade:'cred_parc', valor: 350, parcelas: 6 });
  const plano = MOCK.PLANOS.find(p => p.id === 'prata');

  // Find best (cheapest) — but DO NOT show breakdown
  const result = useMemo(() => {
    let faixa = 'cred1';
    if (m.modalidade === 'cred1') faixa = 'cred1';
    else if (m.modalidade === 'cred_parc') faixa = m.parcelas <= 6 ? 'cred2_6' : 'cred7_12';
    else if (m.modalidade === 'recorrente') faixa = 'recorrente';
    else if (m.modalidade === 'debito') faixa = 'debito';

    const opts = MOCK.TAXAS_ADQUIRENTE.filter(t => t.bandeira === 'visa' && t.faixa === faixa);
    if (opts.length === 0) return null;
    const best = opts.sort((a,b)=>a.taxa-b.taxa)[0];
    const total = +(best.taxa + plano.spread).toFixed(2);
    const custo = +(m.valor * total/100).toFixed(2);
    const liq = +(m.valor - custo).toFixed(2);
    // Liquidation date
    let dia;
    if (m.modalidade === 'cred1') dia = 30;
    else if (m.modalidade === 'cred_parc') dia = 30;
    else if (m.modalidade === 'recorrente') dia = 30;
    else if (m.modalidade === 'debito') dia = 1;
    else dia = 0;
    return { total, custo, liq, dia, parcelaValor: m.modalidade==='cred_parc' ? +(m.valor / m.parcelas).toFixed(2) : null };
  }, [m]);

  const modalidades = [
    { id:'cred1', icon:'creditCard', t:'Crédito à vista', s:'Liquida em D+30' },
    { id:'cred_parc', icon:'creditCard', t:'Crédito parcelado', s:'2x a 12x · liquida em D+30' },
    { id:'recorrente', icon:'refresh', t:'Recorrente', s:'Cobrança mensal automática' },
    { id:'debito', icon:'banknote', t:'Débito', s:'Liquida em D+1' },
    { id:'pix', icon:'zap', t:'PIX', s:'Liquidação imediata' },
    { id:'pix_rec', icon:'refresh', t:'PIX Recorrente', s:'Beta · liquida no dia' },
  ];

  return (
    <>
      <PageHeader breadcrumb={['Vendas','Simulador']} title="Simulador de venda"
        subtitle="Veja taxa final, valor líquido e data prevista de recebimento — sem precisar registrar a venda."/>

      <div className="grid grid-cols-1 xl:grid-cols-5 gap-4">
        <Card className="xl:col-span-3">
          <CardHeader title="Modalidade de cobrança"/>
          <div className="p-5 grid grid-cols-2 md:grid-cols-3 gap-2.5">
            {modalidades.map(opt => {
              const active = m.modalidade === opt.id;
              return (
                <button key={opt.id} onClick={()=>setM(s=>({...s, modalidade:opt.id}))}
                  className={`text-left p-3.5 rounded-xl border transition ${active?'border-violet-500 bg-violet-50/40 shadow-card':'border-line-200 hover:border-line-300 bg-white'}`}>
                  <div className="flex items-center gap-2 mb-1">
                    <span className={`h-8 w-8 rounded-md flex items-center justify-center ${active?'bg-violet-500 text-white':'bg-paper-200 text-ink-500'}`}><Icon name={opt.icon}/></span>
                    {active && <Icon name="check" className="ml-auto text-violet-600"/>}
                  </div>
                  <div className="text-[13.5px] font-semibold">{opt.t}</div>
                  <div className="text-[11.5px] text-ink-500 mt-0.5">{opt.s}</div>
                </button>
              );
            })}
          </div>

          <div className="border-t border-line-100 p-5">
            <div className="text-[12px] uppercase tracking-wider text-ink-400 font-semibold mb-3">Detalhes</div>
            <div className="grid grid-cols-2 gap-4">
              <Input label="Valor da venda (R$)" type="number" value={m.valor} onChange={e=>setM(s=>({...s, valor:+e.target.value || 0}))}/>
              {m.modalidade === 'cred_parc' && (
                <Select label="Número de parcelas" value={String(m.parcelas)} onChange={v=>setM(s=>({...s, parcelas:+v}))}
                  options={MOCK.range(11).map(i => ({value:String(i+2), label:`${i+2}x sem juros`}))}/>
              )}
              {m.modalidade === 'recorrente' && (
                <Select label="Periodicidade" value="mensal" onChange={()=>{}} options={[
                  {value:'mensal',label:'Mensal'},{value:'trim',label:'Trimestral'},{value:'sem',label:'Semestral'},{value:'anual',label:'Anual'}
                ]}/>
              )}
            </div>
          </div>
        </Card>

        <Card className="xl:col-span-2 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">Resultado</div>
            <div className="text-[14px] font-medium">Valor líquido a receber</div>
            <div className="text-[40px] font-semibold tabular-nums leading-tight mt-1">{result ? MOCK.fmtBRL(result.liq) : '—'}</div>
            {result && (
              <div className="text-[12.5px] text-violet-100 mt-1">
                em <b className="text-white">{result.dia === 0 ? 'até alguns minutos' : `D+${result.dia}`}</b>
                {result.dia > 0 && <> · {MOCK.fmtDate(MOCK.daysAgo(-result.dia))}</>}
              </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</span>
              <span className="font-semibold tabular-nums">{MOCK.fmtBRL(m.valor)}</span>
            </div>
            <div className="flex items-center justify-between text-[13px]">
              <span className="text-ink-500">Taxa aplicada</span>
              <span className="font-semibold tabular-nums">{result ? MOCK.fmtPct(result.total,2) : '—'}</span>
            </div>
            <div className="flex items-center justify-between text-[13px]">
              <span className="text-ink-500">Custo da transação</span>
              <span className="font-semibold tabular-nums text-err-600">−{result ? MOCK.fmtBRL(result.custo) : '—'}</span>
            </div>
            {result?.parcelaValor && (
              <div className="border-t border-line-100 pt-3 flex items-center justify-between text-[13px]">
                <span className="text-ink-500">Valor de cada parcela ao aluno</span>
                <span className="font-semibold tabular-nums">{MOCK.fmtBRL(result.parcelaValor)}</span>
              </div>
            )}
            <div className="border-t border-line-100 pt-3 flex items-center justify-between text-[13px]">
              <span className="text-ink-500">Liquidação prevista</span>
              <span className="font-semibold">{result?.dia === 0 ? 'Imediata' : `D+${result?.dia}`}</span>
            </div>
            <Button className="w-full mt-2" icon="check" onClick={()=>toast.success('Link de pagamento gerado · enviado por e-mail')}>Gerar link de pagamento</Button>
            <Button variant="outline" className="w-full" icon="copy" onClick={()=>toast.success('Copiado')}>Copiar resumo</Button>
          </div>
        </Card>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-3 mt-5">
        {[
          ['Plano contratado','Prata','spread fixo · sem letras miúdas','award'],
          ['Antifraude','Ativo','revisão automática em &lt; 4ms','shield'],
          ['SLA de liquidação','99,98%','últimos 90 dias','check'],
        ].map((c,i) => (
          <Card key={i} className="p-4 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={c[3]}/></span>
            <div className="flex-1">
              <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">{c[0]}</div>
              <div className="text-[15px] font-semibold">{c[1]}</div>
              <div className="text-[11.5px] text-ink-500" dangerouslySetInnerHTML={{__html: c[2]}}/>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

/* ----------------- VENDAS (lista + detalhe) ----------------- */
function PortalVendas({ scope, onNavigate }) {
  const txs = txNoEscopo(scope);
  const [q, setQ] = useState('');
  const [statusF, setStatusF] = useState('todos');
  const [modF, setModF] = useState('todos');
  const [periodoF, setPeriodoF] = useState('30d');
  const [drawer, setDrawer] = useState(null);

  const filtered = useMemo(() => txs.filter(t => {
    if (statusF !== 'todos' && t.status !== statusF) return false;
    if (modF !== 'todos' && t.modalidade !== modF) return false;
    if (q && !(t.aluno.toLowerCase().includes(q.toLowerCase()) || t.id.toLowerCase().includes(q.toLowerCase()))) return false;
    return true;
  }), [txs, q, statusF, modF]);

  return (
    <>
      <PageHeader title="Vendas"
        subtitle={`${filtered.length} transações no escopo atual`}
        actions={<>
          <Button variant="secondary" icon="download">Exportar CSV</Button>
          <Button icon="plus" onClick={()=>onNavigate('portal/vendas/simulador')}>Nova venda</Button>
        </>}/>

      <Card>
        <FilterBar>
          <div className="flex-1 min-w-[260px]"><SearchBar value={q} onChange={setQ} placeholder="Buscar por aluno ou ID…" kbd={null}/></div>
          <Select value={statusF} onChange={setStatusF} options={[
            {value:'todos',label:'Todos status'},{value:'aprovada',label:'Aprovadas'},
            {value:'pendente',label:'Pendentes'},{value:'recusada',label:'Recusadas'},{value:'chargeback',label:'Chargeback'}
          ]}/>
          <Select value={modF} onChange={setModF} options={[
            {value:'todos',label:'Todas modalidades'},{value:'cred1',label:'Crédito à vista'},
            {value:'cred_parc',label:'Crédito parcelado'},{value:'recorrente',label:'Recorrente'},
            {value:'debito',label:'Débito'},{value:'pix',label:'PIX'}
          ]}/>
          <Select value={periodoF} onChange={setPeriodoF} options={[
            {value:'7d',label:'Últimos 7 dias'},{value:'30d',label:'Últimos 30 dias'},{value:'60d',label:'Últimos 60 dias'}
          ]}/>
        </FilterBar>
        <Table>
          <THead><tr>
            <TH>Quando</TH><TH>ID</TH><TH>Aluno</TH><TH>Modalidade</TH><TH>Bandeira</TH>
            <TH align="right">Bruto</TH><TH align="right">Taxa</TH><TH align="right">Líquido</TH><TH>Adq.</TH><TH>Status</TH><TH/>
          </tr></THead>
          <TBody>
            {filtered.slice(0, 40).map(t => {
              const sb = MOCK.statusBadge(t.status);
              return (
                <TR key={t.id} onClick={()=>setDrawer(t)}>
                  <TD mono className="text-ink-500">{MOCK.fmtDateTime(t.data)}</TD>
                  <TD mono>{t.id}</TD>
                  <TD className="text-ink-700">{t.aluno}</TD>
                  <TD>{t.modalidadeNome}{t.parcelas>1?` · ${t.parcelas}x`:''}</TD>
                  <TD><BandeiraBadge id={t.bandeira}/></TD>
                  <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valor)}</TD>
                  <TD align="right" mono>{MOCK.fmtPct(t.taxaTotal,2)}</TD>
                  <TD align="right" mono>{MOCK.fmtBRL(t.valorLiquido)}</TD>
                  <TD><AdqBadge id={t.adquirente}/></TD>
                  <TD><Badge tone={sb.tone} dot>{sb.label}</Badge></TD>
                  <TD><Icon name="chevronRight" className="text-ink-300"/></TD>
                </TR>
              );
            })}
          </TBody>
        </Table>
        <Pagination page={1} pages={Math.max(1, Math.ceil(filtered.length/40))} onChange={()=>{}} total={filtered.length}/>
      </Card>

      <Drawer open={!!drawer} onClose={()=>setDrawer(null)}
        title={drawer?drawer.id:''} subtitle={drawer?MOCK.fmtDateTime(drawer.data):''}>
        {drawer && <TransactionDetail t={drawer}/>}
      </Drawer>
    </>
  );
}

/* ----------------- VENDAS EM CARÊNCIA ----------------- */
function PortalCarencia({ scope }) {
  const txs = txNoEscopo(scope).filter(t => t.status === 'aprovada' || t.status === 'pendente');
  const carencia = txs.slice(0, 16).map((t, i) => {
    const d = (i * 3 + 7) % 31;
    return { ...t, diasRest: d, dataLiq: MOCK.daysAgo(-d) };
  });
  const total = carencia.reduce((s,t)=>s+t.valor,0);

  return (
    <>
      <PageHeader breadcrumb={['Vendas','Em carência']} title="Vendas em carência"
        subtitle={`${carencia.length} recebíveis aguardando liquidação · total ${MOCK.fmtBRL(total)}`}
        actions={<Button icon="zap">Antecipar todos</Button>}/>
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
        <KpiCard label="Total em carência" value={MOCK.fmtBRL(total)} icon="clock"/>
        <KpiCard label="Liquida em &lt; 7d" value={MOCK.fmtBRL(carencia.filter(t=>t.diasRest<7).reduce((s,t)=>s+t.valor,0))} deltaTone="ok" delta="próximo" icon="banknote"/>
        <KpiCard label="Liquida em 7–15d" value={MOCK.fmtBRL(carencia.filter(t=>t.diasRest>=7&&t.diasRest<15).reduce((s,t)=>s+t.valor,0))} icon="activity"/>
        <KpiCard label="Liquida em &gt; 15d" value={MOCK.fmtBRL(carencia.filter(t=>t.diasRest>=15).reduce((s,t)=>s+t.valor,0))} icon="zap"/>
      </div>
      <Card>
        <Table>
          <THead><tr>
            <TH>Venda em</TH><TH>ID</TH><TH>Aluno</TH><TH>Modalidade</TH>
            <TH align="right">Valor</TH><TH align="right">Líquido</TH>
            <TH>Liquidação prevista</TH><TH>Carência</TH>
          </tr></THead>
          <TBody>
            {carencia.map(t => (
              <TR key={t.id}>
                <TD mono className="text-ink-500">{MOCK.fmtDate(t.data)}</TD>
                <TD mono>{t.id}</TD>
                <TD className="text-ink-700">{t.aluno}</TD>
                <TD>{t.modalidadeNome}{t.parcelas>1?` · ${t.parcelas}x`:''}</TD>
                <TD align="right" mono className="font-semibold">{MOCK.fmtBRL(t.valor)}</TD>
                <TD align="right" mono>{MOCK.fmtBRL(t.valorLiquido)}</TD>
                <TD mono>{MOCK.fmtDate(t.dataLiq)}</TD>
                <TD><Badge tone={t.diasRest<3?'ok':t.diasRest<10?'info':'neutral'}>D+{t.diasRest}</Badge></TD>
              </TR>
            ))}
          </TBody>
        </Table>
      </Card>
    </>
  );
}

Object.assign(window, { PortalDashboard, PortalSimulador, PortalVendas, PortalCarencia, unidadesNoEscopo, txNoEscopo });