import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
import { AppLayout } from './components/layout/AppLayout.js';
import { useAuth } from './hooks/useAuth.js';
import { CreateObjective } from './pages/CreateObjective.js';
import { Dashboard } from './pages/Dashboard.js';
import { KeyResultDetail } from './pages/KeyResultDetail.js';
import { Login } from './pages/Login.js';
import { OKRDetail } from './pages/OKRDetail.js';

function ProtectedRoute(): JSX.Element {
  const { user } = useAuth();
  return user === null ? <Navigate to="/login" replace /> : <Outlet />;
}

export function App(): JSX.Element {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route element={<ProtectedRoute />}>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="objectives/new" element={<CreateObjective />} />
          <Route path="objectives/:id" element={<OKRDetail />} />
          <Route path="key-results/:id" element={<KeyResultDetail />} />
        </Route>
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}