import { Suspense, lazy } 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 "@/contexts/AuthContext";
import { ProtectedRoute } from "@/components/ProtectedRoute";
import { AdminRoute } from "@/components/AdminRoute";
import { ErrorBoundary } from "@/components/ErrorBoundary";
import { CookieConsent } from "@/components/CookieConsent";

import { PWAUpdatePrompt } from "@/components/PWAUpdatePrompt";
import { PWAInstallPrompt } from "@/components/PWAInstallPrompt";
import { GeoBlock } from "@/components/GeoBlock";
import { PageViewTracker } from "@/components/PageViewTracker";
import { Loader2, Star } from "lucide-react";
import { HelmetProvider } from "react-helmet-async";

// Lazy load page components for better code splitting
const Landing = lazy(() => import("./pages/Landing"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Auth = lazy(() => import("./pages/Auth"));
const AuthCallback = lazy(() => import("./pages/AuthCallback"));
const ResetPassword = lazy(() => import("./pages/ResetPassword"));
const Settings = lazy(() => import("./pages/Settings"));
const Charts = lazy(() => import("./pages/Charts"));
const Subscription = lazy(() => import("./pages/Subscription"));
const Pricing = lazy(() => import("./pages/Pricing"));
const Support = lazy(() => import("./pages/Support"));
const TicketDetails = lazy(() => import("./pages/TicketDetails"));
const Privacy = lazy(() => import("./pages/Privacy"));
const Terms = lazy(() => import("./pages/Terms"));
const FAQ = lazy(() => import("./pages/FAQ"));
const CookiePolicy = lazy(() => import("./pages/CookiePolicy"));
const Copyright = lazy(() => import("./pages/Copyright"));
const Accessibility = lazy(() => import("./pages/Accessibility"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const BlogCategory = lazy(() => import("./pages/BlogCategory"));
const BlogTags = lazy(() => import("./pages/BlogTags"));
const BlogAuthor = lazy(() => import("./pages/BlogAuthor"));
const TransitIndex = lazy(() => import("./pages/TransitIndex"));
const MercuryRetrogradeHub = lazy(() => import("./pages/MercuryRetrogradeHub"));
const BirthChartCalculator = lazy(() => import("./pages/BirthChartCalculator"));
const Tools = lazy(() => import("./pages/Tools"));
const MoonPhaseTracker = lazy(() => import("./pages/MoonPhaseTracker"));
const TransitCalendarTool = lazy(() => import("./pages/TransitCalendarTool"));
const Affiliates = lazy(() => import("./pages/Affiliates"));
const AffiliateDashboard = lazy(() => import("./pages/AffiliateDashboard"));
const Try = lazy(() => import("./pages/Try"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Video = lazy(() => import("./pages/Video"));
const Leo = lazy(() => import("./pages/Leo"));
const Aries = lazy(() => import("./pages/Aries"));
const Taurus = lazy(() => import("./pages/Taurus"));
const Gemini = lazy(() => import("./pages/Gemini"));
const Cancer = lazy(() => import("./pages/Cancer"));
const Virgo = lazy(() => import("./pages/Virgo"));
const Libra = lazy(() => import("./pages/Libra"));
const Scorpio = lazy(() => import("./pages/Scorpio"));
const Sagittarius = lazy(() => import("./pages/Sagittarius"));
const Capricorn = lazy(() => import("./pages/Capricorn"));
const Aquarius = lazy(() => import("./pages/Aquarius"));
const Pisces = lazy(() => import("./pages/Pisces"));
const AdminLogin = lazy(() => import("./pages/AdminLogin"));
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));
const AdminSupport = lazy(() => import("./pages/AdminSupport"));
const AdminAnalytics = lazy(() => import("./pages/AdminAnalytics"));
const AdminAffiliates = lazy(() => import("./pages/AdminAffiliates"));
const About = lazy(() => import("./pages/About"));
const Methodology = lazy(() => import("./pages/Methodology"));
const Features = lazy(() => import("./pages/Features"));
const Changelog = lazy(() => import("./pages/Changelog"));
const Press = lazy(() => import("./pages/Press"));
const HouseToBodyMap = lazy(() => import("./pages/HouseToBodyMap"));
const MyBookmarks = lazy(() => import("./pages/MyBookmarks"));

// Loading fallback component with branded experience
const PageLoader = () => (
  <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background gap-4">
    <Star className="h-10 w-10 text-primary animate-pulse" />
    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
    <p className="text-sm text-muted-foreground">Loading Soular Map...</p>
  </div>
);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes - data doesn't change often
      gcTime: 10 * 60 * 1000, // 10 minutes cache time
      refetchOnWindowFocus: false, // Don't refetch on tab switch
      refetchOnReconnect: false, // Don't refetch on reconnect
      retry: 1, // Only retry once on failure
    },
  },
});

const App = () => (
  <ErrorBoundary>
    <HelmetProvider>
      <QueryClientProvider client={queryClient}>
        <GeoBlock>
          <TooltipProvider>
            <AuthProvider>
              <Toaster />
              <Sonner />
                <BrowserRouter>
                <PageViewTracker />
                
                <CookieConsent />
                <PWAUpdatePrompt />
                <PWAInstallPrompt />
                <Suspense fallback={<PageLoader />}>
                <Routes>
                  <Route path="/" element={<Landing />} />
                  <Route path="/aries" element={<Aries />} />
                  <Route path="/taurus" element={<Taurus />} />
                  <Route path="/gemini" element={<Gemini />} />
                  <Route path="/cancer" element={<Cancer />} />
                  <Route path="/leo" element={<Leo />} />
                  <Route path="/virgo" element={<Virgo />} />
                  <Route path="/libra" element={<Libra />} />
                  <Route path="/scorpio" element={<Scorpio />} />
                  <Route path="/sagittarius" element={<Sagittarius />} />
                  <Route path="/capricorn" element={<Capricorn />} />
                  <Route path="/aquarius" element={<Aquarius />} />
                  <Route path="/pisces" element={<Pisces />} />
                  <Route path="/video/:videoId" element={<Video />} />
                  <Route path="/auth" element={<Auth />} />
                  <Route path="/auth/callback" element={<AuthCallback />} />
                  <Route path="/auth/reset-password" element={<ResetPassword />} />
                  <Route path="/privacy" element={<Privacy />} />
                  <Route path="/terms" element={<Terms />} />
                  <Route path="/faq" element={<FAQ />} />
                  <Route path="/cookie-policy" element={<CookiePolicy />} />
                  <Route path="/copyright" element={<Copyright />} />
                  <Route path="/accessibility" element={<Accessibility />} />
                  <Route path="/blog" element={<Blog />} />
                  <Route path="/blog/tags" element={<BlogTags />} />
                  <Route path="/blog/transits" element={<TransitIndex />} />
                  <Route path="/blog/mercury-retrograde" element={<MercuryRetrogradeHub />} />
                  <Route path="/tools" element={<Tools />} />
                  <Route path="/tools/birth-chart-calculator" element={<BirthChartCalculator />} />
                  <Route path="/tools/moon-phase-tracker" element={<MoonPhaseTracker />} />
                  <Route path="/tools/transit-calendar" element={<TransitCalendarTool />} />
                  <Route path="/blog/category/:category" element={<BlogCategory />} />
                  <Route path="/blog/author/soular-map-team" element={<BlogAuthor />} />
                  <Route path="/blog/:slug" element={<BlogPost />} />
                  <Route path="/about" element={<About />} />
                  <Route path="/methodology" element={<Methodology />} />
                  <Route path="/features" element={<Features />} />
                  <Route path="/changelog" element={<Changelog />} />
                  <Route path="/press" element={<Press />} />
                  <Route path="/pricing" element={<Pricing />} />
                  <Route path="/try" element={<Try />} />
                  <Route path="/learn/house-to-body-map" element={<HouseToBodyMap />} />
                  <Route path="/affiliates" element={<ProtectedRoute><Affiliates /></ProtectedRoute>} />
                  <Route path="/affiliate-dashboard" element={<ProtectedRoute><AffiliateDashboard /></ProtectedRoute>} />
                  <Route path="/app" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
                  <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
                  <Route path="/charts" element={<ProtectedRoute><Charts /></ProtectedRoute>} />
                  <Route path="/subscription" element={<ProtectedRoute><Subscription /></ProtectedRoute>} />
                  <Route path="/support" element={<ProtectedRoute><Support /></ProtectedRoute>} />
                  <Route path="/support/:ticketId" element={<ProtectedRoute><TicketDetails /></ProtectedRoute>} />
                  <Route path="/bookmarks" element={<ProtectedRoute><MyBookmarks /></ProtectedRoute>} />
                  <Route path="/admin" element={<AdminLogin />} />
                  <Route path="/admin/dashboard" element={<ProtectedRoute><AdminRoute><AdminDashboard /></AdminRoute></ProtectedRoute>} />
                  <Route path="/admin/support" element={<ProtectedRoute><AdminRoute><AdminSupport /></AdminRoute></ProtectedRoute>} />
                  <Route path="/admin/analytics" element={<ProtectedRoute><AdminRoute><AdminAnalytics /></AdminRoute></ProtectedRoute>} />
                  <Route path="/admin/affiliates" element={<ProtectedRoute><AdminRoute><AdminAffiliates /></AdminRoute></ProtectedRoute>} />
                  {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                  <Route path="/404" element={<NotFound />} />
                  <Route path="*" element={<NotFound />} />
                </Routes>
                </Suspense>
              </BrowserRouter>
            </AuthProvider>
          </TooltipProvider>
        </GeoBlock>
      </QueryClientProvider>
    </HelmetProvider>
  </ErrorBoundary>
);

export default App;