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,
  Navigate,
  useLocation,
  ScrollRestoration,
} from "react-router-dom";
import { useEffect, lazy, Suspense, useCallback } from "react";
import ProtectedRoute from "./components/ProtectedRoute";
import { AuthProvider } from "./hooks/useAuth";
import { AdSettingsProvider } from "./hooks/useAdSettings";
import DemoDataProvider from "@/components/DemoDataProvider";
import SitemapRoute from "./components/SitemapRoute";
import { initGA, trackPageView } from "./lib/analytics";
import ErrorBoundary from "./components/ErrorBoundary";
import { HelmetProvider } from 'react-helmet-async';
import { ensureAdSenseScript } from "@/components/AdSenseSlot";

/* ─── Eager load Index (LCP critical) ─── */
import Index from "./pages/Index";

/* ─── Lazy load all other routes ─── */
const BlogPage = lazy(() => import("./pages/BlogPage"));
const SingleBlogPost = lazy(() => import("./pages/SingleBlogPost"));
const Contact = lazy(() => import("./pages/Contact"));
const AdminLogin = lazy(() => import("./pages/AdminLogin"));
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Error500 = lazy(() => import("./pages/Error500"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const TermsConditions = lazy(() => import("./pages/TermsConditions"));
const AdTestPage = lazy(() => import("./pages/AdTestPage"));
const AdsManagerTest = lazy(() => import("./test/AdsManagerTest"));
const About = lazy(() => import("./pages/About"));
const FAQ = lazy(() => import("./pages/FAQ"));
const BusinessWebapps = lazy(() => import("./pages/BusinessWebapps"));
const BrandDesign = lazy(() => import("./pages/services/BrandDesign"));
const WebDevelopment = lazy(() => import("./pages/services/WebDevelopment"));
const SEOService = lazy(() => import("./pages/services/SEOService"));
const MobileAppDevelopment = lazy(() => import("./pages/services/MobileAppDevelopment"));
const AnalyticsService = lazy(() => import("./pages/services/AnalyticsService"));
const DigitalStrategy = lazy(() => import("./pages/services/DigitalStrategy"));
const AIAutomationService = lazy(() => import("./pages/services/AIAutomationService"));
const WhatsAppMarketingService = lazy(() => import("./pages/services/WhatsAppMarketingService"));
const Services = lazy(() => import("./pages/Services"));
const ServiceLocationsIndex = lazy(() => import("./pages/ServiceLocationsIndex"));
const SecureDownload = lazy(() => import("./pages/SecureDownload"));
const ServiceLocationRouter = lazy(() => import("./pages/ServiceLocationRouter"));
const HierarchicalRouter = lazy(() => import("./pages/HierarchicalRouter"));
const ServiceLocationPage = lazy(() => import("./pages/services/ServiceLocationPage"));
const BudgetCalculator = lazy(() => import("./components/BudgetCalculator"));
const ServiceDetailPage = lazy(() => import("./pages/services/ServiceDetailPage"));
const Shop = lazy(() => import("./pages/Shop"));
const ShopProduct = lazy(() => import("./pages/ShopProduct"));
const DocumentPage = lazy(() => import("./pages/DocumentPage"));
const CoursesPage = lazy(() => import("./pages/CoursesPage"));
const CourseDetailPage = lazy(() => import("./pages/CourseDetailPage"));
const CourseLogin = lazy(() => import("./pages/CourseLogin"));
const MyCoursesPage = lazy(() => import("./pages/MyCoursesPage"));
const LearnCoursePage = lazy(() => import("./pages/LearnCoursePage"));

/* ─── Lazy Ad Provider ─── */
const LazyAdConfigProvider = lazy(() =>
  import("@/contexts/AdConfigContext").then(m => ({ default: m.AdConfigProvider }))
);

/* ─── Query Client ─── */
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10 * 60 * 1000,   // 10 min
      gcTime: 30 * 60 * 1000,   // 30 min
      retry: 1,
      refetchOnWindowFocus: false,
      networkMode: 'offlineFirst',
    },
  },
});

/* ─── Premium Page Loader ─── */
const PageLoader = () => (
  <div className="min-h-screen flex items-center justify-center"
    style={{ background: 'hsl(224 20% 6%)' }}>
    <div className="flex flex-col items-center gap-5">
      {/* Animated logo loader */}
      <div className="relative w-14 h-14">
        <div className="absolute inset-0 rounded-full border-2 border-transparent"
          style={{
            borderTopColor: 'hsl(210 100% 56%)',
            borderRightColor: 'hsl(262 83% 68%)',
            animation: 'spin 0.9s linear infinite'
          }} />
        <div className="absolute inset-2 rounded-full border-2 border-transparent"
          style={{
            borderBottomColor: 'hsl(186 100% 50%)',
            animation: 'spin 1.3s linear infinite reverse'
          }} />
      </div>
      <p style={{ color: 'hsl(215 16% 55%)', fontSize: '0.85rem', letterSpacing: '0.05em' }}>
        Loading...
      </p>
    </div>
    <style>{`
      @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
      }
    `}</style>
  </div>
);

/* ─── Scroll to top on route change ─── */
const ScrollToTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [pathname]);
  return null;
};

/* ─── Page Tracker ─── */
const PageTracker = () => {
  const location = useLocation();

  useEffect(() => {
    const run = () => {
      trackPageView(location.pathname + location.search);
    };
    const idle = (window as any).requestIdleCallback;
    if (typeof idle === 'function') idle(run, { timeout: 3000 });
    else setTimeout(run, 1500);
  }, [location]);

  return null;
};

const AdSenseRouteLoader = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    const isAdPage =
      pathname === "/blog" ||
      pathname.startsWith("/blog/") ||
      pathname === "/shop" ||
      pathname === "/courses" ||
      pathname.startsWith("/course/");

    if (!isAdPage) return;

    const idle = (window as any).requestIdleCallback;
    if (typeof idle === "function") idle(ensureAdSenseScript, { timeout: 1500 });
    else setTimeout(ensureAdSenseScript, 500);
  }, [pathname]);

  return null;
};

/* ─── Blog wrapper with Ad provider ─── */
const BlogWithAds = ({ children }: { children: React.ReactNode }) => (
  <Suspense fallback={<PageLoader />}>
    <LazyAdConfigProvider>
      {children}
    </LazyAdConfigProvider>
  </Suspense>
);

/* ─── App ─── */
function App() {
  /* Initialize GA on idle */
  useEffect(() => {
    const idle = (window as any).requestIdleCallback;
    const run = () => {
      try { initGA(); } catch (e) { console.warn('[GA] Init error:', e); }
    };
    if (typeof idle === 'function') idle(run, { timeout: 2000 });
    else setTimeout(run, 500);
  }, []);

  return (
    <HelmetProvider>
      <ErrorBoundary>
        <QueryClientProvider client={queryClient}>
          <DemoDataProvider>
            <AuthProvider>
              <AdSettingsProvider>
                <TooltipProvider>
                  <Toaster />
                  <Sonner />
                  <BrowserRouter
                    future={{
                      v7_startTransition: true,
                      v7_relativeSplatPath: true,
                    }}
                  >
                    <ScrollToTop />
                    <PageTracker />
                    <AdSenseRouteLoader />

                    <Suspense fallback={<PageLoader />}>
                      <Routes>
                        {/* ── HOME ── */}
                        <Route path="/" element={<Index />} />

                        {/* ── BLOG ── */}
                        <Route path="/blog" element={
                          <BlogWithAds><BlogPage /></BlogWithAds>
                        } />
                        <Route path="/blog/category/:category" element={
                          <BlogWithAds><BlogPage /></BlogWithAds>
                        } />
                        {/* Typo alias */}
                        <Route path="/blog/catogory/:category" element={
                          <Navigate to="/blog" replace />
                        } />
                        <Route path="/blog/author/:author" element={
                          <BlogWithAds><BlogPage /></BlogWithAds>
                        } />
                        <Route path="/blog/tag/:tag" element={
                          <BlogWithAds><BlogPage /></BlogWithAds>
                        } />
                        <Route path="/blog/:slug" element={
                          <BlogWithAds><SingleBlogPost /></BlogWithAds>
                        } />
                        <Route path="/doc/:slug" element={<DocumentPage />} />
                        <Route path="/doc/:slug/*" element={<DocumentPage />} />

                        {/* ── STATIC PAGES ── */}
                        <Route path="/contact" element={<Contact />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/faq" element={<FAQ />} />
                        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
                        <Route path="/terms-conditions" element={<TermsConditions />} />
                        <Route path="/404" element={<NotFound />} />
                        <Route path="/500" element={<Error500 />} />
                        <Route path="/sitemap.xml" element={<SitemapRoute />} />
                        <Route path="/budget-calculator" element={<BudgetCalculator />} />
                        <Route path="/business-webapps" element={<BusinessWebapps />} />
                        <Route path="/our-products" element={<BusinessWebapps />} />

                        {/* ── SERVICES ── */}
                        <Route path="/shop/:productId" element={<ShopProduct />} />
                        <Route path="/shop" element={<Shop />} />
                        <Route path="/courses" element={<CoursesPage />} />
                        <Route path="/course/:slug" element={<CourseDetailPage />} />
                        <Route path="/course-login" element={<CourseLogin />} />
                        <Route path="/my-courses" element={<MyCoursesPage />} />
                        <Route path="/learn/:courseSlug" element={<LearnCoursePage />} />
                        <Route path="/download/:linkId" element={<SecureDownload />} />
                        <Route path="/services/:slug" element={<ServiceDetailPage />} />
                        <Route path="/services" element={<Services />} />
                        <Route path="/services/brand-design" element={<BrandDesign />} />
                        <Route path="/services/web-development" element={<WebDevelopment />} />
                        <Route path="/services/seo-digital-marketing" element={<SEOService />} />
                        <Route path="/services/mobile-app-development" element={<MobileAppDevelopment />} />
                        <Route path="/services/analytics-performance" element={<AnalyticsService />} />
                        <Route path="/services/digital-strategy-consulting" element={<DigitalStrategy />} />
                        <Route path="/services/ai-automation" element={<AIAutomationService />} />
                        <Route path="/services/whatsapp-marketing" element={<WhatsAppMarketingService />} />

                        {/* ── SERVICE LOCATIONS ── */}
                        <Route path="/service-locations" element={<ServiceLocationsIndex />} />

                        {/* Hierarchical SEO location pages */}
                        <Route path="/services/:service/india" element={<HierarchicalRouter />} />
                        <Route path="/services/:service/india/*" element={<HierarchicalRouter />} />

                        {/* Service + city/state pages */}
                        <Route path="/services/:serviceSlug/:cityState" element={<ServiceLocationPage />} />

                        {/* ── ADMIN ── */}
                        <Route path="/admin" element={<Navigate to="/admin/dashboard" replace />} />
                        <Route path="/admin/login" element={<AdminLogin />} />
                        <Route path="/admin/dashboard" element={
                          <ProtectedRoute requireAdmin>
                            <Suspense fallback={<PageLoader />}>
                              <LazyAdConfigProvider>
                                <AdminDashboard />
                              </LazyAdConfigProvider>
                            </Suspense>
                          </ProtectedRoute>
                        } />
                        <Route path="/admin/ad-test" element={
                          <ProtectedRoute requireAdmin>
                            <Suspense fallback={<PageLoader />}>
                              <LazyAdConfigProvider>
                                <AdTestPage />
                              </LazyAdConfigProvider>
                            </Suspense>
                          </ProtectedRoute>
                        } />
                        <Route path="/ads-manager-test" element={
                          <Suspense fallback={<PageLoader />}>
                            <LazyAdConfigProvider>
                              <AdsManagerTest />
                            </LazyAdConfigProvider>
                          </Suspense>
                        } />

                        {/* ── DYNAMIC LOCATION (catch slugs) ── */}
                        <Route path="/:slug" element={<ServiceLocationRouter />} />

                        {/* ── 404 ── */}
                        <Route path="*" element={<NotFound />} />
                      </Routes>
                    </Suspense>
                  </BrowserRouter>
                </TooltipProvider>
              </AdSettingsProvider>
            </AuthProvider>
          </DemoDataProvider>
        </QueryClientProvider>
      </ErrorBoundary>
    </HelmetProvider>
  );
}

export default App;