// Arcade-themed palette switcher for v4. Replaces sun/moon toggle.
// Clicking the pacman icon opens a dropdown of classic video-game palettes.
// Each palette applies to --accent / --accent-2 / --accent-3 / --ok CSS vars.

const V4_PALETTES = {
  'pacman': {
    label: 'pacman',
    accent: '#ffcc00', accent2: '#2121ff', accent3: '#00ffde', ok: '#00ffde',
    soft: 'rgba(255,204,0,0.14)', dim: 'rgba(255,204,0,0.38)',
    icon: ({ size = 16, c1, c2 }) => (
      <svg viewBox="0 0 20 20" width={size} height={size}>
        <path d="M10 2a8 8 0 1 1 -6.93 12l6.93 -4 0 -8z M10 2l0 8l6.93 -4A8 8 0 0 0 10 2z" fill={c1} />
      </svg>
    ),
  },
  'invaders': {
    label: 'space invaders',
    accent: '#00ff66', accent2: '#ffffff', accent3: '#ff2c6d', ok: '#00ff66',
    soft: 'rgba(0,255,102,0.14)', dim: 'rgba(0,255,102,0.38)',
    icon: ({ size = 16, c1 }) => (
      <svg viewBox="0 0 12 10" width={size} height={size} shapeRendering="crispEdges">
        {/* 12x10 pixel invader */}
        {[
          '..X......X..',
          '...X....X...',
          '..XXXXXXXX..',
          '.XX.XXXX.XX.',
          'XXXXXXXXXXXX',
          'X.XXXXXXXX.X',
          'X.X......X.X',
          '...XX..XX...',
        ].map((row, y) => [...row].map((ch, x) =>
          ch === 'X' ? <rect key={`${x}-${y}`} x={x} y={y+1} width="1" height="1" fill={c1} /> : null
        ))}
      </svg>
    ),
  },
  'dkong': {
    label: 'donkey kong',
    accent: '#e52521', accent2: '#fbd000', accent3: '#8b4513', ok: '#f0a000',
    soft: 'rgba(229,37,33,0.14)', dim: 'rgba(229,37,33,0.38)',
    icon: ({ size = 16, c1, c2 }) => (
      <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges">
        {/* Barrel */}
        <rect x="3" y="4" width="10" height="8" fill={c2} />
        <rect x="3" y="6" width="10" height="1" fill={c1} />
        <rect x="3" y="9" width="10" height="1" fill={c1} />
        <rect x="3" y="4" width="1" height="8" fill={c1} />
        <rect x="12" y="4" width="1" height="8" fill={c1} />
      </svg>
    ),
  },
  'digdug': {
    label: 'dig dug',
    accent: '#ffffff', accent2: '#ff2c6d', accent3: '#00adef', ok: '#43b047',
    soft: 'rgba(255,255,255,0.14)', dim: 'rgba(255,255,255,0.38)',
    icon: ({ size = 16, c1, c2 }) => (
      <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges">
        {/* Pooka-ish round goggle creature */}
        <circle cx="8" cy="9" r="5" fill={c2} />
        <rect x="4" y="6" width="8" height="2" fill={c1} />
        <rect x="5" y="6" width="2" height="2" fill="#000" />
        <rect x="9" y="6" width="2" height="2" fill="#000" />
      </svg>
    ),
  },
  'qbert': {
    label: 'q*bert',
    accent: '#ff7a2a', accent2: '#b464ff', accent3: '#39ff88', ok: '#ffd24a',
    soft: 'rgba(255,122,42,0.16)', dim: 'rgba(255,122,42,0.4)',
    icon: ({ size = 16, c1, c2, c3 }) => (
      <svg viewBox="0 0 16 16" width={size} height={size}>
        {/* Isometric cube stack */}
        <polygon points="8,2 13,5 8,8 3,5" fill={c3} />
        <polygon points="3,5 8,8 8,13 3,10" fill={c1} />
        <polygon points="13,5 8,8 8,13 13,10" fill={c2} />
      </svg>
    ),
  },
  'mspacman': {
    label: 'ms. pac-man',
    accent: '#ffcc00', accent2: '#ff69b4', accent3: '#ff2c6d', ok: '#00ffde',
    soft: 'rgba(255,105,180,0.16)', dim: 'rgba(255,105,180,0.42)',
    icon: ({ size = 16, c1, c2 }) => (
      <svg viewBox="0 0 20 20" width={size} height={size}>
        <path d="M10 2a8 8 0 1 1 -6.93 12l6.93 -4 0 -8z M10 2l0 8l6.93 -4A8 8 0 0 0 10 2z" fill={c1} />
        {/* Bow */}
        <polygon points="4,3 7,1 7,5" fill={c2} />
        <polygon points="10,3 7,1 7,5" fill={c2} />
        <circle cx="7" cy="3" r="1" fill={c1} />
      </svg>
    ),
  },
  'frogger': {
    label: 'frogger',
    accent: '#43b047', accent2: '#ffde4a', accent3: '#049cd8', ok: '#43b047',
    soft: 'rgba(67,176,71,0.16)', dim: 'rgba(67,176,71,0.42)',
    icon: ({ size = 16, c1, c2 }) => (
      <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges">
        {/* Pixel frog */}
        <rect x="5" y="4" width="2" height="2" fill={c1} />
        <rect x="9" y="4" width="2" height="2" fill={c1} />
        <rect x="5" y="5" width="1" height="1" fill="#000" />
        <rect x="10" y="5" width="1" height="1" fill="#000" />
        <rect x="4" y="6" width="8" height="4" fill={c1} />
        <rect x="3" y="8" width="2" height="2" fill={c1} />
        <rect x="11" y="8" width="2" height="2" fill={c1} />
        <rect x="5" y="10" width="2" height="1" fill={c1} />
        <rect x="9" y="10" width="2" height="1" fill={c1} />
      </svg>
    ),
  },
};

function applyV4Palette(key) {
  const p = V4_PALETTES[key] || V4_PALETTES['pacman'];
  const root = document.documentElement;
  root.style.setProperty('--accent', p.accent);
  root.style.setProperty('--accent-2', p.accent2);
  root.style.setProperty('--accent-3', p.accent3);
  root.style.setProperty('--ok', p.ok);
  root.style.setProperty('--accent-soft', p.soft);
  root.style.setProperty('--accent-dim', p.dim);
}

function ArcadeThemeSwitcher({ palette, setPalette }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onEsc = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onEsc);
    };
  }, [open]);

  const current = V4_PALETTES[palette] || V4_PALETTES['pacman'];
  const CurIcon = current.icon;

  return (
    <div className="arcade-switcher" ref={ref}>
      <button
        className="icon-btn arcade-trigger"
        onClick={() => setOpen(o => !o)}
        aria-label={`Theme: ${current.label}. Click to change.`}
        title={`theme: ${current.label}`}
      >
        <CurIcon size={18} c1={current.accent} c2={current.accent2} c3={current.accent3} />
      </button>

      {open && (
        <div className="arcade-menu" role="menu">
          <div className="arcade-menu-head">select theme</div>
          {Object.entries(V4_PALETTES).map(([k, p]) => {
            const Ico = p.icon;
            return (
              <button
                key={k}
                className={'arcade-menu-item ' + (palette === k ? 'on' : '')}
                onClick={() => { setPalette(k); setOpen(false); }}
                role="menuitem"
              >
                <span className="arcade-menu-icon">
                  <Ico size={16} c1={p.accent} c2={p.accent2} c3={p.accent3} />
                </span>
                <span className="arcade-menu-label">{p.label}</span>
                <span className="arcade-menu-swatches">
                  <span className="arcade-sw" style={{ background: p.accent }} />
                  <span className="arcade-sw" style={{ background: p.accent2 }} />
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.V4_PALETTES = V4_PALETTES;
window.applyV4Palette = applyV4Palette;
window.ArcadeThemeSwitcher = ArcadeThemeSwitcher;