/* Tweaks panel — edit-mode protocol. */
const { useState: uSt, useEffect: uEf } = React;

const Tweaks = ({ tweaks, setTweaks }) => {
  const [visible, setVisible] = uSt(false);

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

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

  if (!visible) return null;
  return (
    <div className="tweaks-panel open">
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <label>Tonalität</label>
        <div className="tweak-seg">
          {["serious", "aggressive"].map(t => (
            <button key={t} className={tweaks.tone === t ? "active" : ""} onClick={() => {
              update("tone", t);
              update("heroHeadline", t === "aggressive"
                ? "Dein Wettbewerb scannt bereits. <span style='color: var(--y-500)'>Du noch nicht.</span>"
                : "Jedes ungenutzte Gewerbedach ist ein verlorener Auftrag.");
            }}>
              {t === "serious" ? "Seriös" : "Aggressiv"}
            </button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Farbpalette</label>
        <div className="tweak-seg">
          {[["yellow", "Gelb"], ["warm", "Warm"], ["mono", "Mono"]].map(([k, l]) => (
            <button key={k} className={tweaks.palette === k ? "active" : ""} onClick={() => update("palette", k)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>CTA-Label</label>
        <input type="text" value={tweaks.ctaLabel} onChange={(e) => update("ctaLabel", e.target.value)}
          style={{ width: "100%", padding: "8px 10px", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 13, fontFamily: "inherit" }} />
      </div>
    </div>
  );
};
window.Tweaks = Tweaks;