"use client";
import React, { useEffect, useRef, useState, useCallback } from "react";
import { Key, CalendarOff, MessageCircle } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useSidebar } from "../context/SidebarContext";
import {
  BoxCubeIcon,
  CalenderIcon,
  ChevronDownIcon,
  GridIcon,
  HorizontaLDots,
  ListIcon,
  PageIcon,
  PieChartIcon,
  PlugInIcon,
  TableIcon,
  UserCircleIcon,
} from "../icons/index";


type NavItem = {
  name: string;
  icon: React.ReactNode;
  path?: string;
  permissionKey?: string;
  subItems?: { name: string; path: string; pro?: boolean; new?: boolean }[];
};

const navItems: NavItem[] = [
  {
    icon: <GridIcon />,
    name: "Dashboard",
    path: "/",
    permissionKey: "dashboard.view"
  },
  {
    icon: <UserCircleIcon />,
    name: "Clients",
    path: "/clients",
    permissionKey: "client.view"
  },
  {
    icon: <BoxCubeIcon />,
    name: "Projects",
    path: "/projects",
    permissionKey: "project.view"
  },
  {
    icon: <GridIcon />,
    name: "Milestones",
    path: "/milestones",
    permissionKey: "milestone.view"
  },
  {
    icon: <ListIcon />,
    name: "Sprints",
    path: "/sprints",
    permissionKey: "sprint.view"
  },
  {
    icon: <PageIcon />,
    name: "Tasks",
    path: "/tasks",
    permissionKey: "task.view"
  },
  {
    icon: <GridIcon />,
    name: "Daily Reports",
    path: "/reports",
    permissionKey: "dailyReport.view"
  },
  {
    icon: <PieChartIcon />,
    name: "Analytics",
    path: "/analytics",
    permissionKey: "report.view"
  },
  {
    icon: <ListIcon />,
    name: "Activity Log",
    path: "/activity",
    permissionKey: "activityLog.view"
  },
  // {
  //   icon: <MessageCircle size={20} />,
  //   name: "Chat",
  //   path: "/chat",
  // },
  {
    icon: <CalenderIcon />,
    name: "Calendar",
    path: "/calendar",
    permissionKey: "calendar.view"
  },
  {
    icon: <UserCircleIcon />,
    name: "Team Management",
    path: "/team",
    permissionKey: "user.view"
  },
  {
    icon: <Key size={20} />,
    name: "Role Management",
    path: "/roles",
    permissionKey: "role.view"
  },
  {
    icon: <CalendarOff size={20} />,
    name: "Leave Request",
    path: "/leaves",
    permissionKey: "leave.view"
  },
  {
    icon: <CalenderIcon />,
    name: "Holidays",
    path: "/holidays",
    permissionKey: "holiday.manage"
  },
  {
    icon: <PlugInIcon />,
    name: "Symbol Management",
    path: "/settings/symbols",
    permissionKey: "role.view"
  },
  // {
  //   icon: <PlugInIcon />,
  //   name: "Settings",
  //   permissionKey: "role.view",
  //   subItems: [
  //     { name: "Symbols", path: "/settings/symbols" }
  //   ]
  // },
  // {
  //   icon: <UserCircleIcon />,
  //   name: "User Profile",
  //   path: "/profile",
  // },
];



import { useAppSelector } from "@/store/hooks";

const AppSidebar: React.FC = () => {
  const { isExpanded, isMobileOpen, isHovered, setIsHovered, setIsMobileOpen } = useSidebar();
  const pathname = usePathname();
  const user = useAppSelector((state) => state.auth.user);

  const filteredNavItems = React.useMemo(() => {
    if (!user) return navItems;

    // Admins see everything
    const isAdmin = user.roles?.some((r: any) => r.slug === 'admin');
    if (isAdmin) return navItems;

    return navItems.filter((item) => {
      if (!item.permissionKey) return true; // Show completely public items
      const moduleName = item.permissionKey.split('.')[0];
      return user.permissions?.some((p: any) => p.key.startsWith(moduleName + '.'));
    });
  }, [user]);

  const handleMenuClick = () => {
    if (isMobileOpen) {
      setIsMobileOpen(false);
    }
  };

  const isActive = useCallback((path: string) => {
    if (path === "/") return pathname === "/" || pathname === "/profile";
    return path === pathname;
  }, [pathname]);

  const isSubmenuActive = useCallback((subItems?: { path: string }[]) => {
    if (!subItems) return false;
    return subItems.some((item) => isActive(item.path));
  }, [isActive]);

  const renderMenuItems = (
    navItems: NavItem[],
    menuType: "main" | "others"
  ) => (
    <>
      <h2 className="mb-4 text-xs uppercase flex lg:hidden leading-[20px] text-gray-400">Menu</h2>
      <ul className="flex flex-col gap-3">
        {navItems.map((nav, index) => (
          <li key={nav.name}>
            {nav.subItems ? (
              <button
                onClick={() => handleSubmenuToggle(index, menuType)}
                className={`menu-item group  ${isSubmenuActive(nav.subItems)
                  ? "menu-item-active"
                  : "menu-item-inactive"
                  } cursor-pointer ${!isExpanded && !isHovered
                    ? "lg:justify-center"
                    : "lg:justify-start"
                  }`}
              >
                <span
                  className={` ${isSubmenuActive(nav.subItems)
                    ? "menu-item-icon-active"
                    : "menu-item-icon-inactive"
                    }`}
                >
                  {nav.icon}
                </span>
                {(isExpanded || isHovered || isMobileOpen) && (
                  <span className={`menu-item-text`}>{nav.name}</span>
                )}
                {(isExpanded || isHovered || isMobileOpen) && (
                  <ChevronDownIcon
                    className={`ml-auto w-5 h-5 transition-transform duration-200  ${openSubmenu?.type === menuType &&
                      openSubmenu?.index === index
                      ? "rotate-180 text-brand-950"
                      : ""
                      }`}
                  />
                )}
              </button>
            ) : (
              nav.path && (
                <Link
                  href={nav.path}
                  onClick={handleMenuClick}
                  className={`menu-item group font-normal text-regular ${isActive(nav.path) ? "menu-item-active" : "menu-item-inactive"
                    }`}
                >
                  <span
                    className={`${isActive(nav.path)
                      ? "menu-item-icon-active"
                      : "menu-item-icon-inactive"
                      }`}
                  >
                    {nav.icon}
                  </span>
                  {(isExpanded || isHovered || isMobileOpen) && (
                    <span className={`menu-item-text`}>{nav.name}</span>
                  )}
                </Link>
              )
            )}
            {nav.subItems && (isExpanded || isHovered || isMobileOpen) && (
              <div
                ref={(el) => {
                  subMenuRefs.current[`${menuType}-${index}`] = el;
                }}
                className="overflow-hidden transition-all duration-300"
                style={{
                  height:
                    openSubmenu?.type === menuType && openSubmenu?.index === index
                      ? `${subMenuHeight[`${menuType}-${index}`]}px`
                      : "0px",
                }}
              >
                <ul className="mt-2 space-y-1 ml-9">
                  {nav.subItems.map((subItem) => (
                    <li key={subItem.name}>
                      <Link
                        href={subItem.path}
                        onClick={handleMenuClick}
                        className={`menu-dropdown-item ${isActive(subItem.path)
                          ? "menu-dropdown-item-active"
                          : "menu-dropdown-item-inactive"
                          }`}
                      >
                        {subItem.name}
                        <span className="flex items-center gap-1 ml-auto">
                          {subItem.new && (
                            <span
                              className={`ml-auto ${isActive(subItem.path)
                                ? "menu-dropdown-badge-active"
                                : "menu-dropdown-badge-inactive"
                                } menu-dropdown-badge `}
                            >
                              new
                            </span>
                          )}
                          {subItem.pro && (
                            <span
                              className={`ml-auto ${isActive(subItem.path)
                                ? "menu-dropdown-badge-active"
                                : "menu-dropdown-badge-inactive"
                                } menu-dropdown-badge `}
                            >
                              pro
                            </span>
                          )}
                        </span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </li>
        ))}
      </ul>
    </>
  );

  const [openSubmenu, setOpenSubmenu] = useState<{
    type: "main" | "others";
    index: number;
  } | null>(null);
  const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>(
    {}
  );
  const subMenuRefs = useRef<Record<string, HTMLDivElement | null>>({});

  useEffect(() => {
    // Set the height of the submenu items when the submenu is opened
    if (openSubmenu !== null) {
      const key = `${openSubmenu.type}-${openSubmenu.index}`;
      if (subMenuRefs.current[key]) {
        setSubMenuHeight((prevHeights) => ({
          ...prevHeights,
          [key]: subMenuRefs.current[key]?.scrollHeight || 0,
        }));
      }
    }
  }, [openSubmenu]);

  const handleSubmenuToggle = (index: number, menuType: "main" | "others") => {
    setOpenSubmenu((prevOpenSubmenu) => {
      if (
        prevOpenSubmenu &&
        prevOpenSubmenu.type === menuType &&
        prevOpenSubmenu.index === index
      ) {
        return null;
      }
      return { type: menuType, index };
    });
  };

  return (
    <aside
      className={`fixed mt-16 pt-8 lg:pt-0 flex flex-col lg:mt-0 top-0 left-0 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 bg-brand-950 rounded-tr-2xl rounded-br-2xl px-5
        ${isExpanded || isMobileOpen
          ? "w-[290px]"
          : isHovered
            ? "w-[290px]"
            : "w-[90px]"
        }
        ${isMobileOpen ? "translate-x-0" : "-translate-x-full"}
        lg:translate-x-0`}
      onMouseEnter={() => !isExpanded && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className={`py-8 hidden lg:flex ${!isExpanded && !isHovered ? "lg:justify-center" : "justify-start"}`}>
        <Link href="/">
          {isExpanded || isHovered || isMobileOpen ? (
            <>
              <Image
                className=""
                src="/images/logo/logo.svg"
                alt="Logo"
                width={150}
                height={40}
              />
            </>
          ) : (
            <Image
              src="/images/logo/logo-icon.svg"
              alt="Logo"
              width={32}
              height={32}
            />
          )}
        </Link>
      </div>
      <div className="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar max-h-[calc(100vh-70px)] lg:max-h-auto">
        <nav className="mb-6">
          <div className="flex flex-col gap-4">
            <div>
              <h2
                className={`mb-4 text-xs uppercase hidden lg:flex leading-[20px] text-gray-400 ${!isExpanded && !isHovered
                  ? "lg:justify-center"
                  : "justify-start"
                  }`}
              >
                {isExpanded || isHovered || isMobileOpen ? (
                  ""
                ) : (
                  <HorizontaLDots />
                )}
              </h2>
              {renderMenuItems(filteredNavItems, "main")}
            </div>

            <div className="">
              <h2
                className={`mb-4 text-xs uppercase hidden lg:flex leading-[20px] text-gray-400 ${!isExpanded && !isHovered
                  ? "lg:justify-center"
                  : "justify-start"
                  }`}
              >
                {isExpanded || isHovered || isMobileOpen ? (
                  ""
                ) : (
                  <HorizontaLDots />
                )}
              </h2>
            </div>
          </div>
        </nav>
      </div>
    </aside>
  );
};

export default AppSidebar;