/* global React */
const { useState: useStateT, useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "density": "roomy",
  "tone": "premium"
}/*EDITMODE-END*/;

const ACCENTS = {
  blue: {
    25: "#EEFBFF", 50: "#D9F5FE", 100: "#B3EAFC", 200: "#7ED7F9",
    300: "#47BEF4", 400: "#28A0F6", 500: "#1785D9", 600: "#0F6AB5",
    700: "#0B5490", 800: "#093F6C", 900: "#062A48",
  },
  orange: {
    25: "#FFF9F5", 50: "#FFF0E5", 100: "#FFDFC7", 200: "#FFC59E",
    300: "#FEB486", 400: "#FDA06C", 500: "#F0823E", 600: "#D1651F",
    700: "#A84E18", 800: "#7C3912", 900: "#52250B",
  },
};

function applyTweaks(t) {
  const a = ACCENTS[t.accent] || ACCENTS.blue;
  const root = document.documentElement;
  Object.entries(a).forEach(([k, v]) => root.style.setProperty(`--brand-${k}`, v));
  document.body.classList.toggle("density-compact", t.density === "compact");
}

function TweaksPanel() {
  const [tw, setTw] = useStateT(() => {
    try { return { ...TWEAK_DEFAULTS, ...(JSON.parse(localStorage.getItem("morpheme_tweaks") || "{}")) }; }
    catch { return TWEAK_DEFAULTS; }
  });
  const [on, setOn] = useStateT(false);

  useEffectT(() => { applyTweaks(tw); localStorage.setItem("morpheme_tweaks", JSON.stringify(tw)); }, [tw]);

  useEffectT(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setOn(true);
      if (e.data.type === "__deactivate_edit_mode") setOn(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...tw, ...patch };
    setTw(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };

  if (!on) return null;

  return React.createElement("div", { className: "tweaks-panel" },
    React.createElement("h4", null, "Tweaks", React.createElement("span", null, "live preview")),
    React.createElement("div", { className: "tweak" },
      React.createElement("label", null, "Accent color"),
      React.createElement("div", { className: "swatch-row" },
        ["blue", "orange"].map((k) =>
          React.createElement("button", {
            key: k, className: tw.accent === k ? "active" : "",
            style: { background: ACCENTS[k][400] },
            onClick: () => update({ accent: k }),
            "aria-label": k,
          })
        )
      )
    ),
    React.createElement("div", { className: "tweak" },
      React.createElement("label", null, "Product grid density"),
      React.createElement("div", { className: "opts" },
        ["roomy", "compact"].map((k) =>
          React.createElement("button", { key: k, className: tw.density === k ? "active" : "", onClick: () => update({ density: k }) }, k)
        )
      )
    ),
    React.createElement("div", { className: "tweak" },
      React.createElement("label", null, "Copy tone"),
      React.createElement("div", { className: "opts" },
        ["premium", "warm"].map((k) =>
          React.createElement("button", { key: k, className: tw.tone === k ? "active" : "", onClick: () => update({ tone: k }) }, k)
        )
      )
    )
  );
}

// Apply on load
try {
  const initial = { ...TWEAK_DEFAULTS, ...(JSON.parse(localStorage.getItem("morpheme_tweaks") || "{}")) };
  applyTweaks(initial);
} catch {}

Object.assign(window, { TweaksPanel });