import { StrictMode, lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { Switch, Route, Link, useLocation } from "wouter";
import "./index.css";
import { SWRConfig } from "swr";
import { fetcher } from "./lib/fetcher";
import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@/lib/theme-provider";
import { ErrorBoundary } from "@/components/ErrorBoundary";
import { ScrollToTop } from "@/components/ScrollToTop";
import { ScrollRestoration } from "@/components/ScrollRestoration";
import { ScrollProgress } from "@/components/ScrollProgress";
import { ConsentAwareAnalytics } from "@/components/ConsentAwareAnalytics";
import { PageTransition } from "@/components/PageTransition";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";

// Home is eagerly loaded (critical path)
import Home from "./pages/Home";

// All other pages are lazy-loaded (code splitting)
const Blog = lazy(() => import("./pages/Blog"));
const About = lazy(() => import("./pages/About"));
const Consultation = lazy(() => import("./pages/Consultation"));
const ServicesPage = lazy(() => import("./pages/Services"));
const Projects = lazy(() => import("./pages/Projects"));
const HireMe = lazy(() => import("./pages/HireMe"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const CookiePolicy = lazy(() => import("./pages/CookiePolicy"));
const Technology = lazy(() => import("./pages/Technology"));
const Industry = lazy(() => import("./pages/Industry"));
const LocationLanding = lazy(() => import("./pages/LocationLanding"));
const ComparisonPage = lazy(() => import("./pages/Comparison"));
const TechIndustry = lazy(() => import("./pages/TechIndustry"));

function AppRoutes() {
  const [location] = useLocation();

  return (
    <PageTransition routeKey={location}>
      <Suspense fallback={<div className="flex-1 flex items-center justify-center min-h-[60vh]"><div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" /></div>}>
        <Switch>
          <Route path="/data-engineering-blog" component={Blog} />
          <Route path="/data-consultation-services" component={Consultation} />
          <Route path="/hire-me" component={HireMe} />
          <Route path="/about-jdata-consulting" component={About} />
          <Route path="/data-engineering-services" component={ServicesPage} />
          <Route path="/data-engineering-projects" component={Projects} />
          <Route path="/technologies/:slug" component={Technology} />
          <Route path="/industries/:slug" component={Industry} />
          <Route path="/locations/:slug" component={LocationLanding} />
          <Route path="/compare/:slug" component={ComparisonPage} />
          <Route path="/data-engineering/:slug" component={TechIndustry} />
          <Route path="/privacy-policy" component={PrivacyPolicy} />
          <Route path="/cookie-policy" component={CookiePolicy} />
          <Route path="/" component={Home} />
          <Route>
            <div className="container py-12 text-center">
              <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
              <p className="text-muted-foreground mb-8">The page you are looking for doesn't exist.</p>
              <Link href="/" className="text-primary hover:underline">
                Return to Home
              </Link>
            </div>
          </Route>
        </Switch>
      </Suspense>
    </PageTransition>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ErrorBoundary>
      <ThemeProvider defaultTheme="light" storageKey="portfolio-theme">
        <SWRConfig
          value={{
            fetcher,
            revalidateOnFocus: false,
            revalidateOnReconnect: false
          }}
        >
          <ScrollRestoration />
          <ScrollProgress />
          <div className="flex min-h-screen flex-col">
            <Navbar />
            <main className="flex-1">
              <AppRoutes />
            </main>
            <Footer />
          </div>
          <ScrollToTop />
          <Toaster />
          <ConsentAwareAnalytics />
        </SWRConfig>
      </ThemeProvider>
    </ErrorBoundary>
  </StrictMode>
);