/* Tweaks panel — only background music toggle, per user request */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "music": false,
  "musicVolume": 45
}/*EDITMODE-END*/;

function HoldSpaceTweaks() {
  const { TweaksPanel, useTweaks, TweakSection, TweakToggle, TweakSlider } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const audio = document.getElementById('bgm');
    const btn = document.querySelector('.audio-toggle');
    if (!audio) return;
    if (t.music) {
      audio.volume = 0;
      audio.play().catch(()=>{});
      // ramp volume
      const target = (t.musicVolume ?? 45) / 100;
      let v = 0;
      const id = setInterval(() => {
        v = Math.min(target, v + 0.02);
        audio.volume = v;
        if (v >= target) clearInterval(id);
      }, 30);
      btn && btn.classList.remove('muted');
    } else {
      audio.pause();
      btn && btn.classList.add('muted');
    }
  }, [t.music, t.musicVolume]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere">
        <TweakToggle
          label="Background music"
          hint="Quiet score · plays on loop"
          value={t.music}
          onChange={(v) => setTweak('music', v)}
        />
        <TweakSlider
          label="Volume"
          min={0} max={100} step={1}
          value={t.musicVolume}
          onChange={(v) => setTweak('musicVolume', v)}
          disabled={!t.music}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<HoldSpaceTweaks />);