/* Yatrefy Tweaks — Mood / Voice / Density + Slideshow */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "editorial",
  "voice": "reserved",
  "density": "spacious",
  "slideSpeed": 4,
  "slideTransition": 1
}/*EDITMODE-END*/;

function YatrefyTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Hydrate from localStorage on first mount (overrides tweak defaults if present).
  React.useEffect(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('yatrefySlideshow') || '{}');
      if (typeof saved.speed === 'number') setTweak('slideSpeed', saved.speed / 1000);
      if (typeof saved.transition === 'number') setTweak('slideTransition', saved.transition);
    } catch (e) {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Mood / voice / density → body data-attrs.
  React.useEffect(() => {
    const b = document.body;
    b.dataset.mood = t.mood;
    b.dataset.voice = t.voice;
    b.dataset.density = t.density;
  }, [t.mood, t.voice, t.density]);

  // Slideshow speed → window.SLIDE_SPEED + restart timer.
  React.useEffect(() => {
    window.SLIDE_SPEED = Math.round(t.slideSpeed * 1000);
    if (typeof window.restartSlider === 'function') window.restartSlider(window.SLIDE_SPEED);
  }, [t.slideSpeed]);

  // Transition → CSS var.
  React.useEffect(() => {
    document.documentElement.style.setProperty('--slide-transition', t.slideTransition + 's');
  }, [t.slideTransition]);

  const saveSettings = () => {
    try {
      localStorage.setItem('yatrefySlideshow', JSON.stringify({
        speed: Math.round(t.slideSpeed * 1000),
        transition: t.slideTransition,
      }));
    } catch (e) {}
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <TweakRadio
        label="Palette"
        value={t.mood}
        options={['editorial', 'midnight', 'sun']}
        onChange={(v) => setTweak('mood', v)}
      />

      <TweakSection label="Voice" />
      <TweakRadio
        label="Type"
        value={t.voice}
        options={['reserved', 'loud', 'editorial+']}
        onChange={(v) => setTweak('voice', v)}
      />

      <TweakSection label="Density" />
      <TweakRadio
        label="Pace"
        value={t.density}
        options={['compact', 'spacious', 'cinematic']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Slideshow" />
      <TweakSlider
        label="Speed"
        value={t.slideSpeed}
        min={2} max={10} step={0.5} unit="s"
        onChange={(v) => setTweak('slideSpeed', v)}
      />
      <TweakSlider
        label="Transition"
        value={t.slideTransition}
        min={0.5} max={3} step={0.1} unit="s"
        onChange={(v) => setTweak('slideTransition', v)}
      />
      <TweakButton label="Save Settings" onClick={saveSettings} />
    </TweaksPanel>
  );
}

const __twkRoot = document.getElementById('tweaks-root');
ReactDOM.createRoot(__twkRoot).render(<YatrefyTweaks />);