"use client";
import React, { useEffect, useRef, useState, useCallback } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSidebar } from "@/src/context/admin/SidebarContext";
import { usePermissions } from "@/src/context/admin/PermissionContext";
import { ChevronDown, FileTextIcon, HelpCircle, IdCard, IdCardLanyard, ImageMinus, LayoutDashboard, ListCheckIcon, MessageSquare, Mic, Newspaper, PieChart, PieChartIcon, Settings, Ticket, User2, UserCircle2Icon, UserRound, Users } from "lucide-react";

type NavItem = {
  name: string;
  icon: React.ReactNode;
  path?: string;
  slug?: string; // Module slug for permission checking
  subItems?: {
    name: string;
    path: string;
    slug?: string; // Section slug for permission checking
    pro?: boolean;
    new?: boolean;
  }[];
};

const navItems: NavItem[] = [
  {
    icon: <LayoutDashboard />,
    name: "Dashboard",
    path: "/admin/dashboard",
    slug: "dashboard",

  },

  {
    name: "Application",
    slug: "application-list",
    icon: <FileTextIcon />,
    subItems: [
      { name: "Tenant Maintenance Requests", slug: "tmr", path: "/admin/application-list/tmr", pro: false },
      { name: "Home Improvement Program", slug: "hip", path: "/admin/application-list/hip", pro: false },
      { name: "First-Time Home Buyer Assistance", slug: "fthb", path: "/admin/application-list/fthb", pro: false },
    ],
  },

  {
    name: "Master",
    slug: "master",
    icon: <Settings />,
    subItems: [
      { name: "Designation Master", slug: "designation-master", path: "/admin/designation-master", pro: false },
      { name: "Status Master", slug: "status-master", path: "/admin/status-master", pro: false },
      { name: "Department Master", slug: "department-master", path: "/admin/department-master", pro: false },
      { name: "Document Master", slug: "document-master", path: "/admin/document-master", pro: false },
      { name: "State Master", slug: "state-master", path: "/admin/state-master", pro: false },
      { name: "City Master", slug: "city-master", path: "/admin/city-master", pro: false },

    ],
  },

  {
    name: "Ticket Managment",
    slug: "ticket-management",
    icon: <Ticket />,
    subItems: [
      { name: "Ticket List", slug: "ticket-list", path: "/admin/ticket-list", pro: false },
    ],
  },
  {
    name: "Customer",
    slug: "customer",
    icon: <UserCircle2Icon />,
    subItems: [


      { name: "User List", slug: "user-list", path: "/admin/customer-list", pro: false },

    ],
  },
  {
    name: "Blog",
    slug: "blog",
    icon: <IdCard />,
    subItems: [
      { name: "Blog Category", slug: "blog-category", path: "/admin/blog-category", pro: false },
      { name: "Add Blog", slug: "add-blog", path: "/admin/add-blog", pro: false },
      { name: "Blog List", slug: "blog-list", path: "/admin/blog-list", pro: false },

    ],
  },

  {
    name: "Press Release",
    slug: "press-release",
    icon: <FileTextIcon />,
    subItems: [

      { name: "Add Press Relese", slug: "add-press-release", path: "/admin/add-press-release", pro: false },
      { name: "Press Relese List", slug: "press-release-list", path: "/admin/press-release-list", pro: false },

    ],
  },

  {
    name: "FAQ",
    slug: "faq",
    icon: <HelpCircle />,
    subItems: [

      { name: "Add FAQ", slug: "add-faq", path: "/admin/add-faq", pro: false },
      { name: "FAQ List", slug: "faq-list", path: "/admin/faq-list", pro: false },

    ],
  },


  {
    name: "Contact Us",
    slug: "contact-us",
    icon: <MessageSquare />,
    subItems: [
      { name: "Contact List", slug: "contact-list", path: "/admin/contact-us-list", pro: false },
    ],
  },
  {
    name: "Our Team",
    slug: "our-team",
    icon: <Users />,
    subItems: [
      { name: "Add Team Member", slug: "add-team-member", path: "/admin/add-team-member", pro: false },
      { name: "Team Member List", slug: "team-member-list", path: "/admin/team-member-list", pro: false },

    ],
  },
  {
    name: "Success Story",
    slug: "success-story",
    icon: <FileTextIcon />,
    subItems: [

      { name: "Add Success Story", slug: "add-success-story", path: "/admin/add-success-story", pro: false },
      { name: "Success Story List", slug: "success-story-list", path: "/admin/success-story-list", pro: false },

    ],
  },

  {
    name: "Privilege Management",
    slug: "privilege-management",
    icon: <ListCheckIcon />,
    subItems: [
      { name: "Modules", slug: "modules", path: "/admin/modules", pro: false },
      { name: "Sections", slug: "sections", path: "/admin/sections", pro: false },

    ],

  },
  {
    name: "Admin user",
    slug: "admin-user",
    icon: <User2 />,
    subItems: [
      { name: "Add Admin User", slug: "add-admin-user", path: "/admin/admin-user/add", pro: false },
      { name: "Admin User List", slug: "admin-user-list", path: "/admin/admin-user", pro: false },

    ],
  }





];

const othersItems: NavItem[] = [
  {
    icon: <PieChart size={18} />,
    name: "Charts",
    slug: "charts",
    subItems: [
      { name: "Line Chart", path: "/line-chart", slug: "line-chart", pro: false },
      { name: "Bar Chart", path: "/bar-chart", slug: "bar-chart", pro: false },
    ],
  },
];

const AppSidebar: React.FC = () => {
  const { isExpanded, isMobileOpen, isHovered, setIsHovered, toggleSidebar, toggleMobileSidebar } = useSidebar();
  const { hasPageAccess, isLoading, modules } = usePermissions();
  const pathname = usePathname();

  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>>({});
  const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const isActive = useCallback((path: string) => path === pathname, [pathname]);

  const getFilteredNavItems = useCallback((items: NavItem[]) => {
    return items.filter(nav => {
      if (nav.subItems) {
        const accessibleSubItems = nav.subItems.filter(subItem => {
          if (!nav.slug || !subItem.slug) return false;
          return hasPageAccess(`${nav.slug}.${subItem.slug}`);
        });
        return accessibleSubItems.length > 0;
      }
      if (nav.slug) {
        return hasPageAccess(nav.slug);
      }
      return true;
    });
  }, [hasPageAccess]);


  const getFilteredSubItems = useCallback((moduleSlug: string, subItems: NavItem['subItems']) => {
    if (!subItems) return [];
    return subItems.filter(subItem => {
      if (!subItem.slug) return true;
      return hasPageAccess(`${moduleSlug}.${subItem.slug}`);
    });
  }, [hasPageAccess]);

  const renderMenuItems = (
    navItems: NavItem[],
    menuType: "main" | "others"
  ) => {
    const filteredItems = getFilteredNavItems(navItems);

    if (filteredItems.length === 0) return null;

    return (
      <ul className="flex flex-col gap-4">
        {filteredItems.map((nav, index) => {
          const filteredSubItems = nav.subItems
            ? getFilteredSubItems(nav.slug || '', nav.subItems)
            : [];

          // Skip rendering if has subItems but none are accessible
          if (nav.subItems && filteredSubItems.length === 0) {
            return null;
          }

          return (
            <li key={nav.name}>
              {nav.subItems ? (
                <button
                  onClick={() => handleSubmenuToggle(index, menuType)}
                  className={`menu-item group ${openSubmenu?.type === menuType && openSubmenu?.index === index
                    ? "menu-item-active"
                    : "menu-item-inactive"
                    } cursor-pointer ${!isExpanded && !isHovered
                      ? "lg:justify-center"
                      : "lg:justify-start"
                    }`}
                >
                  <span
                    className={`${openSubmenu?.type === menuType && openSubmenu?.index === index
                      ? "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) && (
                    <ChevronDown
                      className={`ml-auto w-5 h-5 transition-transform duration-200 ${openSubmenu?.type === menuType && openSubmenu?.index === index
                        ? "rotate-180 text-brand-500"
                        : ""
                        }`}
                    />
                  )}
                </button>
              ) : (
                nav.path && (
                  <Link
                    href={nav.path}
                    className={`menu-item group ${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">
                    {filteredSubItems.map((subItem) => (
                      <li key={subItem.name}>
                        <Link
                          href={subItem.path}
                          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>
    );
  };

  useEffect(() => {
    // Check if the current path matches any submenu item
    let submenuMatched = false;
    const filteredMainItems = getFilteredNavItems(navItems);
    const filteredOtherItems = getFilteredNavItems(othersItems);

    ["main", "others"].forEach((menuType) => {
      const items = menuType === "main" ? filteredMainItems : filteredOtherItems;
      items.forEach((nav, index) => {
        if (nav.subItems) {
          const filteredSubs = getFilteredSubItems(nav.slug || '', nav.subItems);
          filteredSubs.forEach((subItem) => {
            if (isActive(subItem.path)) {
              setOpenSubmenu({
                type: menuType as "main" | "others",
                index,
              });
              submenuMatched = true;
            }
          });
        }
      });
    });

    if (!submenuMatched) {
      setOpenSubmenu(null);
    }
  }, [pathname, isActive, getFilteredNavItems, getFilteredSubItems]);

  useEffect(() => {
    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 };
    });
  };

  const handleToggle = () => {
    if (window.innerWidth >= 1024) {
      toggleSidebar();
    } else {
      toggleMobileSidebar();
    }
  };

  const toggleApplicationMenu = () => {
    setApplicationMenuOpen(!isApplicationMenuOpen);
  };

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
        event.preventDefault();
        inputRef.current?.focus();
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  // Show loading state
  if (isLoading) {
    return (
      <aside
        className={`fixed mt-[17px] flex flex-col lg:mt-0 top-[57px] px-5 left-0 bg-[#F3F4F6] dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 border-r border-gray-200 w-[290px]`}
      >
        <div className="animate-pulse">
          <div className="h-10 w-10 bg-gray-300 dark:bg-gray-700 rounded ms-auto mt-2 mb-4"></div>
          <div className="space-y-3">
            {[...Array(4)].map((_, i) => (
              <div className="space-y-3" key={i}>
                <div className="h-10 bg-gray-300 dark:bg-gray-700 rounded">
                  <div className="h-8 bg-gray-300 dark:bg-gray-700 rounded ms-auto mt-2"></div>
                </div>
                <div className="h-10 bg-gray-300 dark:bg-gray-700 rounded"></div>
                <div className="h-10 bg-gray-300 dark:bg-gray-700 rounded ms-auto w-3/4"></div>
                <div className="h-10 bg-gray-300 dark:bg-gray-700 rounded ms-auto w-1/2"></div>

              </div>

            ))}
          </div>
        </div>
      </aside>
    );
  }

  return (
    <aside
      className={`fixed mt-[17px] flex flex-col lg:mt-0 top-[57px] px-5 left-0 bg-[#F3F4F6] dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-50 border-r border-gray-200 
        ${isExpanded || isMobileOpen
          ? "w-[290px]"
          : isHovered
            ? "w-[290px]"
            : "w-[90px]"
        }
        ${isMobileOpen ? "translate-x-0" : "-translate-x-full"}
        lg:translate-x-0`}
    >
      <button
        className={`${isExpanded || isMobileOpen
          ? "ms-auto"
          : isHovered
            ? "ms-auto"
            : "mx-auto"
          } mt-2 items-center justify-center w-auto h-10 text-secondary rounded-lg z-9 lg:h-11 lg:w-auto`}
        onClick={handleToggle}
        aria-label="Toggle Sidebar"
      >
        {isMobileOpen ? (
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
              fill="currentColor"
            />
          </svg>
        ) : (
          <svg
            width="16"
            height="12"
            viewBox="0 0 16 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M0.583252 1C0.583252 0.585788 0.919038 0.25 1.33325 0.25H14.6666C15.0808 0.25 15.4166 0.585786 15.4166 1C15.4166 1.41421 15.0808 1.75 14.6666 1.75L1.33325 1.75C0.919038 1.75 0.583252 1.41422 0.583252 1ZM0.583252 11C0.583252 10.5858 0.919038 10.25 1.33325 10.25L14.6666 10.25C15.0808 10.25 15.4166 10.5858 15.4166 11C15.4166 11.4142 15.0808 11.75 14.6666 11.75L1.33325 11.75C0.919038 11.75 0.583252 11.4142 0.583252 11ZM1.33325 5.25C0.919038 5.25 0.583252 5.58579 0.583252 6C0.583252 6.41421 0.919038 6.75 1.33325 6.75L7.99992 6.75C8.41413 6.75 8.74992 6.41421 8.74992 6C8.74992 5.58579 8.41413 5.25 7.99992 5.25L1.33325 5.25Z"
              fill="currentColor"
            />
          </svg>
        )}
      </button>

      <div className="max-h-[calc(100vh-130px)] flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar">
        <nav className="mb-6">
          <div className="flex flex-col gap-4">
            <div>
              <h2
                className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${!isExpanded && !isHovered
                  ? "lg:justify-center"
                  : "justify-start"
                  }`}
              >
              </h2>
              {renderMenuItems(navItems, "main")}
            </div>
          </div>
        </nav>
      </div>
    </aside>
  );
};

export default AppSidebar;