/* eslint-disable */
/* =============================================================
   NotificationsPage — list + filters + empty / loading states
   Browser build: classic <script type="text/babel">; window.NotificationsPage
   ============================================================= */
(function () {
  const { useState } = React;
  const TONES = {
    cyan:   { color: "#62DDFF", border: "rgba(98,221,255,0.42)", bg: "rgba(98,221,255,0.06)" },
    violet: { color: "#C084FF", border: "rgba(192,132,255,0.42)", bg: "rgba(192,132,255,0.06)" },
    gold:   { color: "#F8C648", border: "rgba(248,198,72,0.42)", bg: "rgba(248,198,72,0.06)" },
  };

  function NotifIcon({ name, tone, active }) {
    if (name === "dna") return <DnaMark size={22} active={active} />;
    const I = Icon[name] || Icon.bell;
    return <I size={20} />;
  }

  window.NotificationsPage = function NotificationsPage({ lang }) {
    const N = I18N[lang].notifications;
    const [filter, setFilter] = useState("all");
    const [state, setState] = useState("list"); // list | empty | loading

    /* Keep only what the USER changed in state — which rows were read —
       and read the rows themselves from I18N on every render.

       useState(N.items) copied the list once at mount, so switching to
       English left the notifications in Arabic forever: the only screen
       in the app that failed to translate, and it failed silently
       because nothing threw. Anything derived from I18N belongs in the
       render, not in state. */
    const [readIds, setReadIds] = useState([]);

    const items = (N.items || []).map((it, i) => ({
      ...it, id: i, unread: it.unread && readIds.indexOf(i) < 0,
    }));

    const shown = filter === "unread" ? items.filter((i) => i.unread) : items;
    const markAll = () => setReadIds(items.map((i) => i.id));

    return (
      <div className="page page-notif">
        <PageHeader lang={lang} title={N.title} sub={N.sub} />

        <div className="notif-toolbar">
          <div className="notif-filters">
            <button className={`tab-pill ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>{N.filter_all}</button>
            <button className={`tab-pill ${filter === "unread" ? "active" : ""}`} onClick={() => setFilter("unread")}>
              {N.filter_unread}
              {items.some((i) => i.unread) && <span className="dot-badge" />}
            </button>
          </div>
          <div className="notif-tools">
            {/* state previewer — demonstrates the empty / loading state library */}
            <div className="seg seg-sm">
              {[["list", Icon.bell], ["empty", Icon.eye], ["loading", Icon.clock]].map(([s, I]) => (
                <button key={s} className={`seg-opt ${state === s ? "active" : ""}`} onClick={() => setState(s)}><I size={13} /></button>
              ))}
            </div>
            <button className="btn-ghost set-mini" onClick={markAll}><Icon.check size={14} /> {N.mark_all}</button>
          </div>
        </div>

        {state === "loading" && (
          <div className="notif-list">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="notif-row is-skeleton">
                <div className="sk sk-icon" />
                <div className="sk-lines"><div className="sk sk-line w60" /><div className="sk sk-line w90" /></div>
                <div className="sk sk-time" />
              </div>
            ))}
          </div>
        )}

        {state === "empty" && (
          <div className="empty-state">
            <div className="empty-orb"><Icon.bell size={30} /></div>
            <h3>{N.empty_title}</h3>
            <p>{N.empty_body}</p>
          </div>
        )}

        {state === "list" && (
          <div className="notif-list">
            <div className="notif-day">{N.today}</div>
            {shown.filter((_, i) => i < 2).map((it, i) => <NotifCard key={i} it={it} />)}
            <div className="notif-day">{N.earlier}</div>
            {shown.filter((_, i) => i >= 2).map((it, i) => <NotifCard key={i} it={it} />)}
          </div>
        )}
      </div>
    );
  };

  function NotifCard({ it }) {
    const tn = TONES[it.tone] || TONES.violet;
    return (
      <div className={`notif-row ${it.unread ? "is-unread" : ""}`}>
        <span className="notif-icon" style={{ color: tn.color, borderColor: tn.border, background: tn.bg }}>
          <NotifIcon name={it.icon} tone={it.tone} active={it.unread} />
        </span>
        <div className="notif-text">
          <strong>{it.t}</strong>
          <p>{it.body}</p>
        </div>
        <div className="notif-meta">
          <span className="notif-time">{it.time}</span>
          {it.unread && <span className="notif-dot" style={{ background: tn.color, boxShadow: `0 0 8px ${tn.color}` }} />}
        </div>
      </div>
    );
  }
})();