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 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>
          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </BrowserRouter>
    </TooltipProvider>
    </HelmetProvider>
  </QueryClientProvider>
);

export default App;