import { StrictMode, Suspense, lazy, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router';
import 'pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css';
import './styles/global.css';
import { ConnectionBanner, Toasts } from './components/ui';
import { useSession } from './store/session';
import { toast } from './store/toast';
import { Home } from './pages/Home';

const JoinPage = lazy(() => import('./pages/JoinPage'));
const RoomPage = lazy(() => import('./pages/RoomPage'));
const GamePage = lazy(() => import('./pages/GamePage'));
const MePage = lazy(() => import('./pages/MePage'));
const RulesPage = lazy(() => import('./pages/RulesPage'));
const NotFound = lazy(() => import('./pages/NotFound'));

function Shell() {
  const loaded = useSession((s) => s.loaded);
  const nav = useNavigate();
  const loc = useLocation();
  useEffect(() => {
    void useSession.getState().refresh();
    const onUnauthorized = () => void useSession.getState().refresh();
    window.addEventListener('bg:unauthorized', onUnauthorized);
    return () => window.removeEventListener('bg:unauthorized', onUnauthorized);
  }, []);
  useEffect(() => {
    const q = new URLSearchParams(loc.search);
    if (q.get('linked') === '1') toast('디스코드 계정과 연결했어요.');
    if (q.get('login') === 'failed') toast('디스코드 로그인에 실패했어요. 다시 시도해 주세요.', 'error');
    if (q.has('linked') || q.has('login')) {
      q.delete('linked');
      q.delete('login');
      nav({ pathname: loc.pathname, search: q.toString() }, { replace: true });
    }
  }, [loc.search]); // eslint-disable-line react-hooks/exhaustive-deps
  if (!loaded) return <div className="page muted">불러오는 중…</div>;
  return (
    <>
      <ConnectionBanner />
      <Toasts />
      <Suspense fallback={<div className="page muted">불러오는 중…</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/j" element={<JoinPage />} />
          <Route path="/r/:code" element={<RoomPage />} />
          <Route path="/g/:gameId" element={<GamePage />} />
          <Route path="/rules/:gameId" element={<RulesPage />} />
          <Route path="/me" element={<MePage />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Shell />
    </BrowserRouter>
  </StrictMode>,
);