import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import './App.css'
import Register from './pages/Auth/Register'
import Login from './pages/Auth/Login'
import RecipeList from './pages/Recipes/RecipeList'
import RecipeDetail from './pages/Recipes/RecipeDetail'
import RecipeForm from '@/pages/Recipes/RecipeForm'
import Profile from './pages/Profile'
import Home from './pages/Home'
import ResetPassword from '@/pages/ResetPassword'
import { MainLayout } from './layouts/MainLayout'
import useAuth from '@/hooks/useAuth'
import { ProtectedRoute, AuthRoute } from '@/components/RouteGuards'

function App() {
  const { isAuthenticated, isLoading } = useAuth()

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center text-muted-foreground">
        Chargement de l'application...
      </div>
    )
  }

  return (
    <BrowserRouter>
      <MainLayout>
        <Routes>
          {/* Auth */}
          <Route path="/auth/register" element={<AuthRoute><Register /></AuthRoute>} />
          <Route path="/auth/login" element={<AuthRoute><Login /></AuthRoute>} />
          <Route path="/reset-password" element={<ResetPassword />} />

          {/* Recettes (protégées) */}
          <Route path="/recipes" element={<ProtectedRoute><RecipeList /></ProtectedRoute>} />
          <Route path="/recipes/new" element={<ProtectedRoute><RecipeForm /></ProtectedRoute>} />
          <Route path="/recipes/:id" element={<ProtectedRoute><RecipeDetail /></ProtectedRoute>} />

          {/* Profil */}
          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />

          {/* Racine */}
          <Route path="/" element={isAuthenticated ? <Navigate to="/recipes" replace /> : <Home />} />

          {/* Fallback — DOIT être la dernière route */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </MainLayout>
    </BrowserRouter>
  )
}

export default App
