import { Switch, Route, useLocation } from "wouter";
import { useEffect } from "react";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { AuthProvider, useAuth } from "@/hooks/use-auth";
import { ThemeProvider } from "@/hooks/use-theme";
import { ProtectedRoute } from "@/lib/protected-route";
import CookieConsent from "@/components/CookieConsent";
import { analytics } from "@/utils/analytics";
import { AnimatePresence, motion } from "framer-motion";
import Landing from "@/pages/landing";
import Home from "@/pages/home";
import AuthPage from "@/pages/auth-page";
import MemberDashboard from "@/pages/member-dashboard";
import Questionnaire from "@/pages/questionnaire";
import MvpEngine from "@/pages/mvp-engine";
import BrandPersonaEngine from "@/pages/brand-persona";
import KeyHRStrategy from "@/pages/keyhr-strategy";
import ITLDoraQuestionnaire from "@/pages/itl-dora-questionnaire";
import QudoCim from "@/pages/qudo-cim";
import HRISPilotSurvey from "@/pages/hris-pilot-survey";
import FourierFeedbackSurvey from "@/pages/surveys/fourier-feedback";
import HRForecastModel from "@/pages/hr-forecast-model";
import PrivacyPolicy from "@/pages/privacy-policy";
import CaseStudyDetails from "@/pages/case-study-details";
import ServiceDetails from "@/pages/service-details";
import AboutLeadership from "@/pages/about-leadership";
import AccessRequest from "@/pages/access-request";
import AppEmbed from "@/pages/app-embed";
import ForgotPassword from "@/pages/forgot-password";
import ResetPassword from "@/pages/reset-password";
import NotFound from "@/pages/not-found";
import SharedPage from "@/pages/shared-page";
// Showcase pages
import ZehnBusinessMentorShowcase from "@/pages/showcase/zehn-business-mentor";
import MarketResearchPlatformShowcase from "@/pages/showcase/market-research-platform";
import SocialHousingComplianceShowcase from "@/pages/showcase/social-housing-compliance";
import BoardEvaluationSuiteShowcase from "@/pages/showcase/board-evaluation-suite";
import SendAnalyticsDashboardShowcase from "@/pages/showcase/send-analytics-dashboard";
import SmarterHospitalSystemShowcase from "@/pages/showcase/smarter-hospital-system";
import InvestorResearchHubShowcase from "@/pages/showcase/investor-research-hub";
import ContractIQShowcase from "@/pages/showcase/contract-iq";

function Router() {
  const { user, isLoading } = useAuth();
  const [location] = useLocation();

  // Track page navigation for Core Web Vitals monitoring in SPAs
  useEffect(() => {
    // Report navigation to Core Web Vitals monitoring
    analytics.reportPageNavigation();
    
    // Track page view for analytics
    analytics.page(location, document.title);
  }, [location]);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-success"></div>
      </div>
    );
  }

  const pageTransitionVariants = {
    initial: {
      opacity: 0,
      y: 12,
    },
    animate: {
      opacity: 1,
      y: 0,
    },
    exit: {
      opacity: 0,
      y: -12,
    }
  };

  const pageTransition = {
    type: "tween" as const,
    duration: 0.35,
    ease: [0.25, 0.46, 0.45, 0.94],
  };

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location}
        initial="initial"
        animate="animate"
        exit="exit"
        variants={pageTransitionVariants}
        transition={pageTransition}
        className="w-full"
      >
        <Switch>
          <Route path="/privacy-policy" component={PrivacyPolicy} />
          <Route path="/case-study-details" component={CaseStudyDetails} />
          <Route path="/service-details" component={ServiceDetails} />
          <Route path="/about-leadership" component={AboutLeadership} />
          <Route path="/access-request" component={AccessRequest} />
          <Route path="/forgot-password" component={ForgotPassword} />
          <Route path="/reset-password" component={ResetPassword} />
          <Route path="/questionnaire" component={Questionnaire} />
          <Route path="/mvp-engine" component={MvpEngine} />
          <Route path="/brand-persona" component={BrandPersonaEngine} />
          <Route path="/keyhr-strategy" component={KeyHRStrategy} />
          <Route path="/itl-dora-questionnaire" component={ITLDoraQuestionnaire} />
          <Route path="/qudo-cim" component={QudoCim} />
          <Route path="/waccim025" component={QudoCim} />
          <Route path="/WACCIM025" component={QudoCim} />
          <Route path="/hris-pilot-survey" component={HRISPilotSurvey} />
          <Route path="/hr-forecast-model" component={HRForecastModel} />
          <Route path="/zehnbusinessmentor" component={AppEmbed} />
          <Route path="/socialhousingcompliance" component={AppEmbed} />
          <Route path="/wacmarketresearch" component={AppEmbed} />
          <Route path="/senddata" component={AppEmbed} />
          <Route path="/smarter-hospital" component={AppEmbed} />
          <Route path="/zehnd4s" component={AppEmbed} />
          <Route path="/fourieriq" component={AppEmbed} />
          <Route path="/wacfourier" component={AppEmbed} />
          <Route path="/frd-engine" component={AppEmbed} />
          <Route path="/contractiq" component={AppEmbed} />
          <Route path="/wac-equities" component={AppEmbed} />
          <Route path="/board-hack" component={AppEmbed} />
          <Route path="/paddock-pal" component={AppEmbed} />
          <Route path="/investor-research" component={AppEmbed} />
          <Route path="/noddle" component={AppEmbed} />
          <Route path="/contractiq-rolls-royce" component={AppEmbed} />
          <Route path="/contractiq-bp" component={AppEmbed} />
          <Route path="/contractiq-atos" component={AppEmbed} />
          <Route path="/tiara-plan" component={AppEmbed} />
          <Route path="/ignite-creative" component={AppEmbed} />
          {/* Showcase routes - accessible to all users */}
          <Route path="/showcase/zehn-business-mentor" component={ZehnBusinessMentorShowcase} />
          <Route path="/showcase/market-research-platform" component={MarketResearchPlatformShowcase} />
          <Route path="/showcase/social-housing-compliance" component={SocialHousingComplianceShowcase} />
          <Route path="/showcase/board-evaluation-suite" component={BoardEvaluationSuiteShowcase} />
          <Route path="/showcase/send-analytics-dashboard" component={SendAnalyticsDashboardShowcase} />
          <Route path="/showcase/smarter-hospital-system" component={SmarterHospitalSystemShowcase} />
          <Route path="/showcase/investor-research-hub" component={InvestorResearchHubShowcase} />
          <Route path="/showcase/contract-iq" component={ContractIQShowcase} />
          {/* Password-protected shared pages */}
          <Route path="/shared/:slug" component={SharedPage} />
          {/* Public surveys (hidden from nav, accessible via shareable link) */}
          <Route path="/surveys/fourier-feedback" component={FourierFeedbackSurvey} />
          {user ? (
            <>
              <Route path="/" component={MemberDashboard} />
              <Route path="/dashboard" component={MemberDashboard} />
              <Route path="/public" component={Landing} />
              <Route path="/auth" component={() => { window.location.href = '/'; return null; }} />
            </>
          ) : (
            <>
              <Route path="/" component={Landing} />
              <Route path="/public" component={Landing} />
              <Route path="/auth" component={AuthPage} />
              <Route path="/dashboard" component={() => { window.location.href = '/auth'; return null; }} />
            </>
          )}
          <Route component={NotFound} />
        </Switch>
      </motion.div>
    </AnimatePresence>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <AuthProvider>
          <TooltipProvider>
            <Toaster />
            <CookieConsent />
            <Router />
          </TooltipProvider>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;