import { Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider, ProtectedRoute } from './auth'
import { Header, FlightProvider, SavedAnnotationsProvider } from './components'
import { LoginPage } from './features/login'
import { FlightsPage } from './features/flights'
import { AnnotationsPage } from './features/annotations'
import { DatasetPage } from './features/dataset'
import { AdminPage } from './features/admin'
import { SettingsPage } from './features/settings'

export default function App() {
  return (
    <AuthProvider>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/*"
          element={
            <ProtectedRoute>
              <FlightProvider>
                <SavedAnnotationsProvider>
                  <div className="flex flex-col h-screen">
                    <Header />
                    <div className="flex-1 overflow-hidden">
                      <Routes>
                        <Route path="/flights" element={<FlightsPage />} />
                        <Route path="/annotations" element={<AnnotationsPage />} />
                        <Route path="/dataset" element={<DatasetPage />} />
                        <Route path="/admin" element={<AdminPage />} />
                        <Route path="/settings" element={<SettingsPage />} />
                        <Route path="*" element={<Navigate to="/flights" replace />} />
                      </Routes>
                    </div>
                  </div>
                </SavedAnnotationsProvider>
              </FlightProvider>
            </ProtectedRoute>
          }
        />
      </Routes>
    </AuthProvider>
  )
}