/**
 * OPTIMIZED ROUTES WITH CODE SPLITTING
 * 
 * Home is eagerly loaded (critical path — LCP lives here).
 * All other routes are lazy loaded for code splitting.
 */

import { createBrowserRouter } from "react-router";
import { lazy, Suspense } from "react";
import { Root } from "./components/Root";

// ============================================================================
// HOME - Eagerly loaded (critical path, LCP lives here)
// ============================================================================
import { Home } from "./pages/Home";

// ============================================================================
// LOADING COMPONENT - Shared suspense fallback
// ============================================================================
function RouteLoading() {
  return (
    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#0a0a0a' }}>
      <div className="w-16 h-16 border-4 border-[#f15f3d] border-t-transparent rounded-full animate-spin" />
    </div>
  );
}

// ============================================================================
// LAZY LOADED ROUTES - Dynamic imports for code splitting
// ============================================================================

// Secondary routes (load on demand)
const Services = lazy(() => import("./pages/Services").then(m => ({ default: m.Services })));
const Work = lazy(() => import("./pages/Work").then(m => ({ default: m.Work })));
const CaseStudy = lazy(() => import("./pages/CaseStudy").then(m => ({ default: m.CaseStudy })));
const About = lazy(() => import("./pages/About").then(m => ({ default: m.About })));
const Contact = lazy(() => import("./pages/Contact").then(m => ({ default: m.Contact })));

// ============================================================================
// PRELOAD FUNCTIONS - Call on hover to prefetch route chunks before navigation
// ============================================================================
export const preloadServices = () => import("./pages/Services");
export const preloadWork = () => import("./pages/Work");
export const preloadAbout = () => import("./pages/About");
export const preloadContact = () => import("./pages/Contact");

// Tertiary routes (rarely accessed)
const Privacy = lazy(() => import("./pages/Privacy").then(m => ({ default: m.Privacy })));
const Terms = lazy(() => import("./pages/Terms").then(m => ({ default: m.Terms })));
const NotFound = lazy(() => import("./pages/NotFound").then(m => ({ default: m.NotFound })));

// ============================================================================
// ROUTE WRAPPER - Adds Suspense boundary to each route
// ============================================================================
function LazyRoute({ Component }: { Component: React.LazyExoticComponent<() => JSX.Element> }) {
  return (
    <Suspense fallback={<RouteLoading />}>
      <Component />
    </Suspense>
  );
}

// ============================================================================
// ROUTER CONFIGURATION
// ============================================================================
export const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      { 
        index: true, 
        element: <Home />,
      },
      { 
        path: "services", 
        element: <LazyRoute Component={Services} />
      },
      { 
        path: "work", 
        element: <LazyRoute Component={Work} />
      },
      { 
        path: "work/:projectId", 
        element: <LazyRoute Component={CaseStudy} />
      },
      { 
        path: "about", 
        element: <LazyRoute Component={About} />
      },
      { 
        path: "contact", 
        element: <LazyRoute Component={Contact} />
      },
      { 
        path: "privacy", 
        element: <LazyRoute Component={Privacy} />
      },
      { 
        path: "terms", 
        element: <LazyRoute Component={Terms} />
      },
      { 
        path: "*", 
        element: <LazyRoute Component={NotFound} />
      },
    ],
  },
]);