// palette-tweaks.jsx — CoolSouq brand-palette switcher (Tweaks)
// Recolors any UI kit live by overriding semantic brand/accent/structure
// tokens on :root. Loads after tweaks-panel.jsx (uses its window globals).
// All five exploration palettes are exposed as a single Tweak.

(function () {
  // Compact spec per palette → expanded into CSS custom-property overrides.
  const SPECS = {
    brass:    { label: "Brass & Teal", brand: "#C9A227", bHover: "#A8851C", bPress: "#846818", bInk: "#846818", bLight: "#E8D389", bTint: "#FBF6E6", bOn: "#15212B", accent: "#2BB0C4", aHover: "#1F95A8", aInk: "#155F6B", aTint: "#E6F7F9", d950: "#0E1820", d900: "#15212B", d800: "#1E2E3A" },
    cobalt:   { label: "Cobalt & Sky",            brand: "#2560D6", bHover: "#1E50B8", bPress: "#1C49A6", bInk: "#1C49A6", bLight: "#9DBDF2", bTint: "#E8EFFC", bOn: "#FFFFFF", accent: "#15A8CE", aHover: "#1192B4", aInk: "#0C6E88", aTint: "#E4F5FA", d950: "#0B1322", d900: "#111A2E", d800: "#1A2740" },
    orange:   { label: "Signal Orange",           brand: "#E1561D", bHover: "#C84A14", bPress: "#B23F12", bInk: "#B23F12", bLight: "#F2B48F", bTint: "#FCEDE4", bOn: "#FFFFFF", accent: "#1F9AA6", aHover: "#19828C", aInk: "#0F6873", aTint: "#E6F4F5", d950: "#131518", d900: "#1B1E22", d800: "#282C31" },
    teallime: { label: "Deep Teal & Lime (current)",        brand: "#0E7C86", bHover: "#0C6970", bPress: "#0A5C64", bInk: "#0A5C64", bLight: "#7FC4CB", bTint: "#DCEEEF", bOn: "#FFFFFF", accent: "#8FB81E", aHover: "#799E16", aInk: "#5C7A10", aTint: "#F0F6DC", d950: "#081F22", d900: "#0E2A2E", d800: "#163B40" },
    coral:    { label: "Coral & Petrol",          brand: "#EF5B43", bHover: "#D84B34", bPress: "#C23A26", bInk: "#C23A26", bLight: "#F7B0A2", bTint: "#FCE7E2", bOn: "#FFFFFF", accent: "#157A86", aHover: "#116370", aInk: "#0E5B64", aTint: "#E4F2F3", d950: "#0E1820", d900: "#15212B", d800: "#1E2E3A" },
  };

  function varsFor(s) {
    return {
      "--brand": s.brand, "--brand-hover": s.bHover, "--brand-press": s.bPress, "--brand-ink": s.bInk, "--text-on-brand": s.bOn,
      "--accent": s.accent, "--accent-hover": s.aHover, "--accent-ink": s.aInk, "--surface-accent-tint": s.aTint, "--surface-brand-tint": s.bTint,
      // remap the gold ramp so brand-tone badges / labels follow the palette
      "--gold-500": s.brand, "--gold-600": s.bHover, "--gold-700": s.bInk, "--gold-300": s.bLight, "--gold-200": s.bLight, "--gold-100": s.bTint, "--gold-50": s.bTint,
      // structure (dark bands, headings, chrome)
      "--slate-950": s.d950, "--slate-900": s.d900, "--slate-800": s.d800,
    };
  }

  function applyPalette(key) {
    const s = SPECS[key] || SPECS.brass;
    const root = document.documentElement;
    const v = varsFor(s);
    Object.keys(v).forEach((k) => root.style.setProperty(k, v[k]));
  }

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "teallime"
  }/*EDITMODE-END*/;

  function PaletteTweaks() {
    const { useTweaks, TweaksPanel, TweakSection, TweakSelect } = window;
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
    const options = Object.keys(SPECS).map((k) => ({ value: k, label: SPECS[k].label }));
    return (
      React.createElement(TweaksPanel, { title: "Tweaks" },
        React.createElement(TweakSection, { label: "Brand palette" }),
        React.createElement(TweakSelect, {
          label: "Palette",
          value: t.palette,
          options: options,
          onChange: (v) => setTweak("palette", v),
        })
      )
    );
  }

  function mount() {
    if (!window.useTweaks || !window.TweaksPanel || !window.ReactDOM || !window.React) {
      return setTimeout(mount, 40);
    }
    // apply persisted/default palette immediately
    applyPalette(TWEAK_DEFAULTS.palette);
    const el = document.createElement("div");
    el.id = "cs-palette-tweaks-root";
    document.body.appendChild(el);
    ReactDOM.createRoot(el).render(React.createElement(PaletteTweaks));
  }
  mount();
})();