// Tweaks panel + edit-mode bridge

const BRAND_SWATCHES = [
  { name: "Ámbar MAB",  color: "#F5A623", deep: "#113A7A" },
  { name: "Amarillo eléctrico", color: "#FFC400", deep: "#0A0A0A" },
  { name: "Naranja",    color: "#EA580C", deep: "#0B2A5A" },
  { name: "Azul profundo", color: "#113A7A", deep: "#0B2A5A" },
];

function TweaksPanel({ open, setOpen, tweaks, setTweaks }) {
  if (!open) return null;
  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
    } catch (e) {}
  };

  return (
    <div className="tweaks">
      <header>
        <b>Tweaks</b>
        <button className="x" onClick={() => setOpen(false)}>×</button>
      </header>
      <div className="body">
        <div>
          <div style={{fontSize:11,color:"var(--muted)",fontWeight:600,textTransform:"uppercase",letterSpacing:".08em",marginBottom:8}}>Color de marca</div>
          <div className="swatches">
            {BRAND_SWATCHES.map(s => (
              <button key={s.name} className={`sw ${tweaks.brandColor === s.color ? "active" : ""}`}
                      title={s.name} style={{background: s.color}}
                      onClick={() => update({ brandColor: s.color, brandDeep: s.deep })} />
            ))}
          </div>
        </div>

        <div>
          <div style={{fontSize:11,color:"var(--muted)",fontWeight:600,textTransform:"uppercase",letterSpacing:".08em",marginBottom:8}}>Variante visual</div>
          <div className="variant-row">
            {[
              ["v1", "Oscura"],
              ["v2", "Amarilla"],
              ["v3", "Azul MAB"],
            ].map(([k, label]) => (
              <button key={k} className={tweaks.variant === k ? "active" : ""}
                      onClick={() => update({ variant: k })}>{label}</button>
            ))}
          </div>
        </div>

        <div className="toggle">
          <label>IVA 19% activo</label>
          <button className={`switch ${tweaks.ivaEnabled ? "on" : ""}`}
                  onClick={() => update({ ivaEnabled: !tweaks.ivaEnabled })} />
        </div>

        <div className="toggle">
          <label>Densidad compacta</label>
          <button className={`switch ${tweaks.density === "compact" ? "on" : ""}`}
                  onClick={() => update({ density: tweaks.density === "compact" ? "comfortable" : "compact" })} />
        </div>

        <div>
          <div style={{fontSize:11,color:"var(--muted)",fontWeight:600,textTransform:"uppercase",letterSpacing:".08em",marginBottom:6}}>Logo (URL)</div>
          <input value={tweaks.logoUrl}
                 onChange={e => update({ logoUrl: e.target.value })}
                 style={{width:"100%",padding:"7px 10px",border:"1px solid var(--line-strong)",borderRadius:6,fontSize:12}} />
        </div>
      </div>
    </div>
  );
}

function useEditModeBridge(open, setOpen) {
  React.useEffect(() => {
    function onMsg(e) {
      const t = e.data?.type;
      if (t === "__activate_edit_mode") setOpen(true);
      else if (t === "__deactivate_edit_mode") setOpen(false);
    }
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch(e) {}
    return () => window.removeEventListener("message", onMsg);
  }, [setOpen]);
}

Object.assign(window, { TweaksPanel, useEditModeBridge });