// Tweaks for the WMS deck. React is used ONLY for this control surface —
// the slides themselves stay static, directly-editable HTML.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "revealSpeed": 320,
  "motion": true,
  "tone": "warm"
}/*EDITMODE-END*/;

const TONES = {
  warm:  { bg: "#F7F5EF", panel: "#FCFBF7" },
  cool:  { bg: "#F1F3F5", panel: "#FAFBFC" },
  paper: { bg: "#FBFAF7", panel: "#FFFFFF" }
};

function DeckTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = document.documentElement;

  React.useEffect(() => {
    root.style.setProperty("--reveal-step", t.revealSpeed + "ms");
    root.style.setProperty("--reveal-dur", Math.round(t.revealSpeed * 2) + "ms");
  }, [t.revealSpeed]);

  React.useEffect(() => {
    root.toggleAttribute("data-anim", !!t.motion);
    // re-trigger the current slide's reveal so the change is visible immediately
    if (window.__deckReveal) window.__deckReveal();
  }, [t.motion]);

  React.useEffect(() => {
    const tone = TONES[t.tone] || TONES.warm;
    root.style.setProperty("--bg", tone.bg);
    root.style.setProperty("--bg-panel", tone.panel);
  }, [t.tone]);

  return (
    <TweaksPanel>
      <TweakSection label="Motion" />
      <TweakToggle label="Entrance animation" value={t.motion}
        onChange={(v) => setTweak("motion", v)} />
      <TweakSlider label="Reveal speed" value={t.revealSpeed} min={140} max={520} step={20} unit="ms"
        onChange={(v) => setTweak("revealSpeed", v)} />
      <TweakSection label="Surface" />
      <TweakRadio label="Background tone" value={t.tone}
        options={["warm", "cool", "paper"]}
        onChange={(v) => setTweak("tone", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<DeckTweaks />);