/* global React, Avatar, Pill */
// screens-tournament-themes.jsx — per-tournament accent palettes.
// Same dark Augusta-at-dusk foundation; only the accent color shifts to match
// the tournament you're currently in.

const TOURNAMENT_THEMES = [
  {
    id: 'players',
    short: 'PLAYERS',
    name: 'THE PLAYERS Championship',
    venue: 'TPC Sawgrass · Mar 12–15',
    accent:     '#0d7c87',       // Sawgrass teal
    accentMute: '#06343a',
    accentTint: 'rgba(13, 124, 135, 0.16)',
    note: 'Sawgrass teal. The 5th major\'s blue-green water hazard energy.',
  },
  {
    id: 'masters',
    short: 'MASTERS',
    name: 'The Masters',
    venue: 'Augusta National · Apr 9–12',
    accent:     '#1f8a5b',
    accentMute: '#0c3d28',
    accentTint: 'rgba(31, 138, 91, 0.16)',
    note: 'Augusta pine. App default; calmest of the five.',
    isDefault: true,
  },
  {
    id: 'pga',
    short: 'PGA CHAMP.',
    name: 'PGA Championship',
    venue: 'Aronimink · May 14–17',
    accent:     '#b08d2f',        // Wanamaker gold
    accentMute: '#3d2f0e',
    accentTint: 'rgba(176, 141, 47, 0.16)',
    note: 'Wanamaker gold. Aged-brass; sits warmly against the dark.',
    isLive: true,
  },
  {
    id: 'us-open',
    short: 'U.S. OPEN',
    name: 'U.S. Open',
    venue: 'Shinnecock Hills · Jun 18–21',
    accent:     '#c8102e',        // USGA red
    accentMute: '#4a0810',
    accentTint: 'rgba(200, 16, 46, 0.14)',
    note: 'USGA red. Use sparingly; reserve red for status (errors) when in this theme.',
  },
  {
    id: 'open',
    short: 'THE OPEN',
    name: 'The Open Championship',
    venue: 'Royal Birkdale · Jul 16–19',
    accent:     '#7a2e2e',        // Claret Jug burgundy
    accentMute: '#2c0e0e',
    accentTint: 'rgba(122, 46, 46, 0.18)',
    note: 'Claret Jug burgundy. Heritage; rains on Sunday.',
  },
];

// Mini "Now playing" card themed for a single tournament — the proof of concept.
function ThemePreview({ theme: t }) {
  const C2 = {
    bg: '#0a0a0a', surface: '#141414', surface2: '#1c1c1c', hairline: '#262626',
    text: '#f5f5f4', text2: '#a3a3a3', text3: '#525252',
    accent: t.accent, accentMute: t.accentMute, accentTint: t.accentTint,
  };
  return (
    <div style={{
      width: 340, height: 540, background: C2.bg, color: C2.text,
      fontFamily: "'Inter', -apple-system, system-ui, sans-serif",
      WebkitFontSmoothing: 'antialiased',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Title strip */}
      <div style={{ padding: '20px 20px 12px' }}>
        <div style={{
          font: '500 11px/16px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 11,
          color: C2.text3,
        }}>{t.short}{t.isDefault && ' · DEFAULT'}{t.isLive && ' · LIVE NOW'}</div>
        <div style={{ font: '600 20px/26px Inter', color: C2.text, marginTop: 2,
          letterSpacing: -0.01 * 20 }}>{t.name}</div>
        <div style={{ font: '400 13px/18px Inter', color: C2.text2, marginTop: 2 }}>{t.venue}</div>
      </div>

      {/* Accent stack */}
      <div style={{ padding: '0 20px 16px', display: 'flex', gap: 6 }}>
        <div style={{ flex: 1, height: 24, background: C2.accent, borderRadius: 4 }} />
        <div style={{ flex: 1, height: 24, background: C2.accentMute, borderRadius: 4 }} />
        <div style={{ flex: 1, height: 24, background: C2.accentTint, borderRadius: 4 }} />
      </div>

      {/* "Now playing" mini card */}
      <div style={{
        margin: '0 16px', background: C2.surface, borderRadius: 12, overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 16px 12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '0 8px', height: 20, borderRadius: 999,
              background: C2.accentTint, color: C2.accent,
              font: '500 10px/1 Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: C2.accent }} />
              Live
            </span>
            <span style={{
              font: '500 10px/14px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
              color: C2.text3,
            }}>Sunday final</span>
          </div>
          <div style={{ font: '600 16px/22px Inter', color: C2.text }}>{t.name}</div>
        </div>

        <div style={{
          padding: '0 16px 16px',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'baseline',
        }}>
          <div>
            <div style={{
              font: '500 10px/14px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
              color: C2.text3,
            }}>Your points</div>
            <div style={{
              font: '700 28px/32px Inter', color: C2.accent, marginTop: 2,
              fontFeatureSettings: '"tnum"',
            }}>268.1</div>
          </div>
          <div>
            <div style={{
              font: '500 10px/14px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
              color: C2.text3,
            }}>Leader</div>
            <div style={{
              font: '700 18px/22px Inter', color: C2.text, marginTop: 2,
              fontFeatureSettings: '"tnum"',
            }}>274.4</div>
          </div>
        </div>

        <button style={{
          height: 44, width: '100%', borderRadius: 0,
          background: C2.accent, color: C2.bg, border: 'none',
          font: '600 14px/1 Inter', cursor: 'pointer',
        }}>Open lineup</button>
      </div>

      {/* Caption / rationale */}
      <div style={{
        padding: '16px 20px 20px', marginTop: 'auto',
        font: '400 12px/18px Inter', color: C2.text2,
      }}>{t.note}</div>
    </div>
  );
}

Object.assign(window, { TOURNAMENT_THEMES, ThemePreview });