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, Navigate } from "react-router-dom";
import { HelmetProvider } from 'react-helmet-async';
import { Layout } from "./components/Layout";
import { PerformanceMonitor } from "./components/PerformanceMonitor";
import { CriticalCSS } from "./components/CriticalCSS";
import { ScrollToTop } from "./components/ScrollToTop";
import { lazy, Suspense } from "react";

// Lazy load components for better performance
const Home = lazy(() => import("./pages/Home"));
const Calculators = lazy(() => import("./pages/Calculators"));
const Calculator = lazy(() => import("./pages/Calculator"));
const History = lazy(() => import("./pages/History"));
const Settings = lazy(() => import("./pages/Settings"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const TermsConditions = lazy(() => import("./pages/TermsConditions"));
const AboutUs = lazy(() => import("./pages/AboutUs"));
const ContactUs = lazy(() => import("./pages/ContactUs"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Blog = lazy(() => import("./pages/Blog"));
const HowToCalculateBMI = lazy(() => import("./pages/blog/HowToCalculateBMI"));
const EMICalculatorGuide = lazy(() => import("./pages/blog/EMICalculatorGuide"));
const CompoundInterestGuide = lazy(() => import("./pages/blog/CompoundInterestGuide"));
const SIPvsLumpsumGuide = lazy(() => import("./pages/blog/SIPvsLumpsumGuide"));
const TDEEWeightLossGuide = lazy(() => import("./pages/blog/TDEEWeightLossGuide"));
const CarLoanTipsGuide = lazy(() => import("./pages/blog/CarLoanTipsGuide"));
const PercentageCalculatorGuide = lazy(() => import("./pages/blog/PercentageCalculatorGuide"));
const AgeCalculatorGuide = lazy(() => import("./pages/blog/AgeCalculatorGuide"));
const SavingsInterestGuide = lazy(() => import("./pages/blog/SavingsInterestGuide"));
const LoanEMIGuide = lazy(() => import("./pages/blog/LoanEMIGuide"));
const MortgageCalculatorGuide = lazy(() => import("./pages/blog/MortgageCalculatorGuide"));
const GSTCalculatorGuide = lazy(() => import("./pages/blog/GSTCalculatorGuide"));
const CalorieCalculatorGuide = lazy(() => import("./pages/blog/CalorieCalculatorGuide"));
const RetirementPlanningGuide = lazy(() => import("./pages/blog/RetirementPlanningGuide"));
const TipCalculatorGuide = lazy(() => import("./pages/blog/TipCalculatorGuide"));
const InvestmentCalculatorGuide = lazy(() => import("./pages/blog/InvestmentCalculatorGuide"));
const DiscountCalculatorGuide = lazy(() => import("./pages/blog/DiscountCalculatorGuide"));
const UnitConverterGuide = lazy(() => import("./pages/blog/UnitConverterGuide"));
const IdealWeightGuide = lazy(() => import("./pages/blog/IdealWeightGuide"));
const DateCalculatorGuide = lazy(() => import("./pages/blog/DateCalculatorGuide"));
const BodyFatCalculatorGuide = lazy(() => import("./pages/blog/BodyFatCalculatorGuide"));
const LoanInterestGuide = lazy(() => import("./pages/blog/LoanInterestGuide"));
const PPFCalculatorGuide = lazy(() => import("./pages/blog/PPFCalculatorGuide"));
const FuelCostGuide = lazy(() => import("./pages/blog/FuelCostGuide"));
const GradeCalculatorGuide = lazy(() => import("./pages/blog/GradeCalculatorGuide"));
const SleepCalculatorGuide = lazy(() => import("./pages/blog/SleepCalculatorGuide"));
const RunningPaceGuide = lazy(() => import("./pages/blog/RunningPaceGuide"));
const CryptoInvestmentGuide = lazy(() => import("./pages/blog/CryptoInvestmentGuide"));
const WeddingBudgetGuide = lazy(() => import("./pages/blog/WeddingBudgetGuide"));
const PregnancyCalculatorGuide = lazy(() => import("./pages/blog/PregnancyCalculatorGuide"));
const HeartRateZoneGuide = lazy(() => import("./pages/blog/HeartRateZoneGuide"));
const MortgageRefinanceGuide = lazy(() => import("./pages/blog/MortgageRefinanceGuide"));
const StockProfitGuide = lazy(() => import("./pages/blog/StockProfitGuide"));
const WaterIntakeGuide = lazy(() => import("./pages/blog/WaterIntakeGuide"));
const MacronutrientGuide = lazy(() => import("./pages/blog/MacronutrientGuide"));
const VO2MaxGuide = lazy(() => import("./pages/blog/VO2MaxGuide"));
const DebtPayoffGuide = lazy(() => import("./pages/blog/DebtPayoffGuide"));
const BudgetPlanningGuide = lazy(() => import("./pages/blog/BudgetPlanningGuide"));
const HomeRenovationGuide = lazy(() => import("./pages/blog/HomeRenovationGuide"));
const CreditScoreGuide = lazy(() => import("./pages/blog/CreditScoreGuide"));
const MortgageAffordabilityGuide = lazy(() => import("./pages/blog/MortgageAffordabilityGuide"));
const TaxSavingsGuide = lazy(() => import("./pages/blog/TaxSavingsGuide"));
const ProteinIntakeGuide = lazy(() => import("./pages/blog/ProteinIntakeGuide"));
const BodyWaterGuide = lazy(() => import("./pages/blog/BodyWaterGuide"));

const queryClient = new QueryClient();

// Loading component
const PageLoader = () => (
  <div className="flex items-center justify-center min-h-[50vh]">
    <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin"></div>
  </div>
);

const App = () => (
  <QueryClientProvider client={queryClient}>
    <HelmetProvider>
      <TooltipProvider>
        <PerformanceMonitor />
        <CriticalCSS />
        <Toaster />
        <Sonner />
        <BrowserRouter>
          <ScrollToTop />
          <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={
              <Suspense fallback={<PageLoader />}>
                <Home />
              </Suspense>
            } />
            <Route path="calculators" element={
              <Suspense fallback={<PageLoader />}>
                <Calculators />
              </Suspense>
            } />
            <Route path="calculator/:type" element={
              <Suspense fallback={<PageLoader />}>
                <Calculator />
              </Suspense>
            } />
            <Route path="history" element={
              <Suspense fallback={<PageLoader />}>
                <History />
              </Suspense>
            } />
            <Route path="settings" element={
              <Suspense fallback={<PageLoader />}>
                <Settings />
              </Suspense>
            } />
            <Route path="privacy-policy" element={
              <Suspense fallback={<PageLoader />}>
                <PrivacyPolicy />
              </Suspense>
            } />
            <Route path="terms-conditions" element={
              <Suspense fallback={<PageLoader />}>
                <TermsConditions />
              </Suspense>
            } />
            <Route path="about-us" element={
              <Suspense fallback={<PageLoader />}>
                <AboutUs />
              </Suspense>
            } />
            <Route path="contact-us" element={
              <Suspense fallback={<PageLoader />}>
                <ContactUs />
              </Suspense>
            } />
            <Route path="blog" element={
              <Suspense fallback={<PageLoader />}>
                <Blog />
              </Suspense>
            } />
            <Route path="blog/how-to-calculate-bmi" element={
              <Suspense fallback={<PageLoader />}>
                <HowToCalculateBMI />
              </Suspense>
            } />
            <Route path="blog/emi-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <EMICalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/compound-interest-wealth" element={
              <Suspense fallback={<PageLoader />}>
                <CompoundInterestGuide />
              </Suspense>
            } />
            <Route path="blog/sip-vs-lumpsum" element={
              <Suspense fallback={<PageLoader />}>
                <SIPvsLumpsumGuide />
              </Suspense>
            } />
            <Route path="blog/tdee-weight-loss" element={
              <Suspense fallback={<PageLoader />}>
                <TDEEWeightLossGuide />
              </Suspense>
            } />
            <Route path="blog/car-loan-tips" element={
              <Suspense fallback={<PageLoader />}>
                <CarLoanTipsGuide />
              </Suspense>
            } />
            <Route path="blog/percentage-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <PercentageCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/age-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <AgeCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/savings-interest-guide" element={
              <Suspense fallback={<PageLoader />}>
                <SavingsInterestGuide />
              </Suspense>
            } />
            <Route path="blog/mortgage-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <MortgageCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/gst-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <GSTCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/calorie-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <CalorieCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/retirement-planning-guide" element={
              <Suspense fallback={<PageLoader />}>
                <RetirementPlanningGuide />
              </Suspense>
            } />
            <Route path="blog/tip-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <TipCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/loan-emi-guide" element={
              <Suspense fallback={<PageLoader />}>
                <LoanEMIGuide />
              </Suspense>
            } />
            <Route path="blog/investment-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <InvestmentCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/discount-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <DiscountCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/unit-converter-guide" element={
              <Suspense fallback={<PageLoader />}>
                <UnitConverterGuide />
              </Suspense>
            } />
            <Route path="blog/ideal-weight-guide" element={
              <Suspense fallback={<PageLoader />}>
                <IdealWeightGuide />
              </Suspense>
            } />
            <Route path="blog/date-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <DateCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/body-fat-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <BodyFatCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/loan-interest-guide" element={
              <Suspense fallback={<PageLoader />}>
                <LoanInterestGuide />
              </Suspense>
            } />
            <Route path="blog/ppf-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <PPFCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/fuel-cost-guide" element={
              <Suspense fallback={<PageLoader />}>
                <FuelCostGuide />
              </Suspense>
            } />
            <Route path="blog/grade-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <GradeCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/sleep-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <SleepCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/running-pace-guide" element={
              <Suspense fallback={<PageLoader />}>
                <RunningPaceGuide />
              </Suspense>
            } />
            <Route path="blog/crypto-investment-guide" element={
              <Suspense fallback={<PageLoader />}>
                <CryptoInvestmentGuide />
              </Suspense>
            } />
            <Route path="blog/wedding-budget-guide" element={
              <Suspense fallback={<PageLoader />}>
                <WeddingBudgetGuide />
              </Suspense>
            } />
            <Route path="blog/pregnancy-calculator-guide" element={
              <Suspense fallback={<PageLoader />}>
                <PregnancyCalculatorGuide />
              </Suspense>
            } />
            <Route path="blog/heart-rate-zone-guide" element={
              <Suspense fallback={<PageLoader />}>
                <HeartRateZoneGuide />
              </Suspense>
            } />
            <Route path="blog/mortgage-refinance-guide" element={
              <Suspense fallback={<PageLoader />}>
                <MortgageRefinanceGuide />
              </Suspense>
            } />
            <Route path="blog/stock-profit-guide" element={
              <Suspense fallback={<PageLoader />}>
                <StockProfitGuide />
              </Suspense>
            } />
            <Route path="blog/water-intake-guide" element={
              <Suspense fallback={<PageLoader />}>
                <WaterIntakeGuide />
              </Suspense>
            } />
            <Route path="blog/macronutrient-guide" element={
              <Suspense fallback={<PageLoader />}>
                <MacronutrientGuide />
              </Suspense>
            } />
            <Route path="blog/vo2-max-guide" element={
              <Suspense fallback={<PageLoader />}>
                <VO2MaxGuide />
              </Suspense>
            } />
            <Route path="blog/debt-payoff-guide" element={
              <Suspense fallback={<PageLoader />}>
                <DebtPayoffGuide />
              </Suspense>
            } />
            <Route path="blog/budget-planning-guide" element={
              <Suspense fallback={<PageLoader />}>
                <BudgetPlanningGuide />
              </Suspense>
            } />
            <Route path="blog/home-renovation-guide" element={
              <Suspense fallback={<PageLoader />}>
                <HomeRenovationGuide />
              </Suspense>
            } />
            <Route path="blog/credit-score-guide" element={
              <Suspense fallback={<PageLoader />}>
                <CreditScoreGuide />
              </Suspense>
            } />
            <Route path="blog/mortgage-affordability-guide" element={
              <Suspense fallback={<PageLoader />}>
                <MortgageAffordabilityGuide />
              </Suspense>
            } />
            <Route path="blog/tax-savings-guide" element={
              <Suspense fallback={<PageLoader />}>
                <TaxSavingsGuide />
              </Suspense>
            } />
            <Route path="blog/protein-intake-guide" element={
              <Suspense fallback={<PageLoader />}>
                <ProteinIntakeGuide />
              </Suspense>
            } />
            <Route path="blog/body-water-guide" element={
              <Suspense fallback={<PageLoader />}>
                <BodyWaterGuide />
              </Suspense>
            } />
          </Route>
          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </BrowserRouter>
    </TooltipProvider>
    </HelmetProvider>
  </QueryClientProvider>
);

export default App;