// app-tweaks.jsx — live tweak controls for the Kalki Integration viewer
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Cosmic Orange",
  "accent": "#FF6A1A",
  "gold": "#FFAE52",
  "glow": 1.1,
  "rotateSpeed": 0.7,
  "wireframe": true,
  "particles": true,
  "glitch": true,
  "quality": "auto"
}/*EDITMODE-END*/;

// Curated cosmic palettes (accent = primary glow, gold = secondary / lines).
// Cosmic Orange leads and is the default.
const PALETTES = {
  "Cosmic Orange": { accent: "#FF6A1A", gold: "#FFAE52" },
  "Saffron Temple": { accent: "#FF8C2B", gold: "#F2B958" },
  "Solar Flare": { accent: "#FF3D1F", gold: "#FF9A4D" },
  "Amber Void": { accent: "#FFA033", gold: "#FFD08A" },
  "Ember & Cyan": { accent: "#FF6A1A", gold: "#7FD4E0" }
};

function hexRgb(hex) {
  const h = hex.replace("#", "");
  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
}
function applyPaletteVars(accent, gold) {
  // The reborn Satya Yuga look owns the palette — don't fight it.
  if (document.body.classList.contains("yuga-0")) return;
  const r = document.documentElement.style;
  const [gr, gg, gb] = hexRgb(gold);
  r.setProperty("--accent", accent);
  r.setProperty("--gold", gold);
  r.setProperty("--line", "rgba(" + gr + "," + gg + "," + gb + ",0.22)");
  r.setProperty("--line-strong", "rgba(" + gr + "," + gg + "," + gb + ",0.55)");
}

function KalkiTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    Object.assign(window.KALKI.tweaks, t);
    applyPaletteVars(t.accent, t.gold || "#FFAE52");
    window.dispatchEvent(new Event("kalki-tweak"));
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Cosmic Palette" />
      <TweakSelect
        label="Palette"
        value={t.palette}
        options={Object.keys(PALETTES)}
        onChange={(v) => setTweak({ palette: v, accent: PALETTES[v].accent, gold: PALETTES[v].gold })}
      />
      <TweakColor
        label="Fine-tune accent"
        value={t.accent}
        options={["#FF6A1A", "#FF8C2B", "#FF3D1F", "#FFA033", "#69D2E7"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Divine Glow" />
      <TweakSlider
        label="Glow intensity"
        value={t.glow}
        min={0}
        max={2.5}
        step={0.05}
        onChange={(v) => setTweak("glow", v)}
      />
      <TweakSection label="Motion" />
      <TweakSlider
        label="Rotation speed"
        value={t.rotateSpeed}
        min={0}
        max={3}
        step={0.1}
        onChange={(v) => setTweak("rotateSpeed", v)}
      />
      <TweakToggle
        label="Glitch on hover"
        value={t.glitch}
        onChange={(v) => setTweak("glitch", v)}
      />
      <TweakSection label="Layers" />
      <TweakToggle
        label="Hologram wireframe"
        value={t.wireframe}
        onChange={(v) => setTweak("wireframe", v)}
      />
      <TweakToggle
        label="Gold dust particles"
        value={t.particles}
        onChange={(v) => setTweak("particles", v)}
      />
      <TweakSection label="Performance" />
      <TweakRadio
        label="Quality"
        value={t.quality}
        options={["auto", "low", "high"]}
        onChange={(v) => setTweak("quality", v)}
      />
    </TweaksPanel>
  );
}

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