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, useLocation } from "react-router-dom";
import { lazy, Suspense, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { reportWebVitals, observePerformance } from "@/utils/reportWebVitals";
import { pageTransition } from "@/utils/animations";
import ExitIntentPopup from "@/components/ExitIntentPopup";

// 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 with animation
const PageLoader = () => (
  <motion.div
    className="min-h-screen flex items-center justify-center bg-background-deep"
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
    <div className="text-center">
      <motion.div
        className="w-16 h-16 border-4 border-neon/30 border-t-neon rounded-full mx-auto mb-4"
        animate={{ rotate: 360 }}
        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
      />
      <motion.p
        className="text-foreground-muted"
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
      >
        Loading...
      </motion.p>
    </div>
  </motion.div>
);

// Animated page wrapper
const AnimatedPage = ({ children }: { children: React.ReactNode }) => {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      exit="exit"
      variants={{
        initial: pageTransition.initial,
        animate: pageTransition.animate,
        exit: pageTransition.exit
      }}
      transition={pageTransition.transition}
    >
      {children}
    </motion.div>
  );
};

const AppContent = () => {
  const location = useLocation();

  useEffect(() => {
    // Initialize Web Vitals monitoring
    reportWebVitals();
    observePerformance();
  }, []);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <>
      <ExitIntentPopup />
      <AnimatePresence mode="wait">
        <Suspense fallback={<PageLoader />}>
          <Routes location={location} key={location.pathname}>
            <Route path="/" element={<AnimatedPage><Index /></AnimatedPage>} />
            <Route path="/services" element={<AnimatedPage><Services /></AnimatedPage>} />
            <Route path="/about" element={<AnimatedPage><About /></AnimatedPage>} />
            <Route path="/blog" element={<AnimatedPage><Blog /></AnimatedPage>} />
            <Route path="/blog/:slug" element={<AnimatedPage><BlogPost /></AnimatedPage>} />
            <Route path="/contact" element={<AnimatedPage><Contact /></AnimatedPage>} />
            <Route path="/windows-11-transition" element={<AnimatedPage><Windows11Transition /></AnimatedPage>} />
            <Route path="/vpn-setup" element={<AnimatedPage><VpnSetup /></AnimatedPage>} />
            <Route path="/web-services" element={<AnimatedPage><WebServices /></AnimatedPage>} />
            <Route path="/performance-upgrades" element={<AnimatedPage><PerformanceUpgrades /></AnimatedPage>} />
            <Route path="/printer-scanner-installation" element={<AnimatedPage><PrinterScannerInstallation /></AnimatedPage>} />
            <Route path="/desktop-hardware" element={<AnimatedPage><DesktopHardware /></AnimatedPage>} />
            <Route path="/network-infrastructure" element={<AnimatedPage><NetworkInfrastructure /></AnimatedPage>} />
            <Route path="/network-attached-storage" element={<AnimatedPage><NetworkAttachedStorage /></AnimatedPage>} />
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<AnimatedPage><NotFound /></AnimatedPage>} />
          </Routes>
        </Suspense>
      </AnimatePresence>
    </>
  );
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <BrowserRouter>
        <AppContent />
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;
