import { BrowserRouter, Route, Routes } from "react-router";

import { Index } from "./pages/Index.tsx";
import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
import { Dump } from "./pages/Dump.tsx";
import { DumpEdit } from "./pages/DumpEdit.tsx";
import { UserLogin } from "./pages/UserLogin.tsx";
import { UserPublicProfile } from "./pages/UserPublicProfile.tsx";
import { UserRegister } from "./pages/UserRegister.tsx";
import { UserDumps } from "./pages/UserDumps.tsx";
import { UserUpvoted } from "./pages/UserUpvoted.tsx";
import { UserPlaylists } from "./pages/UserPlaylists.tsx";
import { PlaylistDetail } from "./pages/PlaylistDetail.tsx";
import { Notifications } from "./pages/Notifications.tsx";

import { AuthProvider } from "./contexts/AuthProvider.tsx";
import { PlayerProvider } from "./contexts/PlayerProvider.tsx";
import { WSProvider } from "./contexts/WSProvider.tsx";
import { FollowProvider } from "./contexts/FollowProvider.tsx";
import { useAuth } from "./hooks/useAuth.ts";
import { GlobalPlayer } from "./components/GlobalPlayer.tsx";

import "./App.css";

function AppRoutes() {
  const { token, user } = useAuth();
  return (
    <WSProvider token={token} userId={user?.id ?? null}>
      <FollowProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Index />} />
            <Route path="/dumps/:selectedDump" element={<Dump />} />
            <Route
              path="/dumps/:selectedDump/edit"
              element={
                <RestrictedLoggedIn>
                  <DumpEdit />
                </RestrictedLoggedIn>
              }
            />
            <Route
              path="/register"
              element={
                <RestrictedGuest>
                  <UserRegister />
                </RestrictedGuest>
              }
            />
            <Route
              path="/login"
              element={
                <RestrictedGuest>
                  <UserLogin />
                </RestrictedGuest>
              }
            />
            <Route path="/users/:username" element={<UserPublicProfile />} />
            <Route path="/users/:username/dumps" element={<UserDumps />} />
            <Route path="/users/:username/upvoted" element={<UserUpvoted />} />
            <Route
              path="/users/:username/playlists"
              element={<UserPlaylists />}
            />
            <Route path="/playlists/:playlistId" element={<PlaylistDetail />} />
            <Route
              path="/notifications"
              element={
                <RestrictedLoggedIn>
                  <Notifications />
                </RestrictedLoggedIn>
              }
            />
          </Routes>
        </BrowserRouter>
      </FollowProvider>
    </WSProvider>
  );
}

function App() {
  return (
    <AuthProvider>
      <PlayerProvider>
        <AppRoutes />
        <GlobalPlayer />
      </PlayerProvider>
    </AuthProvider>
  );
}

export default App;