import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { useAuth } from "@/hooks/useAuth";
import { Suspense, lazy } from "react";
import { createPortal } from "react-dom";
import { ImageModalProvider } from "@/contexts/ImageModalContext";
import { ImageModal } from "@/components/ImageModal";
import { Loader2 } from "lucide-react";
import { useReferral } from "@/hooks/useReferral";
import MetaPixelRouteTracker from "@/components/MetaPixelRouteTracker";

// Aggressive lazy loading for better initial bundle size
const NotFound = lazy(() => import("@/pages/not-found"));
const Landing = lazy(() => import("@/pages/landing"));

// Administrative and heavy components - load only when needed
const Home = lazy(() => import("@/pages/home"));
const Providers = lazy(() => import("@/pages/providers"));
const ProviderDetails = lazy(() => import("@/pages/provider-details"));
const ProviderDashboard = lazy(() => import("@/pages/provider-dashboard"));
const OwnerProviderProfile = lazy(() => import("@/components/provider-panel/ProviderProfileRoutes").then((module) => ({ default: module.OwnerProviderProfileRoute })));
const AdminDashboard = lazy(() => import("@/pages/admin-dashboard"));
const AdminLogin = lazy(() => import("@/pages/admin-login"));
const SearchResults = lazy(() => import("@/pages/search-results"));
const ProductDetail = lazy(() => import("@/pages/product-detail"));
const BusinessRegister = lazy(() => import("@/pages/business-register"));
const SubscriptionGate = lazy(() => import("@/components/SubscriptionGate"));
const BusinessProfile = lazy(() => import("@/pages/business-profile"));
const Proveedores = lazy(() => import("@/pages/proveedores"));
const AlimentosBebidas = lazy(() => import("@/pages/alimentos-bebidas"));
const LoginPage = lazy(() => import("@/pages/login"));
const ClientLogin = lazy(() => import("@/pages/client-login"));
const ProviderLogin = lazy(() => import("@/pages/provider-login"));
const ForgotPassword = lazy(() => import("@/pages/forgot-password"));
const ResetPassword = lazy(() => import("@/pages/reset-password"));
const HelpCenter = lazy(() => import("@/pages/help-center"));
const Contact = lazy(() => import("@/pages/contact"));
const ReportProblem = lazy(() => import("@/pages/report-problem"));
const PrivacyPolicy = lazy(() => import("@/pages/privacy-policy"));
const TermsOfService = lazy(() => import("@/pages/terms-of-service"));
const FAQ = lazy(() => import("@/pages/faq"));
const About = lazy(() => import("@/pages/about"));
const Partners = lazy(() => import("@/pages/partners"));
const Regalo = lazy(() => import("@/pages/regalo"));
const PaymentSuccess = lazy(() => import("@/pages/payment-success"));
const PaymentFailure = lazy(() => import("@/pages/payment-failure"));
const PaymentPending = lazy(() => import("@/pages/payment-pending"));
const Checkout = lazy(() => import("@/pages/checkout"));
const PricingPage = lazy(() => import("@/pages/pricing"));
const LaunchPage = lazy(() => import("@/pages/launch"));
const CreateAccountWithPlan = lazy(() => import("@/pages/create-account-with-plan"));
const ClientPanel = lazy(() => import("@/pages/client-panel"));
const PackageDetail = lazy(() => import("@/pages/package-detail"));
const RedAliadas = lazy(() => import("@/pages/red-aliadas"));
const NuevaGeneracion = lazy(() => import("@/pages/nueva-generacion"));
const MiRed = lazy(() => import("@/pages/mi-red"));
const AliadaPortal = lazy(() => import("@/pages/aliada"));
const AliadaLogin = lazy(() => import("@/pages/aliada-login"));
const DashboardAliada = lazy(() => import("@/pages/dashboard-a"));
const ChatPage = lazy(() => import("@/pages/chat"));
const NewsletterUnsubscribe = lazy(() => import("@/pages/newsletter-unsubscribe"));
// TagPage component removed - tags now handled by SearchResults

// Loading component with brand colors
const PageLoader = () => (
  <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
    <div className="text-center">
      <Loader2 className="h-12 w-12 animate-spin text-purple-600 mx-auto mb-4" />
      <p className="text-gray-600 text-lg">Cargando DeFestejo...</p>
    </div>
  </div>
);


function ReferralCapture() {
  useReferral(); // Captures ?ref= from any page and persists 30 days
  return null;
}

function Router() {
  const { isAuthenticated, isLoading } = useAuth();

  return (
    <Suspense fallback={<PageLoader />}>
      <Switch>
        {/* Rutas públicas accesibles sin autenticación */}
        <Route path="/" component={Landing} />
        <Route path="/login" component={LoginPage} />
        <Route path="/login-cliente" component={ClientLogin} />
        <Route path="/login-proveedor" component={ProviderLogin} />
        <Route path="/forgot-password" component={ForgotPassword} />
        <Route path="/reset-password" component={ResetPassword} />
        <Route path="/proveedores" component={Proveedores} />
        <Route path="/alimentos-bebidas" component={AlimentosBebidas} />
        <Route path="/buscar" component={SearchResults} />
        <Route path="/categoria/:slug" component={SearchResults} />
        <Route path="/p/:slug" component={ProductDetail} />
        <Route path="/paquete/:slug" component={PackageDetail} />
        <Route path="/ciudad/:slug" component={SearchResults} />
        <Route path="/tag/:tagName" component={SearchResults} />
        <Route path="/registrar-negocio" component={BusinessRegister} />
        <Route path="/proveedor/:slug" component={ProviderDetails} />
        
        {/* Red Nacional de Aliadas — URL privada, no aparece en menú */}
        <Route path="/red" component={RedAliadas} />
        <Route path="/nueva-generacion" component={NuevaGeneracion} />
        <Route path="/mi-red" component={MiRed} />
        <Route path="/aliada" component={AliadaPortal} />
        <Route path="/aliadas-login" component={AliadaLogin} />
        <Route path="/dashboard-a" component={DashboardAliada} />

        {/* Chat / Mensajes */}
        <Route path="/mensajes" component={ChatPage} />

        {/* Support Pages */}
        <Route path="/precios" component={PricingPage} />
        <Route path="/planes" component={PricingPage} />
        <Route path="/lanzamiento" component={LaunchPage} />
        {/* English aliases for compatibility */}
        <Route path="/pricing" component={PricingPage} />
        <Route path="/launch" component={LaunchPage} />
        {/* Provider event pages - redirect to existing functional pages */}
        <Route path="/evento" component={LaunchPage} />
        <Route path="/agenda" component={Contact} />
        <Route path="/ayuda" component={HelpCenter} />
        <Route path="/contacto" component={Contact} />
        <Route path="/reportar-problema" component={ReportProblem} />
        <Route path="/quienes-somos" component={About} />
        <Route path="/socios" component={Partners} />
        <Route path="/regalo" component={Regalo} />
        <Route path="/preguntas-frecuentes" component={FAQ} />
        <Route path="/politicas-privacidad" component={PrivacyPolicy} />
        <Route path="/terminos-uso" component={TermsOfService} />
        <Route path="/newsletter/unsubscribe" component={NewsletterUnsubscribe} />
        
        {/* Payment Routes */}
        <Route path="/payment/success" component={PaymentSuccess} />
        <Route path="/payment/failure" component={PaymentFailure} />
        <Route path="/payment/pending" component={PaymentPending} />
        <Route path="/checkout" component={Checkout} />
        <Route path="/crear-cuenta-con-plan" component={CreateAccountWithPlan} />
        
        {/* Rutas del sistema de administración independiente */}
        <Route path="/m1chu14/login" component={AdminLogin} />
        <Route path="/m1chu14/dashboard" component={AdminDashboard} />
        
        {/* Rutas que requieren autenticación */}
        {/* Panel de cliente - siempre disponible, maneja auth internamente */}
        <Route path="/panel-cliente" component={ClientPanel} />
        <Route path="/dashboard/perfil" component={OwnerProviderProfile} />
        
        {isAuthenticated && (
          <>
            <Route path="/home" component={Home} />
            <Route path="/proveedor" component={Providers} />
            <Route path="/proveedor/:citySlug/:categorySlug" component={Providers} />
            <Route path="/dashboard" component={ProviderDashboard} />
            <Route path="/perfil-negocio" component={BusinessProfile} />
          </>
        )}
        
        <Route component={NotFound} />
      </Switch>
    </Suspense>
  );
}

function App() {
  const toastRoot = document.getElementById("toast-root");
  
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <ImageModalProvider>
          {toastRoot && createPortal(<Toaster />, toastRoot)}
          <ReferralCapture />
          <MetaPixelRouteTracker />
          <div className="bg-deFestejo text-foreground">
            <Router />
            <ImageModal />
          </div>
        </ImageModalProvider>
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;