function Tweaks() {
  const [on, setOn] = useState(false);
  const [t, setT] = useState(window.__TWEAKS);

  useEffect(() => {
    function onMsg(e) {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setOn(true);
      if (e.data.type === "__deactivate_edit_mode") setOn(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type: "__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--teal", t.teal);
    document.documentElement.style.setProperty("--gold", t.gold);
    window.__TWEAKS = t;
    localStorage.setItem("nx_tweaks", JSON.stringify(t));
  }, [t]);

  function set(k, v) {
    const nt = {...t, [k]: v};
    setT(nt);
    window.parent.postMessage({type: "__edit_mode_set_keys", edits: {[k]: v}}, "*");
  }

  if (!on) return null;
  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweaks-row"><label>Verde</label><input type="color" value={t.accent} onChange={e => set("accent", e.target.value)} /></div>
      <div className="tweaks-row"><label>Teal</label><input type="color" value={t.teal} onChange={e => set("teal", e.target.value)} /></div>
      <div className="tweaks-row"><label>Dourado</label><input type="color" value={t.gold} onChange={e => set("gold", e.target.value)} /></div>
      <div className="tweaks-row">
        <label>Densidade</label>
        <select value={t.density} onChange={e => set("density", e.target.value)}>
          <option value="compact">Compacta</option>
          <option value="comfortable">Confortável</option>
          <option value="spacious">Espaçosa</option>
        </select>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });