import { Navigate, Route, Routes } from 'react-router-dom'
import { useAppSelector } from './store/hooks'
import AppShell from './components/AppShell'
import LoginPage from './pages/usr/LoginPage'
import MainPage from './pages/MainPage'
import UserListPage from './pages/usr/UserListPage'
import UserDetailPage from './pages/usr/UserDetailPage'

function AuthenticatedShell() {
  const accessToken = useAppSelector(s => s.auth.accessToken)
  if (!accessToken) return <Navigate to="/login" replace />
  return <AppShell />
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route element={<AuthenticatedShell />}>
        <Route path="/" element={<MainPage />} />
        <Route path="/usr/users" element={<UserListPage />} />
        <Route path="/usr/users/new" element={<UserDetailPage />} />
        <Route path="/usr/users/:id" element={<UserDetailPage />} />
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}