/* Techonymous — Tweaks panel
   Wired through tweaks-panel.jsx (TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle) */

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "accent": ["#7B2FFF", "#00D4FF"],
  "effectsIntensity": 1,
  "density": 1,
  "showCursor": true,
  "auroraStyle": "violet-cyan"
}/*EDITMODE-END*/;

function TweaksRoot() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULS);

  // Apply tweaks live by writing CSS custom properties
  React.useEffect(() => {
    const r = document.documentElement;
    const [a1, a2] = Array.isArray(t.accent) ? t.accent : ["#7B2FFF", "#00D4FF"];
    r.style.setProperty("--acc-violet", a1);
    r.style.setProperty("--acc-cyan", a2);
    r.style.setProperty("--acc-grad", `linear-gradient(135deg, ${a1} 0%, ${a2} 100%)`);
    r.style.setProperty("--effects-intensity", String(t.effectsIntensity ?? 1));
    r.style.setProperty("--density", String(t.density ?? 1));

    // Aurora style
    const styles = {
      "violet-cyan":  { b1: a1, b2: a2, b3: "#4A1FB8" },
      "sunset":       { b1: "#FF2F87", b2: "#FFB347", b3: "#7B2FFF" },
      "emerald":      { b1: "#34D399", b2: "#00D4FF", b3: "#0EA5E9" },
      "monochrome":   { b1: "#3B3B55", b2: "#5C5C75", b3: "#8B8BA7" },
    };
    const s = styles[t.auroraStyle] || styles["violet-cyan"];
    document.querySelectorAll(".aurora__blob--1").forEach(el => el.style.background = s.b1);
    document.querySelectorAll(".aurora__blob--2").forEach(el => el.style.background = s.b2);
    document.querySelectorAll(".aurora__blob--3").forEach(el => el.style.background = s.b3);

    // Cursor visibility
    document.documentElement.classList.toggle("no-orb", t.showCursor === false);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent Palette">
        <TweakColor
          label="Gradient"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            ["#7B2FFF", "#00D4FF"],
            ["#FF2F87", "#FFB347"],
            ["#34D399", "#00D4FF"],
            ["#F5C947", "#EC4899"],
            ["#FFFFFF", "#8B8BA7"],
            ["#7B2FFF", "#EC4899"],
          ]}
        />
      </TweakSection>

      <TweakSection label="Atmosphere">
        <TweakRadio
          label="Effects"
          value={t.effectsIntensity}
          onChange={(v) => setTweak("effectsIntensity", v)}
          options={[
            { value: 0.4, label: "Subtle" },
            { value: 1,   label: "Default" },
            { value: 1.5, label: "Maximal" },
          ]}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: 0.7, label: "Compact" },
            { value: 1,   label: "Normal" },
            { value: 1.3, label: "Airy" },
          ]}
        />
        <TweakRadio
          label="Aurora"
          value={t.auroraStyle}
          onChange={(v) => setTweak("auroraStyle", v)}
          options={[
            { value: "violet-cyan", label: "Signature" },
            { value: "sunset",      label: "Sunset" },
            { value: "emerald",     label: "Emerald" },
            { value: "monochrome",  label: "Mono" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Cursor">
        <TweakToggle
          label="Glowing orb"
          value={t.showCursor !== false}
          onChange={(v) => setTweak("showCursor", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount tweaks panel
const tweaksMount = document.createElement("div");
document.body.appendChild(tweaksMount);
ReactDOM.createRoot(tweaksMount).render(<TweaksRoot />);