// Tweaks panel — runtime theme tweaks
const { useState: useStateT, useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#199a8e",
  "accentColor": "#199a8e",
  "heroStyle": "centered",
  "radius": "soft"
}/*EDITMODE-END*/;

const PRIMARY_OPTIONS = [
  { k: "#076484", label: "Deep blue" },
  { k: "#199a8e", label: "Teal" },
  { k: "#0a1f2a", label: "Ink" },
];
const ACCENT_OPTIONS = [
  { k: "#199a8e", label: "Teal" },
  { k: "#73cf87", label: "Mint" },
  { k: "#076484", label: "Blue" },
];

const Tweaks = () => {
  const [enabled, setEnabled] = useStateT(false);
  const [tweaks, setTweaks] = useStateT(TWEAK_DEFAULTS);

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

  useEffectT(() => {
    const root = document.documentElement;
    root.style.setProperty("--copowr-blue", tweaks.primaryColor);
    root.style.setProperty("--copowr-teal", tweaks.accentColor);
    const r = tweaks.radius === "sharp" ? "6px" : tweaks.radius === "round" ? "22px" : "14px";
    root.style.setProperty("--radius-lg", r);
  }, [tweaks]);

  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  if (!enabled) return null;
  return (
    <div className="tweaks visible">
      <h4>Tweaks</h4>
      <p className="sub">Live adjustments to the CoPowr site.</p>
      <div className="group">
        <label>Primary button color</label>
        <div className="swatches">
          {PRIMARY_OPTIONS.map(o => (
            <button key={o.k} className={`sw ${tweaks.primaryColor === o.k ? "active" : ""}`}
              style={{background: o.k}} title={o.label}
              onClick={() => set("primaryColor", o.k)}/>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Accent color</label>
        <div className="swatches">
          {ACCENT_OPTIONS.map(o => (
            <button key={o.k} className={`sw ${tweaks.accentColor === o.k ? "active" : ""}`}
              style={{background: o.k}} title={o.label}
              onClick={() => set("accentColor", o.k)}/>
          ))}
        </div>
      </div>
      <div className="group">
        <label>Corner radius</label>
        <div className="opts">
          {["sharp","soft","round"].map(r => (
            <button key={r} className={`opt ${tweaks.radius === r ? "active" : ""}`}
              onClick={() => set("radius", r)}>{r}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Tweaks });