// ============ TWEAKS PANEL ============

function TweaksPanel({ state, set }) {
  const [on, setOn] = React.useState(false);

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

  if (!on) return null;

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

  const Seg = ({ k, opts }) => (
    <div className="tp-segs">
      {opts.map(o => (
        <button key={o.value} className={state[k] === o.value ? "on" : ""} onClick={() => update(k, o.value)}>
          {o.label}
        </button>
      ))}
    </div>
  );

  return (
    <div className="tweaks-panel">
      <h3>Tweaks<em>·</em></h3>
      <div className="tp-sub">Explore variações</div>

      <div className="tp-row">
        <span className="tp-label">Hero</span>
        <Seg k="heroVariant" opts={[
          { value: "editorial", label: "Editorial" },
          { value: "overlay",   label: "Overlay" },
          { value: "centered",  label: "Central" },
        ]} />
      </div>

      <div className="tp-row">
        <span className="tp-label">Accent</span>
        <div className="tp-swatches">
          {[
            { value: "terracotta", c: "#c8553d" },
            { value: "ochre",      c: "#c9a04c" },
            { value: "forest",     c: "#4a5d3b" },
            { value: "plum",       c: "#7a4a5c" },
          ].map(sw => (
            <button
              key={sw.value}
              className={`tp-sw ${state.accent === sw.value ? "on" : ""}`}
              style={{ background: sw.c }}
              title={sw.value}
              onClick={() => update("accent", sw.value)}
            />
          ))}
        </div>
      </div>

      <div className="tp-row">
        <span className="tp-label">Textura de grão</span>
        <Seg k="grain" opts={[
          { value: "off",    label: "Off" },
          { value: "on",     label: "Sutil" },
          { value: "heavy",  label: "Pesada" },
        ]} />
      </div>

      <div className="tp-row">
        <span className="tp-label">Placeholders</span>
        <Seg k="placeholders" opts={[
          { value: "textured", label: "Colorido" },
          { value: "neutral",  label: "Neutro" },
        ]} />
      </div>

      <div className="tp-row">
        <span className="tp-label">Serif</span>
        <Seg k="serifStyle" opts={[
          { value: "fraunces", label: "Fraunces" },
          { value: "georgia",  label: "Georgia" },
        ]} />
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;