// Centre de notifications — contenu partagé (web : Dialog · mobile : écran).
// Lu/non-lu local à la démo ; « Tout marquer lu » ; navigation optionnelle
// vers l'écran concerné via onNavigate(target).
// window.OryzeShared.NotificationsPanel
(function () {
  const { Button, Tag, EmptyState } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  const TONES = {
    coral: { bg: "var(--oryze-coral)", fg: "var(--oryze-coral-ink)" },
    mint: { bg: "var(--oryze-mint)", fg: "var(--oryze-mint-ink)" },
    butter: { bg: "var(--oryze-butter)", fg: "var(--oryze-butter-ink)" },
    lilac: { bg: "var(--oryze-lilac)", fg: "var(--oryze-lilac-ink)" },
    sky: { bg: "var(--oryze-sky)", fg: "var(--oryze-sky-ink)" },
  };

  function NotificationsPanel({ onNavigate, onUnreadChange }) {
    const [items, setItems] = React.useState(() => window.OryzeNotifs.map((n) => ({ ...n })));
    const unread = items.filter((n) => n.unread).length;

    const sync = (next) => {
      setItems(next);
      if (onUnreadChange) onUnreadChange(next.filter((n) => n.unread).length);
    };
    const markAll = () => sync(items.map((n) => ({ ...n, unread: false })));
    const open = (n) => {
      sync(items.map((x) => (x.id === n.id ? { ...x, unread: false } : x)));
      if (onNavigate && n.target) onNavigate(n.target);
    };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            {unread > 0 ? unread + " non lue" + (unread > 1 ? "s" : "") : "Tout est lu"}
          </span>
          {unread > 0 && <Button size="sm" variant="ghost" iconLeft={<Ic.check size={14} />} onClick={markAll}>Tout marquer lu</Button>}
        </div>

        <div style={{ border: "var(--border-thin) solid var(--line-keyline)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
          {items.map((n, i) => {
            const t = TONES[n.tone] || TONES.lilac;
            const Ico = Ic[n.icon] || Ic.bell;
            return (
              <div key={n.id} onClick={() => open(n)}
                style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "12px 14px", borderBottom: i === items.length - 1 ? "none" : "1px solid var(--line-divider)", cursor: "pointer", background: n.unread ? "var(--surface-card)" : "var(--surface-page)", opacity: n.unread ? 1 : 0.78 }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: t.bg, color: t.fg, border: "var(--border-hair) solid var(--line-keyline)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", marginTop: 2 }}>
                  <Ico size={16} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-subtle)" }}>{n.kicker}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-subtle)", marginLeft: "auto", whiteSpace: "nowrap" }}>{n.time}</span>
                    {n.unread && <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--oryze-majorelle)", border: "1px solid var(--line-keyline)", flex: "none", alignSelf: "center" }}></span>}
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, marginTop: 3 }}>{n.title}</div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2, lineHeight: 1.45 }}>{n.body}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize: 11.5, color: "var(--text-subtle)", textAlign: "center" }}>Mode démo — notifications fictives.</div>
      </div>
    );
  }

  window.OryzeShared = window.OryzeShared || {};
  window.OryzeShared.NotificationsPanel = NotificationsPanel;
})();