/* tweaks.jsx — wires our React tweaks panel into the page */

const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "iris",
  "logo": "orb",
  "showOrb": true,
  "showGrain": true,
  "grid": true,
  "sound": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute("data-theme", t.theme || "light");
  root.setAttribute("data-accent", t.accent || "iris");
  root.setAttribute("data-logo", t.logo || "orb");
  root.setAttribute("data-sound", t.sound === false ? "off" : "on");

  document.querySelectorAll("[data-logo-slot]").forEach((slot) => {
    const sz = parseInt(slot.getAttribute("data-size") || "22", 10);
    if (window.CerneLogos) window.CerneLogos.render(slot, t.logo || "orb", sz);
  });

  const orb = document.querySelector(".orb");
  if (orb) orb.style.display = t.showOrb ? "" : "none";

  const mesh = document.querySelector(".mesh");
  if (mesh) mesh.style.display = t.grid ? "" : "none";

  document.querySelectorAll(".work").forEach((w) => {
    w.classList.toggle("fill-noise", !!t.showGrain);
  });
}

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

  useEffect(() => {
    applyTweaks(t);
  }, [t.theme, t.accent, t.logo, t.showOrb, t.showGrain, t.grid, t.sound]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema">
        <TweakRadio
          label="Modo"
          value={t.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "light", label: "Claro" },
            { value: "dark", label: "Escuro" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Paleta de destaque">
        <TweakRadio
          label="Acento"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "iris", label: "Iris" },
            { value: "solar", label: "Solar" },
            { value: "verde", label: "Verde" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Logo">
        <TweakRadio
          label="Variante"
          value={t.logo}
          onChange={(v) => setTweak("logo", v)}
          options={[
            { value: "orb", label: "Orb" },
            { value: "mono", label: "Mono" },
            { value: "word", label: "Word" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Efeitos">
        <TweakToggle label="Aurora orb"    value={t.showOrb}   onChange={(v) => setTweak("showOrb", v)} />
        <TweakToggle label="Grade no hero" value={t.grid}      onChange={(v) => setTweak("grid", v)} />
        <TweakToggle label="Grão nos cards" value={t.showGrain} onChange={(v) => setTweak("showGrain", v)} />
        <TweakToggle label="Som no chat"   value={t.sound}     onChange={(v) => setTweak("sound", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

applyTweaks(DEFAULTS);

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