import * as React from "react";
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "@/hooks/useAuth";
import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
import { Footer } from "@/components/layout/Footer";
import Index from "./pages/Index";
import Parks from "./pages/Parks";
import ParkDetail from "./pages/ParkDetail";
import RideDetail from "./pages/RideDetail";
import Rides from "./pages/Rides";
import Manufacturers from "./pages/Manufacturers";
import ManufacturerDetail from "./pages/ManufacturerDetail";
import Designers from "./pages/Designers";
import DesignerDetail from "./pages/DesignerDetail";
import ParkOwners from "./pages/ParkOwners";
import PropertyOwnerDetail from "./pages/PropertyOwnerDetail";
import Operators from "./pages/Operators";
import OperatorDetail from "./pages/OperatorDetail";
import Auth from "./pages/Auth";
import Profile from "./pages/Profile";
import UserSettings from "./pages/UserSettings";
import Search from "./pages/Search";
import NotFound from "./pages/NotFound";
import Terms from "./pages/Terms";
import Privacy from "./pages/Privacy";
import SubmissionGuidelines from "./pages/SubmissionGuidelines";
import Admin from "./pages/Admin";
import AdminSettings from "./pages/AdminSettings";

const queryClient = new QueryClient();

function AppContent() {
  return (
    <TooltipProvider>
      <LocationAutoDetectProvider />
      <BrowserRouter>
          <Toaster />
          <Sonner />
          <div className="min-h-screen flex flex-col">
            <div className="flex-1">
              <Routes>
                <Route path="/" element={<Index />} />
                <Route path="/parks" element={<Parks />} />
                <Route path="/parks/:slug" element={<ParkDetail />} />
                <Route path="/parks/:parkSlug/rides/:rideSlug" element={<RideDetail />} />
                <Route path="/rides" element={<Rides />} />
                <Route path="/search" element={<Search />} />
                <Route path="/manufacturers" element={<Manufacturers />} />
                <Route path="/manufacturers/:slug" element={<ManufacturerDetail />} />
                <Route path="/designers" element={<Designers />} />
                <Route path="/designers/:slug" element={<DesignerDetail />} />
                <Route path="/owners" element={<ParkOwners />} />
                <Route path="/owners/:slug" element={<PropertyOwnerDetail />} />
                <Route path="/operators" element={<Operators />} />
                <Route path="/operators/:slug" element={<OperatorDetail />} />
                <Route path="/auth" element={<Auth />} />
                <Route path="/profile" element={<Profile />} />
                <Route path="/profile/:username" element={<Profile />} />
                <Route path="/settings" element={<UserSettings />} />
                <Route path="/admin" element={<Admin />} />
                <Route path="/admin/settings" element={<AdminSettings />} />
                <Route path="/terms" element={<Terms />} />
                <Route path="/privacy" element={<Privacy />} />
                <Route path="/submission-guidelines" element={<SubmissionGuidelines />} />
                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                <Route path="*" element={<NotFound />} />
              </Routes>
            </div>
            <Footer />
          </div>
        </BrowserRouter>
      </TooltipProvider>
  );
}

const App = () => (
  <QueryClientProvider client={queryClient}>
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  </QueryClientProvider>
);

export default App;