// CORE-09 · Notifications inbox  (route: notifications)
// In-app notification list with read/unread + deep links.
const NotificationsPage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const MD = window.MD;
  const state = (tweaks && tweaks.notifState) || "default";

  const SOFT = { destructive: "soil-soft", warning: "warning-soft", info: "info-soft", success: "success-soft" };
  const FG = { destructive: "soil", warning: "warning", info: "info", success: "success" };

  const [items, setItems] = useState(MD.NOTIFS);
  const [tab, setTab] = useState(state === "unread" ? "unread" : "all");
  useEffect(() => { if (state === "unread") setTab("unread"); else if (state === "default") setTab("all"); }, [state]);

  const empty = state === "empty";
  const unreadCount = items.filter(n => !n.read).length;
  const shown = empty ? [] : tab === "unread" ? items.filter(n => !n.read) : items;
  const markAll = () => setItems(its => its.map(n => ({ ...n, read: true })));
  const open = (n) => { setItems(its => its.map(x => x.id === n.id ? { ...x, read: true } : x)); if (n.link) window.location.href = n.link; else toast({ title: n.linkLabel || "Opened" }); };

  return (
    <div className="page" style={{ maxWidth: 880 }}>
      <div className="page-head">
        <div><h1 className="page-title">Notifications</h1><div className="page-sub">{empty ? "You're all caught up" : `${unreadCount} unread · ${items.length} total`}</div></div>
        <div className="page-actions">
          <Button variant="outline" icon={Ic.Settings} onClick={()=> { window.location.href = "CORE-04.html"; }}>Preferences</Button>
          <Button variant="outline" icon={Ic.Check} disabled={empty || unreadCount === 0} onClick={markAll}>Mark all read</Button>
        </div>
      </div>

      {!empty && (
        <div style={{ marginBottom: 16 }}>
          <Tabs value={tab} onChange={setTab} options={[{ value: "all", label: "All", count: items.length }, { value: "unread", label: "Unread", count: unreadCount }]}/>
        </div>
      )}

      <Card>
        <div className="card-body flush">
          {shown.length === 0 ? (
            <div style={{ padding: "64px 24px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <div style={{ width: 56, height: 56, borderRadius: 15, background: "var(--success-soft)", color: "var(--success)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Ic.CheckCircle size={26}/></div>
              <div><div style={{ fontSize: 17, fontWeight: 600 }}>{tab === "unread" && !empty ? "No unread notifications" : "Inbox zero"}</div><div className="muted" style={{ fontSize: 13, maxWidth: 360, margin: "5px auto 0", lineHeight: 1.5 }}>{tab === "unread" && !empty ? "You've read everything. Nice." : "New plant alerts — procurement, QC, logistics — will show up here."}</div></div>
            </div>
          ) : (
            <div className="notif-list">
              {shown.map(n => {
                const NI = Ic[n.icon] || Ic.Bell;
                return (
                  <div key={n.id} className={`notif-item ${n.read ? "" : "unread"}`} onClick={()=> open(n)}>
                    <span className="notif-ic" style={{ background: `var(--${SOFT[n.tone] || "info-soft"})`, color: `var(--${FG[n.tone] || "info"})` }}><NI size={18}/></span>
                    <div className="notif-body">
                      <div className="notif-title">{n.title}</div>
                      <div className="notif-desc">{n.desc}</div>
                      <div className="notif-meta">
                        <span>{n.actor}</span>
                        <span>·</span>
                        <span>{n.time}</span>
                        {n.link && <><span>·</span><span className="notif-link">{n.linkLabel} <Ic.ArrowRight size={11}/></span></>}
                      </div>
                    </div>
                    {!n.read && <span className="notif-dot"/>}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </Card>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { notifications: NotificationsPage });