/* 手機版預覽 — Tweaks 控制：桌面 / 手機。
   手機模式把本頁以 390×844 手機框 iframe 重新載入（?preview=1，自動登入、
   真實觸發既有 RWD media query），桌面模式回到正常全幅。 */
(function () {
  // iframe 子頁本身不掛預覽 UI，避免無限套疊
  if (new URLSearchParams(location.search).has('preview')) return;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "previewMode": "桌面"
  }/*EDITMODE-END*/;

  const PHONE_W = 390, PHONE_H = 844;
  const FRAME_SRC = location.pathname.split('/').pop() + '?preview=1';

  function fitPhone() {
    const stage = document.getElementById('mob-stage');
    if (!stage) return;
    const s = Math.min(1, (innerWidth - 40) / (PHONE_W + 24), (innerHeight - 110) / (PHONE_H + 70));
    stage.style.transform = 'scale(' + s.toFixed(3) + ')';
  }

  function applyMode(mode) {
    const wrap = document.getElementById('mob-prev');
    const frame = document.getElementById('mob-frame');
    if (!wrap || !frame) return;
    if (mode === '手機') {
      if (!frame.getAttribute('src')) frame.setAttribute('src', FRAME_SRC);
      wrap.hidden = false;
      document.body.classList.add('mob-on');
      requestAnimationFrame(fitPhone);
      setTimeout(fitPhone, 60);
    } else {
      wrap.hidden = true;
      document.body.classList.remove('mob-on');
    }
  }

  addEventListener('resize', fitPhone);

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    // 讓覆蓋層的「結束預覽」鈕能改回桌面
    window.__setPreview = (v) => setTweak('previewMode', v);
    React.useEffect(() => { applyMode(t.previewMode); }, [t.previewMode]);
    return (
      <TweaksPanel>
        <TweakSection label="預覽" />
        <TweakRadio
          label="裝置"
          value={t.previewMode}
          options={['桌面', '手機']}
          onChange={(v) => setTweak('previewMode', v)}
        />
      </TweaksPanel>
    );
  }

  const root = document.createElement('div');
  root.id = 'tweaks-root';
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<App />);
})();