/* ============================================================
   TWEAKS — dark/light toggle
   ============================================================ */

function TweaksPanel() {
  const [active, setActive] = useState(false);
  const [theme, setTheme] = useState(window.__TWEAKS?.theme || "dark");

  useEffect(() => {
    document.body.classList.remove("theme-dark", "theme-light");
    document.body.classList.add(`theme-${theme}`);
  }, [theme]);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setActive(true);
      if (e.data.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const toggle = () => {
    const next = theme === "dark" ? "light" : "dark";
    setTheme(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { theme: next } }, "*");
  };

  return (
    <div className={"tweaks-panel " + (active ? "open" : "")}>
      <div className="head">// tweaks.cfg</div>
      <label onClick={toggle}>
        <span>theme: <span style={{ color: "var(--accent)" }}>{theme}</span></span>
        <span className={"switch " + (theme === "light" ? "on" : "")} />
      </label>
    </div>
  );
}

Object.assign(window, { TweaksPanel });