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 { HelmetProvider } from "react-helmet-async";
import { LanguageProvider } from "@/contexts/LanguageContext";
import { CurrencyProvider } from "@/contexts/CurrencyContext";
import { Suspense, lazy, memo } from "react";
import Index from "./pages/Index";

// Lazy load ALL non-critical routes
const About = lazy(() => import("./pages/About"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Certifications = lazy(() => import("./pages/Certifications"));
const RevenueCalculator = lazy(() => import("./pages/RevenueCalculator"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const TrueCostDirectBooking = lazy(() => import("./pages/TrueCostDirectBooking"));
const ServicesPage = lazy(() => import("./pages/Services"));
const Contact = lazy(() => import("./pages/Contact"));

// Minimal QueryClient config for performance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      refetchOnWindowFocus: false,
    },
  },
});

// Minimal loading fallback - no animation to reduce main thread work
const RouteLoader = memo(() => (
  <div className="flex items-center justify-center min-h-screen bg-background">
    <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
  </div>
));

RouteLoader.displayName = 'RouteLoader';

const App = () => {
  return (
  <HelmetProvider>
    <QueryClientProvider client={queryClient}>
      <LanguageProvider>
        <CurrencyProvider>
          <TooltipProvider delayDuration={300}>
            <Toaster />
            <Sonner />
            <BrowserRouter>
              <Routes>
                <Route path="/" element={<Index />} />
                <Route path="/about" element={
                  <Suspense fallback={<RouteLoader />}>
                    <About />
                  </Suspense>
                } />
                <Route path="/certifications" element={
                  <Suspense fallback={<RouteLoader />}>
                    <Certifications />
                  </Suspense>
                } />
                <Route path="/revenue-calculator" element={
                  <Suspense fallback={<RouteLoader />}>
                    <RevenueCalculator />
                  </Suspense>
                } />
                <Route path="/privacy-policy" element={
                  <Suspense fallback={<RouteLoader />}>
                    <PrivacyPolicy />
                  </Suspense>
                } />
                <Route path="/blog" element={
                  <Suspense fallback={<RouteLoader />}>
                    <Blog />
                  </Suspense>
                } />
                <Route path="/blog/true-cost-direct-hotel-booking" element={
                  <Suspense fallback={<RouteLoader />}>
                    <TrueCostDirectBooking />
                  </Suspense>
                } />
                <Route path="/blog/:slug" element={
                  <Suspense fallback={<RouteLoader />}>
                    <BlogPost />
                  </Suspense>
                } />
                <Route path="/services" element={
                  <Suspense fallback={<RouteLoader />}>
                    <ServicesPage />
                  </Suspense>
                } />
                <Route path="/contact" element={
                  <Suspense fallback={<RouteLoader />}>
                    <Contact />
                  </Suspense>
                } />
                <Route path="*" element={
                  <Suspense fallback={<RouteLoader />}>
                    <NotFound />
                  </Suspense>
                } />
              </Routes>
            </BrowserRouter>
          </TooltipProvider>
        </CurrencyProvider>
      </LanguageProvider>
    </QueryClientProvider>
  </HelmetProvider>
  );
};

export default App;