/* ════════════════════════════════════════════════════════════════
   Tweaks for Haha Life
   Three expressive controls that reshape the feel:
     • Mood    — palette + image treatment + atmosphere
     • Voice   — type personality across all display + body
     • Pulse   — atmosphere density, parallax depth, ken-burns pace
═════════════════════════════════════════════════════════════════ */

const { useEffect } = React;

function HahaTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tweak state to the document each change.
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.mood = t.mood;
    root.dataset.voice = t.voice;
    root.style.setProperty('--pulse', String(t.pulse));
    root.dataset.pulseStill = t.pulse < 0.05 ? '1' : '0';
    window.__tweakState = { mood: t.mood, voice: t.voice, pulse: t.pulse };
  }, [t.mood, t.voice, t.pulse]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <TweakRadio
        label="Atmosphere"
        value={t.mood}
        options={[
          { value: 'dusk',  label: 'Dusk' },
          { value: 'frost', label: 'Frost' },
          { value: 'paper', label: 'Paper' },
        ]}
        onChange={(v) => setTweak('mood', v)}
      />

      <TweakSection label="Voice" />
      <TweakRadio
        label="Typography"
        value={t.voice}
        options={[
          { value: 'editorial',  label: 'Editorial' },
          { value: 'manuscript', label: 'Manuscript' },
          { value: 'broadcast',  label: 'Broadcast' },
        ]}
        onChange={(v) => setTweak('voice', v)}
      />

      <TweakSection label="Pulse" />
      <TweakSlider
        label="Intensity"
        value={Number(t.pulse).toFixed(2)}
        min={0}
        max={1.5}
        step={0.05}
        onChange={(v) => setTweak('pulse', Number(v))}
      />
    </TweaksPanel>
  );
}

// Mount
(function mount() {
  let mountNode = document.getElementById('tweaks-root');
  if (!mountNode) {
    mountNode = document.createElement('div');
    mountNode.id = 'tweaks-root';
    document.body.appendChild(mountNode);
  }
  ReactDOM.createRoot(mountNode).render(<HahaTweaks />);
})();