"use client";

import { Logo } from "@/components/logo";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { NAV_DATA, NavSubItem } from "./data";
import { ArrowLeftIcon, ChevronUp, MenuExpandIcon } from "./icons";
import { MenuItem } from "./menu-item";
import { useSidebarContext } from "./sidebar-context";

export function Sidebar() {
  const pathname = usePathname();
  const { setIsOpen, isOpen, isMobile, toggleSidebar } = useSidebarContext();
  const [expandedItems, setExpandedItems] = useState<string[]>([]);
  const isVisible = (item: { visible?: boolean }) => item.visible !== false;

  const toggleExpanded = (title: string) => {
    setExpandedItems((prev) =>
      prev.includes(title) ? prev.filter((t) => t !== title) : [...prev, title],
    );
  };

  useEffect(() => {
    const newExpandedItems: string[] = [];

    NAV_DATA.forEach((section) => {
      section.items.filter(isVisible).forEach((item) => {
        if (item.items.length > 0) {
          const hasActiveSubItem = item.items.filter(isVisible).some(
            (subItem: NavSubItem) =>
              subItem.url === pathname ||
              (pathname.startsWith(subItem.url) && subItem.url !== "/"),
          );

          if (hasActiveSubItem) {
            newExpandedItems.push(item.title);
          }
        }
      });
    });

    setExpandedItems(newExpandedItems);
  }, [pathname]);

  // Collapsed state: show only icons (for mobile)
  const isCollapsed = isMobile && !isOpen;

  return (
    <>
      {isMobile && isOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
          onClick={() => setIsOpen(false)}
          aria-hidden="true"
        />
      )}

      <aside
        className={cn(
          "shrink-0 overflow-hidden border-r border-stroke/70 bg-gradient-to-b from-white via-white to-primary/[0.03] shadow-[8px_0_30px_-24px_rgba(16,24,40,0.35)] transition-[width] duration-200 ease-linear dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.08]",
          isMobile
            ? cn("fixed bottom-0 top-0", isOpen ? "z-50" : "z-20")
            : "sticky top-0 h-screen",
          isMobile
            ? isOpen
              ? "w-[290px]"
              : "w-[70px]"
            : "w-full max-w-[290px]",
        )}
        aria-label="Main navigation"
      >
        <div
          className={cn(
            "relative flex h-full flex-col py-10",
            isCollapsed ? "items-center px-2" : "pl-[25px] pr-[7px]",
          )}
        >
          <div className="pointer-events-none absolute -left-16 top-16 h-36 w-36 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
          <div className="pointer-events-none absolute -right-16 bottom-10 h-36 w-36 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
          <div className={cn("relative", isCollapsed ? "px-0" : "pr-4.5")}>
            <Link
              href={"/"}
              onClick={() => isMobile && isOpen && toggleSidebar()}
              className="inline-flex rounded-xl px-1 py-2.5 transition hover:bg-gray-2/70 min-[850px]:py-0 dark:hover:bg-white/[0.06]"
            >
              {isCollapsed ? (
                <Image
                  src="/images/fav-icon.svg"
                  width={32}
                  height={32}
                  alt="Logo"
                />
              ) : (
                <Logo />
              )}
            </Link>

            {isMobile && isOpen && (
              <button
                onClick={toggleSidebar}
                className="absolute left-3/4 right-4.5 top-1/2 -translate-y-1/2 rounded-lg p-1 text-right text-dark-4 transition hover:bg-gray-2/70 hover:text-dark dark:text-dark-6 dark:hover:bg-white/[0.08] dark:hover:text-white"
              >
                <span className="sr-only">Close Menu</span>

                <ArrowLeftIcon className="ml-auto size-7" />
              </button>
            )}
          </div>

          <div
            className={cn(
              "custom-scrollbar mt-6 flex-1 overflow-y-auto min-[850px]:mt-10",
              isCollapsed ? "w-full px-1" : "pr-3",
            )}
          >
            {NAV_DATA.map((section) => {
              const visibleItems = section.items.filter(isVisible);

              if (!visibleItems.length) {
                return null;
              }

              return (
              <div key={section.label} className="mb-6">
                {!isCollapsed && (
                  <h2 className="mb-4 px-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-dark-5 dark:text-dark-6">
                    {section.label}
                  </h2>
                )}

                <nav role="navigation" aria-label={section.label}>
                  <ul className={cn("space-y-2", isCollapsed && "space-y-1")}>
                    {visibleItems.map((item) => {
                      const visibleSubItems = item.items.filter(isVisible);

                      return (
                      <li key={item.title}>
                        {visibleSubItems.length ? (
                          <div>
                            <MenuItem
                              isActive={
                                visibleSubItems.some(
                                  ({ url }: { url: string }) =>
                                    url === pathname,
                                ) ||
                                (visibleSubItems.length > 0 &&
                                  visibleSubItems.some(
                                    ({ url }: { url: string }) =>
                                      pathname.startsWith(url) && url !== "/",
                                  ))
                              }
                              onClick={() => {
                                if (isCollapsed) {
                                  toggleSidebar();
                                } else {
                                  toggleExpanded(item.title);
                                }
                              }}
                              isCollapsed={isCollapsed}
                              title={item.title}
                            >
                              <item.icon
                                className="size-6 shrink-0"
                                aria-hidden="true"
                              />

                              {!isCollapsed && (
                                <>
                                  <span>{item.title}</span>

                                  <ChevronUp
                                    className={cn(
                                      "ml-auto rotate-180 transition-transform duration-200",
                                      expandedItems.includes(item.title) &&
                                        "rotate-0",
                                    )}
                                    aria-hidden="true"
                                  />
                                </>
                              )}
                            </MenuItem>

                            {!isCollapsed &&
                              expandedItems.includes(item.title) && (
                                <ul
                                  className="ml-9 mr-0 space-y-1.5 pb-[15px] pr-0 pt-2"
                                  role="menu"
                                >
                                  {visibleSubItems.map((subItem: NavSubItem) => (
                                    <li key={subItem.title} role="none">
                                      <MenuItem
                                        as="link"
                                        href={subItem.url}
                                        isActive={
                                          pathname === subItem.url ||
                                          (pathname.startsWith(subItem.url) &&
                                            subItem.url !== "/")
                                        }
                                      >
                                        <span>{subItem.title}</span>
                                      </MenuItem>
                                    </li>
                                  ))}
                                </ul>
                              )}
                          </div>
                        ) : (
                          (() => {
                            const href =
                              "url" in item
                                ? item.url + ""
                                : "/" +
                                  item.title.toLowerCase().split(" ").join("-");

                            const isActive =
                              href === "/"
                                ? pathname === href
                                : pathname.startsWith(href);

                            return (
                              <MenuItem
                                className={cn(
                                  "flex items-center gap-3 py-3",
                                  isCollapsed && "justify-center px-2",
                                )}
                                as="link"
                                href={href}
                                isActive={isActive}
                                isCollapsed={isCollapsed}
                                title={item.title}
                              >
                                <item.icon
                                  className="size-6 shrink-0"
                                  aria-hidden="true"
                                />

                                {!isCollapsed && <span>{item.title}</span>}
                              </MenuItem>
                            );
                          })()
                        )}
                      </li>
                    );
                    })}
                  </ul>
                </nav>
              </div>
            );
            })}
          </div>

          {/* Toggle button at bottom for collapsed state */}
          {isCollapsed && (
            <button
              onClick={toggleSidebar}
              className="mt-4 rounded-xl border border-stroke/70 bg-white/80 p-2 text-dark-4 shadow-theme-xs transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:text-primary dark:border-dark-3 dark:bg-dark-2 dark:text-dark-6 dark:hover:bg-white/[0.08] dark:hover:text-white"
              aria-label="Expand sidebar"
            >
              <MenuExpandIcon className="size-6" />
            </button>
          )}
        </div>
      </aside>
    </>
  );
}