import { Suspense, lazy } 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 AppErrorBoundary from "@/components/AppErrorBoundary";
import ScrollToTop from "./components/ScrollToTop";
import BackToTop from "./components/BackToTop";
import { AuthProvider } from "./hooks/useAuth";
import ProtectedRoute from "./components/ProtectedRoute";

// Loading fallback component
const PageLoader = () => (
  <div className="min-h-screen bg-background flex items-center justify-center">
    <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
  </div>
);

// Lazy load all page components for route-based code splitting
// Critical pages (homepage) loaded eagerly
import HomePage from "./pages/HomePage";

// Lazy load other pages
const NoticiasPage = lazy(() => import("./pages/NoticiasPage"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const Comparar = lazy(() => import("./pages/Comparar"));
const MercadosTendencia = lazy(() => import("./pages/MercadosTendencia"));
const Plataforma = lazy(() => import("./pages/Plataforma"));
const FutuurReview = lazy(() => import("./pages/FutuurReview"));
const MarketArticle = lazy(() => import("./pages/MarketArticle"));
const ArchivoMercados = lazy(() => import("./pages/ArchivoMercados"));
const AdminMarkets = lazy(() => import("./pages/AdminMarkets"));
const AdminLogin = lazy(() => import("./pages/AdminLogin"));

// Learn Pages - lazy loaded
const EmpezarAqui = lazy(() => import("./pages/learn/EmpezarAqui"));
const ComoFuncionan = lazy(() => import("./pages/learn/ComoFuncionan"));
const TarifasLiquidezRiesgos = lazy(() => import("./pages/learn/TarifasLiquidezRiesgos"));
const Estrategias = lazy(() => import("./pages/learn/Estrategias"));
const Regulacion = lazy(() => import("./pages/learn/Regulacion"));
const GlosarioPage = lazy(() => import("./pages/GlosarioPage"));
const FAQPage = lazy(() => import("./pages/FAQPage"));

// Author Pages - lazy loaded
const AutorPage = lazy(() => import("./pages/AutorPage"));
const AutoresPage = lazy(() => import("./pages/AutoresPage"));

// Topic Cluster Pages - lazy loaded
const KalshiMexico = lazy(() => import("./pages/clusters/KalshiMexico"));
const KalshiVsPolymarket = lazy(() => import("./pages/clusters/KalshiVsPolymarket"));
const MercadosPredictivos = lazy(() => import("./pages/clusters/MercadosPredictivos"));
const PrediccionesCripto = lazy(() => import("./pages/clusters/PrediccionesCripto"));
const FutuurGuide = lazy(() => import("./pages/clusters/FutuurGuide"));
const MundialMexico2026 = lazy(() => import("./pages/clusters/MundialMexico2026"));
const BanxicoPredicciones2026 = lazy(() => import("./pages/clusters/BanxicoPredicciones2026"));
const NearshoringPredicciones2026 = lazy(() => import("./pages/clusters/NearshoringPredicciones2026"));
const Predicciones2026Hub = lazy(() => import("./pages/clusters/Predicciones2026Hub"));
const PolymarketMexicoGuide = lazy(() => import("./pages/clusters/PolymarketMexicoGuide"));

// Legal & Info Pages - lazy loaded
const Privacidad = lazy(() => import("./pages/Privacidad"));
const Terminos = lazy(() => import("./pages/Terminos"));
const Cookies = lazy(() => import("./pages/Cookies"));
const SobreNosotros = lazy(() => import("./pages/SobreNosotros"));
const PoliticaEditorial = lazy(() => import("./pages/PoliticaEditorial"));
const MapaSitio = lazy(() => import("./pages/MapaSitio"));
const Metodologia = lazy(() => import("./pages/Metodologia"));

const NotFound = lazy(() => import("./pages/NotFound"));

// Cluster sub-pages - lazy loaded
const ClusterSubPage = lazy(() => import("./pages/clusters/ClusterSubPage"));

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <ScrollToTop />
      <BackToTop />
      <HelmetProvider>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
          <AuthProvider>
            <TooltipProvider>
              <Toaster />
              <Sonner />
              <Suspense fallback={<PageLoader />}>
                <AppErrorBoundary>
                  <Routes>
                    {/* Main Pages */}
                    <Route path="/" element={<HomePage />} />
                    <Route path="/noticias" element={<NoticiasPage />} />
                    <Route path="/noticias/:slug" element={<MarketArticle />} />
                    <Route path="/blog" element={<Blog />} />
                    <Route path="/blog/:slug" element={<BlogPost />} />
                    <Route path="/analisis" element={<NoticiasPage />} />
                    <Route path="/comparar" element={<Comparar />} />
                    <Route path="/mercados-tendencia" element={<MercadosTendencia />} />
                    <Route path="/mercados" element={<ArchivoMercados />} />
                    <Route path="/archivo" element={<ArchivoMercados />} />
                    
                    {/* Author Pages */}
                    <Route path="/autores" element={<AutoresPage />} />
                    <Route path="/autor/:slug" element={<AutorPage />} />
                    
                    {/* Learn Section */}
                    <Route path="/aprender" element={<EmpezarAqui />} />
                    <Route path="/aprender/empezar" element={<EmpezarAqui />} />
                    <Route path="/aprender/como-funcionan" element={<ComoFuncionan />} />
                    <Route path="/aprender/tarifas-liquidez-riesgos" element={<TarifasLiquidezRiesgos />} />
                    <Route path="/aprender/estrategias" element={<Estrategias />} />
                    <Route path="/aprender/regulacion" element={<Regulacion />} />
                    <Route path="/glosario" element={<GlosarioPage />} />
                    <Route path="/faq" element={<FAQPage />} />
                    
                    {/* Kalshi Cluster */}
                    <Route path="/kalshi-mexico" element={<KalshiMexico />} />
                    <Route path="/kalshi-vs-polymarket" element={<KalshiVsPolymarket />} />
                    <Route path="/kalshi-que-es" element={<ClusterSubPage />} />
                    <Route path="/kalshi-app" element={<ClusterSubPage />} />
                    <Route path="/kalshi-regulacion" element={<ClusterSubPage />} />
                    <Route path="/kalshi-como-funciona" element={<ClusterSubPage />} />
                    <Route path="/kalshi-comisiones" element={<ClusterSubPage />} />
                    <Route path="/kalshi-alternativas" element={<ClusterSubPage />} />
                    
                    {/* Futuur Cluster */}
                    <Route path="/futuur" element={<FutuurGuide />} />
                    <Route path="/futuur-como-funciona" element={<ClusterSubPage />} />
                    <Route path="/futuur-es-seguro" element={<ClusterSubPage />} />
                    <Route path="/futuur-alternativas" element={<ClusterSubPage />} />
                    <Route path="/futuur-predicciones" element={<ClusterSubPage />} />
                    
                    {/* Mercados Predictivos Cluster */}
                    <Route path="/mercados-predictivos" element={<MercadosPredictivos />} />
                    <Route path="/que-son-los-mercados-predictivos" element={<ClusterSubPage />} />
                    <Route path="/ejemplos-de-mercados-predictivos" element={<ClusterSubPage />} />
                    <Route path="/mercados-predictivos-politicos" element={<ClusterSubPage />} />
                    <Route path="/mercados-predictivos-criptomonedas" element={<ClusterSubPage />} />
                    <Route path="/mejores-plataformas-de-mercados-predictivos" element={<ClusterSubPage />} />
                    
                    {/* Crypto Predictions Cluster */}
                    <Route path="/predicciones-criptomonedas" element={<PrediccionesCripto />} />
                    <Route path="/prediccion-bitcoin" element={<ClusterSubPage />} />
                    <Route path="/prediccion-ethereum" element={<ClusterSubPage />} />
                    <Route path="/prediccion-cripto-2025" element={<ClusterSubPage />} />
                    
                    {/* Future-Focus Pillar Guides */}
                    <Route path="/predicciones-2026" element={<Predicciones2026Hub />} />
                    <Route path="/mundial-mexico-2026" element={<MundialMexico2026 />} />
                    <Route path="/banxico-predicciones-2026" element={<BanxicoPredicciones2026 />} />
                    <Route path="/nearshoring-predicciones-2026" element={<NearshoringPredicciones2026 />} />
                    <Route path="/polymarket-mexico-guia" element={<PolymarketMexicoGuide />} />
                    
                    {/* Platform Pages */}
                    <Route path="/plataforma/:slug" element={<Plataforma />} />
                    <Route path="/plataforma/futuur-review" element={<FutuurReview />} />
                    
                    {/* Market Articles */}
                    <Route path="/markets/:slug" element={<MarketArticle />} />
                    
                    {/* Admin */}
                    <Route path="/admin/login" element={<AdminLogin />} />
                    <Route
                      path="/admin/markets"
                      element={
                        <ProtectedRoute requireAdmin>
                          <AdminMarkets />
                        </ProtectedRoute>
                      }
                    />
                    
                    {/* Legal & Info Pages */}
                    <Route path="/privacidad" element={<Privacidad />} />
                    <Route path="/terminos" element={<Terminos />} />
                    <Route path="/cookies" element={<Cookies />} />
                    <Route path="/sobre-nosotros" element={<SobreNosotros />} />
                    <Route path="/politica-editorial" element={<PoliticaEditorial />} />
                    <Route path="/mapa-del-sitio" element={<MapaSitio />} />
                    <Route path="/metodologia" element={<Metodologia />} />
                    
                    
                    {/* Catch-all */}
                    <Route path="*" element={<NotFound />} />
                  </Routes>
                </AppErrorBoundary>
              </Suspense>
            </TooltipProvider>
          </AuthProvider>
        </ThemeProvider>
      </HelmetProvider>
    </BrowserRouter>
  </QueryClientProvider>
);

export default App;