
import { Suspense, lazy } 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 { AuthProvider } from "./components/context/AuthContext";
import { ShopProvider } from "./components/context/ShopContext";
import PrivateRoute from "./components/PrivateRoute";
import { Loader2 } from "lucide-react";

// Lazy load page components for code splitting
// Critical pages (loaded immediately)
import Index from "./pages/Index";
import Login from "./pages/Login";
import Signup from "./pages/Signup";

// Non-critical pages (lazy loaded)
const Dashboard = lazy(() => import("./pages/Dashboard"));
const OTP = lazy(() => import("./pages/OTP"));
const CallLogs = lazy(() => import("./pages/CallLogs"));
const Analytics = lazy(() => import("./pages/Analytics"));
const Webshops = lazy(() => import("./pages/Webshops"));
const PhoneNumbers = lazy(() => import("./pages/PhoneNumbers"));
const AIConfig = lazy(() => import("./pages/AIConfig"));
const ManageStoreData = lazy(() => import("./pages/ManageStoreData"));
const APIKeys = lazy(() => import("./pages/APIKeys"));
const Onboarding = lazy(() => import("./pages/Onboarding"));
const Settings = lazy(() => import("./pages/Settings"));
const About = lazy(() => import("./pages/About"));
const Privacy = lazy(() => import("./pages/Privacy"));
const Terms = lazy(() => import("./pages/Terms"));
const Crawler = lazy(() => import("./pages/Crawler"));
const NotFound = lazy(() => import("./pages/NotFound"));
const ShopRenterIntegration = lazy(() => import("./pages/ShopRenterIntegration"));
const IntegrationsRedirect = lazy(() => import("./pages/IntegrationsRedirect"));
const Products = lazy(() => import("./pages/Products"));
const WebsiteContent = lazy(() => import("./pages/WebsiteContent"));
const CustomContent = lazy(() => import("./pages/CustomContent"));

// Loading component for lazy-loaded routes
const PageLoader = () => (
  <div className="flex items-center justify-center min-h-screen bg-slate-900">
    <div className="flex items-center gap-2 text-white">
      <Loader2 className="h-6 w-6 animate-spin" />
      <span>Loading...</span>
    </div>
  </div>
);

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <BrowserRouter>
        <AuthProvider>
          <ShopProvider>
            <Suspense fallback={<PageLoader />}>
              <Routes>
              {/* Critical routes - no lazy loading */}
              <Route path="/" element={<Index />} />
              <Route path="/signup" element={<Signup />} />
              <Route path="/login" element={<Login />} />

              {/* Lazy-loaded routes */}
              <Route path="/otp" element={<OTP />} />
              <Route element={<PrivateRoute />}>
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/call-logs" element={<CallLogs />} />
                <Route path="/analytics" element={<Analytics />} />
                <Route path="/webshops" element={<Webshops />} />
                <Route path="/phone-numbers" element={<PhoneNumbers />} />
                <Route path="/ai-config" element={<AIConfig />} />
                <Route path="/products" element={<Products />} />
                <Route path="/website-content" element={<WebsiteContent />} />
                <Route path="/custom-content" element={<CustomContent />} />
                <Route path="/manage-store-data" element={<ManageStoreData />} />
                <Route path="/api-keys" element={<APIKeys />} />
                <Route path="/onboarding" element={<Onboarding />} />
                <Route path="/settings" element={<Settings />} />
              </Route>
              <Route path="/about" element={<About />} />
              <Route path="/privacy" element={<Privacy />} />
              <Route path="/terms" element={<Terms />} />
              <Route path="/crawler" element={<Crawler />} />
              <Route path="/integrations" element={<IntegrationsRedirect />} />
              <Route path="/integrations/shoprenter" element={<ShopRenterIntegration />} />
              {/*<Route path="/contact" element={<Contact />} />*/}
              {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
              <Route path="*" element={<NotFound />} />
              </Routes>
            </Suspense>
          </ShopProvider>
        </AuthProvider>
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;
