/* ============ EXPERIMENTERS TWEAKS PANEL ============ */

function ExpTweaks({ tweaks, setTweak }) {
  const [open, setOpen] = React.useState(false);

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

  if (!open) return null;

  const close = () => {
    setOpen(false);
    try { window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*"); } catch (_e) {}
  };

  return (
    <div className="exp-tweaks">
      <div className="exp-tweaks-head">
        <span className="eyebrow">// tweaks</span>
        <button className="exp-tweaks-close" onClick={close} aria-label="Close tweaks">×</button>
      </div>

      <div className="exp-tweaks-section">
        <label>Manifesto layout</label>
        <div className="exp-tweaks-segmented">
          <button className={tweaks.manifestoStyle === "split" ? "on" : ""} onClick={() => setTweak("manifestoStyle", "split")}>Split</button>
          <button className={tweaks.manifestoStyle === "compact" ? "on" : ""} onClick={() => setTweak("manifestoStyle", "compact")}>Compact</button>
        </div>
      </div>

      <div className="exp-tweaks-section">
        <label>Accent density</label>
        <div className="exp-tweaks-segmented">
          <button className={tweaks.accentDensity === "loud" ? "on" : ""} onClick={() => setTweak("accentDensity", "loud")}>Loud</button>
          <button className={tweaks.accentDensity === "calm" ? "on" : ""} onClick={() => setTweak("accentDensity", "calm")}>Calm</button>
        </div>
      </div>

      <div className="exp-tweaks-section">
        <label>Show arcade-repos strip</label>
        <div className="exp-tweaks-toggle">
          <button className={tweaks.showArcade !== false ? "on" : ""} onClick={() => setTweak("showArcade", tweaks.showArcade === false)}>
            {tweaks.showArcade !== false ? "ON" : "OFF"}
          </button>
        </div>
      </div>

      <div className="exp-tweaks-section">
        <label>Show "Two towers. One bridge." callout</label>
        <div className="exp-tweaks-toggle">
          <button className={tweaks.showCallout !== false ? "on" : ""} onClick={() => setTweak("showCallout", tweaks.showCallout === false)}>
            {tweaks.showCallout !== false ? "ON" : "OFF"}
          </button>
        </div>
      </div>

      <div className="exp-tweaks-foot">
        <span>changes persist on save</span>
      </div>
    </div>
  );
}

window.ExpTweaks = ExpTweaks;