// Notifications — smart priority feed (red / amber / green).
function Notifications() {
  const D = window.ZD_DATA;
  const [tab, setTab] = useState('all');
  const [items, setItems] = useState(D.notifications);

  const PRI = {
    high: { dot:'var(--red-500)',    chipBg:'var(--red-50)',    fg:'var(--red-500)' },
    med:  { dot:'var(--orange-500)', chipBg:'var(--orange-50)', fg:'var(--orange-500)' },
    low:  { dot:'var(--green-500)',  chipBg:'var(--green-50)',  fg:'var(--green-600)' },
  };
  const counts = {
    all: items.length,
    high: items.filter(i => i.priority === 'high').length,
    unread: items.filter(i => i.unread).length,
  };
  const list = items.filter(i => tab === 'all' ? true : tab === 'high' ? i.priority === 'high' : i.unread);
  const markAll = () => setItems(items.map(i => ({ ...i, unread:false })));

  return (
    <div className="screen-inner">
      <div className="statrow">
        <StatCard label="Needs action" value={counts.high} sub="High priority" icon="alert-circle" tint="red" />
        <StatCard label="Unread" value={counts.unread} sub="New since last visit" icon="mail" tint="gold" />
        <StatCard label="All clear" value={items.filter(i=>i.priority==='low').length} sub="Informational" icon="check-circle-2" tint="green" />
      </div>

      <div className="card card-pad rise">
        <div className="section-h">
          <div className="noti-tabs">
            {[['all','All',counts.all],['high','Priority',counts.high],['unread','Unread',counts.unread]].map(([id,lbl,c]) => (
              <button key={id} className={tab===id ? 'on' : ''} onClick={() => setTab(id)} style={{
                border:'none', fontFamily:'var(--font-body)', fontSize:13, fontWeight:600, cursor:'pointer',
                padding:'8px 15px', borderRadius:11,
                background: tab===id ? 'var(--gold-500)' : 'var(--surface-sunk)',
                color: tab===id ? '#fff' : 'var(--fg-3)' }}>{lbl} ({c})</button>
            ))}
          </div>
          <button className="viewall" onClick={markAll}><Icon name="check-check" size={15} /> Mark all read</button>
        </div>

        <div className="noti-list">
          {list.map(n => {
            const p = PRI[n.priority];
            return (
              <div className="noti-row" key={n.id} onClick={() => setItems(items.map(i => i.id===n.id ? {...i, unread:false} : i))}>
                <span className="noti-pri" style={{ background: p.dot }} title={n.priority} />
                <span className="noti-ic" style={{ background: p.chipBg }}><Icon name={n.icon} size={18} color={p.fg} /></span>
                <div className="noti-main">
                  <div className="noti-t">{n.title}</div>
                  <div className="noti-m">{n.meta}</div>
                </div>
                <span className="noti-when">{n.when}</span>
                {n.unread && <span className="noti-unread" />}
              </div>
            );
          })}
          {list.length === 0 && <div style={{ textAlign:'center', color:'var(--fg-3)', padding:'40px 0' }}>
            <Icon name="bell-off" size={28} color="var(--fg-4)" /><div style={{ marginTop:8 }}>Nothing here.</div>
          </div>}
        </div>
      </div>
    </div>
  );
}
window.Notifications = Notifications;