/*
 * PoolPros Global™ - Pool Installation Directory Platform
 * Copyright (c) 2025 PoolPros Global™. All rights reserved.
 * 
 * This software is proprietary and confidential. Unauthorized copying,
 * distribution, or modification is strictly prohibited.
 * 
 * File: Main Application Router
 * Purpose: Core routing and navigation system
 * Last Modified: 2025-01-28
 */

import { lazy, Suspense, useEffect, useState } from "react";
import { Switch, Route, useLocation } 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 { SEOPerformance } from "@/components/seo-performance";
import { FloatingCalculatorButton } from "@/components/floating-calculator-button";
import { PoolLoader } from "@/components/pool-loader";
import { trackPageView, initializeAnalytics } from "@/lib/analytics";
import { initializeRealTimeTracking } from "@/lib/realtime-analytics";
import { useRouteValidation } from "@/lib/route-validator";
import { initializeRouteGuardian } from "@/lib/route-guardian";

const prerenderH1Text = (() => {
  try {
    const h1 = document.querySelector('#root > h1');
    return h1?.textContent || null;
  } catch {
    return null;
  }
})();

// Critical SEO pages loaded immediately (no lazy/Suspense gap for H1 survival)
import Home from "@/pages/home";
import CountryLanding from "@/pages/country-landing";
import SearchResults from "@/pages/search-results";
import LocationDirectory from "@/pages/location-directory";
import NeighborhoodDirectory from "@/pages/neighborhood-directory";
import PoolContractorsNearMe from "@/pages/pool-contractors-near-me";
import PoolContractorsNearMeLocation from "@/pages/pool-contractors-near-me-location";

// Lazy load non-SEO-critical pages
const CompanyDashboard = lazy(() => import("@/pages/company-dashboard"));
const CompanyDashboardAuth = lazy(() => import("@/pages/company-dashboard-auth"));
const InstallerProfile = lazy(() => import("@/pages/installer-profile"));
const SpecializationsOverview = lazy(() => import("@/pages/specializations-overview"));
const PoolSpecialization = lazy(() => import("@/pages/pool-specialization"));
const SpasHotTubs = lazy(() => import("@/pages/spas-hot-tubs"));
const SaunasSteamRooms = lazy(() => import("@/pages/saunas-steam-rooms"));
const ListYourBusiness = lazy(() => import("@/pages/list-your-business"));
const BusinessPreview = lazy(() => import("@/pages/business-preview"));
const SubmissionConfirmation = lazy(() => import("@/pages/submission-confirmation"));
const SubmissionStatus = lazy(() => import("@/pages/submission-status"));
const AdminDashboard = lazy(() => import("@/pages/admin-dashboard"));
const AdminLogin = lazy(() => import("@/pages/admin-login"));
const AdminSecurity = lazy(() => import("@/pages/admin-security"));
const AdminLeads = lazy(() => import("@/pages/admin-leads"));
const ForContractors = lazy(() => import("@/pages/for-contractors"));
const MarketingTools = lazy(() => import("@/pages/marketing-tools"));
const SuccessStories = lazy(() => import("@/pages/success-stories"));
const MaintenanceTips = lazy(() => import("@/pages/maintenance-tips"));
const DesignIdeas = lazy(() => import("@/pages/design-ideas"));
const CostCalculator = lazy(() => import("@/pages/cost-calculator"));
const EnergyEfficiencyCalculator = lazy(() => import("@/pages/energy-efficiency-calculator"));
const WaterCostCalculator = lazy(() => import("@/pages/water-cost-calculator"));
const PoolTypesGuide = lazy(() => import("@/pages/pool-types-guide"));
const Pricing = lazy(() => import("@/pages/pricing"));
const HelpSupport = lazy(() => import("@/pages/help-support"));
const About = lazy(() => import("@/pages/about"));
const NotFound = lazy(() => import("@/pages/not-found"));
const DemoLoaders = lazy(() => import("@/pages/demo-loaders"));
const ContractorDashboard = lazy(() => import("@/pages/company-dashboard-auth"));
const ContractorClaim = lazy(() => import("@/pages/contractor-claim").then(m => ({ default: m.ContractorClaim })));
const ContractorLogin = lazy(() => import("@/pages/contractor-login"));
const ForgotPassword = lazy(() => import("@/pages/forgot-password"));
const ResetPassword = lazy(() => import("@/pages/reset-password"));
const RequestClaim = lazy(() => import("@/pages/request-claim"));
const DirectReview = lazy(() => import("@/pages/direct-review"));
const MetaTagsDemo = lazy(() => import("@/pages/meta-tags-demo").then(m => ({ default: m.MetaTagsDemo })));

const CityLanding = lazy(() => import("@/pages/city-landing"));
const ServiceCity = lazy(() => import("@/pages/service-city"));
const ServiceAreaLanding = lazy(() => import("@/pages/service-area-landing"));
const ServiceArea = lazy(() => import("@/pages/service-area"));
const Blog = lazy(() => import("@/pages/blog"));
const BlogPost = lazy(() => import("@/pages/blog-post"));

const PoolWinterization = lazy(() => import("@/pages/pool-winterization"));
const PoolOpening = lazy(() => import("@/pages/pool-opening"));
const SummerMaintenance = lazy(() => import("@/pages/summer-maintenance"));
const EcoFriendlyPoolGuide = lazy(() => import("@/pages/eco-friendly-pool-guide"));
const PoolInstallationCost = lazy(() => import("@/pages/pool-installation-cost"));
const PoolCareCalendar = lazy(() => import("@/pages/pool-care-calendar"));

// New service-specific location pages
const HotTubInstallation = lazy(() => import("@/pages/hot-tub-installation"));
const PoolRenovation = lazy(() => import("@/pages/pool-renovation"));
const PoolRepair = lazy(() => import("@/pages/pool-repair"));
const SpaInstallation = lazy(() => import("@/pages/spa-installation"));

const PoolComparisonFiberglassConcrete = lazy(() => import("@/pages/pool-comparison-fiberglass-concrete"));
const PoolComparisons = lazy(() => import("@/pages/pool-comparisons"));
const PoolComparisonVinylFiberglass = lazy(() => import("@/pages/pool-comparison-vinyl-fiberglass"));
const PoolComparisonAboveInground = lazy(() => import("@/pages/pool-comparison-above-inground"));
const PoolComparisonSaltwaterChlorine = lazy(() => import("@/pages/pool-comparison-saltwater-chlorine"));
const PoolComparisonAllTypes = lazy(() => import("@/pages/pool-comparison-all-types"));
const PoolFinancing = lazy(() => import("@/pages/pool-financing"));
const PoolFinancingPaymentCalculator = lazy(() => import("@/pages/pool-financing-payment-calculator"));
const PoolRegulations = lazy(() => import("@/pages/pool-regulations"));
const PoolRegulationsOverview = lazy(() => import("@/pages/pool-regulations-overview"));
const PoolCostState = lazy(() => import("@/pages/pool-cost-state"));
const PoolCostOverview = lazy(() => import("@/pages/pool-cost-state").then(m => ({ default: m.PoolCostOverview })));
const PoolProblems = lazy(() => import("@/pages/pool-problems").then(m => ({ default: m.PoolProblems })));
const PrivacyPolicy = lazy(() => import("@/pages/privacy-policy").then(m => ({ default: m.PrivacyPolicy })));
const TermsOfService = lazy(() => import("@/pages/terms-of-service").then(m => ({ default: m.TermsOfService })));
const Sitemap = lazy(() => import("@/pages/sitemap"));
const SimpleTemplatesView = lazy(() => import("@/pages/simple-templates-view"));
// Analytics test component removed

// Component to track route changes for analytics
function RouteTracker() {
  const [location] = useLocation();
  
  useEffect(() => {
    // Track page view on route change
    trackPageView(location);
  }, [location]);
  
  // Initialize analytics and real-time tracking on first mount
  useEffect(() => {
    initializeAnalytics();
    initializeRealTimeTracking();
  }, []);
  
  return null;
}

function Router() {
  // Future-proofing: Validate routes in real-time to prevent soft 404s
  useRouteValidation();
  
  // Initialize advanced route protection system
  useEffect(() => {
    const guardian = initializeRouteGuardian({
      enableRealTimeMonitoring: true,
      enableAnalyticsReporting: true,
      alertThreshold: 3, // Alert after 3 soft 404s
      healthCheckInterval: 300000 // 5 minute intervals
    });
    
    return () => {
      guardian?.destroy();
    };
  }, []);
  
  return (
    <>
      <RouteTracker />
      <Switch>
      <Route path="/" component={CountryLanding} />
      
      {/* Country-specific routes */}
      <Route path="/us" component={Home} />
      <Route path="/es" component={Home} />
      <Route path="/fr" component={Home} />
      <Route path="/it" component={Home} />
      <Route path="/de" component={Home} />
      <Route path="/uk" component={Home} />
      <Route path="/au" component={Home} />
      
      {/* Legacy home route for direct access */}
      <Route path="/home" component={Home} />
      
      {/* Search results page */}
      <Route path="/search-results" component={SearchResults} />
      
      {/* Legacy and country-specific functional routes */}
      <Route path="/company-dashboard" component={CompanyDashboardAuth} />
      <Route path="/company-dashboard/:id">
        {(params) => <CompanyDashboard installerId={parseInt(params.id)} />}
      </Route>
      {/* New contractor profile routes */}
      <Route path="/pool-contractor/:state/:city/:neighborhood/:slug">
        {(params) => <InstallerProfile 
          state={params.state} 
          city={params.city} 
          neighborhood={params.neighborhood}
          slug={params.slug} 
        />}
      </Route>
      <Route path="/pool-contractor/:state/:city/:slug">
        {(params) => <InstallerProfile 
          state={params.state} 
          city={params.city} 
          slug={params.slug} 
        />}
      </Route>
      
      {/* Legacy installer profile route for backwards compatibility */}
      <Route path="/pool-installer/:state/:city/:slug">
        {(params) => <InstallerProfile state={params.state} city={params.city} slug={params.slug} legacy={true} />}
      </Route>
      
      {/* State-level pool contractors OR simple slug route - checks if param is a valid state */}
      <Route path="/pool-contractors/:slug">
        {(params) => {
          const slug = params.slug;
          
          // Check if slug is a valid US state name (lowercase, hyphenated)
          const validStates = [
            'alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado',
            'connecticut', 'delaware', 'florida', 'georgia', 'hawaii', 'idaho',
            'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana',
            'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota',
            'mississippi', 'missouri', 'montana', 'nebraska', 'nevada',
            'new-hampshire', 'new-jersey', 'new-mexico', 'new-york',
            'north-carolina', 'north-dakota', 'ohio', 'oklahoma', 'oregon',
            'pennsylvania', 'rhode-island', 'south-carolina', 'south-dakota',
            'tennessee', 'texas', 'utah', 'vermont', 'virginia', 'washington',
            'west-virginia', 'wisconsin', 'wyoming'
          ];
          
          // If it's a valid state, render LocationDirectory (handles slug param internally)
          if (validStates.includes(slug.toLowerCase())) {
            return <LocationDirectory />;
          }
          
          // Otherwise, show error for old contractor URL format
          return (
            <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
              <div className="max-w-md text-center">
                <h1 className="text-2xl font-bold text-gray-900 mb-4">Contractor Profile Not Found</h1>
                <p className="text-gray-600 mb-6">
                  The URL format has changed. Please use the full location-based URL:
                </p>
                <div className="bg-gray-100 p-4 rounded-lg mb-6">
                  <code className="text-sm text-gray-800">
                    /pool-contractor/[state]/[city]/[contractor-name]
                  </code>
                </div>
                <p className="text-gray-600 mb-4">
                  For example:
                  <br />
                  <code className="text-sm text-blue-600">
                    /pool-contractor/wyoming/cheyenne/test-claim-pool-services
                  </code>
                </p>
                <p className="text-gray-500 text-sm mt-4">
                  Note: The contractor slug should NOT include the city name.
                </p>
                <a href="/search-results" className="text-blue-600 hover:text-blue-800 underline">
                  Search for contractors →
                </a>
              </div>
            </div>
          );
        }}
      </Route>
      
      {/* Blog routes - must come before generic service routes */}
      <Route path="/blog" component={Blog} />
      <Route path="/blog/:slug">
        {(params) => <BlogPost slug={params.slug} />}
      </Route>
      <Route path="/us/blog" component={Blog} />
      <Route path="/us/blog/:slug">
        {(params) => <BlogPost slug={params.slug} />}
      </Route>
      
      {/* State-level pool contractors directory - /us/ format */}
      <Route path="/us/:state/pool-contractors" component={LocationDirectory} />
      
      {/* City landing pages */}
      <Route path="/us/:state/:city" component={CityLanding} />
      <Route path="/pool-contractors/:state/:city" component={CityLanding} />
      
      {/* Invalid neighborhood URLs - redirect to city landing */}
      <Route path="/us/:state/:city/:neighborhood">
        {(params) => {
          // Redirect invalid neighborhood URLs to city landing page
          window.location.href = `/pool-contractors/${params.state}/${params.city}`;
          return null;
        }}
      </Route>
      
      {/* Service area/neighborhood pages */}
      <Route path="/service-area/:state/:city/:area">
        {(params) => <ServiceArea />}
      </Route>
      
      {/* Seasonal service pages - must come before generic service routes */}
      <Route path="/pool-winterization/:state/:city">
        {(params) => <PoolWinterization />}
      </Route>
      <Route path="/pool-opening/:state/:city">
        {(params) => <PoolOpening />}
      </Route>
      <Route path="/summer-maintenance/:state/:city">
        {(params) => <SummerMaintenance />}
      </Route>
      
      {/* Pool installation cost pages */}
      <Route path="/pool-installation-cost/:state/:city">
        {(params) => <PoolInstallationCost />}
      </Route>
      
      {/* Pool care calendar pages */}
      <Route path="/pool-care-calendar/:state/:city">
        {(params) => <PoolCareCalendar />}
      </Route>
      
      {/* Service-specific location pages */}
      <Route path="/pool-maintenance/:state/:city" component={ServiceCity} />
      <Route path="/pool-installation/:state/:city" component={ServiceCity} />
      <Route path="/hot-tub-installation/:state/:city">
        {(params) => <HotTubInstallation />}
      </Route>
      <Route path="/pool-renovation/:state/:city">
        {(params) => <PoolRenovation />}
      </Route>
      <Route path="/pool-repair/:state/:city">
        {(params) => <PoolRepair />}
      </Route>
      <Route path="/spa-installation/:state/:city">
        {(params) => <SpaInstallation />}
      </Route>
      <Route path="/pool-financing/:state/:city" component={ServiceCity} />
      
      <Route path="/specializations" component={SpecializationsOverview} />
      <Route path="/specializations/:specializationSlug" component={PoolSpecialization} />
      <Route path="/spas-hot-tubs" component={SpasHotTubs} />
      <Route path="/saunas-steam-rooms" component={SaunasSteamRooms} />
      <Route path="/list-your-business" component={ListYourBusiness} />
      <Route path="/business-preview" component={BusinessPreview} />
      <Route path="/submission-confirmation" component={SubmissionConfirmation} />
      <Route path="/submission-status" component={SubmissionStatus} />
      <Route path="/for-contractors" component={ForContractors} />
      <Route path="/marketing-tools" component={MarketingTools} />
      <Route path="/success-stories" component={SuccessStories} />
      <Route path="/maintenance-tips" component={MaintenanceTips} />
      <Route path="/design-ideas" component={DesignIdeas} />
      <Route path="/pool-types-guide" component={PoolTypesGuide} />
      <Route path="/pool-comparisons" component={PoolComparisons} />
      <Route path="/pool-comparison/fiberglass-vs-concrete" component={PoolComparisonFiberglassConcrete} />
      <Route path="/pool-comparison/vinyl-vs-fiberglass" component={PoolComparisonVinylFiberglass} />
      <Route path="/pool-comparison/above-ground-vs-inground" component={PoolComparisonAboveInground} />
      <Route path="/pool-comparison/saltwater-vs-chlorine" component={PoolComparisonSaltwaterChlorine} />
      <Route path="/pool-comparison/all-types" component={PoolComparisonAllTypes} />
      <Route path="/cost-calculator" component={CostCalculator} />
      <Route path="/energy-efficiency-calculator" component={EnergyEfficiencyCalculator} />
      <Route path="/water-cost-calculator" component={WaterCostCalculator} />
      <Route path="/eco-friendly-pool-guide" component={EcoFriendlyPoolGuide} />
      <Route path="/pool-financing" component={PoolFinancing} />
      <Route path="/pool-financing/payment-calculator" component={PoolFinancingPaymentCalculator} />
      <Route path="/pool-financing/:state/:program" component={ServiceCity} />
      <Route path="/demo-loaders" component={DemoLoaders} />
      <Route path="/meta-tags-demo" component={MetaTagsDemo} />
      <Route path="/pool-contractors-near-me" component={PoolContractorsNearMe} />
      <Route path="/pool-contractors-near-me/:state/:city">
        {(params) => <PoolContractorsNearMeLocation state={params.state} city={params.city} />}
      </Route>
      <Route path="/pricing" component={Pricing} />
      <Route path="/help-support" component={HelpSupport} />
      <Route path="/about" component={About} />
      <Route path="/privacy-policy" component={PrivacyPolicy} />
      <Route path="/terms-of-service" component={TermsOfService} />
      <Route path="/sitemap" component={Sitemap} />
      <Route path="/simple-templates" component={SimpleTemplatesView} />

      <Route path="/admin-login" component={AdminLogin} />
      <Route path="/admin" component={AdminDashboard} />
      <Route path="/admin/security" component={lazy(() => import("@/pages/admin-security"))} />
      <Route path="/admin/leads" component={AdminLeads} />
      <Route path="/admin-security" component={AdminSecurity} />
      <Route path="/contractor/login" component={ContractorLogin} />
      <Route path="/contractor-login" component={ContractorLogin} />
      <Route path="/forgot-password" component={ForgotPassword} />
      <Route path="/reset-password/:token">
        {(params) => <ResetPassword />}
      </Route>
      <Route path="/contractor/dashboard" component={ContractorDashboard} />
      <Route path="/contractor/claim" component={ContractorClaim} />
      <Route path="/claim-business" component={ContractorClaim} />
      <Route path="/request-claim" component={RequestClaim} />
      <Route path="/verify-review/:token" component={lazy(() => import('./pages/verify-review'))} />
      <Route path="/direct-review/:installerId" component={DirectReview} />
      <Route path="/pool-regulations" component={PoolRegulationsOverview} />
      <Route path="/pool-regulations/:state" component={PoolRegulations} />
      <Route path="/pool-cost" component={PoolCostOverview} />
      <Route path="/pool-cost/:state" component={PoolCostState} />
      <Route path="/pool-problems" component={PoolProblems} />
      {/* Analytics test route removed */}
      
      {/* 404 route for /us/pool-contractors/* patterns that don't match valid routes - MUST BE FIRST */}
      <Route path="/us/pool-contractors/:invalidSlug">
        {() => <NotFound />}
      </Route>
      
      {/* Location directory routes - city+state level */}
      <Route path="/us/:state/:city/pool-contractors">
        {(params) => {
          // Fix invalid URL pattern: /us/pool-contractors/demo-pool-builders-inc-demo
          // This would be interpreted as state=pool-contractors, city=demo-pool-builders-inc-demo
          if (params.state === 'pool-contractors') {
            return <NotFound />;
          }
          return <LocationDirectory />;
        }}
      </Route>
      {/* Note: /us/:state/pool-contractors is defined earlier in the file for correct route matching */}
      <Route path="/us/:state/:city/:neighborhood/pool-contractors">
        {(params) => <NeighborhoodDirectory state={params.state} city={params.city} neighborhood={params.neighborhood} />}
      </Route>
      
      {/* Service area hyper-localization pages */}
      <Route path="/service-area/:serviceArea">
        {(params) => <ServiceAreaLanding serviceArea={params.serviceArea} />}
      </Route>
      <Route path="/service-area/:state/:serviceArea">
        {(params) => <ServiceAreaLanding serviceArea={params.serviceArea} state={params.state} />}
      </Route>
      <Route path="/service-area/:state/:city/:serviceArea">
        {(params) => <ServiceAreaLanding serviceArea={params.serviceArea} state={params.state} city={params.city} />}
      </Route>

      {/* Service-specific state pages (e.g., /pool-cleaning/texas) */}
      <Route path="/:service/:state">
        {(params) => {
          const validServices = ['pool-installation', 'pool-maintenance', 'pool-cleaning', 'hot-tub-installation', 'pool-renovation', 'pool-repair', 'pool-service', 'pool-remodeling', 'spa-installation', 'pool-winterization', 'pool-opening', 'summer-maintenance', 'pool-installation-cost', 'pool-care-calendar'];
          if (!validServices.includes(params.service || '')) {
            return <NotFound />;
          }
          return <LocationDirectory />;
        }}
      </Route>

      {/* Service-specific city pages - this is a catch-all so must come after specific routes */}
      <Route path="/:service/:state/:city">
        {(params) => {
          // Prevent invalid patterns and old URL structure like /us/pool-installers/anything (now using /pool-contractors)
          if (params.service === 'us' && params.state === 'pool-installers') {
            return <NotFound />;
          }
          return <ServiceCity />;
        }}
      </Route>
      
      <Route component={NotFound} />
    </Switch>
    </>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <SEOPerformance>
          <Toaster />
          <Suspense fallback={
            <div className="min-h-screen">
              {prerenderH1Text && <h1 className="text-3xl font-bold text-center mt-8 mb-4">{prerenderH1Text}</h1>}
              <div className="flex justify-center mt-8"><PoolLoader size="lg" /></div>
            </div>
          }>
            <Router />
          </Suspense>
          <FloatingCalculatorButton />
        </SEOPerformance>
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;