(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, Avatar, BeltBadge, Button, SegmentedControl, Input, Badge, Icon, KpiCard } = DS;
const A = window.LSAdmin;

function AttendancePage({ toast }) {
  const [marks, setMarks] = React.useState({ 1: 'p', 2: 'p', 3: 'p', 4: 'p', 8: 'f', 9: 'p' });
  const [saving, setSaving] = React.useState(false);
  const [tech, setTech] = React.useState('Raspagem de gancho · Passagem toreando');
  const present = Object.values(marks).filter((v) => v === 'p').length;
  const set = (id, v) => setMarks((m) => ({ ...m, [id]: v }));
  const save = () => { setSaving(true); setTimeout(() => { setSaving(false); toast(`Presença salva · ${present} alunos`); }, 700); };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.7fr) minmax(0, 1fr)', gap: 16, alignItems: 'start' }}>
      <Card padding={0} style={{ overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 20, borderBottom: '1px solid var(--border-subtle)', flexWrap: 'wrap' }}>
          <div style={{ width: 64, height: 64, borderRadius: 14, background: 'var(--ls-black)', color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>19:00</span><span style={{ fontSize: 11, opacity: 0.6 }}>20:30</span>
          </div>
          <div style={{ flex: 1, minWidth: 180 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-strong)' }}>Adulto Gi — Todos os níveis</div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Prof. Leonardo Sousa · Tatame 1 · Qua, 23 set</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: 'var(--text-strong)', lineHeight: '32px' }}>{present}<span style={{ fontSize: 15, color: 'var(--text-muted)', fontWeight: 500 }}>/{A.roster.length}</span></div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>presentes</div>
          </div>
        </div>
        {A.roster.map((s, i) => {
          const m = marks[s.id];
          return (
            <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', borderBottom: i < A.roster.length - 1 ? '1px solid var(--border-subtle)' : 0, background: m === 'p' ? 'transparent' : m === 'f' ? 'var(--gray-50)' : 'transparent' }}>
              <Avatar name={s.nome} size={36} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-strong)' }}>{s.nome}</div>
                <BeltBadge belt={s.faixa} stripes={s.g} size="sm" style={{ marginTop: 4 }} />
              </div>
              {s.id === 2 ? <Badge size="sm" tone="info" icon="qr-code">Check-in pelo app</Badge> : null}
              <SegmentedControl size="sm" options={[{ value: 'p', label: 'Presente' }, { value: 'f', label: 'Falta' }]} value={m || ''} onChange={(v) => set(s.id, v)} />
            </div>
          );
        })}
      </Card>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Card title="Plano de aula" subtitle="Registrado no histórico da turma">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Input label="Técnicas ensinadas" value={tech} onChange={(e) => setTech(e.target.value)} iconLeft="book-open" />
            <Input label="Observações" multiline rows={3} placeholder="Ex.: foco em pegadas de manga, drill 3×5 min" />
          </div>
        </Card>
        <Button size="lg" fullWidth iconLeft="check" loading={saving} onClick={save}>Salvar presença</Button>
        <Button variant="secondary" fullWidth iconLeft="check-check" onClick={() => setMarks(Object.fromEntries(A.roster.map((s) => [s.id, 'p'])))}>Marcar todos como presentes</Button>
      </div>
    </div>
  );
}

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