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

function InstructorsPage({ role, toast }) {
  const [open, setOpen] = React.useState(null);
  const admin = role === 'admin';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>{A.instructors.length} professores · 11 turmas semanais</div>
        <div style={{ flex: 1 }} />
        {admin ? <Button iconLeft="user-plus" onClick={() => toast('Convite enviado por e-mail')}>Convidar professor</Button> : null}
      </div>
      <Grid cols="repeat(auto-fill, minmax(280px, 1fr))">
        {A.instructors.map((p) => (
          <Card key={p.id} interactive onClick={() => setOpen(p)} padding={20}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Avatar name={p.nome} size={56} ring="var(--belt-black)" />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--text-strong)' }}>Prof. {p.nome}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{p.cargo}</div>
              </div>
            </div>
            <BeltBadge belt={p.faixa} stripes={p.g} size="md" showLabel style={{ marginTop: 16 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
              {[['Turmas', p.turmas], ['Alunos', p.alunos], ['Frequência', `${p.freq}%`]].map(([l, v]) => <div key={l}><div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--text-strong)' }}>{v}</div><div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{l}</div></div>)}
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 14 }}>{p.esp.map((e) => <Badge key={e} size="sm">{e}</Badge>)}</div>
          </Card>
        ))}
      </Grid>
      {open ? (
        <Dialog open title={`Prof. ${open.nome}`} description={`${open.cargo} · desde ${open.desde}`} onClose={() => setOpen(null)} width={540}
          footer={<><Button variant="secondary" onClick={() => setOpen(null)}>Fechar</Button>{admin ? <Button variant="secondary" iconLeft="shield">Permissões</Button> : null}<Button iconLeft="message-circle">Mensagem</Button></>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{open.email}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>Turmas</div>
            {A.schedule.filter((s) => s.prof === open.nome).slice(0, 4).map((s) => (
              <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 12, background: 'var(--surface-sunken)' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, width: 50 }}>{s.ini}</span>
                <span style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{s.turma}</span>
                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'][s.dia]}</span>
              </div>
            ))}
          </div>
        </Dialog>
      ) : null}
    </div>
  );
}

function GuardiansPage({ role, toast }) {
  const [q, setQ] = React.useState('');
  const [open, setOpen] = React.useState(null);
  const rows = A.guardians.filter((g) => (g.nome + g.filhos.map((f) => f.nome).join(' ')).toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <Input iconLeft="search" placeholder="Buscar responsável ou aluno" value={q} onChange={(e) => setQ(e.target.value)} style={{ width: 300 }} />
        <div style={{ flex: 1 }} />
        {role === 'admin' ? <Button iconLeft="user-plus" onClick={() => toast('Convite enviado ao responsável')}>Vincular responsável</Button> : null}
      </div>
      <Card padding={0} style={{ overflow: 'hidden' }}>
        <DataTable rows={rows} onRowClick={setOpen}
          empty={<EmptyState compact icon="search-x" title="Nenhum responsável encontrado" />}
          columns={[
            { key: 'nome', label: 'Responsável', 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)' }}>{r.nome}</div><div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{r.email}</div></div></div> },
            { key: 'tel', label: 'Telefone', render: (r) => <span style={{ whiteSpace: 'nowrap' }}>{r.tel}</span> },
            { key: 'filhos', label: 'Alunos vinculados', render: (r) => <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>{r.filhos.map((f) => <div key={f.nome} style={{ display: 'flex', alignItems: 'center', gap: 8 }}><BeltBadge belt={f.faixa} kidsStripe={f.kids} stripes={f.g} size="sm" /><span style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap' }}>{f.nome}</span><span style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{f.idade} anos</span></div>)}</div> },
            { key: 'fin', label: 'Mensalidades', render: (r) => <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>{r.filhos.map((f) => <Badge key={f.nome} status={f.status} size="sm" />)}</div> },
            { key: 'acesso', label: 'Acesso ao app', render: (r) => r.acesso === 'ativo' ? <Badge tone="success" icon="smartphone">Ativo</Badge> : <Badge tone="warning" icon="mail">Convite pendente</Badge> },
          ]} />
      </Card>
      {open ? (
        <Dialog open title={open.nome} description={`${open.email} · ${open.tel}`} onClose={() => setOpen(null)} width={540}
          footer={<><Button variant="secondary" onClick={() => setOpen(null)}>Fechar</Button>{open.acesso !== 'ativo' ? <Button variant="secondary" iconLeft="send" onClick={() => { toast('Convite reenviado'); setOpen(null); }}>Reenviar convite</Button> : null}<Button iconLeft="message-circle">Mensagem</Button></>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {open.filhos.map((f) => (
              <div key={f.nome} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 14, border: '1px solid var(--border-subtle)' }}>
                <Avatar name={f.nome} size={44} />
                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ fontWeight: 600, color: 'var(--text-strong)' }}>{f.nome} <span style={{ fontWeight: 400, color: 'var(--text-muted)', fontSize: 13 }}>· {f.idade} anos · {f.turma}</span></div>
                  <BeltBadge belt={f.faixa} kidsStripe={f.kids} stripes={f.g} size="sm" showLabel />
                </div>
                <Badge status={f.status} />
              </div>
            ))}
            <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="shield-check" size={14} />O responsável vê presença, agenda, graduação, pagamentos e avisos dos alunos vinculados.</div>
          </div>
        </Dialog>
      ) : null}
    </div>
  );
}

Object.assign(window, { InstructorsPage, GuardiansPage });
})();