/* tweaks-app.jsx — Tweaks for DAS PLOP deck */
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;

const PLOP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3cb44b",
  "tone": "schwarz",
  "motion": "lebhaft",
  "sound": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#3cb44b": { gold: "#3cb44b", bright: "#5bd16b" },   // Flens-Grün
  "#5bd16b": { gold: "#5bd16b", bright: "#86e294" },   // Hellgrün
  "#2a7a37": { gold: "#2f8a3f", bright: "#46b257" },   // Tannengrün
  "#7bd88a": { gold: "#7bd88a", bright: "#a3e6ad" }    // Minze
};
const TONES = {
  schwarz:    { "--navy-950": "#000000", "--navy-900": "#0a0a0a", "--navy-800": "#141618", "--navy-700": "#1a1c1e" },
  anthrazit:  { "--navy-950": "#0c0e10", "--navy-900": "#131517", "--navy-800": "#1c1f22", "--navy-700": "#23272b" },
  waldgrün:   { "--navy-950": "#05100a", "--navy-900": "#08160d", "--navy-800": "#0f2417", "--navy-700": "#163322" }
};

function PlopTweaks() {
  const [t, setTweak] = useTweaks(PLOP_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS["#cda250"];
    r.style.setProperty("--gold", a.gold);
    r.style.setProperty("--gold-bright", a.bright);
    const tone = TONES[t.tone] || TONES.marine;
    Object.entries(tone).forEach(([k, v]) => r.style.setProperty(k, v));
    document.body.classList.toggle("motion-off", t.motion === "aus");
    document.body.classList.toggle("motion-subtle", t.motion === "dezent");
    if (window.Plop) window.Plop.set(!!t.sound);
    if (window.renderSoundBtn) window.renderSoundBtn();
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Farbe" />
      <TweakColor label="Akzent" value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Hintergrund" value={t.tone}
        options={["schwarz", "anthrazit", "waldgrün"]}
        onChange={(v) => setTweak("tone", v)} />
      <TweakSection label="Bewegung" />
      <TweakRadio label="Animation" value={t.motion}
        options={["lebhaft", "dezent", "aus"]}
        onChange={(v) => setTweak("motion", v)} />
      <TweakSection label="Ton" />
      <TweakToggle label="Plop-Sound" value={t.sound}
        onChange={(v) => setTweak("sound", v)} />
    </TweaksPanel>
  );
}

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