// app.jsx — Muna router, scaling stage, tweaks. Mounts the prototype.
(function () {
  const T = window.T;
  const { useState, useEffect, useRef, useCallback } = React;
  const { BottomNav, PhoneFrame } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "playerStyle": "immersive",
    "homeBanner": "top",
    "homeSheetStart": "peek"
  }/*EDITMODE-END*/;

  // route → screen component name
  const SCREENS = {
    splash: 'Splash', intro: 'Intro', permission: 'Permission', interest: 'Interest',
    home: 'Home', explore: 'Explore', qr: 'QRScan', library: 'Library', my: 'MyPage',
    detail: 'Detail', loading: 'Loading', player: 'Player', postplay: 'PostPlay',
    login: 'Login', search: 'Search', states: 'StatesIndex',
    permDenied: 'PermDenied', empty: 'Empty', netError: 'NetError',
  };
  const TAB_ROUTES = ['home', 'explore', 'library', 'my'];
  const DARK_ROUTES = ['player', 'loading', 'qr', 'netError'];
  const TAB_OF = { home: 'home', explore: 'explore', library: 'library', my: 'my', qr: 'qr' };

  function App() {
    const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
    const initRef = useRef((() => {
      const h = decodeURIComponent((location.hash || '').slice(1));
      if (!h) return ['splash', {}];
      const [r, id] = h.split('|');
      return [SCREENS[r] ? r : 'splash', id ? { id } : {}];
    })());
    const [route, setRoute] = useState(initRef.current[0]);
    const [params, setParams] = useState(initRef.current[1]);
    const [overlay, setOverlay] = useState(null);
    const histRef = useRef([]);
    const [appState, setAppState] = useState({ interests: ['arch', 'royal'], lang: 'ko', saved: [] });
    const set = useCallback((patch) => setAppState(s => ({ ...s, ...patch })), []);

    const go = useCallback((r, p = {}) => {
      if (r === 'langPick') { setOverlay('langPick'); return; }
      if (r === 'back') {
        if (overlay) { setOverlay(null); return; }
        const prev = histRef.current.pop();
        if (prev) { setRoute(prev.route); setParams(prev.params); }
        return;
      }
      setOverlay(null);
      histRef.current.push({ route, params });
      if (histRef.current.length > 40) histRef.current.shift();
      setRoute(r); setParams(p);
      // scroll reset handled per-screen (absolute)
    }, [route, params, overlay]);

    const Comp = window[SCREENS[route]] || window.Home;
    const isTab = TAB_ROUTES.includes(route);
    const dark = DARK_ROUTES.includes(route);

    return (
      <Stage>
        <PhoneFrame dark={dark}>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
            <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
              <Comp key={route + JSON.stringify(params)} go={go} app={appState} set={set}
                params={params} tw={t} />
            </div>
            {isTab && <BottomNav active={TAB_OF[route]} onNav={(tab) => go(tab)} />}
          </div>
          {overlay === 'langPick' && <window.LangPick go={go} app={appState} set={set} />}
        </PhoneFrame>

        <TweaksUI t={t} setTweak={setTweak} go={go} route={route} />
      </Stage>
    );
  }

  // ── scaling stage ──
  function Stage({ children }) {
    const [scale, setScale] = useState(1);
    useEffect(() => {
      const fit = () => {
        const pad = 40;
        const s = Math.min((window.innerWidth - pad) / 412, (window.innerHeight - pad) / 892, 1);
        setScale(s);
      };
      fit(); window.addEventListener('resize', fit);
      return () => window.removeEventListener('resize', fit);
    }, []);
    return (
      <div style={{ position: 'fixed', inset: 0, display: 'grid', placeItems: 'center',
        background: 'radial-gradient(120% 120% at 50% 0%, #efe7d6, #e4dac4)', overflow: 'hidden' }}>
        <div style={{ transform: `scale(${scale})`, transformOrigin: 'center' }}>
          {children}
        </div>
      </div>
    );
  }

  // ── tweaks panel ──
  function TweaksUI({ t, setTweak, go, route }) {
    const { TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;
    const jumpOpts = [
      ['온보딩 · 스플래시', 'splash'], ['온보딩 · 인트로', 'intro'], ['온보딩 · 권한', 'permission'],
      ['온보딩 · 관심사', 'interest'], ['홈 · 지도', 'home'], ['탐색', 'explore'], ['QR 스캔', 'qr'],
      ['보관함', 'library'], ['마이페이지', 'my'], ['상세', 'detail|geun'], ['생성 로딩', 'loading|geun'],
      ['플레이어', 'player|geun'], ['재생 종료 후', 'postplay|geun'], ['로그인', 'login'], ['검색', 'search'],
      ['상태 · 권한거부', 'permDenied'], ['상태 · 빈 화면', 'empty'], ['상태 · 에러', 'netError'],
    ];
    return (
      <TweaksPanel title="Tweaks">
        <TweakSection label="플레이어" />
        <TweakRadio label="비주얼 방향" value={t.playerStyle}
          options={[{ value: 'immersive', label: '몰입형' }, { value: 'transcript', label: '자막형' }, { value: 'minimal', label: '미니멀' }]}
          onChange={(v) => setTweak('playerStyle', v)} />
        <TweakSection label="홈 지도" />
        <TweakRadio label="근접 알림 위치" value={t.homeBanner}
          options={[{ value: 'top', label: '상단' }, { value: 'floating', label: '플로팅' }]}
          onChange={(v) => setTweak('homeBanner', v)} />
        <TweakRadio label="바텀시트 시작" value={t.homeSheetStart}
          options={[{ value: 'peek', label: '접힘' }, { value: 'open', label: '펼침' }]}
          onChange={(v) => setTweak('homeSheetStart', v)} />
        <TweakSection label="화면 바로가기" />
        <TweakSelect label="이동" value={'__'}
          options={[{ value: '__', label: '화면 선택…' }, ...jumpOpts.map(([l, v]) => ({ value: v, label: l }))]}
          onChange={(v) => { if (v === '__') return; const [r, id] = v.split('|'); go(r, id ? { id } : {}); }} />
      </TweaksPanel>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
})();