const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#e5553a",
  "paperColor": "#f5efe0",
  "vibe": "cartoon",
  "darkMode": false
}/*EDITMODE-END*/;

const Tweaks = () => {
  const [open, setOpen] = useState(false);
  const [state, setState] = useState(TWEAK_DEFAULTS);

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

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", state.accentColor);
    document.documentElement.style.setProperty("--paper", state.paperColor);
    document.body.classList.toggle("variant-dark", !!state.darkMode);
  }, [state]);

  const update = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  if (!open) return null;
  return (
    <div className="tweaks-panel open">
      <h4>TWEAKS</h4>
      <div className="tweaks-row">
        <label>Accent color</label>
        <input type="color" value={state.accentColor} onChange={e=>update("accentColor", e.target.value)}/>
      </div>
      <div className="tweaks-row">
        <label>Paper color</label>
        <input type="color" value={state.paperColor} onChange={e=>update("paperColor", e.target.value)}/>
      </div>
      <div className="tweaks-row">
        <label>Dark mode</label>
        <input type="checkbox" checked={!!state.darkMode} onChange={e=>update("darkMode", e.target.checked)}/>
      </div>
      <div style={{fontFamily:"JetBrains Mono", fontSize:10, color:"var(--ink-soft)", marginTop:10}}>
        toggle aesthetic knobs. persisted to file.
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;