(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, DataTable, Badge, Avatar, BeltBadge, Button, Chip, Input, Select, Dialog, ProgressBar, EmptyState, SegmentedControl, Icon } = DS;
const A = window.LSAdmin;
const TURMAS = ['Adulto Gi', 'Iniciantes', 'Competição', 'No-Gi', 'Treino Feminino', 'Kids 6–9', 'Kids 10–13'];
const ADULT = ['branca', 'azul', 'roxa', 'marrom', 'preta'];
const KIDS = ['branca', 'cinza', 'amarela', 'laranja', 'verde'];
const EMPTY = { nome: '', email: '', tel: '', nasc: '', dojo: 'd1', turma: 'Adulto Gi', plano: 'Mensal Adulto', faixa: 'branca', g: 0, resp: '', emNome: '', emRel: '', emTel: '' };

function NewStudentDialog({ onClose, onSave }) {
  const [f, setF] = React.useState(EMPTY);
  const [err, setErr] = React.useState({});
  const kids = f.turma.startsWith('Kids');
  const set = (k) => (v) => setF((x) => ({ ...x, [k]: v && v.target ? v.target.value : v }));
  const save = () => {
    const e = {};
    if (!f.nome.trim()) e.nome = 'Informe o nome do aluno.';
    if (!kids && !/.+@.+\..+/.test(f.email)) e.email = 'Informe um e-mail válido.';
    if (kids && !f.resp.trim()) e.resp = 'Alunos kids precisam de um responsável.';
    setErr(e);
    if (!Object.keys(e).length) onSave(f);
  };
  return (
    <Dialog open title="Novo aluno" description="O aluno recebe um convite por e-mail para acessar o app." onClose={onClose} width={640}
      footer={<><Button variant="secondary" onClick={onClose}>Cancelar</Button><Button iconLeft="user-plus" onClick={save}>Cadastrar aluno</Button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Section title="Dados pessoais">
          <Input label="Nome completo" required value={f.nome} onChange={set('nome')} error={err.nome} style={{ gridColumn: 'span 2' }} />
          <Input label="E-mail" required={!kids} iconLeft="mail" value={f.email} onChange={set('email')} error={err.email} />
          <Input label="Celular" iconLeft="phone" value={f.tel} onChange={set('tel')} placeholder="(11) 90000-0000" />
          <Input label="Data de nascimento" type="date" value={f.nasc} onChange={set('nasc')} />
          {kids ? <Input label="Responsável" required iconLeft="users" value={f.resp} onChange={set('resp')} error={err.resp} placeholder="Nome do responsável" /> : <div />}
        </Section>
        <Section title="Matrícula">
          <Select label="Dojo" options={A.dojos.map((d) => ({ value: d.id, label: d.nome }))} value={f.dojo} onChange={set('dojo')} iconLeft="map-pin" />
          <Select label="Turma" options={TURMAS} value={f.turma} onChange={(v) => setF((x) => ({ ...x, turma: v, faixa: 'branca', g: 0, plano: v.startsWith('Kids') ? 'Mensal Kids' : v === 'Treino Feminino' ? 'Treino Feminino' : 'Mensal Adulto' }))} />
          <Select label="Plano" options={['Mensal Adulto', 'Anual Adulto', 'Mensal Competição', 'Mensal Kids', 'Treino Feminino', 'Aula avulsa']} value={f.plano} onChange={set('plano')} />
          <div style={{ fontSize: 12, color: 'var(--text-muted)', alignSelf: 'end', paddingBottom: 12 }}>Professor responsável: <b style={{ color: 'var(--text-strong)' }}>Prof. {(A.dojos.find((d) => d.id === f.dojo) || {}).prof}</b></div>
        </Section>
        <Section title="Contato de emergência">
          <Input label="Nome" value={f.emNome} onChange={set('emNome')} placeholder="Quem avisar em caso de emergência" />
          <Input label="Telefone" iconLeft="phone" value={f.emTel} onChange={set('emTel')} placeholder="(11) 90000-0000" />
          <Select label="Parentesco" placeholder="Selecione" options={['Mãe', 'Pai', 'Esposa', 'Marido', 'Irmão(ã)', 'Amigo(a)', 'Outro']} value={f.emRel} onChange={set('emRel')} />
          <div style={{ fontSize: 12, color: 'var(--text-muted)', alignSelf: 'end', paddingBottom: 12 }}>A anamnese completa fica no perfil do aluno.</div>
        </Section>
        <Section title="Graduação atual">
          <Select label="Faixa" options={(kids ? KIDS : ADULT).map((b) => ({ value: b, label: `Faixa ${b}` }))} value={f.faixa} onChange={set('faixa')} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>Graus</span>
            <SegmentedControl fullWidth options={['0', '1', '2', '3', '4']} value={String(f.g)} onChange={(v) => set('g')(Number(v))} />
          </div>
          <div style={{ gridColumn: 'span 2', padding: 14, borderRadius: 12, background: 'var(--surface-sunken)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <BeltBadge belt={f.faixa} stripes={f.g} kidsStripe={kids && f.faixa !== 'branca' ? 'branca' : undefined} size="md" showLabel />
          </div>
        </Section>
      </div>
    </Dialog>
  );
}

function Section({ title, children }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-subtle)', marginBottom: 10 }}>{title}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}>{children}</div>
    </div>
  );
}

function StudentsPage({ role, onOpen, toast = () => {}, dojoFilter }) {
  const [filter, setFilter] = React.useState('Todos');
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState([]);
  const [turma, setTurma] = React.useState('');
  const [dojo, setDojo] = React.useState(dojoFilter || '');
  const [rows0, setRows0] = React.useState(A.students);
  const [novo, setNovo] = React.useState(false);
  const [fresh, setFresh] = React.useState(null);
  React.useEffect(() => { const h = () => setNovo(true); window.addEventListener('ls-new-student', h); return () => window.removeEventListener('ls-new-student', h); }, []);
  React.useEffect(() => { if (dojoFilter !== undefined) setDojo(dojoFilter || ''); }, [dojoFilter]);
  const F = { Todos: () => true, 'Em atraso': (s) => s.status === 'atrasado', Kids: (s) => s.turma.startsWith('Kids'), Trancados: (s) => s.matricula === 'trancado' };
  const rows = rows0.filter(F[filter]).filter((s) => !turma || s.turma === turma).filter((s) => !dojo || s.dojo === dojo).filter((s) => s.nome.toLowerCase().includes(q.toLowerCase()));
  const add = (f) => {
    const s = { id: Date.now(), nome: f.nome.trim(), email: f.email || `resp.${f.nome.split(' ')[0].toLowerCase()}@email.com`, faixa: f.faixa, g: f.g, kids: f.turma.startsWith('Kids') && f.faixa !== 'branca' ? 'branca' : undefined, turma: f.turma, dojo: f.dojo, freq: 0, status: 'pendente', matricula: 'ativo', ultima: '—', novo: true, tel: f.tel };
    if (f.emNome) A.health[s.id] = { sangue: '', plano: '', cond: [], lesoes: '', cirurgias: '', meds: '', alergias: '', liberacao: false, obs: '', emNome: f.emNome, emRel: f.emRel, emTel: f.emTel, updated: '' };
    A.students.unshift(s); setRows0([...A.students]); setNovo(false); setFresh(s.id); setFilter('Todos'); setQ(''); setTurma(''); setDojo('');
    toast(`${s.nome} cadastrado · convite enviado`);
    setTimeout(() => setFresh(null), 4000);
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <Input iconLeft="search" placeholder="Buscar por nome" value={q} onChange={(e) => setQ(e.target.value)} style={{ width: 240 }} />
        <Select placeholder="Todos os dojos" iconLeft="map-pin" options={A.dojos.map((d) => ({ value: d.id, label: d.nome }))} value={dojo} onChange={setDojo} style={{ width: 190 }} />
        <Select placeholder="Todas as turmas" options={TURMAS} value={turma} onChange={setTurma} style={{ width: 180 }} />
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {Object.keys(F).map((k) => <Chip key={k} selected={filter === k} onClick={() => setFilter(k)} count={rows0.filter(F[k]).length}>{k}</Chip>)}
        </div>
        <div style={{ flex: 1 }} />
        {sel.length ? <Button variant="secondary" iconLeft="send">Enviar aviso ({sel.length})</Button> : null}
      </div>
      <Card padding={0} style={{ overflow: 'hidden' }}>
        <DataTable selectable selected={sel} onSelectChange={setSel} rows={rows} onRowClick={onOpen}
          empty={<EmptyState compact icon="search-x" title="Nenhum aluno encontrado" description="Ajuste a busca ou os filtros." action={<Button size="sm" variant="secondary" onClick={() => { setQ(''); setFilter('Todos'); setTurma(''); setDojo(''); }}>Limpar filtros</Button>} />}
          columns={[
            { key: 'nome', label: 'Aluno', render: (r) => <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><Avatar name={r.nome} size={32} /><div><div style={{ fontWeight: 600, color: 'var(--text-strong)', display: 'flex', alignItems: 'center', gap: 8 }}>{r.nome}{r.id === fresh ? <Badge size="sm" tone="success">Novo</Badge> : null}</div><div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{r.email}</div></div></div> },
            { key: 'faixa', label: 'Faixa', render: (r) => <BeltBadge belt={r.faixa} stripes={r.g} kidsStripe={r.kids} size="sm" /> },
            { key: 'dojo', label: 'Dojo', render: (r) => <span style={{ whiteSpace: 'nowrap' }}>{A.dojoName(r.dojo)}</span> },
            { key: 'turma', label: 'Turma', render: (r) => <span style={{ whiteSpace: 'nowrap' }}>{r.turma}</span> },
            { key: 'freq', label: 'Frequência', render: (r) => <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: 110 }}><ProgressBar value={r.freq} size="sm" tone={r.freq < 60 ? 'warning' : 'dark'} style={{ flex: 1 }} /><span style={{ fontSize: 12, fontWeight: 600, width: 30 }}>{r.freq}%</span></div> },
            { key: 'status', label: 'Mensalidade', render: (r) => <Badge status={r.status} /> },
            { key: 'wa', label: '', align: 'right', render: (r) => r.tel ? <a href={waLink(r.tel)} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()} title="WhatsApp" style={{ display: 'inline-flex', width: 32, height: 32, alignItems: 'center', justifyContent: 'center', borderRadius: 10, color: 'var(--success)' }}><Icon name="message-circle" size={18} /></a> : null },
          ]} />
      </Card>
      {novo ? <NewStudentDialog onClose={() => setNovo(false)} onSave={add} /> : null}
    </div>
  );
}

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