// tweaks.jsx
const { useState: useStT, useEffect: useEffT } = React;

function Tweaks({ config, setConfig }) {
  const [enabled, setEnabled] = useStT(false);

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

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

  const toggleVisual = (k) => {
    const cur = config.heroVisuals || [];
    const next = cur.includes(k) ? cur.filter(x => x !== k) : [...cur, k];
    if (next.length === 0) return;
    update({ heroVisuals: next });
  };

  if (!enabled) return null;

  const taglineOpts = [
    { k: "headline_primary", label: "Shift already happening" },
    { k: "headline_urgent",  label: "Most brands missing it" },
    { k: "headline_ships",   label: "Two-year head start" },
  ];
  const visualOpts = [
    { k: "gap",         label: "The Gap (chart)" },
    { k: "noise",       label: "Noise to Plan" },
    { k: "beforeafter", label: "Before / After" },
    { k: "map",         label: "Route map" },
  ];
  const themeOpts = [
    { k: "dark", label: "Dark" },
    { k: "light", label: "Light" },
  ];
  const accents = ["#E8623D", "#D4A24E", "#7EA876", "#6B8DD9", "#B85A8E", "#F5F1EA"];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <h4>Tweaks</h4>
        <span className="t-mono" style={{fontSize:10, color:"var(--ink-faint)"}}>live</span>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-group">
          <label>Hero tagline</label>
          <div className="tweaks-seg" style={{flexDirection:"column"}}>
            {taglineOpts.map(o => (
              <button key={o.k}
                className={config.heroTagline === o.k ? "is-active" : ""}
                onClick={() => update({ heroTagline: o.k })}
                style={{textAlign:"left"}}
              >{o.label}</button>
            ))}
          </div>
        </div>

        <div className="tweaks-group">
          <label>Hero visuals (pick any)</label>
          <div className="tweaks-seg" style={{flexDirection:"column"}}>
            {visualOpts.map(o => (
              <button key={o.k}
                className={(config.heroVisuals||[]).includes(o.k) ? "is-active" : ""}
                onClick={() => toggleVisual(o.k)}
                style={{textAlign:"left"}}
              >
                <span style={{marginRight:8}}>{(config.heroVisuals||[]).includes(o.k) ? "■" : "□"}</span>
                {o.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweaks-group">
          <label>Accent colour</label>
          <div className="tweaks-swatches">
            {accents.map(c => (
              <button key={c}
                className={`tweaks-swatch ${config.accent === c ? "is-active" : ""}`}
                style={{background: c}}
                onClick={() => update({ accent: c })}
                aria-label={c}
              />
            ))}
          </div>
        </div>

        <div className="tweaks-group">
          <label>Theme</label>
          <div className="tweaks-seg">
            {themeOpts.map(o => (
              <button key={o.k}
                className={config.theme === o.k ? "is-active" : ""}
                onClick={() => update({ theme: o.k })}
              >{o.label}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });