(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, Button, Badge, KpiCard, BarChart, ProgressBar, SegmentedControl, Select, Input, Switch, Tabs, Dialog, Checkbox, Icon, Avatar, BeltBadge, DataTable, Alert, Chip } = DS;

const PLANS = [
  { id: 'p1', nome: 'Mensal Adulto', preco: 'R$ 220', per: '/mês', alunos: 142, desc: 'Acesso livre às turmas adultas Gi e No-Gi.', itens: ['Todas as turmas adultas', 'Open Mat de sábado', 'Biblioteca de técnicas'], ativo: true },
  { id: 'p2', nome: 'Anual Adulto', preco: 'R$ 180', per: '/mês', alunos: 38, desc: 'R$ 2.160 à vista ou 12× no cartão.', itens: ['Tudo do Mensal', '1 seminário grátis por ano', 'Desconto de 18%'], ativo: true, destaque: true },
  { id: 'p3', nome: 'Mensal Competição', preco: 'R$ 260', per: '/mês', alunos: 16, desc: 'Inclui o treino de competição do meio-dia.', itens: ['Tudo do Mensal', 'Treino de Competição', 'Acompanhamento de campeonatos'], ativo: true },
  { id: 'p4', nome: 'Mensal Kids', preco: 'R$ 180', per: '/mês', alunos: 32, desc: 'Turmas Kids 6–9 e 10–13 anos.', itens: ['2× por semana', 'App do responsável', 'Festival Kids'], ativo: true },
  { id: 'p5', nome: 'Treino Feminino', preco: 'R$ 160', per: '/mês', alunos: 20, desc: 'Turma exclusiva para mulheres, 3× por semana.', itens: ['Treino Feminino', 'Open Mat de sábado'], ativo: true },
  { id: 'p6', nome: 'Aula avulsa', preco: 'R$ 60', per: '/aula', alunos: 0, desc: 'Para visitantes e aula experimental.', itens: ['1 aula em qualquer turma'], ativo: false },
];

function PlanForm({ item, onClose, onSave }) {
  const [f, setF] = React.useState({ ...item, itensTxt: (item.itens || []).join('\n') });
  const set = (k) => (v) => setF((x) => ({ ...x, [k]: v && v.target ? v.target.value : v }));
  const ok = f.nome.trim() && f.preco.trim();
  return (
    <Dialog open title={item.id ? `Editar ${item.nome}` : 'Novo plano'} description={item.id ? 'Alterações de preço valem a partir do próximo vencimento de cada aluno.' : undefined} onClose={onClose} width={560}
      footer={<><Button variant="secondary" onClick={onClose}>Cancelar</Button><Button disabled={!ok} onClick={() => onSave({ ...f, preco: f.preco.startsWith('R$') ? f.preco : `R$ ${f.preco}`, itens: f.itensTxt.split('\n').map((x) => x.trim()).filter(Boolean) })}>Salvar plano</Button></>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}>
        <Input label="Nome do plano" value={f.nome} onChange={set('nome')} required style={{ gridColumn: 'span 2' }} />
        <Input label="Valor" value={f.preco} onChange={set('preco')} placeholder="R$ 0,00" required />
        <Select label="Cobrança" options={[{ value: '/mês', label: 'Mensal' }, { value: '/trimestre', label: 'Trimestral' }, { value: '/ano', label: 'Anual' }, { value: '/aula', label: 'Por aula' }]} value={f.per} onChange={set('per')} />
        <Input label="Descrição" multiline rows={2} value={f.desc} onChange={set('desc')} style={{ gridColumn: 'span 2' }} />
        <Input label="Benefícios (um por linha)" multiline rows={3} value={f.itensTxt} onChange={set('itensTxt')} placeholder={'Todas as turmas adultas\nOpen Mat de sábado'} style={{ gridColumn: 'span 2' }} />
        <div style={{ gridColumn: 'span 2', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Switch checked={f.ativo} onChange={set('ativo')} label="Disponível para novas matrículas" style={{ width: '100%' }} />
          <Switch checked={!!f.destaque} onChange={set('destaque')} label="Destacar como mais vantajoso" style={{ width: '100%' }} />
        </div>
      </div>
    </Dialog>
  );
}

function PlansPage({ toast }) {
  const [plans, setPlans] = React.useState(window.__lsPlans || PLANS);
  const [form, setForm] = React.useState(null);
  const [del, setDel] = React.useState(null);
  const sync = (l) => { window.__lsPlans = l; setPlans(l); };
  const save = (p) => {
    let l = p.id ? plans.map((x) => (x.id === p.id ? p : x)) : [...plans, { ...p, id: 'p' + Date.now(), alunos: 0 }];
    if (p.destaque) l = l.map((x) => ({ ...x, destaque: x.id === p.id || (!p.id && x === l[l.length - 1]) }));
    sync(l); toast(p.id ? 'Plano atualizado' : `${p.nome} criado`); setForm(null);
  };
  const remove = () => { sync(plans.filter((x) => x.id !== del.id)); toast(`${del.nome} excluído`); setDel(null); };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Grid cols="repeat(auto-fit, minmax(170px, 1fr))">
        <KpiCard label="Alunos com plano" value={plans.reduce((a, p) => a + p.alunos, 0)} icon="users" />
        <KpiCard label="Receita recorrente" value="R$ 52.480" icon="repeat" delta="+3,1%" trend="up" hint="mensal" />
        <KpiCard label="Planos ativos" value={plans.filter((p) => p.ativo).length} icon="badge-dollar-sign" hint={`de ${plans.length}`} />
      </Grid>
      <div style={{ display: 'flex', alignItems: 'center' }}><h3 style={{ fontSize: 17 }}>Planos</h3><div style={{ flex: 1 }} /><Button iconLeft="plus" onClick={() => setForm({ nome: '', preco: '', per: '/mês', desc: '', itens: [], ativo: true })}>Novo plano</Button></div>
      <Grid cols="repeat(auto-fill, minmax(280px, 1fr))">
        {plans.map((p) => (
          <Card key={p.id} variant={p.destaque ? 'dark' : 'default'} padding={20} style={{ display: 'flex', flexDirection: 'column', gap: 14, opacity: p.ativo ? 1 : 0.6 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: p.destaque ? '#fff' : 'var(--text-strong)', flex: 1 }}>{p.nome}</div>
              {p.destaque ? <Badge size="sm" tone="solid">Mais vantajoso</Badge> : null}
              {!p.ativo ? <Badge size="sm">Inativo</Badge> : null}
              <CardActions dark={p.destaque} onEdit={() => setForm(p)} onDelete={() => setDel(p)} />
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}><span style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, color: p.destaque ? '#fff' : 'var(--text-strong)', letterSpacing: '-.02em' }}>{p.preco}</span><span style={{ fontSize: 14, color: p.destaque ? 'var(--text-inverse-muted)' : 'var(--text-muted)' }}>{p.per}</span></div>
            <div style={{ fontSize: 13, color: p.destaque ? 'var(--text-inverse-muted)' : 'var(--text-muted)' }}>{p.desc}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{p.itens.map((i) => <span key={i} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, color: p.destaque ? '#fff' : 'var(--text-body)' }}><Icon name="check" size={15} color="var(--brand-primary)" />{i}</span>)}</div>
            <div style={{ flex: 1 }} />
            <div style={{ paddingTop: 12, borderTop: `1px solid ${p.destaque ? 'var(--border-inverse)' : 'var(--border-subtle)'}`, fontSize: 13, fontWeight: 600, color: p.destaque ? '#fff' : 'var(--text-strong)' }}>{p.alunos} alunos</div>
          </Card>
        ))}
      </Grid>
      {form ? <PlanForm item={form} onClose={() => setForm(null)} onSave={save} /> : null}
      {del ? <ConfirmDelete title="Excluir plano?" description={del.alunos ? `${del.alunos} alunos usam este plano. Eles continuam com o valor atual até você migrá-los.` : `${del.nome} será removido.`} onCancel={() => setDel(null)} onConfirm={remove} /> : null}
    </div>
  );
}

function ReportsPage() {
  const [per, setPer] = React.useState('6m');
  const belts = [['branca', 96], ['azul', 72], ['roxa', 34], ['marrom', 14], ['preta', 8], ['cinza', 24]];
  const maxB = Math.max(...belts.map((b) => b[1]));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <SegmentedControl size="sm" options={[{ value: '30d', label: '30 dias' }, { value: '6m', label: '6 meses' }, { value: '12m', label: '12 meses' }]} value={per} onChange={setPer} />
        <Select placeholder="Todas as turmas" options={['Adulto Gi', 'No-Gi', 'Kids', 'Treino Feminino']} value="" onChange={() => {}} size="sm" style={{ width: 200 }} />
        <div style={{ flex: 1 }} />
        <Button variant="secondary" iconLeft="download">Exportar PDF</Button>
        <Button variant="secondary" iconLeft="sheet">Exportar planilha</Button>
      </div>
      <Grid cols="repeat(auto-fit, minmax(170px, 1fr))">
        <KpiCard label="Retenção" value="91" unit="%" icon="user-check" delta="+2 p.p." trend="up" />
        <KpiCard label="Novas matrículas" value="58" icon="user-plus" delta="+14" trend="up" />
        <KpiCard label="Cancelamentos" value="19" icon="user-minus" delta="-4" trend="up" />
        <KpiCard label="Frequência média" value="2,8" unit="aulas/sem" icon="calendar-check" />
      </Grid>
      <Grid cols="minmax(0, 1.5fr) minmax(0, 1fr)">
        <Card title="Alunos ativos" subtitle="Fim de cada mês"><BarChart height={200} showValues data={[{ label: 'Abr', value: 221 }, { label: 'Mai', value: 229 }, { label: 'Jun', value: 233 }, { label: 'Jul', value: 236 }, { label: 'Ago', value: 236 }, { label: 'Set', value: 248 }]} /></Card>
        <Card title="Distribuição por faixa" subtitle="248 alunos">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {belts.map(([b, n]) => (
              <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <BeltBadge belt={b} size="sm" kidsStripe={b === 'cinza' ? 'branca' : undefined} />
                <div style={{ flex: 1, height: 8, borderRadius: 999, background: 'var(--gray-100)' }}><div style={{ width: `${(n / maxB) * 100}%`, height: '100%', borderRadius: 999, background: 'var(--ls-black)' }} /></div>
                <span style={{ width: 28, textAlign: 'right', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>{n}</span>
              </div>
            ))}
          </div>
        </Card>
      </Grid>
      <Grid cols="minmax(0, 1fr) minmax(0, 1fr)">
        <Card title="Presenças por dia da semana" subtitle="Média das últimas 8 semanas"><BarChart height={160} highlight={2} showValues data={[{ label: 'Seg', value: 92 }, { label: 'Ter', value: 78 }, { label: 'Qua', value: 96 }, { label: 'Qui', value: 81 }, { label: 'Sex', value: 70 }, { label: 'Sáb', value: 44 }]} /></Card>
        <Card title="Ocupação por turma" subtitle="Inscritos / capacidade">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['Treino de Competição', 20, 20], ['Adulto Gi — Todos os níveis', 22, 24], ['Kids 6–9 anos', 14, 16], ['Treino Feminino', 15, 18], ['No-Gi Avançado', 9, 20]].map(([t, a, b]) => <ProgressBar key={t} label={t} value={a} max={b} valueLabel={`${a}/${b}`} showValue size="sm" tone={a >= b ? 'warning' : 'dark'} />)}
          </div>
        </Card>
      </Grid>
    </div>
  );
}

const PERMS = [
  ['Ver dashboard', true, true, false], ['Gerenciar alunos', true, true, false], ['Fazer chamada', true, true, false], ['Graduar alunos', true, true, false],
  ['Notas privadas', true, true, false], ['Publicar técnicas', true, true, false], ['Financeiro e planos', true, false, false], ['Relatórios', true, false, false], ['Configurações', true, false, false],
];

function SettingsPage({ toast }) {
  const [tab, setTab] = React.useState('academia');
  const [color, setColor] = React.useState('#D52C39');
  const [n, setN] = React.useState({ aula: true, pag: true, grad: true, aviso: true });
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Tabs items={[{ value: 'academia', label: 'Academia e marca' }, { value: 'perm', label: 'Usuários e permissões' }, { value: 'pag', label: 'Pagamentos' }, { value: 'notif', label: 'Notificações' }]} value={tab} onChange={setTab} />
      {tab === 'academia' ? (
        <Grid cols="minmax(0, 1.3fr) minmax(0, 1fr)" style={{ alignItems: 'start' }}>
          <Card title="Dados da academia">
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}>
              <Input label="Nome da academia" defaultValue="Leonardo Sousa Brazilian Jiu Jitsu" style={{ gridColumn: 'span 2' }} />
              <Input label="CNPJ" defaultValue="12.345.678/0001-90" />
              <Input label="Telefone" defaultValue="(11) 3456-7890" />
              <Input label="Endereço" defaultValue="Rua do Tatame, 120 · São Paulo, SP" style={{ gridColumn: 'span 2' }} />
              <Input label="Instagram" iconLeft="at-sign" defaultValue="lsbjj" />
              <Select label="Fuso horário" options={['America/Sao_Paulo']} value="America/Sao_Paulo" onChange={() => {}} />
            </div>
          </Card>
          <Card title="Identidade visual" subtitle="Aplicada no app dos alunos e nos certificados">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 96, height: 72, borderRadius: 12, border: '1px solid var(--border-default)', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 6 }}><img src="../../assets/logo.png" alt="" style={{ maxWidth: '100%', maxHeight: '100%' }} /></div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}><Button size="sm" variant="secondary" iconLeft="upload">Trocar logo</Button><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>PNG ou SVG, fundo transparente ou branco</span></div>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-strong)', marginBottom: 8 }}>Cor principal</div>
                <div style={{ display: 'flex', gap: 10 }}>
                  {['#D52C39', '#1F4EA0', '#2C8A55', '#121212'].map((c) => <button key={c} aria-label={c} onClick={() => setColor(c)} style={{ width: 36, height: 36, borderRadius: 10, background: c, border: 0, cursor: 'pointer', boxShadow: color === c ? '0 0 0 2px #fff, 0 0 0 4px var(--ls-black)' : 'none' }} />)}
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 8 }}>Preparado para multi-academia: cada unidade define sua logo e cor.</div>
              </div>
              <div style={{ padding: 14, borderRadius: 12, background: 'var(--surface-sunken)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 12, color: 'var(--text-muted)', flex: 1 }}>Prévia do botão</span>
                <button style={{ height: 40, padding: '0 16px', borderRadius: 12, border: 0, background: color, color: '#fff', fontWeight: 600, fontFamily: 'var(--font-body)' }}>Fazer check-in</button>
              </div>
              <Button onClick={() => toast('Identidade visual salva')}>Salvar alterações</Button>
            </div>
          </Card>
        </Grid>
      ) : tab === 'perm' ? (
        <Card padding={0} style={{ overflow: 'hidden' }}>
          <DataTable rows={PERMS.map((p, i) => ({ id: i, p }))} columns={[
            { key: 'n', label: 'Permissão', render: (r) => <span style={{ fontWeight: 500, color: 'var(--text-strong)' }}>{r.p[0]}</span> },
            ...['Administrador', 'Professor', 'Recepção'].map((role, j) => ({ key: role, label: role, align: 'center', render: (r) => <div style={{ display: 'flex', justifyContent: 'center' }}><Checkbox checked={r.p[j + 1]} disabled={j === 0} onChange={() => {}} /></div> })),
          ]} />
          <div style={{ padding: 16, borderTop: '1px solid var(--border-subtle)' }}><Alert tone="info" title="Aluno e responsável">Têm acesso somente ao app, com os próprios dados e dos alunos vinculados.</Alert></div>
        </Card>
      ) : tab === 'pag' ? (
        <Grid cols="minmax(0, 1fr) minmax(0, 1fr)" style={{ alignItems: 'start' }}>
          <Card title="Recebimento">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Input label="Chave Pix" iconLeft="key-round" defaultValue="financeiro@lsbjj.com.br" />
              <Select label="Gateway de cartão e boleto" options={['Mercado Pago', 'Asaas', 'Stripe', 'PagSeguro']} value="Asaas" onChange={() => {}} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Badge tone="success" icon="circle-check">Conectado</Badge><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Última sincronização há 3 min</span></div>
            </div>
          </Card>
          <Card title="Regras de cobrança">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}><Input label="Multa por atraso" defaultValue="2%" /><Input label="Juros ao mês" defaultValue="1%" /></div>
              <Switch checked label="Lembrete 3 dias antes do vencimento" style={{ width: '100%' }} />
              <Switch checked label="Aviso no dia seguinte ao vencimento" style={{ width: '100%' }} />
              <Switch checked={false} label="Bloquear check-in após 15 dias de atraso" description="Desativado — recomendamos contato pessoal" style={{ width: '100%' }} />
            </div>
          </Card>
        </Grid>
      ) : (
        <Card title="Notificações automáticas" subtitle="Enviadas pelo app para alunos e responsáveis" style={{ maxWidth: 640 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[['aula', 'Lembrete de aula', '30 minutos antes da turma reservada'], ['pag', 'Vencimento de mensalidade', '3 dias antes e no dia'], ['grad', 'Graduação e certificado', 'Quando o professor registra a graduação'], ['aviso', 'Avisos da academia', 'Ao publicar em Comunicação']].map(([k, l, d]) => <Switch key={k} checked={n[k]} onChange={(v) => setN({ ...n, [k]: v })} label={l} description={d} style={{ width: '100%' }} />)}
          </div>
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { PlansPage, ReportsPage, SettingsPage });
})();