import { ViteReactSSG } from "vite-react-ssg";
import type { RouteRecord } from "vite-react-ssg";
import { Outlet, useLocation } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthProvider } from "./contexts/AuthContext";
import { Suspense, lazy, memo } from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { AdminSidebar } from "./components/AdminSidebar";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { getPortfolioSlugs, getIndustrySlugs } from "./utils/ssg-paths";
import "./index.css";

// Lazy load non-critical shell components
const StickyCTABar = lazy(() => import("./components/StickyCTABar"));
const ScrollToTop = lazy(() => import("./components/ScrollToTop"));
const CookieConsent = lazy(() => import("./components/CookieConsent").then(m => ({ default: m.CookieConsent })));
const GoogleAnalytics = lazy(() => import("./components/GoogleAnalytics").then(m => ({ default: m.GoogleAnalytics })));
const GoogleAdSense = lazy(() => import("./components/GoogleAdSense").then(m => ({ default: m.GoogleAdSense })));
const FloatingShareButton = lazy(() => import("./components/FloatingShareButton").then(m => ({ default: m.FloatingShareButton })));
const WhatsAppWidget = lazy(() => import("./components/WhatsAppWidget"));
const ExitIntentPopup = lazy(() => import("./components/ExitIntentPopup"));

// Initialize QueryClient outside component
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

// Minimal loading fallback
const PageLoader = memo(() => (
  <main className="min-h-[50vh]" role="status" aria-label="Loading">
    <span className="sr-only">Loading...</span>
  </main>
));

// Deferred components wrapper
const DeferredComponents = memo(() => (
  <Suspense fallback={null}>
    <StickyCTABar />
    <CookieConsent />
    <ScrollToTop />
    <GoogleAnalytics />
    <GoogleAdSense />
    <FloatingShareButton />
    <WhatsAppWidget />
    <ExitIntentPopup />
  </Suspense>
));

// Inner layout — only handles UI shell, no providers here
function RootLayout() {
  const { pathname } = useLocation();
  const isAdminRoute = pathname.startsWith('/system-dashboard') || pathname.startsWith('/admin') || pathname.startsWith('/super-dashboard');

  return (
    <>
      {!isAdminRoute && <Header />}
      {isAdminRoute && <AdminSidebar />}
      <div className={isAdminRoute ? 'ml-64' : ''}>
        <Suspense fallback={<PageLoader />}>
          <Outlet />
        </Suspense>
      </div>
      {!isAdminRoute && <Footer />}
      {!isAdminRoute && <DeferredComponents />}
      <Toaster />
    </>
  );
}

// Stable providers wrapper — mounted once at the top route level, never re-mounts on navigation
function ProvidersLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider delayDuration={0}>
        <AuthProvider>
          <Outlet />
        </AuthProvider>
      </TooltipProvider>
    </QueryClientProvider>
  );
}

// Critical pages - NOT lazy loaded for SSG hydration
import Home from "./pages/Home";
import Portfolio from "./pages/Portfolio";
import PortfolioDetail from "./pages/PortfolioDetail";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

// Lazy load non-critical/admin pages
const WebsiteDesign = lazy(() => import("./pages/services/WebsiteDesign"));
const StaticWebsiteDesign = lazy(() => import("./pages/services/StaticWebsiteDesign"));
const ResponsiveWebsiteDesign = lazy(() => import("./pages/services/ResponsiveWebsiteDesign"));
const MicroWebsiteDesign = lazy(() => import("./pages/services/MicroWebsiteDesign"));
const WebsiteRedesign = lazy(() => import("./pages/services/WebsiteRedesign"));
const WebsiteRepair = lazy(() => import("./pages/services/WebsiteRepair"));
const EcommerceDevelopment = lazy(() => import("./pages/services/EcommerceDevelopment"));
const WooCommerceDevelopment = lazy(() => import("./pages/services/WooCommerceDevelopment"));
const ShopifyDevelopment = lazy(() => import("./pages/services/ShopifyDevelopment"));
const MultiVendorMarketplace = lazy(() => import("./pages/services/MultiVendorMarketplace"));
const WebsiteMaintenance = lazy(() => import("./pages/services/WebsiteMaintenance"));
const AMC = lazy(() => import("./pages/services/AMC"));
const BugFixing = lazy(() => import("./pages/services/BugFixing"));
const SpeedOptimization = lazy(() => import("./pages/services/SpeedOptimization"));
const SEO = lazy(() => import("./pages/services/SEO"));
const TechnicalSEO = lazy(() => import("./pages/services/TechnicalSEO"));
const LocalSEO = lazy(() => import("./pages/services/LocalSEO"));
const EcommerceSEO = lazy(() => import("./pages/services/EcommerceSEO"));
const GoogleAds = lazy(() => import("./pages/services/GoogleAds"));
const MetaAds = lazy(() => import("./pages/services/MetaAds"));
const YouTubeAds = lazy(() => import("./pages/services/YouTubeAds"));
const ShoppingAds = lazy(() => import("./pages/services/ShoppingAds"));
const LogoDesign = lazy(() => import("./pages/services/LogoDesign"));
const WebHosting = lazy(() => import("./pages/services/WebHosting"));
const SocialMediaMarketing = lazy(() => import("./pages/services/SocialMediaMarketing"));
const ContentMarketing = lazy(() => import("./pages/services/ContentMarketing"));
const BlogWriting = lazy(() => import("./pages/services/BlogWriting"));
const Infographics = lazy(() => import("./pages/services/Infographics"));
const VideoEditing = lazy(() => import("./pages/services/VideoEditing"));
const ORM = lazy(() => import("./pages/services/ORM"));
const Analytics = lazy(() => import("./pages/services/Analytics"));
const ProductDataManagement = lazy(() => import("./pages/services/ProductDataManagement"));
const ProductUpload = lazy(() => import("./pages/services/ProductUpload"));
const DataScraping = lazy(() => import("./pages/services/DataScraping"));
const DescriptionWriting = lazy(() => import("./pages/services/DescriptionWriting"));
const DataEntry = lazy(() => import("./pages/services/DataEntry"));
const VirtualAssistant = lazy(() => import("./pages/services/VirtualAssistant"));
const BulkCampaigns = lazy(() => import("./pages/services/BulkCampaigns"));
const DataCleansing = lazy(() => import("./pages/services/DataCleansing"));
const AIChatbot = lazy(() => import("./pages/services/AIChatbot"));
const AIContentGeneration = lazy(() => import("./pages/services/AIContentGeneration"));
const AIFormResponders = lazy(() => import("./pages/services/AIFormResponders"));
const AIVoiceBots = lazy(() => import("./pages/services/AIVoiceBots"));
const AIApiIntegration = lazy(() => import("./pages/services/AIApiIntegration"));
const Industries = lazy(() => import("./pages/Industries"));
const Pricing = lazy(() => import("./pages/PricingDatabase"));
const FooterSettings = lazy(() => import("./pages/admin/FooterSettings"));
const NewsletterSubscribers = lazy(() => import("./pages/admin/NewsletterSubscribers"));
const Newsletter = lazy(() => import("./pages/admin/Newsletter"));
const SEOTools = lazy(() => import("./pages/admin/SEOTools"));
const ClientLogos = lazy(() => import("./pages/admin/ClientLogos"));
const AnalyticsSettings = lazy(() => import("./pages/admin/AnalyticsSettings"));
const LocationPages = lazy(() => import("./pages/admin/LocationPages"));
const BlogManagement = lazy(() => import("./pages/admin/BlogManagement"));
const ShortcodeReference = lazy(() => import("./pages/admin/ShortcodeReference"));
const CountryContacts = lazy(() => import("./pages/admin/CountryContacts"));
const LeadPopups = lazy(() => import("./pages/admin/LeadPopups"));
const CategoryManagement = lazy(() => import("./pages/admin/CategoryManagement"));
const DatabaseManagement = lazy(() => import("./pages/admin/DatabaseManagement"));
const BackupHistory = lazy(() => import("./pages/admin/BackupHistory"));
const DataImport = lazy(() => import("./pages/admin/DataImport"));
const SchedulerDiagnostics = lazy(() => import("./pages/admin/SchedulerDiagnostics"));
import AdminGuard from "./components/AdminGuard";
const SetupDatabase = lazy(() => import("./pages/SetupDatabase"));
const QuoteCalculator = lazy(() => import("./pages/QuoteCalculator"));
const SEOChecker = lazy(() => import("./pages/SEOChecker"));
const KnowledgeBase = lazy(() => import("./pages/KnowledgeBase"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogArticle = lazy(() => import("./pages/BlogArticle"));
const ClientPortal = lazy(() => import("./pages/ClientPortal"));
const ServerStatus = lazy(() => import("./pages/ServerStatus"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const TermsOfService = lazy(() => import("./pages/TermsOfService"));
const Sitemap = lazy(() => import("./pages/Sitemap"));
const Auth = lazy(() => import("./pages/Auth"));
const Admin = lazy(() => import("./pages/Admin"));
const Search = lazy(() => import("./pages/Search"));
const LocationLanding = lazy(() => import("./pages/LocationLanding"));

// Define routes with layout wrapper
const routes: RouteRecord[] = [
  {
    path: "/",
    element: <ProvidersLayout />,
    children: [
      {
        path: "",
        element: <RootLayout />,
        children: [
      { index: true, element: <Home /> },
      { path: "portfolio", element: <Portfolio /> },
      { 
        path: "portfolio/:slug", 
        element: <PortfolioDetail />, 
        getStaticPaths: async () => {
          // Fetch portfolio slugs from database at build time
          const slugs = await getPortfolioSlugs();
          console.log('SSG: Generated portfolio paths:', slugs.length);
          return slugs;
        }
      },
      { path: "contact", element: <Contact /> },
      { path: "about", element: <About /> },
      { path: "services", element: <Services /> },
      { path: "services/website-design", element: <WebsiteDesign /> },
      { path: "services/website-design/static", element: <StaticWebsiteDesign /> },
      { path: "services/website-design/responsive", element: <ResponsiveWebsiteDesign /> },
      { path: "services/website-design/micro", element: <MicroWebsiteDesign /> },
      { path: "services/website-redesign", element: <WebsiteRedesign /> },
      { path: "services/website-repair", element: <WebsiteRepair /> },
      { path: "services/ecommerce-development", element: <EcommerceDevelopment /> },
      { path: "services/ecommerce-development/woocommerce", element: <WooCommerceDevelopment /> },
      { path: "services/ecommerce-development/shopify", element: <ShopifyDevelopment /> },
      { path: "services/ecommerce-development/marketplace", element: <MultiVendorMarketplace /> },
      { path: "services/website-maintenance", element: <WebsiteMaintenance /> },
      { path: "services/website-maintenance/amc", element: <AMC /> },
      { path: "services/website-maintenance/bug-fixing", element: <BugFixing /> },
      { path: "services/website-maintenance/optimization", element: <SpeedOptimization /> },
      { path: "services/seo", element: <SEO /> },
      { path: "services/seo/technical", element: <TechnicalSEO /> },
      { path: "services/seo/technical-audit", element: <TechnicalSEO /> },
      { path: "services/seo/local", element: <LocalSEO /> },
      { path: "services/seo/local-seo", element: <LocalSEO /> },
      { path: "services/seo/ecommerce", element: <EcommerceSEO /> },
      { path: "services/paid-marketing/google-ads", element: <GoogleAds /> },
      { path: "services/paid-marketing/meta-ads", element: <MetaAds /> },
      { path: "services/paid-marketing/youtube-ads", element: <YouTubeAds /> },
      { path: "services/paid-marketing/shopping-ads", element: <ShoppingAds /> },
      { path: "services/google-ads", element: <GoogleAds /> },
      { path: "services/meta-ads", element: <MetaAds /> },
      { path: "services/youtube-ads", element: <YouTubeAds /> },
      { path: "services/shopping-ads", element: <ShoppingAds /> },
      { path: "services/ppc", element: <GoogleAds /> },
      { path: "services/ppc/google-ads", element: <GoogleAds /> },
      { path: "services/ppc/meta-ads", element: <MetaAds /> },
      { path: "services/ppc/youtube-ads", element: <YouTubeAds /> },
      { path: "services/ppc/shopping-ads", element: <ShoppingAds /> },
      { path: "services/logo-design", element: <LogoDesign /> },
      { path: "services/brand-kit", element: <LogoDesign /> },
      { path: "services/stationery-design", element: <LogoDesign /> },
      { path: "services/social-media-creatives", element: <LogoDesign /> },
      { path: "services/ui-ux-design", element: <LogoDesign /> },
      { path: "services/presentation-design", element: <LogoDesign /> },
      { path: "services/web-hosting", element: <WebHosting /> },
      { path: "services/cloud-hosting", element: <WebHosting /> },
      { path: "services/vps-servers", element: <WebHosting /> },
      { path: "services/business-email", element: <WebHosting /> },
      { path: "services/ssl-certificate", element: <WebHosting /> },
      { path: "services/cpanel-management", element: <WebHosting /> },
      { path: "services/website-migration", element: <WebHosting /> },
      { path: "services/hosting-support", element: <WebHosting /> },
      { path: "services/digital-marketing/social-media", element: <SocialMediaMarketing /> },
      { path: "services/social-media-marketing", element: <SocialMediaMarketing /> },
      { path: "services/social-media-marketing/strategy", element: <SocialMediaMarketing /> },
      { path: "services/social-media-marketing/management", element: <SocialMediaMarketing /> },
      { path: "services/social-media-marketing/influencer", element: <SocialMediaMarketing /> },
      { path: "services/content-marketing", element: <ContentMarketing /> },
      { path: "services/content-marketing/writing", element: <BlogWriting /> },
      { path: "services/content-marketing/infographics", element: <Infographics /> },
      { path: "services/content-marketing/video", element: <VideoEditing /> },
      { path: "services/content-marketing/video-editing", element: <VideoEditing /> },
      { path: "services/bulk-campaigns", element: <BulkCampaigns /> },
      { path: "services/digital-marketing/orm", element: <ORM /> },
      { path: "services/orm", element: <ORM /> },
      { path: "services/analytics", element: <Analytics /> },
      { path: "services/google-analytics-setup", element: <Analytics /> },
      { path: "services/conversion-tracking", element: <Analytics /> },
      { path: "services/heatmap-analysis", element: <Analytics /> },
      { path: "services/ab-testing", element: <Analytics /> },
      { path: "services/cro", element: <Analytics /> },
      { path: "services/funnel-analytics", element: <Analytics /> },
      { path: "services/product-data-management", element: <ProductDataManagement /> },
      { path: "services/product-data-management/upload", element: <ProductUpload /> },
      { path: "services/product-data-management/cataloging", element: <ProductUpload /> },
      { path: "services/product-data-management/scraping", element: <DataScraping /> },
      { path: "services/product-data-management/description-writing", element: <DescriptionWriting /> },
      { path: "services/product-data-management/seo-writing", element: <DescriptionWriting /> },
      { path: "services/product-data-management/data-entry", element: <DataEntry /> },
      { path: "services/product-data-management/tagging", element: <DataEntry /> },
      { path: "services/data-entry", element: <DataEntry /> },
      { path: "services/data-entry/manual", element: <DataEntry /> },
      { path: "services/data-entry/crm-erp", element: <DataEntry /> },
      { path: "services/data-entry/conversion", element: <DataEntry /> },
      { path: "services/data-cleansing", element: <DataCleansing /> },
      { path: "services/virtual-assistant", element: <VirtualAssistant /> },
      { path: "services/ai-chatbot", element: <AIChatbot /> },
      { path: "services/ai-content-generation", element: <AIContentGeneration /> },
      { path: "services/ai-form-responders", element: <AIFormResponders /> },
      { path: "services/ai-lead-nurturing", element: <AIFormResponders /> },
      { path: "services/ai-voice-bots", element: <AIVoiceBots /> },
      { path: "services/ai-api-integration", element: <AIApiIntegration /> },
      { path: "pricing", element: <Pricing /> },
      { path: "quote-calculator", element: <QuoteCalculator /> },
      { path: "seo-checker", element: <SEOChecker /> },
      { path: "tools/seo-checker", element: <SEOChecker /> },
      { path: "knowledge-base", element: <KnowledgeBase /> },
      { path: "blog", element: <Blog /> },
      { 
        path: "blog/:slug", 
        element: <BlogArticle />,
        getStaticPaths: async () => {
          const { blogArticles } = await import("./data/blog-articles");
          return blogArticles.map(a => `blog/${a.slug}`);
        }
      },
      { path: "portal", element: <ClientPortal /> },
      { path: "status", element: <ServerStatus /> },
      { path: "privacy-policy", element: <PrivacyPolicy /> },
      { path: "terms", element: <TermsOfService /> },
      { path: "sitemap", element: <Sitemap /> },
      { path: "search", element: <Search /> },
      { path: "auth", element: <Auth /> },
      { path: "admin", element: <AdminGuard><Admin /></AdminGuard> },
      { path: "super-dashboard", element: <AdminGuard><Admin /></AdminGuard> },
      { path: "system-dashboard", element: <AdminGuard><Admin /></AdminGuard> },
      { path: "system-dashboard/seo-audit", element: <AdminGuard><SEOTools /></AdminGuard> },
      { path: "system-dashboard/backlinks", element: <AdminGuard><SEOTools /></AdminGuard> },
      { path: "system-dashboard/footer-settings", element: <AdminGuard><FooterSettings /></AdminGuard> },
      { path: "system-dashboard/robots-txt", element: <AdminGuard><SEOTools /></AdminGuard> },
      { path: "system-dashboard/newsletter-subscribers", element: <AdminGuard><NewsletterSubscribers /></AdminGuard> },
      { path: "system-dashboard/newsletter-composer", element: <AdminGuard><Newsletter /></AdminGuard> },
      { path: "system-dashboard/scheduled-newsletters", element: <AdminGuard><Newsletter /></AdminGuard> },
      { path: "system-dashboard/newsletter", element: <AdminGuard><Newsletter /></AdminGuard> },
      { path: "system-dashboard/seo-tools", element: <AdminGuard><SEOTools /></AdminGuard> },
      { path: "system-dashboard/client-logos", element: <AdminGuard><ClientLogos /></AdminGuard> },
      { path: "system-dashboard/sitemap", element: <AdminGuard><SEOTools /></AdminGuard> },
      { path: "system-dashboard/analytics", element: <AdminGuard><AnalyticsSettings /></AdminGuard> },
      { path: "system-dashboard/location-pages", element: <AdminGuard><LocationPages /></AdminGuard> },
      { path: "system-dashboard/blog-management", element: <AdminGuard><BlogManagement /></AdminGuard> },
      { path: "system-dashboard/shortcodes", element: <AdminGuard><ShortcodeReference /></AdminGuard> },
      { path: "system-dashboard/country-contacts", element: <AdminGuard><CountryContacts /></AdminGuard> },
      { path: "system-dashboard/lead-popups", element: <AdminGuard><LeadPopups /></AdminGuard> },
      { path: "system-dashboard/category-management", element: <AdminGuard><CategoryManagement /></AdminGuard> },
      { path: "system-dashboard/database", element: <AdminGuard><DatabaseManagement /></AdminGuard> },
      { path: "system-dashboard/backup-history", element: <AdminGuard><BackupHistory /></AdminGuard> },
      { path: "system-dashboard/data-import", element: <AdminGuard><DataImport /></AdminGuard> },
      { path: "system-dashboard/scheduler-diagnostics", element: <AdminGuard><SchedulerDiagnostics /></AdminGuard> },
      { path: "setup-database", element: <SetupDatabase /> },
      { path: "industries", element: <Industries /> },
      { path: "industries/:slug", element: <Industries />, getStaticPaths: () => getIndustrySlugs() },
      { path: ":category/:slug", element: <LocationLanding /> },
      { path: ":slug", element: <LocationLanding /> },
      { path: "*", element: <NotFound /> },
        ],
      },
    ],
  },
];

export const createRoot = ViteReactSSG({
  routes,
  basename: import.meta.env.BASE_URL,
});