// Histórico de Notificações — a sineta só mostra as 30 últimas e some.
// Aqui dá pra procurar depois: "quando foi que o fulano abriu aquele
// orçamento?". Busca por texto, filtro por tipo e por lidas/não lidas.

const NOTIF_TIPOS = {
  budget_viewed:    { label: 'Visualização de orçamento', cor: '#8B5CF6', icon: 'eye'   },
  budget_approved:  { label: 'Aprovação do cliente',      cor: '#10B981', icon: 'check' },
  budget_ajuste:    { label: 'Ajuste solicitado',         cor: '#F59E0B', icon: 'alert' },
  approval_pending: { label: 'Aprovação aguardando',      cor: '#F59E0B', icon: 'clock' },
  operation_update: { label: 'Atualização da operação',   cor: '#3B82F6', icon: 'zap'   },
  system:           { label: 'Sistema',                   cor: '#64748B', icon: 'bell'  },
};

const NOTIF_POR_PAGINA = 25;

function Notificacoes({ onNavigate }) {
  const [notifs, setNotifs]   = React.useState([]);
  const [total, setTotal]     = React.useState(0);
  const [loading, setLoading] = React.useState(true);
  const [pagina, setPagina]   = React.useState(0);
  const [busca, setBusca]     = React.useState('');
  const [buscaAtiva, setBuscaAtiva] = React.useState('');
  const [tipo, setTipo]       = React.useState('todos');
  const [lidas, setLidas]     = React.useState('todas');
  const [toast, setToast]     = React.useState(null);

  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  // Debounce da busca pra não bater no banco a cada tecla
  React.useEffect(() => {
    const t = setTimeout(() => { setBuscaAtiva(busca.trim()); setPagina(0); }, 300);
    return () => clearTimeout(t);
  }, [busca]);

  const carregar = React.useCallback(async () => {
    setLoading(true);
    let q = sb.from('notifications').select('*', { count: 'exact' });
    if (tipo !== 'todos')   q = q.eq('type', tipo);
    if (lidas === 'nao')    q = q.eq('read', false);
    if (lidas === 'sim')    q = q.eq('read', true);
    if (buscaAtiva) {
      const esc = buscaAtiva.replace(/[%_,]/g, '');
      q = q.or(`title.ilike.%${esc}%,message.ilike.%${esc}%`);
    }
    const de = pagina * NOTIF_POR_PAGINA;
    const { data, count } = await q.order('created_at', { ascending: false }).range(de, de + NOTIF_POR_PAGINA - 1);
    setNotifs(data || []);
    setTotal(count || 0);
    setLoading(false);
  }, [tipo, lidas, buscaAtiva, pagina]);

  React.useEffect(() => { carregar(); }, [carregar]);

  const naoLidas = notifs.filter(n => !n.read);

  const marcarUma = async (n) => {
    if (n.read) return;
    await markNotificationRead(n.id);
    setNotifs(prev => prev.map(x => x.id === n.id ? { ...x, read: true, read_at: new Date().toISOString() } : x));
  };

  const marcarTodasDaPagina = async () => {
    if (!naoLidas.length) return;
    await markAllNotificationsRead(naoLidas.map(n => n.id));
    showToast(`${naoLidas.length} marcada${naoLidas.length !== 1 ? 's' : ''} como lida${naoLidas.length !== 1 ? 's' : ''}.`);
    carregar();
  };

  const abrir = async (n) => {
    await marcarUma(n);
    if (n.link && onNavigate) onNavigate(n.link);
  };

  const totalPaginas = Math.max(1, Math.ceil(total / NOTIF_POR_PAGINA));
  const temFiltro = tipo !== 'todos' || lidas !== 'todas' || !!buscaAtiva;

  const limparFiltros = () => { setTipo('todos'); setLidas('todas'); setBusca(''); setPagina(0); };

  const fmtData = (iso) => {
    const d = new Date(iso);
    const hoje = new Date(); hoje.setHours(0, 0, 0, 0);
    const dia = new Date(d); dia.setHours(0, 0, 0, 0);
    const difDias = Math.round((hoje - dia) / 86400000);
    const hora = d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
    if (difDias === 0) return `Hoje, ${hora}`;
    if (difDias === 1) return `Ontem, ${hora}`;
    return `${d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })} · ${hora}`;
  };

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
        <div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: DS.colors.text, margin: 0, letterSpacing: '-0.02em' }}>Histórico de Notificações</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>
            Tudo que já passou pela sineta — inclusive o que você não viu na hora.
          </p>
        </div>
        {naoLidas.length > 0 && (
          <Btn variant="secondary" icon="check" onClick={marcarTodasDaPagina}>
            Marcar as {naoLidas.length} desta página
          </Btn>
        )}
      </div>

      {/* Filtros */}
      <Card style={{ padding: 14, marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 220, position: 'relative' }}>
            <label style={{ display: 'block', fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Buscar</label>
            <input value={busca} onChange={e => setBusca(e.target.value)}
              placeholder="Nome do cliente, código do orçamento, texto..."
              style={{ width: '100%', boxSizing: 'border-box', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '9px 12px 9px 34px', fontSize: 13, outline: 'none', background: '#fff', fontFamily: 'inherit', color: DS.colors.text }} />
            <div style={{ position: 'absolute', left: 12, top: 33 }}>
              <Icon name="search" size={14} color={DS.colors.textMuted} />
            </div>
          </div>

          <div style={{ minWidth: 200 }}>
            <Select label="Tipo" value={tipo} onChange={v => { setTipo(v); setPagina(0); }} options={[
              { value: 'todos', label: 'Todos os tipos' },
              ...Object.entries(NOTIF_TIPOS).map(([k, v]) => ({ value: k, label: v.label })),
            ]} />
          </div>

          <div style={{ minWidth: 150 }}>
            <Select label="Situação" value={lidas} onChange={v => { setLidas(v); setPagina(0); }} options={[
              { value: 'todas', label: 'Lidas e não lidas' },
              { value: 'nao',   label: 'Só não lidas' },
              { value: 'sim',   label: 'Só lidas' },
            ]} />
          </div>

          {temFiltro && (
            <button onClick={limparFiltros}
              style={{ padding: '9px 14px', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, background: '#fff', fontSize: 12, fontWeight: 600, color: DS.colors.textSec, cursor: 'pointer', fontFamily: 'inherit' }}>
              Limpar filtros
            </button>
          )}
        </div>
      </Card>

      {loading ? (
        <div style={{ padding: 60, textAlign: 'center' }}><Spinner /></div>
      ) : notifs.length === 0 ? (
        <Card style={{ padding: 60, textAlign: 'center' }}>
          <Icon name="bell" size={36} color={DS.colors.border} />
          <div style={{ fontSize: 14, fontWeight: 600, color: DS.colors.textSec, marginTop: 12 }}>
            {temFiltro ? 'Nada encontrado com esses filtros.' : 'Nenhuma notificação ainda.'}
          </div>
          {temFiltro && (
            <div style={{ fontSize: 12, color: DS.colors.textMuted, marginTop: 4 }}>Tente limpar os filtros ou buscar outro termo.</div>
          )}
        </Card>
      ) : (
        <>
          <div style={{ fontSize: 12, color: DS.colors.textMuted, marginBottom: 10 }}>
            {total} notificaç{total === 1 ? 'ão' : 'ões'} · página {pagina + 1} de {totalPaginas}
          </div>

          <Card style={{ padding: 0 }}>
            {notifs.map((n, i) => {
              const meta = NOTIF_TIPOS[n.type] || NOTIF_TIPOS.system;
              return (
                <div key={n.id} onClick={() => abrir(n)}
                  style={{
                    display: 'flex', gap: 14, padding: '14px 20px', alignItems: 'flex-start',
                    borderBottom: i < notifs.length - 1 ? `1px solid ${DS.colors.border}` : 'none',
                    cursor: 'pointer', background: n.read ? '#fff' : '#FFF7ED', transition: 'background 0.15s',
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                  onMouseLeave={e => e.currentTarget.style.background = n.read ? '#fff' : '#FFF7ED'}>

                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: meta.cor + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative' }}>
                    <Icon name={n.icon || meta.icon} size={15} color={meta.cor} />
                    {!n.read && <div style={{ position: 'absolute', top: -2, right: -2, width: 9, height: 9, borderRadius: '50%', background: DS.colors.danger, border: '1.5px solid #fff' }} />}
                  </div>

                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, color: DS.colors.text, fontWeight: n.read ? 500 : 700, lineHeight: 1.4 }}>{n.title}</div>
                    {n.message && <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 3, lineHeight: 1.45 }}>{n.message}</div>}
                    <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 6, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 11, fontWeight: 700, color: meta.cor, background: meta.cor + '14', padding: '2px 8px', borderRadius: 20 }}>{meta.label}</span>
                      <span style={{ fontSize: 11, color: DS.colors.textMuted }}>{fmtData(n.created_at)}</span>
                      {n.read && n.read_at && (
                        <span style={{ fontSize: 11, color: DS.colors.textMuted }}>· lida em {new Date(n.read_at).toLocaleDateString('pt-BR')}</span>
                      )}
                    </div>
                  </div>

                  {n.link && (
                    <div style={{ alignSelf: 'center', flexShrink: 0 }}>
                      <Icon name="chevronRight" size={14} color={DS.colors.textMuted} />
                    </div>
                  )}
                </div>
              );
            })}
          </Card>

          {totalPaginas > 1 && (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: 16 }}>
              <Btn variant="secondary" size="sm" disabled={pagina === 0} onClick={() => setPagina(p => Math.max(0, p - 1))}>Anterior</Btn>
              <span style={{ fontSize: 12, color: DS.colors.textSec, padding: '0 8px' }}>{pagina + 1} / {totalPaginas}</span>
              <Btn variant="secondary" size="sm" disabled={pagina >= totalPaginas - 1} onClick={() => setPagina(p => p + 1)}>Próxima</Btn>
            </div>
          )}
        </>
      )}

      {toast && <Toast message={toast.msg} onClose={() => setToast(null)} />}
    </div>
  );
}

Object.assign(window, { Notificacoes, NOTIF_TIPOS });