/* ============================================================
   Brite Bird Coach — Notifications screen (lock-screen mocks)
   ============================================================ */

const NOTIF_LEAD_MAP = {
  hot: 'mike',
  overdue: 'sarah',
  breakup: 'tom',
  // morning is just "open the app", no specific lead
};

const NotifBanner = ({ n, onTap }) => {
  const accent = {
    morning: 'var(--bb-orange)',
    hot: 'var(--bb-pink)',
    overdue: 'var(--bb-magenta)',
    breakup: 'var(--bb-ink-60)',
  }[n.kind];
  const [pressed, setPressed] = React.useState(false);
  const leadId = NOTIF_LEAD_MAP[n.kind];
  const tapHint = n.kind === 'hot' ? 'Tap to send'
    : n.kind === 'overdue' ? 'Tap to draft'
    : n.kind === 'breakup' ? 'Tap to send'
    : 'Tap to open';

  return (
    <div
      onClick={() => onTap && onTap(leadId)}
      onPointerDown={() => setPressed(true)}
      onPointerUp={() => setPressed(false)}
      onPointerLeave={() => setPressed(false)}
      style={{
        background: 'rgba(255,255,255,0.92)',
        backdropFilter: 'blur(20px)',
        borderRadius: 20,
        padding: '12px 14px',
        display: 'flex', gap: 12,
        boxShadow: '0 8px 24px rgba(0,0,0,0.18)',
        cursor: 'pointer',
        transform: pressed ? 'scale(0.98)' : 'scale(1)',
        transition: 'transform var(--dur-fast) var(--ease-out)',
      }}
    >
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: accent, color: 'white', flex: 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        <img src="shared-assets/logos/ray/core.svg" alt="" style={{ width: 30, filter: 'brightness(0) invert(1)' }} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.04em', color: 'var(--bb-plum)' }}>{n.title}</div>
          <div style={{ fontSize: 11, color: 'var(--bb-ink-60)' }}>{n.time}</div>
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--bb-plum)', marginTop: 2, lineHeight: 1.25 }}>{n.headline}</div>
        <div style={{ fontSize: 13, fontWeight: 100, color: 'var(--bb-plum)', marginTop: 2, lineHeight: 1.35 }}>{n.body}</div>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
          color: accent, marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          {tapHint} <Icon name="chevron-right" size={11} stroke={2.6} />
        </div>
      </div>
    </div>
  );
};

const NotificationsScreen = ({ onOpenLead, onGoToday }) => {
  const time = new Date(2026, 9, 8, 6, 47);
  const timeStr = time.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }).replace(' AM', '').replace(' PM', '');
  const dateStr = time.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });

  const onTap = (leadId) => {
    if (leadId && onOpenLead) onOpenLead(leadId);
    else if (onGoToday) onGoToday();
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(165deg, #2a0826 0%, #4a1442 30%, #6f1c4e 60%, var(--bb-orange) 110%)',
      color: 'white', display: 'flex', flexDirection: 'column',
      padding: '64px 14px 0',
    }}>
      {/* tiny lock icon */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12, opacity: 0.7 }}>
        <Icon name="lock" size={14} stroke={2.5} color="white" />
      </div>

      {/* time */}
      <div style={{
        fontSize: 84, fontWeight: 100, lineHeight: 0.95, letterSpacing: '-0.04em',
        textAlign: 'center', color: 'white',
      }}>{timeStr}</div>
      <div style={{
        fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', textAlign: 'center',
        marginTop: 4, opacity: 0.9,
      }}>{dateStr}</div>

      <div style={{ flex: 1 }} />

      {/* iOS-style notification group header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 4px 8px', opacity: 0.85,
      }}>
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Brite Bird Coach · {NOTIFICATIONS.length} alerts today
        </span>
        <Icon name="chevron-down" size={14} stroke={2.4} color="rgba(255,255,255,0.7)" />
      </div>

      {/* Notifications stack */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
        {NOTIFICATIONS.map(n => <NotifBanner key={n.id} n={n} onTap={onTap} />)}
      </div>

      {/* Hint */}
      <div style={{ textAlign: 'center', fontSize: 12, opacity: 0.7, marginBottom: 20, lineHeight: 1.4, padding: '0 12px' }}>
        A typical day's pings — tap any notification to jump straight to the lead.
      </div>
    </div>
  );
};

Object.assign(window, { NotificationsScreen });