// Tweaks panel for Klassieker.html
// Mounts a small floating control panel (when the host toggles edit mode on)
// that exposes light/dark, accent color, density and corner radius.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#f5a623",
  "density": "regular",
  "radius": 10,
  "showTopbar": true
}/*EDITMODE-END*/;

function ApplyTweaks({ tweaks }) {
  React.useEffect(() => {
    const body = document.body;
    if (tweaks.theme === "light") body.classList.add("light");
    else body.classList.remove("light");

    const root = document.documentElement;
    root.style.setProperty("--brand-orange", tweaks.accent);
    root.style.setProperty("--brand-orange-deep", tweaks.accent);

    // Density: scale --section-y and --pad-x via attribute
    body.setAttribute("data-density", tweaks.density);

    // Radius
    document.querySelectorAll(".btn, .book-frame, .nav-burger, .mobile-menu-close")
      .forEach(el => { el.style.borderRadius = tweaks.radius + "px"; });

    // Topbar visibility
    const topbar = document.querySelector(".topbar");
    if (topbar) topbar.style.display = tweaks.showTopbar ? "" : "none";
  }, [tweaks]);
  return null;
}

function KlassiekerTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <ApplyTweaks tweaks={t} />
      <TweaksPanel title="Tweaks">
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={[
            { value: "dark", label: "Donker" },
            { value: "light", label: "Licht" }
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweaksPanel>
    </>
  );
}

const __twkRoot = document.createElement("div");
document.body.appendChild(__twkRoot);
ReactDOM.createRoot(__twkRoot).render(<KlassiekerTweaksApp />);