/* ZM Edits — Tweaks panel
   Three expressive controls that reshape the page feel.
   Applies changes via CSS custom properties + body classes. */

const {
  useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio
} = window;

/* Accent palette map — primary, dim, glow rgb */
const ACCENTS = {
  "#00E5FF": { dim: "#00B8CC", glow: "0,229,255"   },  /* cyan   */
  "#FF6B35": { dim: "#D44E1C", glow: "255,107,53"  },  /* orange */
  "#84CC16": { dim: "#5F9A0D", glow: "132,204,22"  },  /* lime   */
  "#C084FC": { dim: "#9333EA", glow: "192,132,252" },  /* violet */
};

function applyAccent(color) {
  const p = ACCENTS[color] || ACCENTS["#00E5FF"];
  const r = document.documentElement;
  r.style.setProperty("--c-accent",    color);
  r.style.setProperty("--c-accent-2",  p.dim);
  r.style.setProperty("--accent-data", color);
  r.style.setProperty("--accent-data-dim", p.dim);
  r.style.setProperty("--glow",      `0 0 40px rgba(${p.glow},.28)`);
  r.style.setProperty("--glow-soft", `0 0 80px rgba(${p.glow},.14)`);
  r.style.setProperty("--glow-cyan", `0 0 16px rgba(${p.glow},.35)`);
}

function applySurface(val) {
  document.body.classList.remove("zm-flat", "zm-glass");
  if (val === "Épuré") document.body.classList.add("zm-flat");
  if (val === "Verre")  document.body.classList.add("zm-glass");
}

function applyMotion(val) {
  document.body.classList.remove("zm-calm", "zm-intense");
  if (val === "Calme")   document.body.classList.add("zm-calm");
  if (val === "Intense") document.body.classList.add("zm-intense");
}

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":  "#00E5FF",
  "surface": "Studio",
  "motion":  "Dynamique"
}/*EDITMODE-END*/;

function ZMTweaks() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  React.useEffect(() => { applyAccent(t.accent);  }, [t.accent]);
  React.useEffect(() => { applySurface(t.surface); }, [t.surface]);
  React.useEffect(() => { applyMotion(t.motion);   }, [t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Couleur d'accent" />
      <TweakColor
        label="Teinte"
        value={t.accent}
        options={["#00E5FF", "#FF6B35", "#84CC16", "#C084FC"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Style des cartes" />
      <TweakRadio
        label="Surface"
        value={t.surface}
        options={["Épuré", "Studio", "Verre"]}
        onChange={(v) => setTweak("surface", v)}
      />
      <TweakSection label="Animation" />
      <TweakRadio
        label="Intensité"
        value={t.motion}
        options={["Calme", "Dynamique", "Intense"]}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

const _root = ReactDOM.createRoot(document.getElementById("zm-tweaks-root"));
_root.render(<ZMTweaks />);