import React, { useState, useEffect } from "react";
import { Outlet } from "react-router-dom";
import Sidebar from "../components/Sidebar/Sidebar.jsx";
import { Menu, X } from "lucide-react";
// import "../components/Sidebar.css";
import "./AdminLayout.css";

const AdminLayout = () => {
  // const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  // const [isMobile, setIsMobile] = useState(false);

  // Check if screen is mobile size
  // useEffect(() => {
  //   const checkScreenSize = () => {
  //     setIsMobile(window.innerWidth <= 768);
  //   };

  //   checkScreenSize();
  //   window.addEventListener("resize", checkScreenSize);
  //   return () => window.removeEventListener("resize", checkScreenSize);
  // }, []);

  // // Close mobile menu when clicking outside
  // useEffect(() => {
  //   const handleClickOutside = (event) => {
  //     if (
  //       isMobileMenuOpen &&
  //       !event.target.closest(".sidebar") &&
  //       !event.target.closest(".mobile-menu-btn")
  //     ) {
  //       setIsMobileMenuOpen(false);
  //     }
  //   };

  //   if (isMobileMenuOpen) {
  //     document.addEventListener("mousedown", handleClickOutside);
  //     document.body.style.overflow = "hidden"; // Prevent body scroll when menu is open
  //   } else {
  //     document.body.style.overflow = "unset";
  //   }

  //   return () => {
  //     document.removeEventListener("mousedown", handleClickOutside);
  //     document.body.style.overflow = "unset";
  //   };
  // }, [isMobileMenuOpen]);

  // // Close mobile menu on route change
  // useEffect(() => {
  //   setIsMobileMenuOpen(false);
  // }, [window.location.pathname]);

  return (
    <div className="admin-layout__container admin-container">
      {/* Mobile Menu Button */}
      {/* {isMobile && (
        <button
          className="mobile-menu-btn"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
        >
          {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      )} */}

      {/* Mobile Overlay */}
      {/* {isMobile && isMobileMenuOpen && (
        <div
          className="mobile-overlay"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )} */}

      {/* Sidebar */}
      <div className={"admin-layout__sidebar sidebar-wrapper"}>
        {/* ${
          isMobileMenuOpen ? "mobile-open" : ""
        }` */}
        <Sidebar
        // isMobile={isMobile}
        // isOpen={isMobileMenuOpen}
        // onClose={() => setIsMobileMenuOpen(false)}
        />
      </div>

      {/* Main Content */}

      {/* ${ isMobileMenuOpen ? "menu-open" : ""  */}
      <main className={"admin-layout__content admin-content"}>
        <div className="admin-layout__content-inner content-wrapper">
          <Outlet />
        </div>
      </main>
    </div>
  );
};

export default AdminLayout;
