(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { KpiCard, Card, BarChart, ClassCard, DataTable, Badge, Avatar, BeltBadge, Button, SegmentedControl, ListItem, Alert, Icon } = DS;
const A = window.LSAdmin;

function Grid({ cols, children, gap = 16, style }) {
  return <div style={{ display: 'grid', gridTemplateColumns: cols, gap, ...style }}>{children}</div>;
}

function AdminDashboard({ go, toast }) {
  const [period, setPeriod] = React.useState('6m');
  const overdue = A.payments.filter((p) => p.status === 'atrasado');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Grid cols="repeat(auto-fit, minmax(170px, 1fr))">
        <KpiCard label="Alunos ativos" value={A.kpis.ativos} icon="users" delta="+12" trend="up" hint="vs. agosto" />
        <KpiCard label="Receita de setembro" value={A.kpis.receita} icon="wallet" delta="+3,1%" trend="up" hint="vs. agosto" />
        <KpiCard label="Inadimplência" value={A.kpis.inad} unit="%" icon="circle-alert" delta="+0,8 p.p." trend="down" hint="2 alunos" />
        <KpiCard label="Presenças hoje" value={A.kpis.hoje} icon="clipboard-check" hint="4 turmas" />
      </Grid>
      <Grid cols="minmax(0, 1.6fr) minmax(0, 1fr)">
        <Card title="Receita mensal" subtitle="Em milhares de reais" action={<SegmentedControl size="sm" options={[{ value: '6m', label: '6 meses' }, { value: '12m', label: '12 meses' }]} value={period} onChange={setPeriod} />}>
          <BarChart height={200} data={A.revenue} format={(v) => `${String(v).replace('.', ',')}k`} showValues />
        </Card>
        <Card title="Aulas de hoje" subtitle="Qua, 23 set" action={<Button size="sm" variant="ghost" iconRight="arrow-right" onClick={() => go('turmas')}>Agenda</Button>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {A.today.map((c) => (
              <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
                <span style={{ width: 52, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--text-strong)' }}>{c.time}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{c.instructor}</div>
                </div>
                {c.status === 'live' ? <Badge tone="brand" dot>Agora</Badge> : c.present ? <Badge tone="neutral" icon="users">{c.present}</Badge> : <Badge tone="neutral">{c.spots.taken}/{c.spots.total}</Badge>}
              </div>
            ))}
          </div>
        </Card>
      </Grid>
      <Grid cols="minmax(0, 1.6fr) minmax(0, 1fr)">
        <Card title="Mensalidades em atraso" subtitle={`${overdue.length} alunos · R$ 400,00`} padding={0} style={{ overflow: 'hidden' }}
          action={<div style={{ padding: '0 0 0 0' }}><Button size="sm" variant="secondary" onClick={() => go('financeiro')}>Ver financeiro</Button></div>}>
          <div style={{ padding: '0 0 4px' }}>
            <DataTable dense rows={overdue} columns={[
              { key: 'aluno', label: 'Aluno', render: (r) => <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Avatar name={r.aluno} size={28} /><span style={{ fontWeight: 600, color: 'var(--text-strong)' }}>{r.aluno}</span></div> },
              { key: 'plano', label: 'Plano' }, { key: 'venc', label: 'Vencimento' },
              { key: 'status', label: 'Status', render: (r) => <Badge status={r.status} /> },
              { key: 'valor', label: 'Valor', align: 'right' },
              { key: 'a', label: '', align: 'right', render: (r) => <Button size="sm" variant="ghost" iconLeft="send" onClick={() => toast(`Lembrete enviado para ${r.aluno}`)}>Cobrar</Button> },
            ]} />
          </div>
        </Card>
        <Card title="Aptos para graduação" subtitle="Indicados pelos professores" action={<Button size="sm" variant="ghost" onClick={() => go('graduacoes')}>Ver todos</Button>}>
          {A.promotions.map((p, i) => (
            <ListItem key={p.nome} leading={<Avatar name={p.nome} size={36} />} title={p.nome}
              subtitle={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><BeltBadge belt={p.de[0]} stripes={p.de[1]} kidsStripe={p.kids} size="sm" /><Icon name="arrow-right" size={12} /><BeltBadge belt={p.para[0]} stripes={p.para[1]} kidsStripe={p.kids} size="sm" /></span>}
              meta={`Prof. ${p.indicado.split(' ')[0]}`} divider={i < A.promotions.length - 1} />
          ))}
        </Card>
      </Grid>
    </div>
  );
}

Object.assign(window, { AdminDashboard, Grid });
})();