const TweaksPanel = ({ state, set }) => {
  const [editModeOn, setEditModeOn] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setEditModeOn(true);
      else if (e.data?.type === "__deactivate_edit_mode") setEditModeOn(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const update = (key, val) => {
    set({ ...state, [key]: val });
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
  };

  if (!editModeOn) return null;

  const Group = ({ label, k, opts }) => (
    <div className="tweak-group">
      <div className="tweak-label">{label}</div>
      <div className="tweak-opts">
        {opts.map((o) => (
          <button
            key={o.v}
            className={`tweak-opt ${state[k] === o.v ? "active" : ""}`}
            onClick={() => update(k, o.v)}
          >
            {o.label}
          </button>
        ))}
      </div>
    </div>
  );

  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <Group label="Paleta" k="palette" opts={[
        { v: "azul", label: "Azul" },
        { v: "verde", label: "Verde" },
        { v: "coral", label: "Coral" },
      ]} />
      <Group label="Tipografia" k="typeSystem" opts={[
        { v: "editorial", label: "Editorial" },
        { v: "classic", label: "Clássica" },
        { v: "modern", label: "Moderna" },
      ]} />
      <Group label="Layout do Hero" k="heroLayout" opts={[
        { v: "split", label: "Split + foto" },
        { v: "centered", label: "Centralizado" },
      ]} />
      <Group label="Tom" k="tone" opts={[
        { v: "acolhedor", label: "Acolhedor" },
        { v: "formal", label: "Formal" },
      ]} />
    </div>
  );
};

Object.assign(window, { TweaksPanel });