import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";
import { HelmetProvider } from "react-helmet-async";
import SimpleReactLightbox from "simple-react-lightbox";
import NotFound from "./components/Pages/NotFound.jsx";
import GestionArticles from "./components/Pages/GestionArticles";
import EditPost from "./components/EditPost";
import GestionPageAccueil from "./components/Pages/GestionPageAccueil";


// Lazy loading des pages
const Home = lazy(() => import('./components/Pages/Home.jsx'));
const About = lazy(() => import('./components/Pages/About'));
const Contact = lazy(() => import('./components/Pages/Contact'));
const Post = lazy(() => import('./components/Pages/Post'));
const PostDetails = lazy(() => import('./components/PostDetails')) ;
const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
const BureauEtude = lazy(() => import('./components/Pages/BureauEtude'));
const CreatePost = lazy(() => import('./components/Pages/CreatePost'));
const PostList = lazy(() => import("./components/Pages/PostList"));
const Login = lazy(() => import("./components/Pages/Login"));
const Dashboard = lazy(() => import("./components/Pages/Dashboard"));

// Import des services
import ServiceUn from "./components/Pages/ServiceUn.jsx";
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";

// Import des composants globaux
import Header from "./components/Header";
import Footer from './components/Footer';

function YourApp() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/posts" element={<Post />} />
          <Route path="/admin/edit-post/:id" element={<EditPost />} />
          <Route path="/bureauEtude" element={<BureauEtude />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
          {/* Routes pour les services */}
          <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
          <Route path="/services/structure-beton-charpente-metallique-bois" element={<ServiceDeux />} />
          <Route path="/services/electricite" element={<ServiceTrois />} />
          <Route path="/admin/create-post" element={<CreatePost />} />
          <Route path="/post/:slug" element={<PostDetails />} />
          <Route path="/admin/posts" element={<PostList />} />
          <Route path="/admin/login" element={<Login />} />
          <Route path="/admin/dashboard" element={<Dashboard />} />
          <Route path="/admin/gestion-articles" element={<GestionArticles />} />
          <Route path="/admin/gestion-page-accueil" element={<GestionPageAccueil />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
        <Footer />
      </Router>
    </Suspense>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <HelmetProvider>
        <SimpleReactLightbox>
          <YourApp />
        </SimpleReactLightbox>
      </HelmetProvider>
    </ThemeProvider>
  </React.StrictMode>
);