/* ===== Tweaks island — applies live tweaks to the page ===== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F89041",
  "fontStyle": "bungee",
  "visual": "full",
  "motion": true,
  "parallax": 1
}/*EDITMODE-END*/;

const ACCENT_2 = {
  "#F89041": "#4896F3",
  "#4896F3": "#F89041",
  "#F4A1C2": "#4896F3",
  "#95502B": "#F89041",
  "#B79BD4": "#F89041"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-2", ACCENT_2[t.accent] || "#4896F3");
  }, [t.accent]);

  React.useEffect(() => {
    document.body.setAttribute("data-font", t.fontStyle);
  }, [t.fontStyle]);

  React.useEffect(() => {
    // hide floating decor in minimal mode
    document.querySelectorAll(".decor").forEach((d) => {
      d.style.display = t.visual === "minimal" ? "none" : "";
    });
  }, [t.visual]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-reduce", t.motion ? "0" : "1");
  }, [t.motion]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--float-speed", t.motion ? t.parallax : 0.0001);
  }, [t.parallax, t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="品牌色 Brand" />
      <TweakColor
        label="強調色 Accent"
        value={t.accent}
        options={["#F89041", "#4896F3", "#F4A1C2", "#95502B", "#B79BD4"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="字體 Type" />
      <TweakRadio
        label="標題字體"
        value={t.fontStyle}
        options={["bungee", "groovy", "mono"]}
        onChange={(v) => setTweak("fontStyle", v)}
      />
      <TweakSection label="視覺 Visual" />
      <TweakRadio
        label="裝飾密度"
        value={t.visual}
        options={["full", "minimal"]}
        onChange={(v) => setTweak("visual", v)}
      />
      <TweakSection label="動態 Motion" />
      <TweakToggle
        label="開啟動態效果"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
      <TweakSlider
        label="漂浮速度"
        value={t.parallax}
        min={0.5}
        max={2}
        step={0.1}
        unit="×"
        onChange={(v) => setTweak("parallax", v)}
      />
    </TweaksPanel>
  );
}

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