// Notifications / Inbox screen

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

  const filters = ['All', 'Unread', 'Insights', 'Activity', 'Billing'];

  const filtered = items.filter(n => {
    if (filter === 'All') return true;
    if (filter === 'Unread')   return n.unread;
    if (filter === 'Insights') return n.kind === 'insight' || n.kind === 'rec';
    if (filter === 'Activity') return n.kind === 'tx' || n.kind === 'alert';
    if (filter === 'Billing')  return n.kind === 'billing' || n.kind === 'system';
    return true;
  });

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

  const unreadCount = items.filter(n => n.unread).length;

  const markAllRead = () => setItems(prev => prev.map(n => ({ ...n, unread: false })));
  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="Inbox" onBack={onBack}
        action={
          unreadCount > 0
            ? <button onClick={markAllRead} style={{ background:'transparent', border:'none', color: accent, fontSize: 11.5, fontWeight: 600, fontFamily: FONTS.ui, cursor:'pointer', padding: 0, whiteSpace:'nowrap' }}>Mark all read</button>
            : null
        }/>

      {/* Summary strip */}
      <div style={{ padding: '0 16px 14px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          padding: '14px 16px',
          background: theme.surface2, border: `0.5px solid ${theme.line}`,
          borderRadius: 16,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 19,
            background: unreadCount > 0 ? accent : theme.surface3,
            color: unreadCount > 0 ? '#fff' : theme.textMute,
            display:'flex', alignItems:'center', justifyContent:'center',
            position: 'relative', flexShrink: 0,
          }}>
            <Ico.bell size={17}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, color: theme.text, fontWeight: 500 }}>
              {unreadCount > 0 ? `${unreadCount} new ${unreadCount === 1 ? 'notification' : 'notifications'}` : 'All caught up'}
            </div>
            <div style={{ fontSize: 11.5, color: theme.textDim, marginTop: 2 }}>
              {unreadCount > 0 ? 'Tap any item to mark as read' : 'No unread items in your inbox'}
            </div>
          </div>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ padding: '0 16px 14px', display:'flex', gap: 6, overflowX:'auto' }}>
        {filters.map(f => (
          <button key={f} onClick={() => setFilter(f)} style={{
            padding: '7px 13px', borderRadius: 999,
            background: filter === f ? theme.text : 'transparent',
            color:      filter === f ? theme.bg   : theme.text,
            border: `0.5px solid ${filter === f ? theme.text : theme.line2}`,
            fontSize: 12, fontFamily: FONTS.ui, fontWeight: 500,
            cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
          }}>{f}</button>
        ))}
      </div>

      {/* 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 }}>No notifications match this filter.</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 });