// ============================================================
// Tweaks Panel
// ============================================================
const { useState: useStateT, useEffect: useEffectT } = React;

function TweaksPanel({ tweaks, setTweaks }) {
  const [active, setActive] = useStateT(false);
  const [open, setOpen] = useStateT(true);

  useEffectT(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setActive(true);
      else if (e.data?.type === "__deactivate_edit_mode") setActive(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 (!active) return null;

  return (
    <div className={`tweaks ${open ? "is-open" : "is-closed"}`}>
      <button className="tweaks-toggle" onClick={() => setOpen(!open)}>
        <span>Tweaks</span>
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5">
          <path d={open ? "M18 15l-6-6-6 6" : "M6 9l6 6 6-6"} />
        </svg>
      </button>
      {open && (
        <div className="tweaks-body">
          <div className="tweaks-section">
            <label className="tweaks-label">Color de acento</label>
            <div className="tweaks-swatches">
              {[
                { k: "#7ce565", n: "Lima" },
                { k: "#00b27b", n: "Medio" },
                { k: "#0ee2a6", n: "Menta" },
                { k: "#d6d669", n: "Oliva" },
                { k: "#d6f2e8", n: "Suave" },
              ].map((s) => (
                <button key={s.k} className={`tweaks-swatch ${tweaks.accent === s.k ? "is-active" : ""}`} style={{ background: s.k }} onClick={() => update("accent", s.k)} title={s.n} />
              ))}
            </div>
          </div>

          <div className="tweaks-section">
            <label className="tweaks-label">Tipografía titulares</label>
            <div className="tweaks-opts">
              {["Outfit"].map((f) => (
                <button key={f} className={`tweaks-opt ${tweaks.headFont === f ? "is-active" : ""}`} style={{ fontFamily: f }} onClick={() => update("headFont", f)}>
                  {f}
                </button>
              ))}
            </div>
          </div>

          <div className="tweaks-section">
            <label className="tweaks-label">Modo</label>
            <div className="tweaks-opts">
              {[{ k: true, l: "Oscuro" }, { k: false, l: "Claro" }].map((m) => (
                <button key={String(m.k)} className={`tweaks-opt ${tweaks.dark === m.k ? "is-active" : ""}`} onClick={() => update("dark", m.k)}>
                  {m.l}
                </button>
              ))}
            </div>
          </div>

          <div className="tweaks-section">
            <label className="tweaks-label">Densidad</label>
            <div className="tweaks-opts">
              {[{ k: "compact", l: "Compacta" }, { k: "regular", l: "Regular" }, { k: "spacious", l: "Amplia" }].map((d) => (
                <button key={d.k} className={`tweaks-opt ${tweaks.density === d.k ? "is-active" : ""}`} onClick={() => update("density", d.k)}>
                  {d.l}
                </button>
              ))}
            </div>
          </div>

          <div className="tweaks-section">
            <label className="tweaks-label">Estilo de botones</label>
            <div className="tweaks-opts">
              {[{ k: "pill", l: "Pill" }, { k: "rounded", l: "Redondeado" }, { k: "sharp", l: "Recto" }].map((b) => (
                <button key={b.k} className={`tweaks-opt ${tweaks.btnStyle === b.k ? "is-active" : ""}`} onClick={() => update("btnStyle", b.k)}>
                  {b.l}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { TweaksPanel });