// Tweaks panel — toggle hero variant, accent color, founder photo

const { useState: useTwS, useEffect: useTwE } = React;

const TweaksPanel = () => {
  const [visible, setVisible] = useTwS(false);
  const [tweaks, setTweaks] = useTwS({ ...window.__TWEAKS });

  useTwE(() => {
    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);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.__TWEAKS = next;
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
    // apply accent live
    if (patch.accent) {
      document.documentElement.style.setProperty("--flame", patch.accent);
    }
    // hero variant requires re-render
    if ("heroVariant" in patch || "showFounderPhoto" in patch) {
      window.dispatchEvent(new Event("fb:rerender"));
    }
  };

  // apply accent on mount
  useTwE(() => {
    if (tweaks.accent) document.documentElement.style.setProperty("--flame", tweaks.accent);
  }, []);

  if (!visible) return null;

  const accents = [
    { k: "#ff4a1c", label: "Flame" },
    { k: "#fbbf24", label: "Sulfur" },
    { k: "#22c55e", label: "Moss" },
    { k: "#dc2626", label: "Ember" },
    { k: "#f5f1ea", label: "Bone" },
  ];

  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 1000,
      width: 300, background: "#0a0a0a",
      border: "1px solid var(--line)",
      padding: "20px", boxShadow: "0 20px 60px rgba(0,0,0,0.6)",
      fontFamily: "'Space Grotesk'", color: "var(--ink)"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between",
        alignItems: "center", marginBottom: 18, paddingBottom: 14,
        borderBottom: "1px solid var(--line)" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--flame)" }}>Tweaks</div>
        <button onClick={() => setVisible(false)} style={{ color: "var(--ink-faint)", fontSize: 14 }}>×</button>
      </div>

      <div style={{ marginBottom: 20 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
          letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>
          Hero direction
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
          {["editorial","magazine","split"].map(v => (
            <button key={v}
              onClick={() => update({ heroVariant: v })}
              style={{
                padding: "10px 8px", fontSize: 12,
                border: "1px solid " + (tweaks.heroVariant === v ? "var(--flame)" : "var(--line)"),
                background: tweaks.heroVariant === v ? "rgba(255,74,28,0.1)" : "transparent",
                color: tweaks.heroVariant === v ? "var(--flame)" : "var(--ink-dim)",
                textTransform: "capitalize", transition: "all 0.15s"
              }}>{v}</button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
          letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>
          Accent
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {accents.map(a => (
            <button key={a.k}
              onClick={() => update({ accent: a.k })}
              title={a.label}
              style={{
                width: 28, height: 28, background: a.k,
                border: tweaks.accent === a.k ? "2px solid var(--ink)" : "2px solid transparent",
                cursor: "pointer"
              }}/>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 4 }}>
        <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
          <input type="checkbox" checked={tweaks.showFounderPhoto}
            onChange={e => update({ showFounderPhoto: e.target.checked })}
            style={{ accentColor: "var(--flame)" }}/>
          <span style={{ fontSize: 13 }}>Show founder photo</span>
        </label>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;