// Tweaks panel
function Tweaks() {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState(false);
  const [tweaks, setTweaks] = useState(window.__TWEAKS);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      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" }, "*");
    setAvailable(true);
    return () => window.removeEventListener("message", handler);
  }, []);

  const set = (key, val) => {
    const next = { ...tweaks, [key]: val };
    window.__TWEAKS = next;
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
    document.documentElement.setAttribute("data-theme", next.theme);
    document.documentElement.setAttribute("data-density", next.density);
    document.documentElement.setAttribute("data-accent", next.accent);
    window.dispatchEvent(new Event("tweaks-changed"));
  };

  if (!open) return null;
  return (
    <div className="tweaks-panel">
      <div className="flex justify-between items-center mb-4">
        <div className="serif" style={{ fontSize: 15, fontWeight: 500 }}>Tweaks</div>
        <button className="icon-btn" onClick={() => setOpen(false)}><Icon.X size={14} /></button>
      </div>
      <div className="tweak-row">
        <label>Language</label>
        <SegControl value={tweaks.language} onChange={v => set("language", v)} options={[
          { value: "cn", label: "中文" }, { value: "en", label: "English" },
        ]} />
      </div>
      <div className="tweak-row">
        <label>Theme</label>
        <SegControl value={tweaks.theme} onChange={v => set("theme", v)} options={[
          { value: "light", label: "Light" }, { value: "dark", label: "Dark" },
        ]} />
      </div>
      <div className="tweak-row">
        <label>Density</label>
        <SegControl value={tweaks.density} onChange={v => set("density", v)} options={[
          { value: "comfortable", label: "Comfortable" }, { value: "compact", label: "Compact" },
        ]} />
      </div>
      <div className="tweak-row">
        <label>Persona</label>
        <SegControl value={tweaks.persona} onChange={v => set("persona", v)} options={[
          { value: "accountant", label: "Accountant" }, { value: "owner", label: "Owner" },
        ]} />
      </div>
      <div className="tweak-row">
        <label>Data state</label>
        <SegControl value={tweaks.dataState} onChange={v => set("dataState", v)} options={[
          { value: "populated", label: "Populated" }, { value: "empty", label: "Empty" },
        ]} />
      </div>
      <div className="tweak-row">
        <label>Accent</label>
        <SegControl value={tweaks.accent} onChange={v => set("accent", v)} options={[
          { value: "emerald", label: "Emerald" }, { value: "gold", label: "Gold" }, { value: "terracotta", label: "Terracotta" },
        ]} />
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;