// Vibe Den — Mini media player (replaces former accent-color picker)
// Three buttons in the nav: Play, Pause, Stop. Currently no audio file is
// loaded; controls are wired against window.__vdAudio if/when one is set.
const { useState: useMediaState, useEffect: useMediaEffect, useRef: useMediaRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B6FF00",
  "showThreeBg": true,
  "intensity": 1,
  "fontFamily": "Inter",
  "showGlitch": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  document.documentElement.style.setProperty('--accent', t.accent);
  document.documentElement.style.setProperty(
    '--font-sans',
    t.fontFamily === 'Inter' ? 'Inter, system-ui, sans-serif' : `"${t.fontFamily}", Inter, sans-serif`
  );
  if (window.__setSceneVisible) window.__setSceneVisible(t.showThreeBg);
  window.__threeIntensity = t.intensity;
  document.documentElement.classList.toggle('no-glitch', !t.showGlitch);
}

// SVG icons — inline so they pick up currentColor and we can style strokes
// with phosphor green glow on hover, matching the tracking aesthetic.
const PlayIcon = () => (
  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">
    <path d="M4 3 L13 8 L4 13 Z" fill="currentColor" />
  </svg>
);
const PauseIcon = () => (
  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">
    <rect x="4"  y="3" width="3" height="10" fill="currentColor" />
    <rect x="9"  y="3" width="3" height="10" fill="currentColor" />
  </svg>
);
const StopIcon = () => (
  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">
    <rect x="4" y="4" width="8" height="8" fill="currentColor" />
  </svg>
);

function VibeTweaks() {
  const [t] = useMediaState(TWEAK_DEFAULTS);
  // playing: 'idle' | 'playing' | 'paused'
  const [state, setState] = useMediaState('idle');

  useMediaEffect(() => { applyTweaks(t); }, [t]);

  const audio = () => window.__vdAudio || null;

  const onPlay = () => {
    const a = audio();
    if (a) { a.play().catch(() => {}); }
    setState('playing');
  };
  const onPause = () => {
    const a = audio();
    if (a && !a.paused) a.pause();
    setState('paused');
  };
  const onStop = () => {
    const a = audio();
    if (a) { a.pause(); a.currentTime = 0; }
    setState('idle');
  };

  return (
    <div className="vd-media" data-no-track>
      {/* Mini analyzer bars — animate when playing, freeze flat when paused/stopped */}
      <div className={`vd-media-viz vd-media-viz--${state}`} aria-hidden="true">
        <span /><span /><span /><span /><span />
      </div>
      <button
        onClick={onPlay}
        data-track
        title="Play"
        aria-label="Play"
        className={`vd-media-btn ${state === 'playing' ? 'is-active' : ''}`}
      >
        <PlayIcon />
      </button>
      <button
        onClick={onPause}
        data-track
        title="Pause"
        aria-label="Pause"
        className={`vd-media-btn ${state === 'paused' ? 'is-active' : ''}`}
      >
        <PauseIcon />
      </button>
      <button
        onClick={onStop}
        data-track
        title="Stop"
        aria-label="Stop"
        className={`vd-media-btn ${state === 'idle' ? 'is-active' : ''}`}
      >
        <StopIcon />
      </button>
    </div>
  );
}

window.VibeTweaks = VibeTweaks;