// Tweaks panel — curated accents + theme. Just smart defaults per user's ask.

function Tweaks() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__);

  // Apply tweaks to :root — these palettes swap the entire system feel.
  useEffect(() => {
    const root = document.documentElement;
    const palettes = {
      // [bg, ink, persimmon, cobalt, teal, yellow]
      "#d9e2c8": { bg: "#d9e2c8", paper: "#e6edd3", paper2: "#c5d2af", ink: "#1a1d22", primary: "#c8421e", deep: "#8a2812", cobalt: "#2c1d6b", teal: "#102a20", yellow: "#d4a017" }, // Sage Studio (default)
      "#e8dfe6": { bg: "#e8dfe6", paper: "#f1e8ef", paper2: "#d4c4d2", ink: "#2a1830", primary: "#c8332f", deep: "#7a1e1c", cobalt: "#1f4a3a", teal: "#251a2c", yellow: "#b8c83e" }, // Aubergine
      "#dde2ea": { bg: "#dde2ea", paper: "#e9edf3", paper2: "#c5cdd9", ink: "#0d1b3e", primary: "#e85d23", deep: "#b03a0e", cobalt: "#7c2d6f", teal: "#13243f", yellow: "#e8c547" }, // Slate Architect
      "#f0e8c8": { bg: "#f0e8c8", paper: "#f6efd6", paper2: "#dcd2a8", ink: "#1f1612", primary: "#9c3818", deep: "#651e08", cobalt: "#1d3a2e", teal: "#231a14", yellow: "#c19a1a" }, // Apothecary
    };
    const key = t.accent && palettes[t.accent] ? t.accent : "#d9e2c8";
    const p = palettes[key];
    root.style.setProperty("--bg", p.bg);
    root.style.setProperty("--paper", p.paper);
    root.style.setProperty("--paper-2", p.paper2);
    root.style.setProperty("--ink", p.ink);
    root.style.setProperty("--persimmon", p.primary);
    root.style.setProperty("--persimmon-deep", p.deep);
    root.style.setProperty("--cobalt", p.cobalt);
    root.style.setProperty("--teal", p.teal);
    root.style.setProperty("--yellow", p.yellow);
    root.style.setProperty("--accent", p.primary);
    root.style.setProperty("--accent-deep", p.deep);
    root.style.setProperty("--heat", p.cobalt);
    root.setAttribute("data-theme", t.theme || "light");
  }, [t.accent, t.theme]);

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor
        label="Studio"
        value={t.accent}
        options={["#d9e2c8", "#e8dfe6", "#dde2ea", "#f0e8c8"]}
        onChange={v => setTweak("accent", v)}
      />
      <TweakSection label="Theme" />
      <TweakRadio
        label="Mode"
        value={t.theme}
        options={["light", "dark"]}
        onChange={v => setTweak("theme", v)}
      />
    </TweaksPanel>
  );
}

Object.assign(window, { Tweaks });