import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { LanguageProvider, useLanguage } from "@/contexts/language-context";
import { lazy, Suspense } from "react";
import Header from "@/components/layout/header";
import Footer from "@/components/layout/footer";
import Home from "@/pages/home";
import { routes } from "@/utils/routes";

// Lazy load non-critical pages for better performance
const About = lazy(() => import("@/pages/about"));
const Services = lazy(() => import("@/pages/services"));
const Gallery = lazy(() => import("@/pages/gallery"));
const Cariere = lazy(() => import("@/pages/cariere"));
const Contact = lazy(() => import("@/pages/contact"));
const NotFound = lazy(() => import("@/pages/not-found"));

// Service detail pages
const IzolatiiAntifocDetails = lazy(() => import("@/pages/service-details/izolatii-antifoc"));
const IzolatiiGenericeDetails = lazy(() => import("@/pages/service-details/izolatii-generice"));
const ConsultantaTehnicaDetails = lazy(() => import("@/pages/service-details/consultanta-tehnica"));
const WoodProtectionDetails = lazy(() => import("@/pages/service-details/wood-protection-details"));

// Legal pages
const PrivacyPolicy = lazy(() => import("@/pages/privacy-policy"));
const TermsConditions = lazy(() => import("@/pages/terms-conditions"));

// Loading component for better UX
const PageLoader = () => {
  const { t } = useLanguage();
  return (
    <div className="flex items-center justify-center min-h-96">
      <div className="text-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-company-orange mx-auto mb-4"></div>
        <p className="text-gray-600">{t('common.loading')}</p>
      </div>
    </div>
  );
};

function Router() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1">
        <Suspense fallback={<PageLoader />}>
          <Switch>
            {/* Romanian routes */}
            <Route path={routes.ro.home} component={Home} />
            <Route path={routes.ro.about} component={About} />
            <Route path={routes.ro.services} component={Services} />
            <Route path={routes.ro['services.fire']} component={IzolatiiAntifocDetails} />
            <Route path={routes.ro['services.technical']} component={IzolatiiGenericeDetails} />
            <Route path={routes.ro['services.consulting']} component={ConsultantaTehnicaDetails} />
            <Route path={routes.ro['services.woodProtection']} component={WoodProtectionDetails} />
            <Route path={routes.ro.gallery} component={Gallery} />
            <Route path={routes.ro.careers} component={Cariere} />
            <Route path={routes.ro.contact} component={Contact} />
            <Route path={routes.ro.privacy} component={PrivacyPolicy} />
            <Route path={routes.ro.terms} component={TermsConditions} />
            
            {/* English routes */}
            <Route path={routes.en.home} component={Home} />
            <Route path={routes.en.about} component={About} />
            <Route path={routes.en.services} component={Services} />
            <Route path={routes.en['services.fire']} component={IzolatiiAntifocDetails} />
            <Route path={routes.en['services.technical']} component={IzolatiiGenericeDetails} />
            <Route path={routes.en['services.consulting']} component={ConsultantaTehnicaDetails} />
            <Route path={routes.en['services.woodProtection']} component={WoodProtectionDetails} />
            <Route path={routes.en.gallery} component={Gallery} />
            <Route path={routes.en.careers} component={Cariere} />
            <Route path={routes.en.contact} component={Contact} />
            <Route path={routes.en.privacy} component={PrivacyPolicy} />
            <Route path={routes.en.terms} component={TermsConditions} />
            
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </main>
      <Footer />
    </div>
  );
}

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

export default App;