// mb-notifs.jsx — Notification center (bell)

const NOTIF_META = {
  status:   { ic: "bike",    bg: "var(--accent-50)", fg: "var(--accent)" },
  turbo:    { ic: "bolt",    bg: "var(--turbo-grad)", fg: "#fff", fill: true },
  agenda:   { ic: "clock",   bg: "var(--accent-50)", fg: "var(--accent)" },
  promo:    { ic: "bolt",    bg: "var(--turbo-grad)", fg: "#fff", fill: true },
  novolar:  { ic: "home",    bg: "var(--accent-50)", fg: "var(--accent)" },
  cashback: { ic: "coin",    bg: "var(--cb-bg)", fg: "var(--cb)" },
  lead:     { ic: "headset", bg: "var(--accent-50)", fg: "var(--accent)" },
};

function NotificationsCenter({ list, setList, onBack, onToast }) {
  const groups = ["Recentes", "Hoje", "Esta semana"];
  const markAll = () => {
    setList(l => l.map(n => ({ ...n, unread: false })));
    API.me.markNotifsRead().catch(() => {});
    onToast("Tudo marcado como lido");
  };
  const tap = (id) => setList(l => l.map(n => n.id === id ? { ...n, unread: false } : n));
  const anyUnread = list.some(n => n.unread);

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      <TopBar title="Notificações" onBack={onBack} right={anyUnread ? (
        <button onClick={markAll} style={{ background: "none", border: "none", cursor: "pointer", font: "700 12.5px var(--ui)", color: "var(--accent)", whiteSpace: "nowrap", paddingRight: 4 }}>Marcar lidas</button>
      ) : null} />
      <div style={{ flex: 1, overflow: "auto", padding: "8px 16px 28px" }}>
        {groups.map(g => {
          const items = list.filter(n => n.group === g);
          if (!items.length) return null;
          return (
            <div key={g} style={{ marginBottom: 18 }}>
              <div style={{ font: "700 12px var(--ui)", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".04em", padding: "0 2px 10px" }}>{g}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map(n => {
                  const m = NOTIF_META[n.kind];
                  return (
                    <button key={n.id} onClick={() => tap(n.id)} style={{ display: "flex", gap: 12, alignItems: "flex-start", textAlign: "left", cursor: "pointer", border: "none", background: n.unread ? "var(--surface)" : "transparent", borderRadius: 16, padding: 13, boxShadow: n.unread ? "0 3px 12px rgba(16,18,45,.06)" : "none" }}>
                      <div style={{ width: 42, height: 42, borderRadius: 12, background: m.bg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                        <Icon name={m.ic} size={21} color={m.fg} fill={m.fill ? "#fff" : "none"} sw={1.8} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                          <span style={{ flex: 1, font: "700 14px var(--ui)", color: "var(--text)" }}>{n.title}</span>
                          <span style={{ font: "500 11px var(--ui)", color: "var(--muted)", whiteSpace: "nowrap" }}>{n.time}</span>
                          {n.unread && <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--accent)", flexShrink: 0 }} />}
                        </div>
                        <div style={{ font: "500 12.5px var(--ui)", color: "var(--muted)", marginTop: 3, lineHeight: 1.45 }}>{n.text}</div>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          );
        })}
        <div style={{ textAlign: "center", font: "500 12px var(--ui)", color: "var(--muted)", opacity: .6, marginTop: 8 }}>Você está em dia ✨</div>
      </div>
    </div>
  );
}

const unreadCount = (l) => (l || NOTIFS).filter(n => n.unread).length;

Object.assign(window, { NotificationsCenter, unreadCount });