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 { ReactQueryDevtools } from '@tanstack/react-query-devtools';
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 ManufacturerRides from "./pages/ManufacturerRides";
import ManufacturerModels from "./pages/ManufacturerModels";
import Designers from "./pages/Designers";
import DesignerDetail from "./pages/DesignerDetail";
import DesignerRides from "./pages/DesignerRides";
import ParkOwners from "./pages/ParkOwners";
import PropertyOwnerDetail from "./pages/PropertyOwnerDetail";
import OwnerParks from "./pages/OwnerParks";
import Operators from "./pages/Operators";
import OperatorDetail from "./pages/OperatorDetail";
import OperatorParks from "./pages/OperatorParks";
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 AdminDashboard from "./pages/AdminDashboard";
import AdminModeration from "./pages/AdminModeration";
import AdminReports from "./pages/AdminReports";
import AdminSystemLog from "./pages/AdminSystemLog";
import AdminUsers from "./pages/AdminUsers";
import AdminSettings from "./pages/AdminSettings";
import BlogIndex from "./pages/BlogIndex";
import BlogPost from "./pages/BlogPost";
import AdminBlog from "./pages/AdminBlog";
import ForceLogout from "./pages/ForceLogout";
import AuthCallback from "./pages/AuthCallback";
import MFAStepUp from "./pages/MFAStepUp";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // Disable automatic refetch on tab focus
      refetchOnMount: true,         // Keep refetch on component mount
      refetchOnReconnect: true,     // Keep refetch on network reconnect
      retry: 1,                     // Keep retry attempts
      staleTime: 30000, // 30 seconds - queries stay fresh for 30s
      gcTime: 5 * 60 * 1000, // 5 minutes - keep in cache for 5 mins
    },
  },
});

function AppContent() {
  return (
    <TooltipProvider>
      <BrowserRouter>
        <LocationAutoDetectProvider />
        <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="/blog" element={<BlogIndex />} />
                <Route path="/blog/:slug" element={<BlogPost />} />
                <Route path="/manufacturers" element={<Manufacturers />} />
                <Route path="/manufacturers/:slug" element={<ManufacturerDetail />} />
                <Route path="/manufacturers/:manufacturerSlug/rides" element={<ManufacturerRides />} />
                <Route path="/manufacturers/:manufacturerSlug/models" element={<ManufacturerModels />} />
                <Route path="/designers" element={<Designers />} />
                <Route path="/designers/:slug" element={<DesignerDetail />} />
                <Route path="/designers/:designerSlug/rides" element={<DesignerRides />} />
                <Route path="/owners" element={<ParkOwners />} />
                <Route path="/owners/:slug" element={<PropertyOwnerDetail />} />
                <Route path="/owners/:ownerSlug/parks" element={<OwnerParks />} />
                <Route path="/operators" element={<Operators />} />
                <Route path="/operators/:slug" element={<OperatorDetail />} />
                <Route path="/operators/:operatorSlug/parks" element={<OperatorParks />} />
                <Route path="/auth" element={<Auth />} />
                <Route path="/auth/callback" element={<AuthCallback />} />
                <Route path="/auth/mfa-step-up" element={<MFAStepUp />} />
                <Route path="/profile" element={<Profile />} />
                <Route path="/profile/:username" element={<Profile />} />
                <Route path="/settings" element={<UserSettings />} />
                <Route path="/admin" element={<AdminDashboard />} />
                <Route path="/admin/moderation" element={<AdminModeration />} />
                <Route path="/admin/reports" element={<AdminReports />} />
                <Route path="/admin/system-log" element={<AdminSystemLog />} />
                <Route path="/admin/users" element={<AdminUsers />} />
                <Route path="/admin/blog" element={<AdminBlog />} />
                <Route path="/admin/settings" element={<AdminSettings />} />
                <Route path="/terms" element={<Terms />} />
                <Route path="/privacy" element={<Privacy />} />
                <Route path="/submission-guidelines" element={<SubmissionGuidelines />} />
                <Route path="/force-logout" element={<ForceLogout />} />
                {/* 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>
    {import.meta.env.DEV && (
      <ReactQueryDevtools 
        initialIsOpen={false}
        position="bottom"
      />
    )}
  </QueryClientProvider>
);

export default App;