/* Tweaks panel — dark/light theme */

const Tweaks = ({ theme, setTheme, persist }) => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const h = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setVisible(false);
    };
    window.addEventListener("message", h);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", h);
  }, []);
  if (!visible) return null;
  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 80,
      width: 240, padding: 18,
      borderRadius: 16,
      background: "var(--bg-card)", border: "1px solid var(--line)",
      boxShadow: "var(--shadow-lg)",
    }}>
      <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12 }}>Tweaks</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 6 }}>Theme</div>
      <div style={{ display: "flex", gap: 6, padding: 4, background: "var(--bg-soft)", borderRadius: 10, border: "1px solid var(--line-soft)" }}>
        {["light", "dark"].map((m) => (
          <button key={m} onClick={() => { setTheme(m); persist({ theme: m }); }} style={{
            flex: 1, padding: "8px 10px", borderRadius: 7, fontSize: 12,
            background: theme === m ? "var(--bg-card)" : "transparent",
            color: theme === m ? "var(--ink)" : "var(--ink-3)",
            border: theme === m ? "1px solid var(--line)" : "1px solid transparent",
            textTransform: "capitalize",
          }}>{m}</button>
        ))}
      </div>
    </div>
  );
};
window.Tweaks = Tweaks;