/* global React */
const { useState, useEffect, useRef } = React;

/* ==========================================================
   SHARED PRIMITIVES — Playoff
   ========================================================== */

const Kicker = ({ children, color, style }) => (
  <div className="mono" style={{
    fontSize: 11, fontWeight: 500, letterSpacing: '0.16em',
    textTransform: 'uppercase', color: color || 'var(--smoke)',
    ...style,
  }}>{children}</div>
);

const Chip = ({ children, tone = 'neutral', style }) => {
  const tones = {
    neutral: { bg: 'var(--ink-2)', bd: 'var(--line)', fg: 'var(--fog)' },
    pink:    { bg: 'var(--pink-ink)', bd: 'rgba(255,61,107,0.4)', fg: 'var(--pink)' },
    yellow:  { bg: 'var(--yellow-ink)', bd: 'rgba(255,225,74,0.4)', fg: 'var(--yellow)' },
    reel:    { bg: 'var(--reel-ink)', bd: 'rgba(255,178,61,0.4)', fg: 'var(--reel)' },
    paper:   { bg: 'rgba(244,241,232,0.06)', bd: 'rgba(244,241,232,0.2)', fg: 'var(--paper)' },
  };
  const t = tones[tone];
  return (
    <span className="mono" style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px', border: `1px solid ${t.bd}`, borderRadius: 999,
      fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: t.fg, background: t.bg, ...style,
    }}>{children}</span>
  );
};

/* Playoff lockup — paper dot + two pink broadcast arcs (B2.3 mark).
   Replaces the old bracket-and-play-triangle. The dot is paper or ink,
   never pink. Arcs always pink, square caps, no rotation/gradient. */
const PlayoffLockup = ({ size = 18, color = 'var(--paper)', accent = 'var(--pink)' }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none">
      <circle cx="36" cy="60" r="12" fill={color}/>
      <path d="M 56 40 A 22 22 0 0 1 56 80" stroke={accent} strokeWidth="9" fill="none" strokeLinecap="square"/>
      <path d="M 76 28 A 34 34 0 0 1 76 92" stroke={accent} strokeWidth="9" fill="none" strokeLinecap="square"/>
    </svg>
    <span className="display" style={{
      fontWeight: 700, fontSize: size * 0.9, letterSpacing: '-0.04em', color,
    }}>PLAYOFF</span>
  </div>
);

/* ReelWordmark removed in the B2.3 rebrand (2026-05-01) — the standalone
   "Reel" italic-serif chrome wordmark went away. "Reel" stays as the
   game's name in body copy / FAQ / mode descriptions, but no longer
   appears as a chrome mark anywhere. If you need a sub-brand wordmark
   in the future, add it back here. */

/* Giphy placeholder tile — readable label, soft gradient, subtle motion */
const GIF_LABELS = [
  { label: 'CAT FALLING',      a: '#FF3D6B', b: '#2A1A3E' },
  { label: 'DISAPPOINTED DAD', a: '#4A5568', b: '#1A202C' },
  { label: 'SPONGEBOB SIGH',   a: '#FFE14A', b: '#6B4A1C' },
  { label: 'KEVIN SCOTT',      a: '#2D3748', b: '#171923' },
  { label: 'POLITICAL DEBATE', a: '#E53E3E', b: '#742A2A' },
  { label: 'DRAKE NO / YES',   a: '#D69E2E', b: '#44372A' },
  { label: 'HOMER DISAPPEARS', a: '#38A169', b: '#1C3D2A' },
  { label: 'MICHAEL SCREAM',   a: '#FF8A3D', b: '#4A2A1C' },
  { label: 'CONFUSED MATH',    a: '#9F7AEA', b: '#322659' },
  { label: 'AIR HORN',         a: '#F56565', b: '#4A1C1C' },
  { label: 'CROWD DISPERSE',   a: '#4299E1', b: '#1A365D' },
  { label: 'SLOW CLAP',        a: '#ED8936', b: '#3C2714' },
  { label: 'CORN DOG',         a: '#ECC94B', b: '#44320F' },
  { label: 'NASCAR SPIN',      a: '#E53E3E', b: '#3C1014' },
  { label: 'ROAD RAGE',        a: '#DD6B20', b: '#3C1F0F' },
  { label: 'HONDA CIVIC BOOM', a: '#3182CE', b: '#1A365D' },
  { label: 'GRANDPA RELEASE',  a: '#B7791F', b: '#3C2B0F' },
  { label: 'GOAL CELEBRATE',   a: '#48BB78', b: '#1C4532' },
];

const GiphyTile = ({ index = 0, label, selected, onClick, size = 'md', playing = false }) => {
  const data = GIF_LABELS[index % GIF_LABELS.length];
  const displayLabel = label || data.label;
  const sizes = {
    sm: { h: 84,  fs: 10, pad: 8 },
    md: { h: 124, fs: 11, pad: 10 },
    lg: { h: 180, fs: 13, pad: 12 },
  };
  const s = sizes[size];
  return (
    <button onClick={onClick} className="giphy-tile" style={{
      position: 'relative', width: '100%', height: s.h,
      background: `linear-gradient(135deg, ${data.a} 0%, ${data.b} 100%)`,
      border: selected ? '2px solid var(--pink)' : '1px solid rgba(255,255,255,0.08)',
      borderRadius: 'var(--r-md)', padding: s.pad, cursor: 'pointer',
      overflow: 'hidden', textAlign: 'left', color: 'var(--paper)',
      transition: 'transform 160ms ease, border-color 120ms',
      boxShadow: selected ? '0 0 0 4px rgba(255,61,107,0.2)' : 'none',
    }}>
      {/* Fake "motion" — diagonal sweep */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%)',
        animation: playing ? 'sweep 2.4s linear infinite' : 'none',
      }}/>
      <div style={{
        position: 'absolute', top: s.pad, left: s.pad,
        fontFamily: 'var(--font-mono)', fontSize: s.fs - 1, fontWeight: 700,
        letterSpacing: '0.08em', color: 'rgba(255,255,255,0.95)',
        textShadow: '0 1px 2px rgba(0,0,0,0.5)',
      }}>{displayLabel}</div>
      <div style={{
        position: 'absolute', bottom: s.pad, right: s.pad,
        fontFamily: 'var(--font-mono)', fontSize: 9,
        color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em',
      }}>GIF</div>
      {/* Play glyph bottom-left */}
      <div style={{
        position: 'absolute', bottom: s.pad, left: s.pad,
        width: 18, height: 18, borderRadius: 999,
        background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="8" height="8" viewBox="0 0 10 10"><polygon points="2,1 2,9 8,5" fill="white"/></svg>
      </div>
    </button>
  );
};

/* Avatar — named circle */
const Avatar = ({ name, color, size = 40, locked }) => {
  const letter = name ? name[0].toUpperCase() : '?';
  return (
    <div style={{
      position: 'relative', width: size, height: size, borderRadius: 999,
      background: color || 'var(--ink-3)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--paper)', fontWeight: 600, fontSize: size * 0.42,
      fontFamily: 'var(--font-display)', letterSpacing: '-0.02em',
      border: '2px solid var(--ink)',
      flexShrink: 0,
    }}>
      {letter}
      {locked && (
        <div style={{
          position: 'absolute', bottom: -2, right: -2,
          width: size * 0.42, height: size * 0.42,
          background: 'var(--pink)', borderRadius: 999,
          border: '2px solid var(--ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width={size * 0.2} height={size * 0.2} viewBox="0 0 10 10" fill="none">
            <rect x="2.5" y="4.5" width="5" height="4" rx="0.5" fill="var(--ink)"/>
            <path d="M 3.5 4.5 L 3.5 3.2 A 1.5 1.5 0 0 1 6.5 3.2 L 6.5 4.5" stroke="var(--ink)" strokeWidth="0.8" fill="none"/>
          </svg>
        </div>
      )}
    </div>
  );
};

/* Primary button */
const Button = ({ children, onClick, variant = 'primary', size = 'md', icon, disabled, style }) => {
  const sizes = {
    sm: { pad: '8px 14px', fs: 13, h: 36 },
    md: { pad: '12px 20px', fs: 14, h: 44 },
    lg: { pad: '16px 28px', fs: 16, h: 56 },
    xl: { pad: '20px 36px', fs: 18, h: 64 },
  };
  const s = sizes[size];
  const variants = {
    primary: {
      background: 'var(--pink)', color: 'var(--ink)',
      border: '1px solid var(--pink)', fontWeight: 700,
    },
    hero: {
      background: 'var(--yellow)', color: 'var(--ink)',
      border: '1px solid var(--yellow)', fontWeight: 700,
    },
    ghost: {
      background: 'transparent', color: 'var(--paper)',
      border: '1px solid var(--line)', fontWeight: 500,
    },
    solid: {
      background: 'var(--paper)', color: 'var(--ink)',
      border: '1px solid var(--paper)', fontWeight: 700,
    },
  };
  return (
    <button onClick={disabled ? undefined : onClick} disabled={disabled} style={{
      height: s.h, padding: s.pad, fontSize: s.fs,
      fontFamily: 'var(--font-display)', letterSpacing: '-0.01em',
      borderRadius: 'var(--r-md)', cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.4 : 1,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      transition: 'transform 120ms, opacity 120ms',
      ...variants[variant], ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >
      {icon}{children}
    </button>
  );
};

/* Room code big — the marquee text */
const RoomCode = ({ code = 'BUNS', size = 240, glow = true }) => (
  <div style={{
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: size, letterSpacing: '-0.06em', lineHeight: 0.85,
    color: 'var(--paper)',
    textShadow: glow ? '0 0 80px rgba(255,61,107,0.3)' : 'none',
    fontVariantLigatures: 'none',
  }}>{code}</div>
);

/* Export to window for other scripts */
Object.assign(window, {
  Kicker, Chip, PlayoffLockup, GiphyTile, GIF_LABELS,
  Avatar, Button, RoomCode,
});