// Notifications center — iOS-native feeling stacked lockscreen-style notifications

function NotificationsScreen({ theme }) {
  const t = theme;
  const [expanded, setExpanded] = React.useState(null);

  const notifs = [
    { id: 'n1', time: 'now', app: 'SEEDEX', title: 'Your twin needs you', body: 'Read .env.local to verify the active auth provider.', kind: 'approval', accent: true },
    { id: 'n2', time: '2m ago', app: 'SEEDEX', title: 'Tests passed · auth', body: '14 / 14 · 3.2s · continuing to session handler', kind: 'success' },
    { id: 'n3', time: '18m ago', app: 'SEEDEX', title: 'Task started', body: 'Refactor the auth middleware — studio.local', kind: 'info' },
    { id: 'n4', time: '1h ago', app: 'SEEDEX', title: 'Build finished ✓', body: 'deploy-preview-482 · opened PR #391 on github.com/you/api', kind: 'success' },
    { id: 'n5', time: '2h ago', app: 'SEEDEX', title: 'Twin went idle', body: 'MBP · 16" · battery below 20%, plugged back in', kind: 'info' },
  ];

  return (
    <div style={{
      height: '100%', background: t.bg, color: t.ink, fontFamily: SEEDEX_FONTS.sans,
      padding: '62px 0 0', overflow: 'auto',
    }}>
      {/* Large editorial header */}
      <div style={{ padding: '8px 24px 20px' }}>
        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Wed · Apr 22</div>
        <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 40, letterSpacing: -0.5, marginTop: 6 }}>
          <span style={{ fontStyle: 'italic' }}>Five</span> dispatches from your twin
        </div>
        <div style={{ marginTop: 10, fontSize: 13, color: t.inkSoft, lineHeight: 1.5 }}>
          One needs a decision. The rest are just letting you know.
        </div>
      </div>

      {/* Filter tabs */}
      <div style={{ padding: '0 16px 14px', display: 'flex', gap: 6 }}>
        {['All', 'Needs you · 1', 'Progress', 'Completed'].map((f, i) => (
          <div key={i} style={{
            padding: '7px 12px', borderRadius: 99,
            fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 0.8, textTransform: 'uppercase',
            background: i === 0 ? t.ink : 'transparent',
            color: i === 0 ? t.bg : t.inkSoft,
            border: i === 0 ? 'none' : `1px solid ${t.line}`,
            cursor: 'pointer',
          }}>{f}</div>
        ))}
      </div>

      {/* Stack */}
      <div style={{ padding: '0 14px 40px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {notifs.map((n) => <Notif key={n.id} n={n} t={t} expanded={expanded === n.id} onClick={() => setExpanded(expanded === n.id ? null : n.id)} />)}
      </div>
    </div>
  );
}

function Notif({ n, t, expanded, onClick }) {
  const accent = n.accent;
  const kindColor = { approval: t.warn, success: t.accent, info: t.inkSoft }[n.kind];
  return (
    <div onClick={onClick} style={{
      padding: 14, borderRadius: 20,
      background: accent ? t.accentSoft : t.surface,
      border: `1px solid ${accent ? t.accent + '44' : t.line}`,
      cursor: 'pointer',
      transition: 'all .2s ease',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: t.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Sprout stage={1} size={22} color={t.bg} soft={t.inkSoft} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
            <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 9, letterSpacing: 1.2, color: t.inkSoft, textTransform: 'uppercase' }}>{n.app}</div>
            <div style={{ flex: 1 }} />
            <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint }}>{n.time}</div>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2, letterSpacing: -0.1, color: accent ? t.accentInk : t.ink }}>{n.title}</div>
        </div>
      </div>
      <div style={{ fontSize: 13, color: accent ? t.accentInk : t.inkSoft, marginTop: 8, marginLeft: 38, lineHeight: 1.45 }}>
        {n.body}
      </div>
      {n.kind === 'approval' && (
        <div style={{ marginTop: 12, marginLeft: 38, display: 'flex', gap: 8 }}>
          <button onClick={(e) => e.stopPropagation()} style={{ flex: 1, padding: '9px', background: t.accent, color: '#fff', border: 'none', borderRadius: 10, fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', cursor: 'pointer' }}>Allow</button>
          <button onClick={(e) => e.stopPropagation()} style={{ flex: 1, padding: '9px', background: 'transparent', color: t.accentInk, border: `1px solid ${t.accent}66`, borderRadius: 10, fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', cursor: 'pointer' }}>View</button>
        </div>
      )}
      {expanded && n.kind !== 'approval' && (
        <div style={{ marginTop: 12, marginLeft: 38, paddingTop: 10, borderTop: `1px solid ${t.line}`, fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkSoft, lineHeight: 1.6 }}>
          tap · to open on studio.local<br/>
          swipe ← to silence this task
        </div>
      )}
    </div>
  );
}

Object.assign(window, { NotificationsScreen });