(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, DataTable, Badge, Avatar, Button, Chip, KpiCard, EmptyState, Dialog, Select, Input } = DS;
const A = window.LSAdmin;

function FinancePage({ toast }) {
  const [st, setSt] = React.useState('todos');
  const [loading, setLoading] = React.useState(false);
  const [pay, setPay] = React.useState(null);
  const [rows, setRows] = React.useState(A.payments);
  const change = (v) => { setSt(v); setLoading(true); setTimeout(() => setLoading(false), 500); };
  const list = rows.filter((p) => st === 'todos' || p.status === st);
  const confirm = () => { setRows((r) => r.map((x) => (x.id === pay.id ? { ...x, status: 'pago', metodo: 'Pix' } : x))); toast(`Pagamento de ${pay.aluno} registrado`); setPay(null); };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Grid cols="repeat(auto-fit, minmax(170px, 1fr))">
        <KpiCard label="Recebido em setembro" value="R$ 48.920" icon="circle-check" hint="221 pagamentos" />
        <KpiCard label="A receber" value="R$ 3.160" icon="clock" hint="14 pendentes" />
        <KpiCard label="Em atraso" value="R$ 400" icon="circle-alert" delta="2 alunos" trend="down" />
        <KpiCard label="Ticket médio" value="R$ 212" icon="receipt" delta="+R$ 6" trend="up" />
      </Grid>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
        {[['todos', 'Todos'], ['pago', 'Pagos'], ['pendente', 'Pendentes'], ['atrasado', 'Em atraso'], ['cancelado', 'Cancelados']].map(([v, l]) => (
          <Chip key={v} selected={st === v} onClick={() => change(v)} count={v === 'todos' ? rows.length : rows.filter((p) => p.status === v).length}>{l}</Chip>
        ))}
        <div style={{ flex: 1 }} />
        <Button variant="secondary" iconLeft="download">Exportar CSV</Button>
      </div>
      <Card padding={0} style={{ overflow: 'hidden' }}>
        <DataTable loading={loading} rows={list}
          empty={<EmptyState compact icon="receipt" title="Nenhuma cobrança com esse status" />}
          columns={[
            { key: 'aluno', label: 'Aluno', render: (r) => <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Avatar name={r.aluno} size={30} /><span style={{ fontWeight: 600, color: 'var(--text-strong)' }}>{r.aluno}</span></div> },
            { key: 'plano', label: 'Plano' }, { key: 'venc', label: 'Vencimento' }, { key: 'metodo', label: 'Forma' },
            { key: 'status', label: 'Status', render: (r) => <Badge status={r.status} /> },
            { key: 'valor', label: 'Valor', align: 'right', render: (r) => <span style={{ fontWeight: 600, color: 'var(--text-strong)' }}>{r.valor}</span> },
            { key: 'a', label: '', align: 'right', render: (r) => (r.status === 'atrasado' || r.status === 'pendente') ? <Button size="sm" variant="soft" onClick={() => setPay(r)}>Registrar</Button> : <Button size="sm" variant="ghost" iconLeft="file-text">Recibo</Button> },
          ]} />
      </Card>
      {pay ? (
        <Dialog open title="Registrar pagamento" description={`${pay.aluno} · ${pay.plano} · venc. ${pay.venc}`} onClose={() => setPay(null)}
          footer={<><Button variant="secondary" onClick={() => setPay(null)}>Cancelar</Button><Button iconLeft="check" onClick={confirm}>Confirmar pagamento</Button></>}>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}>
            <Input label="Valor" defaultValue={pay.valor} />
            <Select label="Forma de pagamento" options={['Pix', 'Cartão', 'Boleto', 'Dinheiro']} value="Pix" onChange={() => {}} />
          </div>
        </Dialog>
      ) : null}
    </div>
  );
}

Object.assign(window, { FinancePage });
})();