import React, { Suspense, lazy, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { LanguageProvider } from '@/hooks/useLanguage';
import Header from '@/components/Header';
import Hero from '@/components/Hero';
import About from '@/components/About';
import ServicesComponent from '@/components/Services';
import SitesRealises from '@/components/SitesRealises';
import CaseStudies from '@/components/CaseStudies';
import Values from '@/components/Values';
import Contact from '@/components/Contact';
import Footer from '@/components/Footer';
import CookieConsent from '@/components/CookieConsent';
import { Toaster } from 'sonner';

// Task 2: Lazy load heavy components
const EnhancedChatBot = lazy(() => import('@/components/EnhancedChatBot'));
const ServicesPage = lazy(() => import('@/pages/Services'));
const ServicesHub = lazy(() => import('@/pages/Services/ServicesHub'));
const AcquisitionCroissance = lazy(() => import('@/pages/Services/AcquisitionCroissance'));
const PlateformeIA = lazy(() => import('@/pages/Services/PlateformeIA'));
const ContenuVisibilite = lazy(() => import('@/pages/Services/ContenuVisibilite'));
const LeadsImmobilier = lazy(() => import('@/pages/Services/LeadsImmobilier'));
const ServiceDetail = lazy(() => import('@/pages/Services/ServiceDetail'));
const ContactPage = lazy(() => import('@/pages/Contact'));
const CookiePolicy = lazy(() => import('@/pages/CookiePolicy'));
const SettingsPage = lazy(() => import('@/components/SettingsPage'));

const LoadingFallback = () => (
  <div className="min-h-screen flex items-center justify-center bg-black text-orange-500">
    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-orange-500"></div>
  </div>
);

function HomePage() {
  return (
    <>
      <Hero />
      <About />
      <ServicesComponent /> 
      <SitesRealises />
      <CaseStudies />
      <Values />
      <Contact />
    </>
  );
}

function AppContent() {
  // Task 10: Performance Monitoring
  useEffect(() => {
    try {
        performance.mark('app_render_end');
        performance.measure('app_render_time', 'app_render_start', 'app_render_end');
        const entries = performance.getEntriesByName('app_render_time');
        if (entries.length > 0) {
            console.log('App Critical Path Render Time:', entries[0].duration.toFixed(2), 'ms');
        }
    } catch (e) {
        console.error("Performance monitoring error:", e);
    }
  }, []);

  return (
    <>
      <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-4 focus:bg-orange-500 focus:text-white top-0 left-0">
        Aller au contenu principal
      </a>
      
      <Header />
      
      <main id="main-content" role="main" className="flex-grow">
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/settings" element={<SettingsPage />} />
            <Route path="/contact" element={<ContactPage />} />
            <Route path="/services" element={<ServicesPage />} />
            <Route path="/services/hub" element={<ServicesHub />} />
            <Route path="/services/acquisition-croissance" element={<AcquisitionCroissance />} />
            <Route path="/services/plateforme-ia" element={<PlateformeIA />} />
            <Route path="/services/contenu-visibilite" element={<ContenuVisibilite />} />
            <Route path="/services/leads-immobilier" element={<LeadsImmobilier />} />
            <Route path="/services/:slug" element={<ServiceDetail />} />
            <Route path="/cookie-policy" element={<CookiePolicy />} />
          </Routes>
        </Suspense>
      </main>

      {/* Task 2: Lazy Loaded ChatBot */}
      <Suspense fallback={null}>
        <EnhancedChatBot />
      </Suspense>
      
      <Footer />
      <CookieConsent />
      <Toaster position="bottom-right" richColors />
    </>
  );
}

function App() {
  return (
    <LanguageProvider>
      <Helmet>
        <title>Agence Doorway - Agence de Communication Digitale</title>
        <meta 
          name="description" 
          content="Agence Doorway est une agence de communication digitale qui accompagne les marques dans leur transformation digitale." 
        />
      </Helmet>
      <Router>
        <div className="flex flex-col min-h-screen bg-white">
          <AppContent />
        </div>
      </Router>
    </LanguageProvider>
  );
}

export default App;