import { Suspense, lazy, useEffect, useState } from "react";
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 } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";
import { ThemeProvider } from "next-themes";
import { SubscriptionProvider } from "@/hooks/useSubscription";
import { SubscriptionErrorBoundary } from "@/components/SubscriptionErrorBoundary";
import { PageLoadingFallback } from "@/components/ui/PageLoadingFallback";
import { SkipLink } from "@/components/ui/SkipLink";
import { useWebVitals } from "@/hooks/useWebVitals";
import { GlobalShortcutsProvider } from "@/providers/GlobalShortcutsProvider";
import { InstallPrompt } from "@/components/pwa/InstallPrompt";
import ErrorBoundary from "./components/ErrorBoundary";
import { FeatureFlagProvider } from "@/contexts/FeatureFlagContext";
import { CookieConsentBanner } from "@/components/layout/CookieConsentBanner";
import { PageTransition } from "@/components/layout/PageTransition";
import { useSignupListener } from "@/lib/saas/useSignupListener";

// Lazy load non-critical UI components (deferred until browser idle)
const OfflineBanner = lazy(() => import("@/components/OfflineBanner").then(m => ({ default: m.OfflineBanner })));
const ReferralTracker = lazy(() => import("@/components/ReferralTracker").then(m => ({ default: m.ReferralTracker })));


// Landing is statically imported (most common entry point - no code-split benefit)
import Landing from "./pages/Landing";
const StockAnalysis = lazy(() => import("./pages/StockAnalysis"));
const ContentOperationsManual = lazy(() => import("./pages/admin/ContentOperationsManual"));
const AuditExport = lazy(() => import("./pages/AuditExport"));

// Web Vitals monitoring wrapper
function WebVitalsMonitor({ children }: { children: React.ReactNode }) {
  useWebVitals();
  return <>{children}</>;
}

// Service Worker registration (production only)
function useServiceWorkerRegistration() {
  useEffect(() => {
    if ('serviceWorker' in navigator && import.meta.env.PROD) {
      navigator.serviceWorker.register('/sw.js', { scope: '/' })
        .then(registration => {
          console.log('[SW] Registered:', registration.scope);
        })
        .catch(error => {
          console.error('[SW] Registration failed:', error);
        });
    }
  }, []);
}

// Lazy load secondary pages
const Auth = lazy(() => import("./pages/Auth"));
const HowItWorks = lazy(() => import("./pages/HowItWorks"));
const FAQ = lazy(() => import("./pages/FAQ"));
const Pricing = lazy(() => import("./pages/Pricing"));
const SafestDividends = lazy(() => import("./pages/SafestDividends"));
const Compare = lazy(() => import("./pages/Compare"));
const DividendChecklist = lazy(() => import("./pages/DividendChecklist"));
const Terms = lazy(() => import("./pages/Terms"));
const Privacy = lazy(() => import("./pages/Privacy"));
const NotFound = lazy(() => import("./pages/NotFound"));
const CheckoutSuccess = lazy(() => import("./pages/CheckoutSuccess"));
const CheckoutCancel = lazy(() => import("./pages/CheckoutCancel"));
const Admin = lazy(() => import("./pages/Admin"));

// SEO pages
const BestDividendStocks2025 = lazy(() => import("./pages/seo/BestDividendStocks2025"));
const SafestREITs = lazy(() => import("./pages/seo/SafestREITs"));
const DividendAristocrats = lazy(() => import("./pages/seo/DividendAristocrats"));
const HighYieldSafeDividends = lazy(() => import("./pages/seo/HighYieldSafeDividends"));
const BestUtilityDividends = lazy(() => import("./pages/seo/BestUtilityDividends"));
const SafestBankDividends = lazy(() => import("./pages/seo/SafestBankDividends"));
const MonthlyDividendStocks = lazy(() => import("./pages/seo/MonthlyDividendStocks"));
const DividendKings2025 = lazy(() => import("./pages/seo/DividendKings2025"));
const HealthcareDividends = lazy(() => import("./pages/seo/HealthcareDividends"));
const Trust = lazy(() => import("./pages/Trust"));
const Watchlist = lazy(() => import("./pages/Watchlist"));
const Stock = lazy(() => import("./pages/Stock"));
const Portfolio = lazy(() => import("./pages/Portfolio"));
const EmailPreferences = lazy(() => import("./pages/EmailPreferences"));
const APIDocumentation = lazy(() => import("./pages/APIDocumentation"));
const EmbedPage = lazy(() => import("./pages/Embed"));
const DividendRiskQuiz = lazy(() => import("./pages/quiz/DividendRiskQuiz"));
const FiveRedFlags = lazy(() => import("./pages/FiveRedFlags"));
const QRCode = lazy(() => import("./pages/QRCode"));
 const Account = lazy(() => import("./pages/Account"));
 const DataQuality = lazy(() => import("./pages/DataQuality"));
 const RaiseCalendar = lazy(() => import("./pages/RaiseCalendar"));
const Backtest = lazy(() => import("./pages/Backtest"));
const HonestMisses = lazy(() => import("./pages/HonestMisses"));
const Methodology = lazy(() => import("./pages/Methodology"));
 const FireLanding = lazy(() => import("./pages/FireLanding"));
const IncomeCenter = lazy(() => import("./pages/IncomeCenter"));
const DividendFriday = lazy(() => import("./pages/DividendFriday"));
const BrandStyleGuide = lazy(() => import("./pages/BrandStyleGuide"));

// Competitor alternatives pages
const SimplySafeDividendsAlternative = lazy(() => import("./pages/alternatives/SimplySafeDividendsAlternative"));
const SeekingAlphaDividendAlternative = lazy(() => import("./pages/alternatives/SeekingAlphaDividendAlternative"));
const MorningstarDividendAlternative = lazy(() => import("./pages/alternatives/MorningstarDividendAlternative"));

const BlogHome = lazy(() => import("./pages/blog/BlogHome"));
const DividendSafetyRedFlags = lazy(() => import("./pages/blog/DividendSafetyRedFlags"));
const AristocratsVsKings = lazy(() => import("./pages/blog/AristocratsVsKings"));
const HowToEvaluateDividendSafety = lazy(() => import("./pages/blog/HowToEvaluateDividendSafety"));
const TheCutWeDidntFlag = lazy(() => import("./pages/blog/TheCutWeDidntFlag"));
// Lazy-loaded global components
const FeedbackButton = lazy(() => import("./components/IssueReportButton"));
const MobileBottomNav = lazy(() =>
  import("./components/layout/MobileBottomNav").then((m) => ({ default: m.MobileBottomNav }))
);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Increase stale time - stock data doesn't change frequently
      staleTime: 5 * 60 * 1000, // 5 minutes
      // Cache data for 30 minutes before garbage collection
      gcTime: 30 * 60 * 1000,
      // Don't refetch on window focus for better UX
      refetchOnWindowFocus: false,
      // Retry failed requests up to 2 times
      retry: 2,
      // Use exponential backoff for retries
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
    },
  },
});

const App = () => {
  // Register service worker on mount
  useServiceWorkerRegistration();

  // Enroll OAuth / magic-link signups into the welcome drip sequence.
  // Email/password signups are handled directly in Auth.tsx.
  useSignupListener();

  // Clear chunk reload guard after successful mount
  useEffect(() => {
    sessionStorage.removeItem('chunk_reload_attempted');
  }, []);
  
  // Defer non-critical UI until browser is idle (LCP optimization)
  const [showDeferredUI, setShowDeferredUI] = useState(false);
  
  useEffect(() => {
    const enableDeferredUI = () => setShowDeferredUI(true);
    
    if ('requestIdleCallback' in window) {
      const id = requestIdleCallback(enableDeferredUI, { timeout: 2000 });
      return () => cancelIdleCallback(id);
    } else {
      const id = setTimeout(enableDeferredUI, 100);
      return () => clearTimeout(id);
    }
  }, []);

  const handleSubscriptionError = (error: Error, errorInfo: React.ErrorInfo) => {
    console.error('Subscription Error Boundary triggered:', {
      error: error.message,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
      timestamp: new Date().toISOString()
    });
  };

  return (
    <ErrorBoundary>
      <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
        <HelmetProvider>
          <QueryClientProvider client={queryClient}>
            <TooltipProvider>
                <WebVitalsMonitor>
                  <Toaster />
                  <Sonner />
                  {/* Deferred non-critical UI (LCP optimization) */}
                  {showDeferredUI && (
                    <Suspense fallback={null}>
                      <OfflineBanner />
                      <ReferralTracker />
                    </Suspense>
                  )}
                  <BrowserRouter>
                    {/* Global keyboard shortcuts provider */}
                    <GlobalShortcutsProvider>
                      {/* Accessibility: Skip to main content link */}
                      <SkipLink />
                      
                      {/* SubscriptionProvider moved inside BrowserRouter to avoid blocking initial render */}
                      <SubscriptionErrorBoundary onError={handleSubscriptionError}>
                        <SubscriptionProvider 
                          refreshInterval={5 * 60 * 1000}
                          enableDebug={process.env.NODE_ENV === 'development'}
                          onError={(error) => {
                            console.error('Subscription Provider Error:', error);
                          }}
                        >
                          <FeatureFlagProvider>
                          <PageTransition>
                          <Routes>
                            {/* Landing is statically imported for fastest LCP */}
                            <Route path="/" element={<Landing />} />
                            <Route path="/analyze" element={<Suspense fallback={<PageLoadingFallback />}><StockAnalysis /></Suspense>} />
                            
                            {/* Lazy-loaded routes with Suspense */}
                            <Route path="/auth" element={<Suspense fallback={<PageLoadingFallback />}><Auth /></Suspense>} />
                            <Route path="/how-it-works" element={<Suspense fallback={<PageLoadingFallback />}><HowItWorks /></Suspense>} />
                            
                            <Route path="/faq" element={<Suspense fallback={<PageLoadingFallback />}><FAQ /></Suspense>} />
                            <Route path="/pricing" element={<Suspense fallback={<PageLoadingFallback />}><Pricing /></Suspense>} />
                            <Route path="/lists/safest-dividends" element={<Suspense fallback={<PageLoadingFallback />}><SafestDividends /></Suspense>} />
                            <Route path="/compare" element={<Suspense fallback={<PageLoadingFallback />}><Compare /></Suspense>} />
                            <Route path="/free/dividend-checklist" element={<Suspense fallback={<PageLoadingFallback />}><DividendChecklist /></Suspense>} />
                            <Route path="/terms" element={<Suspense fallback={<PageLoadingFallback />}><Terms /></Suspense>} />
                            <Route path="/privacy" element={<Suspense fallback={<PageLoadingFallback />}><Privacy /></Suspense>} />
                            <Route path="/trust" element={<Suspense fallback={<PageLoadingFallback />}><Trust /></Suspense>} />
                            <Route path="/watchlist" element={<Suspense fallback={<PageLoadingFallback />}><Watchlist /></Suspense>} />
                            <Route path="/portfolio" element={<Suspense fallback={<PageLoadingFallback />}><Portfolio /></Suspense>} />
                            <Route path="/email-preferences" element={<Suspense fallback={<PageLoadingFallback />}><EmailPreferences /></Suspense>} />
                            <Route path="/developers" element={<Suspense fallback={<PageLoadingFallback />}><APIDocumentation /></Suspense>} />
                            <Route path="/embed/:ticker" element={<Suspense fallback={<PageLoadingFallback />}><EmbedPage /></Suspense>} />
                            <Route path="/quiz/dividend-risk" element={<Suspense fallback={<PageLoadingFallback />}><DividendRiskQuiz /></Suspense>} />
                            <Route path="/free/5-red-flags" element={<Suspense fallback={<PageLoadingFallback />}><FiveRedFlags /></Suspense>} />
                            <Route path="/qr" element={<Suspense fallback={<PageLoadingFallback />}><QRCode /></Suspense>} />
                             <Route path="/account" element={<Suspense fallback={<PageLoadingFallback />}><Account /></Suspense>} />
                             <Route path="/data-quality" element={<Suspense fallback={<PageLoadingFallback />}><DataQuality /></Suspense>} />
                             <Route path="/raise-calendar" element={<Suspense fallback={<PageLoadingFallback />}><RaiseCalendar /></Suspense>} />
                             <Route path="/backtest" element={<Suspense fallback={<PageLoadingFallback />}><Backtest /></Suspense>} />
                            <Route path="/honest-misses" element={<Suspense fallback={<PageLoadingFallback />}><HonestMisses /></Suspense>} />
                            <Route path="/methodology" element={<Suspense fallback={<PageLoadingFallback />}><Methodology /></Suspense>} />
                             <Route path="/fire" element={<Suspense fallback={<PageLoadingFallback />}><FireLanding /></Suspense>} />
                             <Route path="/income" element={<Suspense fallback={<PageLoadingFallback />}><IncomeCenter /></Suspense>} />
                             <Route path="/dividend-friday" element={<Suspense fallback={<PageLoadingFallback />}><DividendFriday /></Suspense>} />
                             <Route path="/audit-export" element={<Suspense fallback={<PageLoadingFallback />}><AuditExport /></Suspense>} />
                             <Route path="/brand" element={<Suspense fallback={<PageLoadingFallback />}><BrandStyleGuide /></Suspense>} />
                             
                             {/* Competitor alternatives pages */}
                             <Route path="/simply-safe-dividends-alternative" element={<Suspense fallback={<PageLoadingFallback />}><SimplySafeDividendsAlternative /></Suspense>} />
                             <Route path="/seeking-alpha-dividend-alternative" element={<Suspense fallback={<PageLoadingFallback />}><SeekingAlphaDividendAlternative /></Suspense>} />
                             <Route path="/morningstar-dividend-alternative" element={<Suspense fallback={<PageLoadingFallback />}><MorningstarDividendAlternative /></Suspense>} />
                             
                            
                             {/* Blog routes */}
                             <Route path="/blog" element={<Suspense fallback={<PageLoadingFallback />}><BlogHome /></Suspense>} />
                             <Route path="/blog/dividend-safety-red-flags" element={<Suspense fallback={<PageLoadingFallback />}><DividendSafetyRedFlags /></Suspense>} />
                             <Route path="/blog/dividend-aristocrats-vs-kings" element={<Suspense fallback={<PageLoadingFallback />}><AristocratsVsKings /></Suspense>} />
                             <Route path="/blog/how-to-evaluate-dividend-safety" element={<Suspense fallback={<PageLoadingFallback />}><HowToEvaluateDividendSafety /></Suspense>} />
                             <Route path="/blog/the-cut-we-didnt-flag" element={<Suspense fallback={<PageLoadingFallback />}><TheCutWeDidntFlag /></Suspense>} />

                            {/* Programmatic SEO stock pages */}
                            <Route path="/stock/:ticker" element={<Suspense fallback={<PageLoadingFallback />}><Stock /></Suspense>} />
                            
                            {/* SEO intent pages */}
                            <Route path="/lists/best-dividend-stocks-2025" element={<Suspense fallback={<PageLoadingFallback />}><BestDividendStocks2025 /></Suspense>} />
                            <Route path="/lists/safest-reits" element={<Suspense fallback={<PageLoadingFallback />}><SafestREITs /></Suspense>} />
                            <Route path="/lists/dividend-aristocrats" element={<Suspense fallback={<PageLoadingFallback />}><DividendAristocrats /></Suspense>} />
                            <Route path="/lists/high-yield-safe-dividends" element={<Suspense fallback={<PageLoadingFallback />}><HighYieldSafeDividends /></Suspense>} />
                            <Route path="/lists/best-utility-dividends" element={<Suspense fallback={<PageLoadingFallback />}><BestUtilityDividends /></Suspense>} />
                            <Route path="/lists/safest-bank-dividends" element={<Suspense fallback={<PageLoadingFallback />}><SafestBankDividends /></Suspense>} />
                            <Route path="/lists/monthly-dividend-stocks" element={<Suspense fallback={<PageLoadingFallback />}><MonthlyDividendStocks /></Suspense>} />
                            <Route path="/lists/dividend-kings-2025" element={<Suspense fallback={<PageLoadingFallback />}><DividendKings2025 /></Suspense>} />
                            <Route path="/lists/healthcare-dividends" element={<Suspense fallback={<PageLoadingFallback />}><HealthcareDividends /></Suspense>} />
                            
                            {/* Stripe checkout routes */}
                            <Route path="/success" element={<Suspense fallback={<PageLoadingFallback />}><CheckoutSuccess /></Suspense>} />
                            <Route path="/cancel" element={<Suspense fallback={<PageLoadingFallback />}><CheckoutCancel /></Suspense>} />
                            
                            {/* Admin routes */}
                            <Route path="/admin" element={<Suspense fallback={<PageLoadingFallback />}><Admin /></Suspense>} />
                            <Route path="/admin/operations-manual" element={<Suspense fallback={<PageLoadingFallback />}><ContentOperationsManual /></Suspense>} />
                            
                            <Route path="*" element={<Suspense fallback={<PageLoadingFallback />}><NotFound /></Suspense>} />
                          </Routes>
                          </PageTransition>
                          </FeatureFlagProvider>
                        </SubscriptionProvider>
                      </SubscriptionErrorBoundary>
                      
                      {/* Mobile Bottom Navigation (lazy-loaded) */}
                      <Suspense fallback={null}>
                        <MobileBottomNav />
                      </Suspense>
                      
                      {/* PWA Install Prompt (mobile only) */}
                      <InstallPrompt />
                      
                      {/* Global Feedback Button (lazy-loaded) */}
                      <Suspense fallback={null}>
                        <FeedbackButton />
                      </Suspense>
                      
                      {/* GDPR Cookie Consent Banner */}
                      <CookieConsentBanner />
                    </GlobalShortcutsProvider>
                  </BrowserRouter>
                </WebVitalsMonitor>
            </TooltipProvider>
          </QueryClientProvider>
        </HelmetProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
};

export default App;