// import React from "react";
// import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
// import { AnimatePresence, LayoutGroup } from "framer-motion";

// import "./i18n";
// import "./App.css";

// import Navbar from "./Components/Nav/Navbar";
// import Home from "./Components/Sections/Home/Home";
// import Services from "./Components/Sections/Services/Services";
// import About from "./Components/Sections/About/About";
// import Departments from "./Components/Sections/Departments/Departments";
// import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
// import Contact from "./Components/Sections/Contact/Contact";
// import Footer from "./Components/Nav/Footer";
// import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";

// const MainPage = () => {
//   return (
//     <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
//       <div className="flex flex-col min-h-screen">
//         <main className="flex-grow">
//           <Home />
//           <Services />
//           <About />
//           <Departments />
//           <Contact />
//         </main>
//         <Footer />
//       </div>
//     </div>
//   );
// };

// function RouterView() {
//   const location = useLocation();

//   return (
//     <LayoutGroup>
//       <AnimatePresence mode="wait" initial={false}>
//         <Routes location={location} key={location.pathname}>
//           <Route path="/" element={<MainPage />} />
//           <Route path="/departments/:id" element={<DepartmentDetail />} />
//           <Route path="/department-detail2" element={<DepartmentDetail2 />} />
//         </Routes>
//       </AnimatePresence>
//     </LayoutGroup>
//   );
// }

// function Layout() {
//   const location = useLocation();

//   const excludedExactPaths = [
//     "/department-detail2",
//   ];

//   const excludedPrefixes = ["/departments/"];

//   const isExcludedExact = excludedExactPaths.includes(location.pathname);
//   const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));

//   const hideNavbar = isExcludedExact || isExcludedPrefix;

//   const navbarHeight = hideNavbar ? 0 : 56;

//   return (
//     <>
//       {!hideNavbar && <Navbar />}

//       <div style={{ paddingTop: navbarHeight }}>
//         <RouterView />
//       </div>
//     </>
//   );
// }

// const App = () => {
//   return (
//     <BrowserRouter>
//       <Layout />
//     </BrowserRouter>
//   );
// };

// export default App;




import React, { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence, LayoutGroup } from "framer-motion";

import "./i18n";
import "./App.css";

import Navbar from "./Components/Nav/Navbar";
import Home from "./Components/Sections/Home/Home";
import Services from "./Components/Sections/Services/Services";
import About from "./Components/Sections/About/About";
import Departments from "./Components/Sections/Departments/Departments";
import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
import Contact from "./Components/Sections/Contact/Contact";
import Footer from "./Components/Nav/Footer";
import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
import ImagePreloader from "./Components/ImagePreloader";
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3";
import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4";
import DepartmentDetail5 from "./Components/Sections/DepartmentDetail5/DepartmentDetail5";
const MainPage = ({ theme }) => {
  return (
    <div className="min-h-screen bg-transparent">
      <div className="flex flex-col min-h-screen">
        <main className="flex-grow">
          <Home />
          <Services />
          <About theme={theme} />
          <Departments />
          <Contact />
        </main>
      </div>
    </div>
  );
};

// مكون الراوتر الداخلي
function RouterView({ theme, toggleTheme }) {
  const location = useLocation();

  return (
    <LayoutGroup>
      <AnimatePresence mode="wait" initial={false}>
        <Routes location={location} key={location.pathname}>
          <Route 
            path="/" 
            element={
              <div className="relative min-h-screen bg-transparent">
                <BackgroundCanvas theme={theme} />
                <div className="relative z-10">
                  <MainPage theme={theme} />
                </div>
              </div>
            } 
          />
          <Route path="/departments/:id" element={<DepartmentDetail />} />
          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
                    <Route path="/department-detail3" element={<DepartmentDetail3 />} />
                                        <Route path="/department-detail4" element={<DepartmentDetail4 />} />
          <Route path="/department-detail5" element={<DepartmentDetail5/>} />


        </Routes>
      </AnimatePresence>
    </LayoutGroup>
  );
}

// المكون الذي يتحكم في التخطيط
function Layout({ theme, toggleTheme }) {
  const location = useLocation();

  const excludedExactPaths = [
    "/department-detail2",
    "/department-detail3" ,
        "/department-detail4" ,
        "/department-detail5" ,

  ];

  const excludedPrefixes = ["/departments/"];

  const isExcludedExact = excludedExactPaths.includes(location.pathname);
  const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));

  const hideNavbar = isExcludedExact || isExcludedPrefix;

  const navbarHeight = hideNavbar ? 0 : 56;

  return (
    <>
      {!hideNavbar && <Navbar toggleTheme={toggleTheme} currentTheme={theme} />}

      <div style={{ paddingTop: navbarHeight }}>
        <RouterView theme={theme} toggleTheme={toggleTheme} />
        
        {/* إظهار Footer فقط في الصفحة الرئيسية */}
        {location.pathname === "/" && <Footer />}
      </div>
    </>
  );
}

// المكون الرئيسي للتطبيق
const App = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    // تتبع الثيم لأغراض التصحيح
    console.log("Current theme:", theme);
    console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
    
    const canvas = document.querySelector('.background-canvas');
    if (canvas) {
      console.log("Canvas found:", canvas);
      console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
    } else {
      console.log("Canvas NOT found!");
    }
  }, [theme]);

  // تهيئة الثيم من localStorage
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    
    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
      setTheme("dark");
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
      setTheme("light");
    }
  }, []);

  // دالة تبديل الثيم
  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    
    if (newTheme === "dark") {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    
    localStorage.setItem("theme", newTheme);
  };

  return (
    <ImagePreloader>
      <BrowserRouter>
        <Layout theme={theme} toggleTheme={toggleTheme} />
      </BrowserRouter>
    </ImagePreloader>
  );
};

export default App;