import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth0, Auth0Provider } from '@auth0/auth0-react';
import Navigation from './components/Navigation';
import Deployments from './components/Deployments';
import Profile from './components/Profile';
import Dashboard from './components/Dashboard';
import './App.css';
import config from './config';

// Protected Route wrapper
const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;
  return isAuthenticated ? children : <Navigate to="/" />;
};

function App() {
  return (
    <Auth0Provider
      domain={config.auth0.domain}
      clientId={config.auth0.clientId}
      authorizationParams={{
        redirect_uri: config.auth0.redirectUri,
        audience: config.auth0.audience
      }}
    >
      <BrowserRouter>
        <div className="app">
          <Navigation />
          <div className="content">
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route 
                path="/deployments" 
                element={
                  <ProtectedRoute>
                    <Deployments />
                  </ProtectedRoute>
                } 
              />
              <Route 
                path="/profile" 
                element={
                  <ProtectedRoute>
                    <Profile />
                  </ProtectedRoute>
                } 
              />
            </Routes>
          </div>
        </div>
      </BrowserRouter>
    </Auth0Provider>
  );
}

export default App; 