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 load Tools pages ─── */
const ToolsHub = lazy(() => import("./pages/tools/ToolsHub"));
const EmiCalculator = lazy(() => import("./pages/tools/EmiCalculator"));
const SipCalculator = lazy(() => import("./pages/tools/SipCalculator"));
const GstCalculator = lazy(() => import("./pages/tools/GstCalculator"));
const IncomeTaxCalculator = lazy(() => import("./pages/tools/IncomeTaxCalculator"));
const SalaryCalculator = lazy(() => import("./pages/tools/SalaryCalculator"));
const PercentageCalculator = lazy(() => import("./pages/tools/PercentageCalculator"));
const AgeCalculator = lazy(() => import("./pages/tools/AgeCalculator"));
const BmiCalculator = lazy(() => import("./pages/tools/BmiCalculator"));
const GradeCalculator = lazy(() => import("./pages/tools/GradeCalculator"));
const UnitConverter = lazy(() => import("./pages/tools/UnitConverter"));
const WordCounter = lazy(() => import("./pages/tools/WordCounter"));
const CaseConverter = lazy(() => import("./pages/tools/CaseConverter"));
const LoremIpsum = lazy(() => import("./pages/tools/LoremIpsum"));
const HindiFontConverter = lazy(() => import("./pages/tools/writing/HindiFontConverter"));
const PlagiarismChecker = lazy(() => import("./pages/tools/writing/PlagiarismChecker"));
const Paraphraser = lazy(() => import("./pages/tools/writing/Paraphraser"));

const ImageCompressor = lazy(() => import("./pages/tools/image/ImageCompressor"));
const ImageResizer = lazy(() => import("./pages/tools/image/ImageResizer"));
const FormatConverter = lazy(() => import("./pages/tools/image/FormatConverter"));
const PhotoToPdf = lazy(() => import("./pages/tools/image/PhotoToPdf"));
const PassportPhotoMaker = lazy(() => import("./pages/tools/image/PassportPhotoMaker"));
const BackgroundRemover = lazy(() => import("./pages/tools/image/BackgroundRemover"));

const QrCodeGenerator = lazy(() => import("./pages/tools/QrCodeGenerator"));
const PasswordGenerator = lazy(() => import("./pages/tools/PasswordGenerator"));
const Base64Tool = lazy(() => import("./pages/tools/Base64Tool"));
const JsonFormatter = lazy(() => import("./pages/tools/JsonFormatter"));
const ColorPicker = lazy(() => import("./pages/tools/ColorPicker"));
const TimezoneConverter = lazy(() => import("./pages/tools/TimezoneConverter"));
const WhatsAppGenerator = lazy(() => import("./pages/tools/WhatsAppGenerator"));
const PFCalculator = lazy(() => import("./pages/tools/PFCalculator"));
const GratuityCalculator = lazy(() => import("./pages/tools/GratuityCalculator"));
const CtcCalculator = lazy(() => import("./pages/tools/CtcCalculator"));
const StudentIdCard = lazy(() => import("./pages/tools/StudentIdCard"));
const YouTubeThumbnailDownloader = lazy(() => import("./pages/tools/marketing/YouTubeThumbnailDownloader"));
const UTMLinkBuilder = lazy(() => import("./pages/tools/marketing/UTMLinkBuilder"));
const PromptGenerator = lazy(() => import("./pages/tools/ai/PromptGenerator"));
const AITextHumanizer = lazy(() => import("./pages/tools/ai/AITextHumanizer"));
const FreelanceRateCalculator = lazy(() => import("./pages/tools/business/FreelanceRateCalculator"));
const InvoiceGenerator = lazy(() => import("./pages/tools/business/InvoiceGenerator"));
const SvgToJsx = lazy(() => import("./pages/tools/developer/SvgToJsx"));
const OpenGraphPreview = lazy(() => import("./pages/tools/developer/OpenGraphPreview"));
const PomodoroTimer = lazy(() => import("./pages/tools/productivity/PomodoroTimer"));
const WheelOfNames = lazy(() => import("./pages/tools/productivity/WheelOfNames"));

/* ─── 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/") ||
      pathname === "/tools" ||
      pathname.startsWith("/tools/");

    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>
                        } />

                        {/* ── FREE TOOLS ── */}
                        <Route path="/tools" element={<ToolsHub />} />
                        <Route path="/tools/emi-calculator" element={<EmiCalculator />} />
                        <Route path="/tools/sip-calculator" element={<SipCalculator />} />
                        <Route path="/tools/gst-calculator" element={<GstCalculator />} />
                        <Route path="/tools/income-tax-calculator" element={<IncomeTaxCalculator />} />
                        <Route path="/tools/salary-calculator" element={<SalaryCalculator />} />
                        <Route path="/tools/percentage-calculator" element={<PercentageCalculator />} />
                        <Route path="/tools/age-calculator" element={<AgeCalculator />} />
                        <Route path="/tools/bmi-calculator" element={<BmiCalculator />} />
                        <Route path="/tools/grade-calculator" element={<GradeCalculator />} />
                        <Route path="/tools/unit-converter" element={<UnitConverter />} />
                        <Route path="/tools/word-counter" element={<WordCounter />} />
                        <Route path="/tools/case-converter" element={<CaseConverter />} />
                        <Route path="/tools/lorem-ipsum-generator" element={<LoremIpsum />} />
                        <Route path="/tools/hindi-font-converter" element={<HindiFontConverter />} />
                        <Route path="/tools/plagiarism-checker" element={<PlagiarismChecker />} />
                        <Route path="/tools/paraphrasing-tool" element={<Paraphraser />} />

                        <Route path="/tools/image-compressor" element={<ImageCompressor />} />
                        <Route path="/tools/image-resizer" element={<ImageResizer />} />
                        <Route path="/tools/image-format-converter" element={<FormatConverter />} />
                        <Route path="/tools/photo-to-pdf" element={<PhotoToPdf />} />
                        <Route path="/tools/passport-photo-maker" element={<PassportPhotoMaker />} />
                        <Route path="/tools/background-remover" element={<BackgroundRemover />} />

                        <Route path="/tools/qr-code-generator" element={<QrCodeGenerator />} />
                        <Route path="/tools/password-generator" element={<PasswordGenerator />} />
                        <Route path="/tools/base64-encoder-decoder" element={<Base64Tool />} />
                        <Route path="/tools/json-formatter" element={<JsonFormatter />} />
                        <Route path="/tools/color-picker" element={<ColorPicker />} />
                        <Route path="/tools/timezone-converter" element={<TimezoneConverter />} />
                        <Route path="/tools/whatsapp-message-generator" element={<WhatsAppGenerator />} />
                        <Route path="/tools/pf-calculator" element={<PFCalculator />} />
                        <Route path="/tools/gratuity-calculator" element={<GratuityCalculator />} />
                        <Route path="/tools/ctc-to-inhand-calculator" element={<CtcCalculator />} />
                        <Route path="/tools/student-id-card-generator" element={<StudentIdCard />} />
                        <Route path="/tools/youtube-thumbnail-downloader" element={<YouTubeThumbnailDownloader />} />
                        <Route path="/tools/utm-link-builder" element={<UTMLinkBuilder />} />
                        <Route path="/tools/ai-prompt-generator" element={<PromptGenerator />} />
                        <Route path="/tools/ai-text-humanizer" element={<AITextHumanizer />} />
                        <Route path="/tools/freelance-rate-calculator" element={<FreelanceRateCalculator />} />
                        <Route path="/tools/invoice-generator" element={<InvoiceGenerator />} />
                        <Route path="/tools/svg-to-jsx" element={<SvgToJsx />} />
                        <Route path="/tools/open-graph-preview" element={<OpenGraphPreview />} />
                        <Route path="/tools/pomodoro-timer" element={<PomodoroTimer />} />
                        <Route path="/tools/wheel-of-names" element={<WheelOfNames />} />

                        {/* ── 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;