import { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import Home from "./pages/Home.tsx";
import Profile from "./pages/Profile.tsx";
import ProfileSettings from "./pages/ProfileSettings.tsx";
import SliceOverview from "./pages/SliceOverview.tsx";
import SliceLexiconDetail from "./pages/SliceLexiconDetail.tsx";
import SliceRecords from "./pages/SliceRecords.tsx";
import SliceApiDocs from "./pages/SliceApiDocs.tsx";
import SliceJetstream from "./pages/SliceJetstream.tsx";
import SliceSync from "./pages/SliceSync.tsx";
import SliceSyncJob from "./pages/SliceSyncJob.tsx";
import SliceSettings from "./pages/SliceSettings.tsx";
import OAuthClients from "./pages/OAuthClients.tsx";
import Docs from "./pages/Docs.tsx";
import DocsDetail from "./pages/DocsDetail.tsx";
import Login from "./pages/Login.tsx";
import Waitlist from "./pages/Waitlist.tsx";
import LoadingFallback from "./LoadingFallback.tsx";
import { RelayAuthProvider } from "./lib/relay-auth-provider.tsx";
import { useSession, SessionContext } from "./lib/useSession.ts";
import { ProtectedRoute } from "./components/ProtectedRoute.tsx";

function App() {
  const sessionData = useSession();

  // Wait for session to load before rendering anything
  if (sessionData.isLoading) {
    return <LoadingFallback />;
  }

  return (
    <SessionContext.Provider value={sessionData}>
      <BrowserRouter>
        <RelayAuthProvider>
          <Suspense fallback={<LoadingFallback />}>
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route path="/waitlist" element={<Waitlist />} />
              <Route path="/" element={<Home />} />
              <Route path="/docs" element={<ProtectedRoute><Docs /></ProtectedRoute>} />
              <Route path="/docs/:slug" element={<ProtectedRoute><DocsDetail /></ProtectedRoute>} />
              <Route path="/profile/:handle" element={<Profile />} />
              <Route path="/profile/:handle/settings" element={<ProtectedRoute><ProfileSettings /></ProtectedRoute>} />
              <Route path="/profile/:handle/slice/:rkey" element={<SliceOverview />} />
              <Route path="/profile/:handle/slice/:rkey/lexicons/:lexiconRkey" element={<SliceLexiconDetail />} />
              <Route path="/profile/:handle/slice/:rkey/records" element={<SliceRecords />} />
              <Route path="/profile/:handle/slice/:rkey/api-docs" element={<ProtectedRoute><SliceApiDocs /></ProtectedRoute>} />
              <Route path="/profile/:handle/slice/:rkey/jetstream" element={<SliceJetstream />} />
              <Route path="/profile/:handle/slice/:rkey/sync" element={<ProtectedRoute><SliceSync /></ProtectedRoute>} />
              <Route path="/profile/:handle/slice/:rkey/sync/:jobId" element={<ProtectedRoute><SliceSyncJob /></ProtectedRoute>} />
              <Route path="/profile/:handle/slice/:rkey/oauth" element={<ProtectedRoute><OAuthClients /></ProtectedRoute>} />
              <Route path="/profile/:handle/slice/:rkey/settings" element={<ProtectedRoute><SliceSettings /></ProtectedRoute>} />
            </Routes>
          </Suspense>
        </RelayAuthProvider>
      </BrowserRouter>
    </SessionContext.Provider>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);