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 { lazy, Suspense } from "react";

// Eager load critical pages for better initial performance
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";

// Lazy load secondary pages to reduce initial bundle size
const Services = lazy(() => import("./pages/Services"));
const About = lazy(() => import("./pages/About"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const Contact = lazy(() => import("./pages/Contact"));
const Windows11Transition = lazy(() => import("./pages/Windows11Transition"));
const VpnSetup = lazy(() => import("./pages/VpnSetup"));
const WebServices = lazy(() => import("./pages/WebServices"));
const PerformanceUpgrades = lazy(() => import("./pages/PerformanceUpgrades"));
const PrinterScannerInstallation = lazy(() => import("./pages/PrinterScannerInstallation"));
const DesktopHardware = lazy(() => import("./pages/DesktopHardware"));
const NetworkInfrastructure = lazy(() => import("./pages/NetworkInfrastructure"));
const NetworkAttachedStorage = lazy(() => import("./pages/NetworkAttachedStorage"));

const queryClient = new QueryClient();

// Loading fallback component
const PageLoader = () => (
  <div className="min-h-screen flex items-center justify-center bg-background-deep">
    <div className="text-center">
      <div className="w-16 h-16 border-4 border-neon/30 border-t-neon rounded-full animate-spin mx-auto mb-4"></div>
      <p className="text-foreground-muted">Loading...</p>
    </div>
  </div>
);

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <BrowserRouter>
        <Suspense fallback={<PageLoader />}>
          <Routes>
            <Route path="/" element={<Index />} />
            <Route path="/services" element={<Services />} />
            <Route path="/about" element={<About />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/blog/:slug" element={<BlogPost />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/windows-11-transition" element={<Windows11Transition />} />
            <Route path="/vpn-setup" element={<VpnSetup />} />
            <Route path="/web-services" element={<WebServices />} />
            <Route path="/performance-upgrades" element={<PerformanceUpgrades />} />
            <Route path="/printer-scanner-installation" element={<PrinterScannerInstallation />} />
            <Route path="/desktop-hardware" element={<DesktopHardware />} />
            <Route path="/network-infrastructure" element={<NetworkInfrastructure />} />
            <Route path="/network-attached-storage" element={<NetworkAttachedStorage />} />
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Suspense>
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;
