import { Navigate, Route, Routes } from 'react-router-dom'
import { AppShell } from './components/AppShell'
import { FullPageLoader } from './components/ui'
import { useAuth } from './context/AuthContext'
import { AuthPage } from './pages/AuthPage'
import { HouseholdsPage } from './pages/HouseholdsPage'
import { InventoryPage } from './pages/InventoryPage'
import { LocationsPage } from './pages/LocationsPage'
import { ProfilePage } from './pages/ProfilePage'
import { UsersPage } from './pages/UsersPage'

export default function App() {
  const { user, loading } = useAuth()

  if (loading) return <FullPageLoader />
  if (!user) return <AuthPage />

  const isSiteAdmin = user.roles.some((role) => role === 'Site Admin' || role === 'Admin')

  return (
    <Routes>
      <Route element={<AppShell />}>
        <Route index element={<InventoryPage />} />
        <Route path="locations" element={<LocationsPage />} />
        <Route path="households" element={<HouseholdsPage />} />
        <Route path="profile" element={<ProfilePage />} />
        {isSiteAdmin && <Route path="users" element={<UsersPage />} />}
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}