// ———— Tweaks panel ————
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "start_page": "collect",
  "sidebar_density": "comfortable",
  "show_tweaks_hint": true
}/*EDITMODE-END*/;

function TweaksPanel({ page, onNav, onSetStartPage, startPage }) {
  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;

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <h4>Tweaks</h4>
        <span className="hint">原型快速预览</span>
      </div>
      <div className="tweaks-row">
        <div className="tweaks-label">跳转页面</div>
        <div className="tweaks-seg">
          <button className={page==="login"?"active":""} onClick={()=>onNav("login")}>登录</button>
          <button className={page==="collect"?"active":""} onClick={()=>onNav("collect")}>采集</button>
          <button className={page==="library"?"active":""} onClick={()=>onNav("library")}>知识库</button>
        </div>
        <div className="tweaks-seg" style={{ marginTop: 4 }}>
          <button className={page==="search"?"active":""} onClick={()=>onNav("search")}>搜索</button>
          <button className={page==="settings"?"active":""} onClick={()=>onNav("settings")}>设置</button>
        </div>
      </div>
      <div className="tweaks-row">
        <div className="tweaks-label">打开时默认页</div>
        <div className="tweaks-seg">
          <button className={startPage==="login"?"active":""} onClick={()=>onSetStartPage("login")}>登录</button>
          <button className={startPage==="collect"?"active":""} onClick={()=>onSetStartPage("collect")}>采集</button>
          <button className={startPage==="library"?"active":""} onClick={()=>onSetStartPage("library")}>库</button>
          <button className={startPage==="search"?"active":""} onClick={()=>onSetStartPage("search")}>搜索</button>
        </div>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", paddingTop: 8, borderTop: "1px solid var(--line)", marginTop: 6, fontFamily: "var(--font-mono)" }}>
        所有 5 个页面均可切换 · 详情抽屉点任意卡片触发
      </div>
    </div>
  );
}
window.TweaksPanel = TweaksPanel;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;