// Tweaks panel
function TweaksPanel({ tokens, setTokens }) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setVisible(true);
      if (d.type === "__deactivate_edit_mode") setVisible(false);
    };
    window.addEventListener("message", onMsg);
    // announce after listener in place
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  if (!visible) return null;

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

  return (
    <div style={{
      position: "fixed", right: 16, bottom: 84, zIndex: 200,
      width: 300, background: "#fff",
      border: "1px solid #E9E9E9", borderRadius: 6,
      boxShadow: "0 20px 50px rgba(0,0,0,.18)",
      fontFamily: "'Source Sans 3', system-ui, sans-serif",
      fontSize: 13,
    }}>
      <div style={{
        padding: "12px 16px", background: tokens.primaryBlue, color: "#fff",
        fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase",
        fontSize: 12, borderRadius: "6px 6px 0 0",
      }}>Tweaks</div>
      <div style={{ padding: 16, display: "grid", gap: 14 }}>
        <Row label="Azul primario">
          <input type="color" value={tokens.primaryBlue} onChange={e => update("primaryBlue", e.target.value)} />
        </Row>
        <Row label="Azul titulares">
          <input type="color" value={tokens.titleBlue} onChange={e => update("titleBlue", e.target.value)} />
        </Row>
        <Row label="Naranja CTA">
          <input type="color" value={tokens.ctaOrange} onChange={e => update("ctaOrange", e.target.value)} />
        </Row>
        <Row label="Overlay hero">
          <input type="range" min="0.2" max="0.9" step="0.05"
                 value={tokens.heroOverlay}
                 onChange={e => update("heroOverlay", parseFloat(e.target.value))} />
        </Row>
        <Row label="Decoración SVG">
          <input type="checkbox" checked={!!tokens.showDecor}
                 onChange={e => update("showDecor", e.target.checked)} />
        </Row>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#777", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 6 }}>Titular del hero</div>
          <textarea rows={3} value={tokens.heroHeadline}
                    onChange={e => update("heroHeadline", e.target.value)}
                    style={{ width: "100%", padding: 8, border: "1px solid #E9E9E9", borderRadius: 4, fontFamily: "inherit", fontSize: 13, resize: "vertical" }}/>
        </div>
      </div>
    </div>
  );
}

function Row({ label, children }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
      <span style={{ fontSize: 12.5, color: "#444", fontWeight: 600 }}>{label}</span>
      {children}
    </div>
  );
}

window.TweaksPanel = TweaksPanel;