(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { IconButton, Icon, Button } = DS;

const SEED = [
  { id: 'n1', icon: 'circle-alert', tone: 'var(--overdue)', title: 'Mensalidade em atraso', body: 'Pedro Alves e Sofia Mendes · venceu 10/09', meta: 'Há 2 h', go: 'financeiro', unread: true },
  { id: 'n2', icon: 'award', tone: 'var(--brand-primary)', title: 'Nova indicação para graduação', body: 'Prof. Marcos indicou Mariana Duarte', meta: 'Há 3 h', go: 'graduacoes', unread: true },
  { id: 'n3', icon: 'ticket', tone: 'var(--info)', title: '4 novas inscrições no seminário', body: 'Seminário com Leonardo Sousa · 32/40 vagas', meta: 'Hoje, 09:40', go: 'eventos', unread: true },
  { id: 'n4', icon: 'user-plus', tone: 'var(--success)', title: 'Novo aluno cadastrado pelo app', body: 'Camila Freitas · Dojo Moema', meta: 'Hoje, 08:15', go: 'alunos', unread: true },
  { id: 'n5', icon: 'calendar-x', tone: 'var(--text-muted)', title: 'Turma lotada', body: 'Treino de Competição · Qua 12:00', meta: 'Ontem', go: 'turmas' },
  { id: 'n6', icon: 'heart-pulse', tone: 'var(--warning)', title: 'Anamnese pendente', body: '3 alunos sem ficha de saúde preenchida', meta: 'Seg', go: 'alunos' },
];

function NotificationsBell({ go }) {
  const [open, setOpen] = React.useState(false);
  const [items, setItems] = React.useState(SEED);
  const unread = items.filter((i) => i.unread).length;
  const click = (n) => { setItems(items.map((i) => (i.id === n.id ? { ...i, unread: false } : i))); setOpen(false); go(n.go); };
  return (
    <span style={{ position: 'relative', display: 'inline-flex' }}>
      <IconButton icon="bell" label="Notificações" variant="outline" badge={unread || undefined} onClick={() => setOpen(!open)} />
      {open ? (
        <>
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
          <div role="dialog" aria-label="Notificações" style={{ position: 'absolute', top: 48, right: 0, zIndex: 41, width: 380, maxWidth: 'calc(100vw - 32px)', background: 'var(--surface-card)', borderRadius: 16, boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-subtle)', overflow: 'hidden', animation: 'ls-fade-up var(--duration-base) var(--ease-standard)' }}>
            <div style={{ display: 'flex', alignItems: 'center', padding: '14px 16px', borderBottom: '1px solid var(--border-subtle)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--text-strong)', flex: 1 }}>Notificações</span>
              {unread ? <Button size="sm" variant="ghost" onClick={() => setItems(items.map((i) => ({ ...i, unread: false })))}>Marcar todas como lidas</Button> : <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Tudo lido</span>}
            </div>
            <div style={{ maxHeight: 420, overflowY: 'auto' }}>
              {items.map((n) => (
                <button key={n.id} onClick={() => click(n)} style={{ display: 'flex', gap: 12, width: '100%', textAlign: 'left', padding: '12px 16px', border: 0, borderBottom: '1px solid var(--border-subtle)', background: n.unread ? 'var(--gray-50)' : 'transparent', cursor: 'pointer', fontFamily: 'var(--font-body)' }}>
                  <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--surface-sunken)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={n.icon} size={17} color={n.tone} /></span>
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: 'block', fontSize: 14, fontWeight: 600, color: 'var(--text-strong)' }}>{n.title}</span>
                    <span style={{ display: 'block', fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{n.body}</span>
                    <span style={{ display: 'block', fontSize: 12, color: 'var(--text-subtle)', marginTop: 4 }}>{n.meta}</span>
                  </span>
                  {n.unread ? <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--brand-primary)', marginTop: 6, flexShrink: 0 }} /> : null}
                </button>
              ))}
            </div>
            <div style={{ padding: 10, textAlign: 'center' }}><Button size="sm" variant="ghost" iconLeft="settings" onClick={() => { setOpen(false); go('config'); }}>Configurar notificações</Button></div>
          </div>
        </>
      ) : null}
    </span>
  );
}

// Shared: edit + delete icon actions for any card.
function CardActions({ onEdit, onDelete, dark }) {
  return (
    <div style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
      {onEdit ? <IconButton icon="pencil" label="Editar" size="sm" variant={dark ? 'inverse' : 'ghost'} onClick={onEdit} /> : null}
      {onDelete ? <IconButton icon="trash-2" label="Excluir" size="sm" variant={dark ? 'inverse' : 'ghost'} onClick={onDelete} /> : null}
    </div>
  );
}

function ConfirmDelete({ title, description, onCancel, onConfirm }) {
  const { Dialog } = DS;
  return <Dialog open title={title} description={description || 'Essa ação não pode ser desfeita.'} onClose={onCancel} width={440} footer={<><Button variant="secondary" onClick={onCancel}>Cancelar</Button><Button iconLeft="trash-2" onClick={onConfirm}>Excluir</Button></>} />;
}

const waLink = (tel, text) => `https://wa.me/55${String(tel || '').replace(/\D/g, '')}${text ? `?text=${encodeURIComponent(text)}` : ''}`;

Object.assign(window, { NotificationsBell, CardActions, ConfirmDelete, waLink });
})();