import { Navigate, Route, BrowserRouter, Routes } from 'react-router-dom'
import { AuthProvider, useAuth } from './AuthContext'
import { Layout } from './Layout'
import { LoginPage } from './pages/LoginPage'
import { OrdersPage } from './pages/OrdersPage'
import { ParticipantsPage } from './pages/ParticipantsPage'
import { RoundDetailPage } from './pages/RoundDetailPage'
import { RoundsPage } from './pages/RoundsPage'
import { RouteProvider } from './RouteContext'
import { TemplatesPage } from './pages/TemplatesPage'
import './App.css'

function AppRoutes() {
  const { currentUser, loading } = useAuth()

  if (loading) return <p>Indlæser...</p>
  if (!currentUser) return <LoginPage />

  return (
    <RouteProvider>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/deltagere" element={<ParticipantsPage />} />
          <Route path="/runder" element={<RoundsPage />} />
          <Route path="/runder/:roundId" element={<RoundDetailPage />} />
          <Route path="/runder/:roundId/ordrer" element={<OrdersPage />} />
          <Route path="/skabeloner" element={<TemplatesPage />} />
          <Route path="*" element={<Navigate to="/deltagere" replace />} />
        </Route>
      </Routes>
    </RouteProvider>
  )
}

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppRoutes />
      </AuthProvider>
    </BrowserRouter>
  )
}

export default App