import { lazy, Suspense } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import { AppLayout } from './AppLayout'
import { ROUTE_PATHS } from './route-paths'
import { HomePage } from '../pages/HomePage'
import { IntroPage } from '../pages/IntroPage'

const GamePage = lazy(() => import('../pages/GamePage').then(m => ({ default: m.GamePage })))
const SongSelectionPage = lazy(() => import('../pages/SongSelectionPage').then(m => ({ default: m.SongSelectionPage })))
const EndOfGamePage = lazy(() => import('../pages/EndOfGamePage').then(m => ({ default: m.EndOfGamePage })))
const LeaderboardPage = lazy(() => import('../pages/LeaderboardPage').then(m => ({ default: m.LeaderboardPage })))
const TutorialTestPage = lazy(() => import('../pages/TutorialTestPage').then(m => ({ default: m.TutorialTestPage })))
const RecordPage = lazy(() => import('../pages/RecordPage').then(m => ({ default: m.RecordPage })))
const RecordingTestPage = lazy(() => import('../pages/RecordingTestPage').then(m => ({ default: m.RecordingTestPage })))
const UploadPage = lazy(() => import('../pages/UploadPage').then(m => ({ default: m.UploadPage })))

export function AppRoutes() {
  return (
    <Suspense fallback={null}>
      <Routes>
        <Route element={<AppLayout />}>
          <Route path={ROUTE_PATHS.intro} element={<IntroPage />} />
          <Route path={ROUTE_PATHS.home} element={<HomePage />} />
          <Route path={ROUTE_PATHS.songSelection} element={<SongSelectionPage />} />
          <Route path={ROUTE_PATHS.game} element={<GamePage />} />
          <Route path={ROUTE_PATHS.endOfGame} element={<EndOfGamePage />} />
          <Route path={ROUTE_PATHS.leaderboard} element={<LeaderboardPage />} />
          <Route path={ROUTE_PATHS.record} element={<RecordPage />} />
          <Route path={ROUTE_PATHS.upload} element={<UploadPage />} />
          <Route path="/recording-test" element={<RecordingTestPage />} />
          <Route path="/test/tutorial" element={<TutorialTestPage />} />
          <Route path="*" element={<Navigate to={ROUTE_PATHS.intro} replace />} />
        </Route>
      </Routes>
    </Suspense>
  )
}
