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";
import DepartmentDetail6 from "./Components/Sections/DepartmentDetail6/DepartmentDetail6";
import DepartmentDetail7 from "./Components/Sections/DepartmentDetail7/DepartmentDetail7";
import DepartmentDetail8 from "./Components/Sections/DepartmentDetail8/DepartmentDetail8";
import DepartmentDetail9 from "./Components/Sections/DepartmentDetail9/DepartmentDetail9";


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/>} />
          <Route path="/department-detail6" element={<DepartmentDetail6/>} />
          <Route path="/department-detail7" element={<DepartmentDetail7/>} />

          <Route path="/department-detail8" element={<DepartmentDetail8/>} />
          <Route path="/department-detail9" element={<DepartmentDetail9/>} />

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

function Layout({ theme, toggleTheme }) {
  const location = useLocation();

  const excludedExactPaths = [
    "/department-detail2",
    "/department-detail3" ,
        "/department-detail4" ,
        "/department-detail5" ,
        "/department-detail6" ,
"/department-detail7",
"/department-detail8",
"/department-detail9"
  ];

  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} />
        
        {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]);

  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;