import { Navigate, Route, Routes } from "react-router-dom";
import { RedirectIfAuthenticated } from "./features/auth/RedirectIfAuthenticated";
import { RequireAuth } from "./features/auth/RequireAuth";
import { AppLayout } from "./layouts/AppLayout";
import { HomePage } from "./pages/HomePage";
import { HouseholdPage } from "./pages/HouseholdPage";
import { LoginPage } from "./pages/LoginPage";
import { RecipesPage } from "./pages/RecipesPage";
import { ShoppingListPage } from "./pages/ShoppingListPage";
import { SignupPage } from "./pages/SignupPage";

/**
 * Top-level route table. Every authenticated section is nested under one
 * `RequireAuth` + `AppLayout` parent route (sidebar chrome + `/auth`
 * guard applied once, not per-page — see {@link AppLayout}); `/login` and
 * `/signup` redirect an already-logged-in visitor to `/` instead (see
 * {@link RedirectIfAuthenticated}). Anything else falls back to `/`, which
 * itself redirects to `/login` if needed.
 */
export function App() {
  return (
    <Routes>
      <Route
        element={
          <RequireAuth>
            <AppLayout />
          </RequireAuth>
        }
      >
        <Route path="/" element={<HomePage />} />
        <Route path="/recettes" element={<RecipesPage />} />
        <Route path="/liste-de-courses" element={<ShoppingListPage />} />
        <Route path="/foyer" element={<HouseholdPage />} />
      </Route>
      <Route
        path="/login"
        element={
          <RedirectIfAuthenticated>
            <LoginPage />
          </RedirectIfAuthenticated>
        }
      />
      <Route
        path="/signup"
        element={
          <RedirectIfAuthenticated>
            <SignupPage />
          </RedirectIfAuthenticated>
        }
      />
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}