"use client";

import Link from "next/link";
import { Fragment } from "react";
import { usePathname } from "next/navigation";
import { Title, Collapse } from "rizzui";
import { cn } from "@/utils/class-names";
import { PiCaretDownBold } from "react-icons/pi";
import SimpleBar from "@/components/ui/simplebar";
import { menuItems } from "@/layouts/hydrogen/menu-items";
import Image from "next/image";
import { routes } from '@/config/routes';

export default function Sidebar({
  className,
  collapsed,
}: {
  className?: string;
  collapsed: boolean;
  setCollapsed: (val: boolean) => void;
}) {
  const pathname = usePathname();

  console.log("pathname:", pathname);
  console.log("roles:", routes.roles);

  return (
    <aside
      className={cn(
        `
        fixed bottom-0 start-0 z-50
        h-screen
        flex flex-col
        border-e-2 border-gray-100
        bg-white
        transition-all duration-300
        ${collapsed ? "w-[80px]" : "w-[270px] 2xl:w-64"}
        `,
        className
      )}
    >
      {/* ===== LOGO (fixed) ===== */}
      <div className="shrink-0 flex items-center justify-center py-4 bg-gray-0/10 dark:bg-gray-100/5">
        <Image
          src={collapsed ? "/logo_small.png" : "/logo.png"}
          alt="Company Logo"
          width={collapsed ? 40 : 150}
          height={40}
          className="object-contain"
          priority
        />
      </div>

      {/* ===== SCROLL AREA ===== */}
      <SimpleBar className="h-[calc(100vh-88px)] px-1 bg-primary">
        <div className="mt-4 pb-20">
          {menuItems.map((item, index) => {
            const checkActive = (item: any) => {
              if (!item?.href) return false;

              if (item.matchPaths) {
                return item.matchPaths.some((path: string) =>
                  pathname.startsWith(path)
                );
              }

              return (
                pathname === item.href ||
                pathname.startsWith(item.href + '/')
              );
            };
            const isActive = checkActive(item);
            const isParentActive = checkActive(item);
                const isDropdownOpen = Boolean(
                  item?.dropdownItems?.some(
                    (d) =>
                      pathname === d.href ||
                      pathname.startsWith(d.href + '/')
                  )
                );

            return (
              <Fragment key={item.name + "-" + index}>
                {/* LABEL */}
                {!item?.href && (
                  <Title
                    as="h6"
                    className={cn(
                      "mb-2 px-4 text-xs uppercase tracking-widest text-white",
                      index !== 0 && "mt-6"
                    )}
                  >
                    {!collapsed && item.name}
                  </Title>
                )}

                {/* MENU ITEM */}
                {item?.href && (
                  <>
                    {item?.dropdownItems && !collapsed ? (
                      <Collapse
                        defaultOpen={isDropdownOpen}
                        header={({ open, toggle }) => (
                          <div
                            onClick={toggle}
                            className={cn(
                              "mx-2 flex cursor-pointer items-center justify-between rounded-md px-3 py-2 font-medium",
                              (isDropdownOpen || isParentActive)
                              ? "text-primary"
                              : "text-white hover:bg-gray-100"
                            )}
                          >
                            <span className="flex items-center">
                              <span className="me-2 flex h-5 w-5 items-center justify-center">
                                {item.icon}
                              </span>

                              {!collapsed && item.name}
                            </span>

                            <PiCaretDownBold
                              className={cn(
                                "h-5 w-5 transition-transform",
                                open ? "rotate-0" : "-rotate-90"
                              )}
                            />
                          </div>
                        )}
                      >
                        {item.dropdownItems.map(
                          (dropdownItem, i) => (
                            <Link
                              key={dropdownItem.name + i}
                              href={dropdownItem.href}
                              className={cn(
                                "mx-3 mb-1 flex items-center rounded-md px-3 py-2 text-sm",
                                pathname === dropdownItem.href
                                  ? "text-primary"
                                  : "text-white hover:bg-gray-100"
                              )}
                            >
                              <span className="me-2 h-1 w-1 rounded-full bg-current" />
                              {dropdownItem.name}
                            </Link>
                          )
                        )}
                      </Collapse>
                    ) : (
                      <Link
                        href={item.href}
                        className={cn(
                            "mx-2 flex items-center rounded-md px-3 py-2 font-medium",
                            isActive
                              ? "bg-secondary text-white font-semibold"
                              : "text-white hover:bg-gray-100 hover:text-primary"
                          )}
                      >
                        <span className="me-2 flex h-5 w-5 items-center justify-center">
                          {item.icon}
                        </span>

                        {!collapsed && item.name}
                      </Link>
                    )}
                  </>
                )}
              </Fragment>
            );
          })}
        </div>
      </SimpleBar>
    </aside>
  );
}