// FRM-PROC-13 · Notifications
const NotificationsScreen = ({ nav, t }) => {
  const { AppBar } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const state = t.notifState;
  const [groups, setGroups] = useState(FD.NOTIFS);
  const markAllRead = () => setGroups(gs => gs.map(g => ({ ...g, items: g.items.map(i => ({ ...i, unread: false })) })));

  return (
    <>
      <AppBar title="Notifications" align="left"
        right={<button className="fm-link" style={{ fontSize: 13, paddingRight: 10 }} onClick={markAllRead}>Mark all read</button>}/>
      <div className="fm-body">
        {state === "loading" ? (
          <div className="fm-scroll" style={{ paddingTop: 12 }}>
            {[0, 1, 2, 3].map(i => <div key={i} className="fm-sk" style={{ height: 64, borderRadius: 12, marginBottom: 12 }}/>)}
          </div>
        ) : state === "empty" ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Bell size={42}/></div>
            <div className="fm-empty-title">All caught up</div>
            <div className="fm-empty-desc">You have no notifications right now. We'll let you know when something needs your attention.</div>
          </div>
        ) : (
          <div style={{ paddingBottom: 16 }}>
            {groups.map(g => (
              <div key={g.day}>
                <div className="fm-notif-daygroup">{g.day}</div>
                {g.items.map(n => {
                  const tone = FD.NOTIF_TONE[n.kind] || FD.NOTIF_TONE.info;
                  const ToneIcon = Ic[tone.icon] || Ic.Info;
                  return (
                    <div key={n.id} className={`fm-notif ${n.unread ? "unread" : ""}`} onClick={() => nav.go(n.route, {})}>
                      <span className="fm-notif-ic" style={{ background: `var(--${tone.tone === "soil" ? "soil" : tone.tone === "success" ? "success" : tone.tone === "info" ? "info" : tone.tone === "closed" ? "status-closed" : "avocado"}-soft)`, color: `var(--${tone.tone === "soil" ? "soil" : tone.tone === "success" ? "success" : tone.tone === "info" ? "info" : tone.tone === "closed" ? "status-closed-fg" : "avocado-fg"})` }}>
                        <ToneIcon size={18}/>
                      </span>
                      <div style={{ flex: 1, minWidth: 0, paddingRight: 14 }}>
                        <div className="fm-notif-title">{n.title}</div>
                        <div className="fm-notif-body">{n.body}</div>
                        <div className="fm-notif-time">{n.time}</div>
                      </div>
                      {n.unread && <span className="fm-notif-unread-dot"/>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  );
};

window.FarmerPages = Object.assign(window.FarmerPages || {}, {
  notifications: { brandStatus: false, render: (ctx) => <NotificationsScreen {...ctx}/> },
});