import React, { lazy, Suspense } from "react";
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 } from "react-router-dom";
import { ErrorBoundary } from "./components/ErrorBoundary";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { LoadingSpinner } from "./components/LoadingSpinner";
import { UniversalLoadingScreen } from "./components/UniversalLoadingScreen";
import { useUniversalLoading } from "./hooks/useUniversalLoading";
import PrivacyBanner from "./components/PrivacyBanner";
import PasswordGeneratorShimmer from "./components/PasswordGeneratorShimmer";
import HashGeneratorShimmer from "./components/HashGeneratorShimmer";
import { PWAUpdatePrompt } from "./components/PWAUpdatePrompt";
import { PWAInstallPrompt } from "./components/PWAInstallPrompt";
import { OfflineIndicator } from "./components/OfflineIndicator";
import { TaskCompletionSuggestions } from "./components/TaskCompletionSuggestions";
import { RecentToolsBar } from "./components/RecentToolsBar";
import Home from "./pages/Home";

// Lazy load pages to reduce initial bundle size
const InvoicePage = lazy(() => import("./pages/InvoicePage"));
const QuotePage = lazy(() => import("./pages/QuotePage"));
const ReceiptPage = lazy(() => import("./pages/ReceiptPage"));
const PrivateDocumentMaker = lazy(() => import("./pages/PrivateDocumentMaker"));
const DocumentSigning = lazy(() => import("./pages/DocumentSigning"));
const CategoryPage = lazy(() => import("./pages/CategoryPage"));
const About = lazy(() => import("./pages/About"));
const Privacy = lazy(() => import("./pages/Privacy"));
const LegalDisclaimer = lazy(() => import("./pages/LegalDisclaimer"));
const MergePDF = lazy(() => import("./pages/MergePDF"));
const SplitPDF = lazy(() => import("./pages/SplitPDF"));
const CompressPDF = lazy(() => import("./pages/CompressPDF"));
const QRGenerator = lazy(() => import("./pages/QRGenerator"));
const PasswordGeneratorPage = lazy(() => import("./pages/PasswordGeneratorPage"));
const HashGeneratorPage = lazy(() => import("./pages/HashGeneratorPage"));
const ImageConverter = lazy(() => import("./pages/ImageConverter"));
const ImageResizer = lazy(() => import("./pages/ImageResizer"));
const ImageCompressor = lazy(() => import("./pages/ImageCompressor"));
const ImageToPdfConverterPage = lazy(() => import("./pages/ImageToPdfConverter"));
const PDFEditor = lazy(() => import("./pages/PDFEditor"));
const PDFToWordConverterPage = lazy(() => import("./pages/PDFToWordConverter"));
const PDFWatermark = lazy(() => import("./pages/PDFWatermark"));
const PDFWatermarkShimmer = lazy(() => import("./components/watermark/PDFWatermarkShimmer"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const NotFound = lazy(() => import("./pages/NotFound"));

// Time Tools
const TimeZoneConverter = lazy(() => import("./pages/TimeZoneConverter"));
const UnixTimestampConverter = lazy(() => import("./pages/UnixTimestampConverter"));
const EpochToHumanConverter = lazy(() => import("./pages/EpochToHumanConverter"));
const HourFormatConverter = lazy(() => import("./pages/HourFormatConverter"));
const MilitaryTimeConverter = lazy(() => import("./pages/MilitaryTimeConverter"));
const LogoQRGenerator = lazy(() => import("./pages/LogoQRGenerator"));
const VideoToGifConverter = lazy(() => import("./pages/VideoToGifConverter"));
const VideoToWebMConverterPage = lazy(() => import("./pages/VideoToWebMConverterPage"));
const MpegToWebMConverterPage = lazy(() => import("./pages/MpegToWebMConverterPage"));
const Offline = lazy(() => import("./pages/Offline"));

const queryClient = new QueryClient();

// Lazy load sitemap and robots components
const SitemapXML = lazy(() => import("./components/SitemapXML"));
const RobotsTxt = lazy(() => import("./components/RobotsTxt"));

const App = () => (
  <ErrorBoundary>
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <Toaster />
        <Sonner />
        <BrowserRouter>
          <PWAUpdatePrompt />
          <PWAInstallPrompt />
          <OfflineIndicator />
          <PrivacyBanner />
          <TaskCompletionSuggestions />
          <div className="min-h-screen flex flex-col">
            <Header />
            <RecentToolsBar />
            <main className="flex-1">
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/sitemap.xml" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Sitemap" />}>
                    <SitemapXML />
                  </Suspense>
                } />
                <Route path="/pdf-editor" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="PDF Editor" />}>
                    <PDFEditor />
                  </Suspense>
                } />
          <Route path="/business/quotes" element={
            <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Quote Generator" />}>
              <QuotePage />
            </Suspense>
          } />
          <Route path="/business/receipts" element={
            <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Receipt Generator" />}>
              <ReceiptPage />
            </Suspense>
          } />
          <Route path="/business/documents/private" element={
            <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Private Document Maker" />}>
              <PrivateDocumentMaker />
            </Suspense>
          } />
          <Route path="/invoice" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Invoice Generator" />}>
                    <InvoicePage />
                  </Suspense>
                } />
                <Route path="/signing" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Document Signing" />}>
                    <DocumentSigning />
                  </Suspense>
                } />
                <Route path="/pdf/merge" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="PDF Merger" />}>
                    <MergePDF />
                  </Suspense>
                } />
                <Route path="/pdf/split" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="PDF Splitter" />}>
                    <SplitPDF />
                  </Suspense>
                } />
                <Route path="/pdf/compress" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="PDF Compressor" />}>
                    <CompressPDF />
                  </Suspense>
                } />
                <Route path="/pdf/to-word" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="PDF to Word Converter" />}>
                    <PDFToWordConverterPage />
                  </Suspense>
                } />
                <Route path="/pdf/watermark" element={
                  <Suspense fallback={<PDFWatermarkShimmer />}>
                    <PDFWatermark />
                  </Suspense>
                } />
                <Route path="/qr/generator" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="QR Code Generator" />}>
                    <QRGenerator />
                  </Suspense>
                } />
                <Route path="/security/passwords" element={
                  <Suspense fallback={<PasswordGeneratorShimmer />}>
                    <PasswordGeneratorPage />
                  </Suspense>
                } />
                <Route path="/security/hash" element={
                  <Suspense fallback={<HashGeneratorShimmer />}>
                    <HashGeneratorPage />
                  </Suspense>
                } />
                <Route path="/qr-codes/qr" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Logo QR Generator" />}>
                    <LogoQRGenerator />
                  </Suspense>
                } />
                <Route path="/convert/images" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Image Converter" />}>
                    <ImageConverter />
                  </Suspense>
                } />
                <Route path="/images/resize" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Image Resizer" />}>
                    <ImageResizer />
                  </Suspense>
                } />
                <Route path="/images/compress" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Image Compressor" />}>
                    <ImageCompressor />
                  </Suspense>
                } />
                <Route path="/images/to-pdf" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Image to PDF Converter" />}>
                    <ImageToPdfConverterPage />
                  </Suspense>
                } />
                {/* Time Tools */}
                <Route path="/time/timezone-converter" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Timezone Converter" />}>
                    <TimeZoneConverter />
                  </Suspense>
                } />
                <Route path="/time/unix-timestamp" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Unix Timestamp Converter" />}>
                    <UnixTimestampConverter />
                  </Suspense>
                } />
                <Route path="/time/epoch-converter" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Epoch Converter" />}>
                    <EpochToHumanConverter />
                  </Suspense>
                } />
                <Route path="/time/hour-format" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Time Format Converter" />}>
                    <HourFormatConverter />
                  </Suspense>
                } />
                <Route path="/time/military-time" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Military Time Converter" />}>
                    <MilitaryTimeConverter />
                  </Suspense>
                } />
                <Route path="/video/to-gif" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Video to GIF Converter" />}>
                    <VideoToGifConverter />
                  </Suspense>
                } />
                <Route path="/convert/video-to-webm" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Video to WebM Converter" />}>
                    <VideoToWebMConverterPage />
                  </Suspense>
                } />
                <Route path="/convert/mpeg-to-webm" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="MPEG to WebM Converter" />}>
                    <MpegToWebMConverterPage />
                  </Suspense>
                } />
                <Route path="/category/:categoryId" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Category" />}>
                    <CategoryPage />
                  </Suspense>
                } />
                <Route path="/about" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="About" />}>
                    <About />
                  </Suspense>
                } />
                <Route path="/privacy" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Privacy Policy" />}>
                    <Privacy />
                  </Suspense>
                } />
                <Route path="/legal" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Legal" />}>
                    <LegalDisclaimer />
                  </Suspense>
                } />
                <Route path="/blog" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Blog" />}>
                    <Blog />
                  </Suspense>
                } />
                <Route path="/blog/:slug" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Article" />}>
                    <BlogPost />
                  </Suspense>
                } />
                <Route path="/offline" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Offline" />}>
                    <Offline />
                  </Suspense>
                } />
                {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                <Route path="*" element={
                  <Suspense fallback={<UniversalLoadingScreen isVisible={true} toolName="Page" />}>
                    <NotFound />
                  </Suspense>
                } />
              </Routes>
            </main>
            <Footer />
          </div>
        </BrowserRouter>
      </TooltipProvider>
    </QueryClientProvider>
  </ErrorBoundary>
);

export default App;