// tweaks-app.jsx — Octy's Life theme palettes
// Mounts a small Tweaks panel that swaps the site's accent palette live.

const __TWEAK_DEFAULTS = (typeof window !== "undefined" && window.TWEAK_DEFAULTS) || {
  palette: ["#B14EFF", "#FF3D8A", "#1FE0FF", "#2E6BFF"],
};

// Curated palettes — each = [violet/primary, pink/secondary, cyan/highlight, blue/depth]
const OCTY_PALETTES = [
  ["#B14EFF", "#FF3D8A", "#1FE0FF", "#2E6BFF"], // Neon (default)
  ["#FF6A2C", "#FF2D78", "#FFC83D", "#7A2DFF"], // Sunset
  ["#C8FF2D", "#1FE0FF", "#B14EFF", "#22D38A"], // Acid
  ["#D4AF37", "#FF2D78", "#7A2DFF", "#FF3D8A"], // Vegas
  ["#1FE0FF", "#2E6BFF", "#7A5AE0", "#B14EFF"], // Iceberg
  ["#FF0066", "#9B00FF", "#00E5FF", "#FF0066"], // Hyperflash
];

function applyOctyPalette(colors) {
  if (!colors || !colors.length) return;
  const [violet, pink, cyan, blue] = colors;
  const r = document.documentElement.style;
  r.setProperty("--violet", violet);
  r.setProperty("--pink", pink);
  r.setProperty("--cyan", cyan);
  r.setProperty("--blue", blue);
  r.setProperty(
    "--grad-1",
    `linear-gradient(110deg, ${violet} 0%, ${pink} 50%, ${cyan} 100%)`
  );
  r.setProperty("--grad-vp", `linear-gradient(135deg, ${violet}, ${pink})`);
  r.setProperty("--grad-pc", `linear-gradient(135deg, ${pink}, ${cyan})`);
  r.setProperty("--grad-bv", `linear-gradient(135deg, ${blue}, ${violet})`);
}

// Apply on load (before user opens panel) so persisted palette is honored
applyOctyPalette(__TWEAK_DEFAULTS.palette);

function OctyTweaksApp() {
  const [t, setTweak] = useTweaks(__TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyOctyPalette(t.palette);
  }, [t.palette]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor
        label="Palette"
        value={t.palette}
        options={OCTY_PALETTES}
        onChange={(v) => setTweak("palette", v)}
      />
    </TweaksPanel>
  );
}

const __octyTweaksRoot = document.getElementById("tweaks-root");
if (__octyTweaksRoot) {
  ReactDOM.createRoot(__octyTweaksRoot).render(<OctyTweaksApp />);
}