/* Tweaks island — drives the storefront via window.CG (defined in app.js). */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "balanced",
  "texture": "medium",
  "accent": "gold",
  "signedIn": false
}/*EDITMODE-END*/;

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

  // Apply on mount + whenever a tweak changes.
  React.useEffect(() => { window.CG && window.CG.applyTheme(t.theme); }, [t.theme]);
  React.useEffect(() => { window.CG && window.CG.applyTexture(t.texture); }, [t.texture]);
  React.useEffect(() => { window.CG && window.CG.applyAccent(t.accent); }, [t.accent]);
  React.useEffect(() => { window.CG && window.CG.applySignedIn(t.signedIn); }, [t.signedIn]);

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakRadio label="Theme" value={t.theme}
        options={["dark", "parchment", "balanced"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakColor label="Accent" value={t.accent === "gold" ? "#c89a4e" : t.accent === "rust" ? "#b15a3a" : "#4f9a96"}
        options={["#c89a4e", "#b15a3a", "#4f9a96"]}
        onChange={(hex) => setTweak("accent", { "#c89a4e": "gold", "#b15a3a": "rust", "#4f9a96": "verdigris" }[hex] || "gold")} />
      <TweakSection label="Texture" />
      <TweakSelect label="Paper grain" value={t.texture}
        options={["none", "subtle", "medium", "heavy"]}
        onChange={(v) => setTweak("texture", v)} />
      <TweakSection label="Demo state" />
      <TweakToggle label="Preview signed-in (Auth0)" value={t.signedIn}
        onChange={(v) => setTweak("signedIn", v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const mount = () => {
    const el = document.getElementById("tweaks-root");
    if (el && window.ReactDOM) ReactDOM.createRoot(el).render(<CGTweaks />);
  };
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount);
  else mount();
})();