import { Routes, Route, Navigate } from 'react-router-dom'
import { Layout } from './components'
import { AdminLayout } from './components/admin'
import {
  GenlockeDetail,
  GenlockeList,
  Home,
  NewGenlocke,
  NewRun,
  RunList,
  RunEncounters,
  Stats,
} from './pages'
import {
  AdminGames,
  AdminGameDetail,
  AdminPokemon,
  AdminRouteDetail,
  AdminEvolutions,
  AdminRuns,
  AdminGenlockes,
  AdminGenlockeDetail,
} from './pages/admin'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="runs" element={<RunList />} />
        <Route path="runs/new" element={<NewRun />} />
        <Route path="runs/:runId" element={<RunEncounters />} />
        <Route path="genlockes" element={<GenlockeList />} />
        <Route path="genlockes/new" element={<NewGenlocke />} />
        <Route path="genlockes/:genlockeId" element={<GenlockeDetail />} />
        <Route path="stats" element={<Stats />} />
        <Route
          path="runs/:runId/encounters"
          element={<Navigate to=".." relative="path" replace />}
        />
        <Route path="admin" element={<AdminLayout />}>
          <Route index element={<Navigate to="/admin/games" replace />} />
          <Route path="games" element={<AdminGames />} />
          <Route path="games/:gameId" element={<AdminGameDetail />} />
          <Route
            path="games/:gameId/routes/:routeId"
            element={<AdminRouteDetail />}
          />
          <Route path="pokemon" element={<AdminPokemon />} />
          <Route path="evolutions" element={<AdminEvolutions />} />
          <Route path="runs" element={<AdminRuns />} />
          <Route path="genlockes" element={<AdminGenlockes />} />
          <Route
            path="genlockes/:genlockeId"
            element={<AdminGenlockeDetail />}
          />
        </Route>
      </Route>
    </Routes>
  )
}

export default App
