// notifications.jsx — Launch announcements (events, seminars, milestones)

const { useState: useStateN, useEffect: useEffectN } = React;
const { Card, Chip, TopBar, DisplayHeading } = window.LAUNCH_SCREENS_1;

// Sample announcements — these would come from a feed in production
const NOTIFICATIONS = [
  {
    id: 'n-001',
    kind: 'event',
    pinned: true,
    title: 'A&R Open Mic · Live This Friday',
    body: 'Vintage Music Group A&R will live-evaluate 10 tracks this Friday at 7 PM ET. RSVP to lock your slot.',
    cta: 'RSVP',
    when: 'MAY 19 · 7:00 PM ET',
    age: '2H AGO',
    accent: true,
    icon: '🎙',
  },
  {
    id: 'n-002',
    kind: 'seminar',
    title: 'Nashville Songwriters Seminar',
    body: 'Three-day intensive at our Nashville HQ. PG Banker leads songwriting workshops with Jay Brunswick on A&R panels.',
    cta: 'LEARN MORE',
    when: 'JUN 4–6 · IN PERSON',
    age: 'YESTERDAY',
    icon: '🎼',
  },
  {
    id: 'n-003',
    kind: 'milestone',
    title: "You unlocked a new A&R credit",
    body: '+100 XP since last credit. You now have 3 unlocked credits ready to spend on an evaluation.',
    cta: 'USE CREDIT',
    age: '3D AGO',
    accent: true,
    icon: '🚀',
  },
  {
    id: 'n-004',
    kind: 'event',
    title: 'Mix Engineering Workshop · Jay Brunswick',
    body: 'Live mix breakdown session. Bring a stem, get it mixed in real time on the broadcast.',
    cta: 'RESERVE',
    when: 'MAY 28 · 6:00 PM ET',
    age: '5D AGO',
    icon: '🎧',
  },
  {
    id: 'n-005',
    kind: 'announcement',
    title: 'New on Launch · Vintage A&R partnership',
    body: 'Vintage Music Group is now scoring tracks directly through Launch. 100 XP = 1 free evaluation.',
    age: 'LAST WEEK',
    icon: '★',
  },
];

const UNREAD_IDS = ['n-001', 'n-002', 'n-003'];

// ────────────────────────────────────────────────────────
// NotificationsBell — icon button with unread dot, for top bars
// ────────────────────────────────────────────────────────
function NotificationsBell({ theme, onClick }) {
  const unread = UNREAD_IDS.length;
  return (
    <div style={{ position: 'relative' }}>
      <button onClick={onClick} style={{
        width: 38, height: 38, borderRadius: 12,
        background: theme.surface, border: `1px solid ${theme.border}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', padding: 0,
      }}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M4 14h12l-1.5-2V8a4.5 4.5 0 00-9 0v4L4 14zM8 17a2 2 0 004 0"
            stroke={theme.text} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
        </svg>
      </button>
      {unread > 0 && (
        <div style={{
          position: 'absolute', top: -4, right: -4,
          minWidth: 18, height: 18, borderRadius: 99,
          background: theme.accent, color: theme.onAccent,
          fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '0 5px', border: `2px solid ${theme.bg}`,
        }}>{unread}</div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────
// NotificationsScreen — full announcements feed
// ────────────────────────────────────────────────────────
function NotificationsScreen({ theme, onBack }) {
  const pinned = NOTIFICATIONS.filter(n => n.pinned);
  const rest = NOTIFICATIONS.filter(n => !n.pinned);

  const NotificationCard = ({ n }) => {
    const isUnread = UNREAD_IDS.includes(n.id);
    return (
      <Card theme={theme} style={{
        padding: 14, position: 'relative',
        borderColor: n.accent ? theme.accent : theme.border,
        background: n.pinned
          ? `linear-gradient(160deg, ${theme.accent}15 0%, ${theme.surface} 100%)`
          : theme.surface,
      }}>
        {isUnread && (
          <div style={{
            position: 'absolute', top: 14, right: 14,
            width: 8, height: 8, borderRadius: 99, background: theme.accent,
          }} />
        )}
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: n.accent ? theme.accent : theme.surface2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, flexShrink: 0,
          }}>{n.icon}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4,
            }}>
              <Chip theme={theme} accent={n.accent}>
                {n.pinned ? '★ PINNED · ' : ''}{n.kind.toUpperCase()}
              </Chip>
              <span style={{
                fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
                letterSpacing: 0.8, fontWeight: 700,
              }}>{n.age}</span>
            </div>
            <div style={{
              fontFamily: theme.fontDisplay, fontSize: 18, color: theme.text,
              letterSpacing: 0.2, lineHeight: 1.05, textTransform: 'uppercase',
              marginTop: 4,
            }}>{n.title}</div>
            <div style={{
              fontFamily: theme.fontBody, fontSize: 13, color: theme.muted,
              marginTop: 6, lineHeight: 1.5,
            }}>{n.body}</div>
            {n.when && (
              <div style={{
                marginTop: 10, padding: '6px 10px', borderRadius: 8,
                background: theme.surface2, display: 'inline-block',
                fontFamily: theme.fontMono, fontSize: 10, color: theme.text,
                letterSpacing: 0.5, fontWeight: 700,
              }}>📅 {n.when}</div>
            )}
            {n.cta && (
              <div style={{ marginTop: 12 }}>
                <button style={{
                  padding: '9px 14px', borderRadius: 99,
                  background: n.accent ? theme.accent : 'transparent',
                  color: n.accent ? theme.onAccent : theme.text,
                  border: n.accent ? 'none' : `1px solid ${theme.border}`,
                  fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
                  letterSpacing: 1, cursor: 'pointer', textTransform: 'uppercase',
                }}>{n.cta} →</button>
              </div>
            )}
          </div>
        </div>
      </Card>
    );
  };

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button style={{
          padding: '8px 12px', borderRadius: 99,
          background: 'transparent', border: `1px solid ${theme.border}`,
          color: theme.text, cursor: 'pointer',
          fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
          letterSpacing: 0.8, textTransform: 'uppercase',
        }}>MARK ALL READ</button>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
          letterSpacing: 1, fontWeight: 700,
        }}>★ FROM LAUNCH</div>
        <DisplayHeading theme={theme} size={36}>NOTIFICATIONS</DisplayHeading>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
          letterSpacing: 0.5, fontWeight: 700, marginTop: 4,
        }}>{UNREAD_IDS.length} UNREAD · {NOTIFICATIONS.length} TOTAL</div>
      </div>

      {/* Pinned */}
      {pinned.length > 0 && (
        <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
            letterSpacing: 1, fontWeight: 600, marginBottom: 10,
          }}>PINNED · DON'T MISS</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {pinned.map(n => <NotificationCard key={n.id} n={n} />)}
          </div>
        </div>
      )}

      {/* Recent */}
      <div style={{ padding: `${theme.gap + 4}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10,
        }}>RECENT</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rest.map(n => <NotificationCard key={n.id} n={n} />)}
        </div>
      </div>

      {/* Settings link */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <button style={{
          width: '100%', padding: 14, borderRadius: 14,
          background: 'transparent', border: `1px dashed ${theme.border}`,
          color: theme.muted, cursor: 'pointer',
          fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700,
          letterSpacing: 1, textTransform: 'uppercase',
        }}>⚙ NOTIFICATION PREFERENCES →</button>
      </div>
    </div>
  );
}

window.LAUNCH_SCREENS_11 = { NotificationsBell, NotificationsScreen, UNREAD_IDS };