import * as React from "react";
import { Route, Switch, useLocation } from "wouter";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "./lib/queryClient";
import { useLanguage } from "./hooks/use-language";
import { HelmetProvider } from "react-helmet-async";
import { lazy, Suspense } from "react";
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import { Toaster } from "./components/ui/toaster";
import { TooltipProvider } from "./components/ui/tooltip";
import ErrorBoundary from "./components/ErrorBoundary";

// Lazy load non-critical pages to reduce initial bundle size
const Home = lazy(() => import("./pages/Home"));
const FAQ = lazy(() => import("./pages/FAQ"));
const FAQQuestion = lazy(() => import("./pages/FAQQuestion"));
const DoctorDetail = lazy(() => import("./pages/DoctorDetail"));
const Services = lazy(() => import("./pages/Services"));
const About = lazy(() => import("./pages/About"));
const Videos = lazy(() => import("./pages/Videos"));
const Contact = lazy(() => import("./pages/Contact"));
const FeatureDetail = lazy(() => import("./pages/FeatureDetail"));
const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
const Terms = lazy(() => import("./pages/Terms"));
const GeneralLanding = lazy(() => import("./pages/landing/GeneralLanding"));
const DentalLanding = lazy(() => import("./pages/landing/DentalLanding"));
const CosmeticLanding = lazy(() => import("./pages/landing/CosmeticLanding"));
const PhysiotherapyLanding = lazy(() => import("./pages/landing/PhysiotherapyLanding"));
const VeterinaryLanding = lazy(() => import("./pages/landing/VeterinaryLanding"));
const WhatIsClinicManagementSystem = lazy(() => import("./pages/resources/WhatIsClinicManagementSystem"));
const ClinicManagementSystemFeatures = lazy(() => import("./pages/resources/ClinicManagementSystemFeatures"));
const EHRvsClinicManagementSystem = lazy(() => import("./pages/resources/EHRvsClinicManagementSystem"));
const DentalClinicSoftwareFeatures = lazy(() => import("./pages/resources/DentalClinicSoftwareFeatures"));
const HowToChooseClinicManagementSoftware = lazy(() => import("./pages/resources/HowToChooseClinicManagementSoftware"));
const Specialty = lazy(() => import("./pages/Specialty"));
const NotFound = lazy(() => import("./pages/not-found"));

function Router() {
  const { language } = useLanguage();
  const [, navigate] = useLocation();

  return (
    <Switch>
      {/* Serve home directly at root to avoid client-side redirects */}
      <Route path="/" component={Home} />

      {/* Language-specific home routes */}
      <Route path="/ar" component={Home} />
      <Route path="/en" component={Home} />

      {/* Language-specific services routes */}
      <Route path="/ar/services" component={Services} />
      <Route path="/en/services" component={Services} />

      {/* Language-specific about routes */}
      <Route path="/ar/about" component={About} />
      <Route path="/en/about" component={About} />

      {/* Language-specific videos routes */}
      <Route path="/ar/videos" component={Videos} />
      <Route path="/en/videos" component={Videos} />

      {/* Language-specific contact routes */}
      <Route path="/ar/contact" component={Contact} />
      <Route path="/en/contact" component={Contact} />

      {/* Legal routes */}
      <Route path="/ar/privacy-policy" component={PrivacyPolicy} />
      <Route path="/en/privacy-policy" component={PrivacyPolicy} />
      <Route path="/ar/terms" component={Terms} />
      <Route path="/en/terms" component={Terms} />

      {/* Language-specific FAQ routes */}
      <Route path="/ar/faq" component={FAQ} />
      <Route path="/en/faq" component={FAQ} />

      {/* Individual FAQ question routes - support both old and new formats for redirects */}
      <Route path="/ar/faq/:category/:id" component={FAQQuestion} />
      <Route path="/en/faq/:category/:id" component={FAQQuestion} />

      {/* SEO-friendly FAQ question routes with question slug (canonical format) */}
      <Route path="/ar/faq/:category/:id/:questionSlug" component={FAQQuestion} />
      <Route path="/en/faq/:category/:id/:questionSlug" component={FAQQuestion} />

      {/* Doctor detail routes */}
      <Route path="/ar/doctor/:slug" component={DoctorDetail} />
      <Route path="/en/doctor/:slug" component={DoctorDetail} />

      {/* Specialty landing pages */}
      <Route path="/ar/specialty/:specialty" component={Specialty} />
      <Route path="/en/specialty/:specialty" component={Specialty} />

      {/* Feature detail routes */}
      <Route path="/ar/feature/:featureSlug" component={FeatureDetail} />
      <Route path="/en/feature/:featureSlug" component={FeatureDetail} />

      {/* Landing pages - General Clinic Management */}
      <Route path="/ar/نظام-إدارة-العيادات" component={GeneralLanding} />
      <Route path="/en/clinic-management-system" component={GeneralLanding} />

      {/* Landing pages - Dental Clinic Management */}
      <Route path="/ar/برنامج-إدارة-عيادات-الأسنان" component={DentalLanding} />
      <Route path="/en/dental-clinic-management-system" component={DentalLanding} />

      {/* Landing pages - Cosmetic Clinic Management */}
      <Route path="/ar/برنامج-إدارة-مراكز-التجميل" component={CosmeticLanding} />
      <Route path="/en/cosmetic-clinic-management-system" component={CosmeticLanding} />

      {/* Landing pages - Physiotherapy Clinic Management */}
      <Route path="/ar/برنامج-إدارة-مراكز-العلاج-الطبيعي" component={PhysiotherapyLanding} />
      <Route path="/en/physiotherapy-clinic-management-system" component={PhysiotherapyLanding} />

      {/* Landing pages - Veterinary Clinic Management */}
      <Route path="/ar/برنامج-إدارة-العيادات-البيطرية" component={VeterinaryLanding} />
      <Route path="/en/veterinary-clinic-management-system" component={VeterinaryLanding} />

      {/* Content pages - Resources */}
      <Route path="/ar/resources/ما-هو-نظام-إدارة-العيادات" component={WhatIsClinicManagementSystem} />
      <Route path="/en/resources/what-is-clinic-management-system" component={WhatIsClinicManagementSystem} />
      <Route path="/ar/resources/ميزات-نظام-إدارة-العيادات" component={ClinicManagementSystemFeatures} />
      <Route path="/en/resources/clinic-management-system-features" component={ClinicManagementSystemFeatures} />
      <Route path="/ar/resources/ehr-مقابل-نظام-إدارة-العيادات" component={EHRvsClinicManagementSystem} />
      <Route path="/en/resources/ehr-vs-clinic-management-system" component={EHRvsClinicManagementSystem} />
      <Route path="/ar/resources/ميزات-برنامج-عيادة-الأسنان" component={DentalClinicSoftwareFeatures} />
      <Route path="/en/resources/dental-clinic-software-features" component={DentalClinicSoftwareFeatures} />
      <Route path="/ar/resources/كيف-تختار-نظام-إدارة-العيادات" component={HowToChooseClinicManagementSoftware} />
      <Route path="/en/resources/how-to-choose-clinic-management-software" component={HowToChooseClinicManagementSoftware} />

      {/* Handle legacy routes without language prefix */}
      {['/services', '/about', '/videos', '/contact', '/faq', '/privacy-policy', '/terms'].map(path => (
        <Route key={path} path={path}>
          {() => {
            const currentPath = window.location.pathname;
            const hasLangPrefix = /^\/(ar|en)/.test(currentPath);

            if (!hasLangPrefix) {
              navigate(`/${language}${path}`);
            }
            return null;
          }}
        </Route>
      ))}

      {/* 404 for unknown routes */}
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  const { language, direction } = useLanguage();

  return (
    <HelmetProvider>
      <QueryClientProvider client={queryClient}>
        <TooltipProvider>
          <div
            lang={language}
            dir={direction}
            className={`${language === 'ar' ? 'font-tajawal' : 'font-roboto'} transition-all duration-300`}
          >
            <Navbar />
            <ErrorBoundary>
              <Suspense fallback={
                <div className="min-h-screen flex items-center justify-center">
                  <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
                    <p className="text-gray-600">Loading...</p>
                  </div>
                </div>
              }>
                <Router />
              </Suspense>
            </ErrorBoundary>
            <Footer />
            <Toaster />
          </div>
        </TooltipProvider>
      </QueryClientProvider>
    </HelmetProvider>
  );
}

export default App;