const TWEAK_DEFAULTS = {
  "accent": "pink",
  "density": "airy",
  "heroVariant": "split"
};

const ACCENT_MAP = {
  pink:   { pink: "#FD327B", pinkInk: "#D4165B", swatch: "#FD327B" },
  violet: { pink: "#9B3FE0", pinkInk: "#7B20C0", swatch: "#9B3FE0" },
  coral:  { pink: "#FF6A4D", pinkInk: "#E04A2C", swatch: "#FF6A4D" },
  cyan:   { pink: "#2FA9D6", pinkInk: "#1A7FA5", swatch: "#5FCFFA" },
};

function applyTweaks(t) {
  const a = ACCENT_MAP[t.accent] || ACCENT_MAP.pink;
  document.documentElement.style.setProperty("--pink", a.pink);
  document.documentElement.style.setProperty("--pink-ink", a.pinkInk);

  if (t.density === "dense") {
    document.documentElement.style.setProperty("--sp-9", "64px");
    document.documentElement.style.setProperty("--sp-10", "80px");
  } else {
    document.documentElement.style.setProperty("--sp-9", "96px");
    document.documentElement.style.setProperty("--sp-10", "128px");
  }
}

function Tweaks({ enabled }) {
  const [tw, setTw] = useState(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(tw); }, [tw]);

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

  if (!enabled) return null;
  return (
    <div className="tweaks-panel">
      <h5>Tweaks</h5>
      <div className="tweaks-row">
        <label>Color de acento (CTA)</label>
        <div className="tweaks-swatches">
          {Object.entries(ACCENT_MAP).map(([k, v]) => (
            <button key={k}
              className={`tweaks-sw ${tw.accent === k ? "active" : ""}`}
              style={{ background: v.swatch }}
              onClick={() => update({ accent: k })}
              aria-label={k}/>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Densidad</label>
        <div className="tweaks-options">
          <button className={`tweaks-opt ${tw.density === "airy" ? "active" : ""}`} onClick={() => update({ density: "airy" })}>Airy</button>
          <button className={`tweaks-opt ${tw.density === "dense" ? "active" : ""}`} onClick={() => update({ density: "dense" })}>Compact</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks, TWEAK_DEFAULTS, applyTweaks });