// ---------- Sample data ----------
const GAMES = [
  {
    id: 'gem-quest',
    name: 'Gem Quest: Legends',
    publisher: 'Northbeam Studios',
    genre: 'Match-3 Puzzle',
    initials: 'GQ',
    hue: 330, // magenta-ish
    // procedural "logo" swatches (used in game-icon)
  },
  {
    id: 'neon-dash',
    name: 'Neon Dash',
    publisher: 'Hyperloop Games',
    genre: 'Endless Runner',
    initials: 'ND',
    hue: 190,
  },
  {
    id: 'coffee-empire',
    name: 'Coffee Empire Tycoon',
    publisher: 'Drip Interactive',
    genre: 'Idle / Tycoon',
    initials: 'CE',
    hue: 30,
  },
  {
    id: 'bubble-pop',
    name: 'Bubble Pop Saga',
    publisher: 'Fizz Labs',
    genre: 'Casual Puzzle',
    initials: 'BP',
    hue: 130,
  },
  {
    id: 'tower-rush',
    name: 'Tower Rush Heroes',
    publisher: 'Ironcast',
    genre: 'Lightweight Strategy',
    initials: 'TR',
    hue: 260,
  },
];

const SESSIONS = [
  { id: 's1', gameId: 'gem-quest', stage: 4, stageName: 'Review', variants: 4, variantsReady: 3, status: 'in_progress', updated: '2m ago', brief: 'Test "hook in first 3s" vs. "reward-first" for IAP-heavy audience.' },
  { id: 's2', gameId: 'neon-dash', stage: 5, stageName: 'Export', variants: 2, variantsReady: 2, status: 'export_ready', updated: '1h ago', brief: 'Speed-run variants for TikTok prospecting campaigns.' },
  { id: 's3', gameId: 'coffee-empire', stage: 3, stageName: 'Build', variants: 4, variantsReady: 1, status: 'building', updated: 'now', brief: 'First-playable set for US launch, idle mechanic emphasis.' },
  { id: 's4', gameId: 'bubble-pop', stage: 1, stageName: 'Reference Pack', variants: 3, variantsReady: 0, status: 'awaiting_assets', updated: '12m ago', brief: 'Iterate on winter event creative — "near-miss" hook.' },
  { id: 's5', gameId: 'tower-rush', stage: 2, stageName: 'Strategy', variants: 3, variantsReady: 0, status: 'awaiting_approval', updated: '4h ago', brief: 'Tower-defense moment, low-funnel users.' },
  { id: 's6', gameId: 'gem-quest', stage: 5, stageName: 'Export', variants: 4, variantsReady: 4, status: 'exported', updated: 'Yesterday', brief: 'Baseline US variants — AppLovin v1.' },
];

const STAGES = [
  { key: 'reference', label: 'Reference Pack' },
  { key: 'strategy', label: 'Strategy' },
  { key: 'build', label: 'Build' },
  { key: 'review', label: 'Review' },
  { key: 'export', label: 'Export' },
];

// Placeholder thumbnail svg inliner — monochrome striped placeholder with label
function placeholderUrl(label, w = 200, h = 200, hue = 180) {
  const safeLabel = String(label || 'asset').toUpperCase();
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}'>
    <defs>
      <pattern id='p' patternUnits='userSpaceOnUse' width='12' height='12' patternTransform='rotate(135)'>
        <rect width='12' height='12' fill='hsl(${hue} 10% 92%)'/>
        <rect width='6' height='12' fill='hsl(${hue} 10% 88%)'/>
      </pattern>
    </defs>
    <rect width='${w}' height='${h}' fill='url(#p)'/>
    <text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle'
      font-family='ui-monospace, monospace' font-size='9' fill='hsl(${hue} 15% 40%)' letter-spacing='1'>${safeLabel}</text>
  </svg>`;
  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
}

// Stylized "game icon" for sidebar / list — colored monogram tile
function GameIcon({ game, size = 32 }) {
  if (!game) return null;
  const style = {
    width: size, height: size,
    background: `linear-gradient(135deg, hsl(${game.hue} 70% 60%), hsl(${(game.hue + 40) % 360} 70% 55%))`,
    color: '#fff',
    borderRadius: Math.round(size * 0.22),
    display: 'grid',
    placeItems: 'center',
    fontFamily: 'var(--font-mono)',
    fontWeight: 700,
    fontSize: Math.round(size * 0.36),
    letterSpacing: '-0.02em',
    flexShrink: 0,
    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -6px 12px rgba(0,0,0,0.12)',
  };
  return <div style={style}>{game.initials}</div>;
}

// Phone preview mock — shows a striped placeholder with a fake UI overlay
function PlayablePreview({ game, variant = 'A', state = 'playing', size = 'full' }) {
  if (!game) return null;
  const hue = game.hue;
  return (
    <div className="phone-screen" style={{
      background: `linear-gradient(180deg, hsl(${hue} 50% 18%), hsl(${(hue + 30) % 360} 40% 10%))`,
      position: 'absolute', inset: size === 'full' ? 6 : 10,
      borderRadius: 12,
      overflow: 'hidden',
      fontFamily: 'var(--font-mono)',
      color: '#fff',
    }}>
      {/* faint grid texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(hsla(${hue} 80% 70% / 0.08) 1px, transparent 1px), linear-gradient(90deg, hsla(${hue} 80% 70% / 0.08) 1px, transparent 1px)`,
        backgroundSize: '14px 14px',
      }} />
      {/* variant label */}
      <div style={{
        position: 'absolute', top: 10, left: 10,
        fontSize: 9, padding: '2px 6px',
        background: 'rgba(0,0,0,0.45)',
        borderRadius: 3, letterSpacing: '0.08em',
      }}>VAR {variant}</div>
      {/* game name */}
      <div style={{
        position: 'absolute', top: 10, right: 10,
        fontSize: 9, color: `hsl(${hue} 80% 80%)`, letterSpacing: '0.06em',
      }}>{game.initials}</div>

      {/* gameplay mock — procedural grid tiles / runner lanes / etc */}
      <GameplayMock game={game} variant={variant} />

      {/* CTA button */}
      <div style={{
        position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)',
        background: `hsl(${(hue + 60) % 360} 90% 55%)`,
        color: '#000', fontWeight: 700, fontSize: 11,
        padding: '7px 16px', borderRadius: 18,
        letterSpacing: '0.05em',
        boxShadow: `0 0 0 3px hsla(${(hue + 60) % 360} 90% 55% / 0.35)`,
        animation: state === 'playing' ? 'pulse 1.6s infinite' : 'none',
        whiteSpace: 'nowrap',
      }}>PLAY NOW</div>

      {/* scanlines */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.025) 2px 3px)',
        pointerEvents: 'none',
      }} />
    </div>
  );
}

function GameplayMock({ game, variant }) {
  const hue = game.hue;
  // different "mock" by genre
  if (game.genre.includes('Match-3') || game.genre.includes('Puzzle')) {
    const cols = 6, rows = 7;
    const pieces = Array.from({ length: cols * rows }, (_, i) => i);
    const gemHues = [hue, (hue + 40) % 360, (hue + 120) % 360, (hue + 200) % 360, (hue + 280) % 360];
    return (
      <div style={{
        position: 'absolute', top: '22%', bottom: '22%', left: '8%', right: '8%',
        display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 2,
      }}>
        {pieces.map((i) => {
          const h = gemHues[(i * 7 + variant.charCodeAt(0)) % gemHues.length];
          return <div key={i} style={{
            background: `hsl(${h} 80% 55%)`,
            borderRadius: 3,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.25)',
          }} />;
        })}
      </div>
    );
  }
  if (game.genre.includes('Runner')) {
    return (
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, overflow: 'hidden' }}>
        {/* lanes */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: '55%',
          background: `linear-gradient(180deg, transparent, hsl(${hue} 70% 12%))`,
        }} />
        {[0, 1, 2].map((i) => (
          <div key={i} style={{
            position: 'absolute',
            bottom: '15%',
            left: `${15 + i * 25}%`,
            width: '20%', height: '42%',
            background: `linear-gradient(180deg, transparent, hsla(${hue} 90% 60% / 0.2))`,
            border: `1px solid hsla(${hue} 90% 60% / 0.3)`,
          }} />
        ))}
        {/* character */}
        <div style={{
          position: 'absolute', bottom: '32%', left: `${40}%`,
          width: 20, height: 28,
          background: `hsl(${(hue + 60) % 360} 80% 60%)`,
          borderRadius: 4,
          boxShadow: 'inset 0 -4px 0 rgba(0,0,0,0.2)',
        }} />
        {/* obstacles */}
        <div style={{ position: 'absolute', bottom: '22%', right: '20%', width: 12, height: 16, background: `hsl(${(hue + 180) % 360} 90% 55%)`, borderRadius: 2 }} />
      </div>
    );
  }
  if (game.genre.includes('Idle') || game.genre.includes('Tycoon')) {
    return (
      <div style={{ position: 'absolute', inset: '20% 12% 18% 12%' }}>
        {[0, 1, 2, 3].map(i => (
          <div key={i} style={{
            margin: '4px 0',
            padding: '6px 8px',
            background: `hsla(${hue} 40% 25% / 0.6)`,
            borderLeft: `3px solid hsl(${hue} 80% 55%)`,
            borderRadius: 3,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            fontSize: 8,
          }}>
            <span>STATION {i + 1}</span>
            <span style={{ color: `hsl(${(hue + 60) % 360} 80% 70%)` }}>+{(i + 1) * 12}/s</span>
          </div>
        ))}
      </div>
    );
  }
  // strategy / default
  return (
    <div style={{ position: 'absolute', inset: '22% 12% 22% 12%', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
      {[...Array(9)].map((_, i) => (
        <div key={i} style={{
          background: `hsla(${hue} 50% 40% / 0.5)`,
          border: `1px solid hsla(${hue} 80% 60% / 0.4)`,
          borderRadius: 3,
          display: 'grid',
          placeItems: 'center',
          fontSize: 10,
          color: `hsl(${hue} 70% 80%)`,
        }}>
          {i % 3 === 0 ? '★' : i % 4 === 0 ? '♦' : '·'}
        </div>
      ))}
    </div>
  );
}

window.GAMES = GAMES;
window.SESSIONS = SESSIONS;
window.STAGES = STAGES;
window.GameIcon = GameIcon;
window.PlayablePreview = PlayablePreview;
window.placeholderUrl = placeholderUrl;