/* CLOTH STUDIO — Tweaks bridge (React → window.CLOTH) */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#5aa6d6",
  "font": "oswald",
  "density": "dense",
  "speed": 1,
  "grain": true,
  "depth": true,
  "parallax": true,
  "mono": false
}/*EDITMODE-END*/;

const DENSITY_MAP = { minimal: 0.45, studio: 0.75, dense: 1 };

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

  // let the in-page DARK/LIGHT chrome toggle keep the panel in sync
  useEffect(() => {
    window.CLOTH_syncTheme = () => {
      const cur = window.CLOTH && window.CLOTH.getTheme();
      if (cur) setTweak("theme", cur);
    };
    return () => { delete window.CLOTH_syncTheme; };
  }, [setTweak]);

  // apply every tweak whenever state changes
  useEffect(() => {
    if (!window.CLOTH) return;
    window.CLOTH.setTheme(t.theme);
    window.CLOTH.setAccent(t.accent);
    window.CLOTH.setFont(t.font);
    window.CLOTH.setDensity(DENSITY_MAP[t.density] ?? 0.75);
    window.CLOTH.setSpeed(t.speed);
    window.CLOTH.setGrain(t.grain);
    window.CLOTH.setBlur(t.depth);
    window.CLOTH.setParallax(t.parallax);
    window.CLOTH.setMono(t.mono);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakColor label="Accent" value={t.accent}
        options={["#5aa6d6", "#c2603f", "#9a8bd0", "#7e9b6a"]}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Type" />
      <TweakSelect label="Display font" value={t.font}
        options={["syne", "archivo", "oswald"]}
        onChange={(v) => setTweak("font", v)} />

      <TweakSection label="The field" />
      <TweakRadio label="Density" value={t.density}
        options={["minimal", "studio", "dense"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakSlider label="Travel speed" value={t.speed} min={0.5} max={2} step={0.1}
        onChange={(v) => setTweak("speed", v)} />
      <TweakToggle label="Film grain" value={t.grain}
        onChange={(v) => setTweak("grain", v)} />
      <TweakToggle label="Depth blur" value={t.depth}
        onChange={(v) => setTweak("depth", v)} />
      <TweakToggle label="Cursor parallax" value={t.parallax}
        onChange={(v) => setTweak("parallax", v)} />
      <TweakToggle label="Monochrome photos" value={t.mono}
        onChange={(v) => setTweak("mono", v)} />
    </TweaksPanel>
  );
}

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