import "../../../public/js/script.js";
import Footer from "@/Components/Footer.jsx";
import Sidebar from "@/Components/Sidebar.jsx";
import TopHeader from "@/Components/TopHeader.jsx";
import ContentHeader from "@/Components/ContentHeader.jsx";
import ChatWidget from "@/Components/ChatWidget.jsx";
import { createContext, useEffect, useState } from "react";
export const contentHeader = createContext("");
export default function Authenticated({
  user,
  header,
  headerButton,
  children,
}) {
  const [isSidebarOpen, setSidebarOpen] = useState(true);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleWheel = (event) => {
      if (
        document.activeElement.type === "number" &&
        document.activeElement === event.target
      ) {
        event.preventDefault();
      }
    };

    document.addEventListener("wheel", handleWheel, { passive: false });

    // Cleanup on unmount
    return () => {
      document.removeEventListener("wheel", handleWheel, { passive: false });
    };
  }, []);

  // Handle window resize
  useEffect(() => {
    const handleResize = () => {
      const mobile = window.innerWidth < 768;
      setIsMobile(mobile);
      if (mobile) {
        setSidebarOpen(false);
      }
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  // Close sidebar when clicking outside on mobile
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (isMobile && isSidebarOpen) {
        const sidebar = document.getElementById("sidebar");
        const hamburger = document.getElementById("hamburger-btn");
        if (
          sidebar &&
          !sidebar.contains(event.target) &&
          !hamburger.contains(event.target)
        ) {
          setSidebarOpen(false);
          setOpenMenus({});
        }
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () =>
      document.removeEventListener("mousedown", handleClickOutside);
  }, [isMobile, isSidebarOpen]);

  const toggleSidebar = () => {
    setSidebarOpen(!isSidebarOpen);
    if (isSidebarOpen) {
      setOpenMenus({});
    }
  };

  return (
    <>

      <contentHeader.Provider
        value={{
          header,
          headerButton,
          toggleSidebar,
          isSidebarOpen,
          setSidebarOpen,
          isMobile,
          setIsMobile,
        }}
      >
        <main className="flex print:hidden block">
          <Sidebar />
          <section
            className="main-content w-full  bg-slate-50 font-sans text-slate-900 min-h-screen transition-all duration-300"
            id="main-content"
            style={{ marginLeft: "0" }}
          >
            <TopHeader />

            {route().current() === "dashboard" && <ContentHeader />}

            {/* main content */}
            <section className="px-1 md:px-2 min-h-[calc(100vh-140px)] w-full">
              {children}
            </section>

            <Footer />
          </section>

          {/* Global AI chat widget */}
          <ChatWidget />
        </main>
      </contentHeader.Provider>
    </>
  );
}
