"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
interface MenuData {
  label: string;
  link: string;
  url?: string;
  submenu?: MenuData[];
}


interface MenuItemProps extends MenuData {
  closeDropdown?: () => void;
  openMenu?: string | null;
  setOpenMenu?:  React.Dispatch<React.SetStateAction<string | null>>;
}

const MenuItem = ({
  label,
  link,
  url,
  submenu,
  closeDropdown,
  openMenu, 
  setOpenMenu
}: MenuItemProps) => {
  const pathname = usePathname();

  const [isMobile, setIsMobile] = useState(false);
  const [open, setOpen] = useState(false);

  const isOpen = openMenu === label;

  // Which category is active in the Service sidebar mega-menu.
  // Defaults to the first category, like the CodePen's default-active tab.
  const [activeCategoryIndex, setActiveCategoryIndex] = useState(0);

  useEffect(() => {
    const checkScreen = () => {
      setIsMobile(window.innerWidth <= 991);
    };

    checkScreen();
    window.addEventListener("resize", checkScreen);

    return () => window.removeEventListener("resize", checkScreen);
  }, []);

  const handleClose = () => {
    if (!isMobile) {
      setOpen(false);
      closeDropdown?.();
    }
  };

  // Check active state recursively
  const isActive = (item: MenuData): boolean => {
    if (pathname === item.link) return true;

    if (item.submenu) {
      return item.submenu.some(isActive);
    }

    return false;
  };

  const active = isActive({ label, link, url, submenu });

  const isSidebarMega = label === "Service" && !!submenu?.length;

  const itemClass = [
    "nav-item",
    submenu ? "dropdown" : "",
    isSidebarMega ? "service-menu" : "",
    active ? "active" : "",
    isMobile ? (isOpen ? "open" : "") : (open ? "open" : ""),
  ].filter(Boolean).join(" ");

  return (
    <li
      className={itemClass}
      onMouseEnter={() => {
        if (!isMobile) {
          setOpen(true);
          if (isSidebarMega) setActiveCategoryIndex(0);
        }
      }}
      onMouseLeave={() => !isMobile && setOpen(false)}
    >
      <Link
        href={link}
        className="nav-link"
        onClick={(e) => {
          if (submenu && isMobile) {
            e.preventDefault();
            setOpenMenu?.(isOpen ? null : label);
          } else {
            closeDropdown?.();
            handleClose();
          }
        }}
      >
        {label}
        {submenu && <i className="bx bx-chevron-down ms-1"></i>}
      </Link>

      {submenu &&
        (isSidebarMega ? (
          <div
            className={`mega-menu sidebar-mega-menu ${
              isMobile ? (isOpen ? "show" : "") : (open ? "show" : "")
            }`}
            style={{
              display: isMobile ? isOpen ? "block" : "none" : open ? "block" : "none",
            }}
          >
            <div className="sidebar-mega-inner">
              {/* Left sidebar: E-Commerce Development, Web Development, ... */}
              <ul className="sidebar-nav">
                {submenu.map((category, index) => {
                  const tabActive =
                    index === activeCategoryIndex ||
                    pathname === category.link;

                  return (
                    <li
                      key={category.label}
                      className={`sidebar-nav-item ${
                        tabActive ? "active" : ""
                      }`}
                      onMouseEnter={() =>
                        !isMobile && setActiveCategoryIndex(index)
                      }
                    >
                      <Link
                        href={category.link}
                        onClick={(e) => {
                          if (isMobile) {
                            e.preventDefault();
                            setActiveCategoryIndex(
                              activeCategoryIndex === index ? -1 : index
                            );
                          } else {
                            handleClose();
                          }
                        }}
                      >
                        {category.label}
                        <i className="bx bx-chevron-right"></i>
                      </Link>
                    </li>
                  );
                })}
              </ul>

              {/* Right panel: services for whichever category is active */}
              {submenu.map((category, index) => (
                <div
                  key={category.label}
                  className="sidebar-panel"
                  style={{
                    display:
                      activeCategoryIndex === index ? "block" : "none",
                  }}
                >
                  {/* <h5 className="sidebar-panel-title">
                    <Link href={category.link} onClick={closeDropdown}>
                      {category.label}
                    </Link>
                  </h5> */}

                  <div className="sidebar-panel-links">
                    {category.submenu?.map((service) => (
                      <Link
                        key={service.label}
                        href={service.link}
                        className={`mega-link ${
                          pathname === service.link ? "active" : ""
                        }`}
                        onClick={() => {
                          closeDropdown?.();
                          handleClose();
                        }}
                      >
                        {service.label}
                      </Link>
                    ))}
                  </div>
                  {category.url && (
                    <div className="menu-img" style={{ width: "40%", display: "inline-block", verticalAlign: "top" }}>
                      <img
                        alt=""
                        loading="lazy"
                        width="550"
                        height="250"
                        decoding="async"
                        className="w-70"
                        style={{ color: "transparent" }}
                        src={category.url}
                      />
                    </div>
                  )}
                
                </div>
              ))}
            </div>
          </div>
        ) : (
          <ul
            className="dropdown-menu"
            style={{
              display: isMobile ? isOpen ? "block" : "none" : open ? "block" : "none",
            }}
          >
            {submenu.map((item) => (
              <MenuItem
                key={item.label}
                {...item}
                closeDropdown={handleClose}
                openMenu={openMenu}
                setOpenMenu={setOpenMenu}
              />
            ))}
          </ul>
        ))}
    </li>
  );
};

export default MenuItem;

// "use client";

// import { useEffect, useState } from "react";
// import Link from "next/link";
// import { usePathname } from "next/navigation";

// interface MenuItemProps {
//   label: string;
//   link: string;
//   submenu?: MenuItemProps[];
//   closeDropdown?: () => void;
// }

// const MenuItem = ({
//   label,
//   link,
//   submenu,
//   closeDropdown,
// }: MenuItemProps) => {
//   const pathname = usePathname();

//   const [isMobile, setIsMobile] = useState(false);
//   const [open, setOpen] = useState(false);

//   useEffect(() => {
//     const checkScreen = () => {
//       setIsMobile(window.innerWidth <= 991);
//     };

//     checkScreen();
//     window.addEventListener("resize", checkScreen);

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

//   // Check active state recursively
//   const isActive = (item: MenuItemProps): boolean => {
//     if (pathname === item.link) return true;

//     if (item.submenu) {
//       return item.submenu.some(isActive);
//     }

//     return false;
//   };

//   const active = isActive({ label, link, submenu });

//   const itemClass = [
//     "nav-item",
//     submenu ? "dropdown" : "",
//     submenu && label === "Service" ? "service-menu" : "",
//     active ? "active" : "",
//     open ? "open" : ""
//   ]
//     .filter(Boolean)
//     .join(" ");

//   return (
//     <li
//       className={itemClass}
//       onMouseEnter={() => !isMobile && setOpen(true)}
//       onMouseLeave={() => !isMobile && setOpen(false)}
//     >
//       <Link
//         href={link}
//         className="nav-link"
//         onClick={(e) => {
//           if (submenu && isMobile) {
//             e.preventDefault();
//             setOpen((prev) => !prev);
//           } else {
//             closeDropdown?.();
//           }
//         }}
//       >
//         {label}
//         {submenu && <i className="bx bx-chevron-down ms-1"></i>}
//       </Link>

//         {submenu &&
//         (label === "Service" ? (
//           <div
//             className={`mega-menu ${open ? "show" : ""}`}
//             style={{
//               display: isMobile ? (open ? "block" : "none") : undefined,
//             }}
//           >
//             <div className="mega-menu-grid">
//               {submenu.map((category) => (
//                 <div className="mega-column" key={category.label}>
//                   <h5>
//                     <Link href={category.link}>{category.label}</Link>
//                   </h5>

//                   {category.submenu?.map((service) => (
//                     <Link
//                       key={service.label}
//                       href={service.link}
//                       className={`mega-link ${
//                         pathname === service.link ? "active" : ""
//                       }`}
//                       onClick={closeDropdown}
//                     >
//                       {service.label}
//                     </Link>
//                   ))}
//                 </div>
//               ))}
//             </div>
//           </div>
//         ) : (
//           <ul
//             className="dropdown-menu"
//             style={{
//               display: isMobile ? (open ? "block" : "none") : undefined,
//             }}
//           >
//             {submenu.map((item) => (
//               <MenuItem
//                 key={item.label}
//                 {...item}
//                 closeDropdown={closeDropdown}
//               />
//             ))}
//           </ul>
//         ))}
//     </li>
//   );
// };

// export default MenuItem;