/* Tweaks panel + edit-mode protocol */

function Tweaks({ tweaks, setTweak }) {
  const [active, setActive] = React.useState(false);
  const [open, setOpen] = React.useState(true);

  React.useEffect(() => {
    const onMsg = (e) => {
      const t = e.data && e.data.type;
      if (t === "__activate_edit_mode") setActive(true);
      else if (t === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    // Announce availability AFTER listener is installed
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  if (!active) return null;

  const rows = [
    { key: "heroVariant", label: "Hero", opts: [["axis","Axis"],["orbit","Orbit"],["ticker","Ticker"]] },
    { key: "pricingVariant", label: "Pricing", opts: [["split","Split"],["stack","Stack"]] },
    { key: "motion", label: "Motion", opts: ["subtle", "medium", "strong"] },
  ];

  const accents = [
    { id: "blue",   color: "#0A84FF" },
    { id: "cyan",   color: "#06B6D4" },
    { id: "purple", color: "#8B3DEA" }
  ];

  return (
    <div className="tweaks">
      <h5>
        Tweaks
        <button onClick={() => setOpen(o => !o)}>{open ? "Hide" : "Show"}</button>
      </h5>
      {open && <>
        {rows.map(row => (
          <div className="tweak-row" key={row.key}>
            <span>{row.label}</span>
            <div className="tweak-opts">
              {row.opts.map(opt => {
                const [val, label] = Array.isArray(opt) ? opt : [opt, opt];
                const on = tweaks[row.key] === val;
                return (
                  <button key={val} className={on ? "on" : ""} onClick={() => setTweak(row.key, val)}>
                    {label}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
        <div className="tweak-row">
          <span>Accent</span>
          <div className="swatch-row">
            {accents.map(a => (
              <button
                key={a.id}
                className={`swatch ${tweaks.accent === a.id ? "on" : ""}`}
                onClick={() => setTweak("accent", a.id)}
                style={{ background: a.color }}
                aria-label={a.id}
              />
            ))}
          </div>
        </div>
      </>}
    </div>
  );
}

Object.assign(window, { Tweaks });