// Tweaks panel (compact)
function Tweaks({ theme, setTheme, lang, setLang, accent, setAccent }) {
  const [visible, setVisible] = useState(false);

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

  if (!visible) return null;

  const accents = ["#C8102E", "#D97757", "#E8B04B", "#0E7C66", "#1F2937"];

  const persist = (edits) => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  return (
    <div className="tweaks">
      <h5>Tweaks</h5>
      <div className="tweaks-row">
        <span className="lbl">Theme</span>
        <button
          className={`btn ${theme === "dark" ? "active" : ""}`}
          onClick={() => { setTheme("dark"); persist({ defaultTheme: "dark" }); }}
        >Dark</button>
        <button
          className={`btn ${theme === "light" ? "active" : ""}`}
          onClick={() => { setTheme("light"); persist({ defaultTheme: "light" }); }}
        >Light</button>
      </div>
      <div className="tweaks-row">
        <span className="lbl">Sprache</span>
        <button className={`btn ${lang === "de" ? "active" : ""}`} onClick={() => { setLang("de"); persist({ defaultLang: "de" }); }}>DE</button>
        <button className={`btn ${lang === "en" ? "active" : ""}`} onClick={() => { setLang("en"); persist({ defaultLang: "en" }); }}>EN</button>
      </div>
      <div className="tweaks-row">
        <span className="lbl">Akzent</span>
        {accents.map((c) => (
          <button
            key={c}
            className={`tweaks-swatch ${accent === c ? "active" : ""}`}
            style={{ background: c }}
            onClick={() => { setAccent(c); persist({ accent: c }); }}
            aria-label={c}
          />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });