/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */
/* =====================================================================
   Tweaks island for Empire Entertainment.
   Drives the vanilla page via document attributes + CSS variables so the
   on-page controls and the Tweaks panel stay in sync.
   ===================================================================== */
const _ls = (k, d) => { try { return localStorage.getItem(k) ?? d; } catch (e) { return d; } };

// gold-tone presets → {gold, lite, deep}
const GOLD_PRESETS = {
  "#BF9744": { gold: "#BF9744", lite: "#E7CE8F", deep: "#9C7A2E" }, // champagne
  "#D4A93A": { gold: "#D4A93A", lite: "#F1D778", deep: "#A9831F" }, // classic gold
  "#C28B6B": { gold: "#C28B6B", lite: "#E7C2A8", deep: "#9C6A4D" }, // rosé gold
  "#9CA1A6": { gold: "#9CA1A6", lite: "#D9DCDF", deep: "#73787D" }, // silver-forward
};
const ANIM = { "Ruhig": 1.35, "Standard": 1, "Lebhaft": 0.6 };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "Standbild",
  "dark": false,
  "gold": "#BF9744",
  "anim": "Standard"
}/*EDITMODE-END*/;

function initFromPage() {
  const o = { ...TWEAK_DEFAULTS };
  const hv = _ls("ee_hero", "standbild");
  o.heroVariant = hv.charAt(0).toUpperCase() + hv.slice(1);
  o.dark = _ls("ee_theme", "light") === "dark";
  return o;
}

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

  React.useEffect(() => {
    // theme
    const theme = t.dark ? "dark" : "light";
    root.setAttribute("data-theme", theme);
    try { localStorage.setItem("ee_theme", theme); } catch (e) {}
  }, [t.dark]);

  React.useEffect(() => {
    // hero variant
    const v = (t.heroVariant || "Standbild").toLowerCase();
    if (window.EE_setHeroVariant) window.EE_setHeroVariant(v);
    else { const h = document.querySelector("#hero"); if (h) h.setAttribute("data-variant", v); }
  }, [t.heroVariant]);

  React.useEffect(() => {
    // gold tone
    const p = GOLD_PRESETS[t.gold] || GOLD_PRESETS["#BF9744"];
    root.style.setProperty("--gold", p.gold);
    root.style.setProperty("--gold-lite", p.lite);
    root.style.setProperty("--gold-deep", p.deep);
    root.style.setProperty("--metal-gold",
      `linear-gradient(135deg, ${p.lite} 0%, ${p.gold} 45%, ${p.deep} 55%, ${p.lite} 100%)`);
  }, [t.gold]);

  React.useEffect(() => {
    root.style.setProperty("--anim", String(ANIM[t.anim] ?? 1));
  }, [t.anim]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Look" />
      <TweakToggle label="Dunkler Modus" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      <TweakColor label="Gold-Ton" value={t.gold}
        options={["#BF9744", "#D4A93A", "#C28B6B", "#9CA1A6"]}
        onChange={(v) => setTweak("gold", v)} />
      <TweakSection label="Hero" />
      <TweakRadio label="Variante" value={t.heroVariant}
        options={["Standbild", "Split", "Minimal"]}
        onChange={(v) => setTweak("heroVariant", v)} />
      <TweakSection label="Bewegung" />
      <TweakRadio label="Tempo" value={t.anim}
        options={["Ruhig", "Standard", "Lebhaft"]}
        onChange={(v) => setTweak("anim", v)} />
    </TweaksPanel>
  );
}

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