// Notifications / Inbox screen

function NotificationsScreen({ theme, accent, onBack }) {
  const [items, setItems] = React.useState(NOTIFICATIONS);

  // Group by group key, preserving order
  const grouped = items.reduce((acc, n) => {
    if (!acc[n.group]) acc[n.group] = [];
    acc[n.group].push(n);
    return acc;
  }, {});

  const markRead = (id) => setItems(prev => prev.map(n => n.id === id ? { ...n, unread: false } : n));

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Notifications" onBack={onBack}/>

      {/* Groups */}
      {Object.keys(grouped).length === 0 ? (
        <div style={{ padding: '48px 16px', textAlign:'center' }}>
          <div style={{ fontFamily: FONTS.display, fontSize: 16, color: theme.text, marginBottom: 6 }}>Nothing here</div>
          <div style={{ fontSize: 12.5, color: theme.textDim }}>You're all caught up.</div>
        </div>
      ) : (
        Object.entries(grouped).map(([group, list]) => (
          <div key={group} style={{ padding: '8px 16px 0' }}>
            <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>{group}</SectionLabel>
            <Card theme={theme} padded={false}>
              {list.map((n, i) => (
                <NotifRow key={n.id} n={n} theme={theme} accent={accent}
                  last={i === list.length - 1}
                  onClick={() => markRead(n.id)}/>
              ))}
            </Card>
          </div>
        ))
      )}
    </Screen>
  );
}

function NotifRow({ n, theme, accent, last, onClick }) {
  const Icon = Ico[n.icon] || Ico.bell;
  const tone = n.accent ? accent : theme.textDim;
  return (
    <button onClick={onClick} style={{
      width:'100%', textAlign:'left',
      display: 'flex', gap: 12, alignItems:'flex-start',
      padding: '13px 16px',
      background: n.unread ? `${accent}08` : 'transparent',
      borderTop: 'none', borderLeft: 'none', borderRight: 'none',
      borderBottom: last ? 'none' : `0.5px solid ${theme.line}`,
      cursor: 'pointer', color: theme.text,
      position: 'relative',
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 10,
        background: n.accent ? `${accent}15` : theme.surface2,
        color: tone,
        display:'flex', alignItems:'center', justifyContent:'center',
        flexShrink: 0,
      }}><Icon size={16}/></div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', gap: 8 }}>
          <div style={{ fontSize: 13.5, color: theme.text, fontWeight: n.unread ? 600 : 500, lineHeight: 1.25 }}>{dhText(n.title)}</div>
          <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, letterSpacing: 0.4, whiteSpace:'nowrap', flexShrink: 0 }}>{n.when}</div>
        </div>
        <div style={{ fontSize: 12, color: theme.textDim, marginTop: 3, lineHeight: 1.45 }}>{dhText(n.body)}</div>
      </div>

      {n.unread && (
        <div style={{
          width: 7, height: 7, borderRadius: 4, background: accent,
          position: 'absolute', top: 18, right: 12,
        }}/>
      )}
    </button>
  );
}

Object.assign(window, { NotificationsScreen });