"use client";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Link, usePathname } from "@/i18n/routing";
import { IconName, NavigationGroup, NavigationItem } from "@/lib/navigation";
import { cn } from "@/lib/utils";
import {
  BookOpen,
  ChevronDown,
  Briefcase,
  FileText,
  Grid,
  Home,
  LogOut,
  LucideIcon,
  Menu,
  MessageSquare,
  Newspaper,
  Search,
  Settings,
  User,
  Users,
} from "lucide-react";
import { usePermissions } from "@/hooks/use-permissions";
import { useLocale, useTranslations } from "next-intl";
import { clearAuthSession } from "@/swr/auth-config";
import { useRouter } from "@/i18n/routing";
import Image from "next/image";
import * as React from "react";

// Map icon names to Lucide components
const iconMap: Record<IconName, LucideIcon> = {
  home: Home,
  "book-open": BookOpen,
  briefcase: Briefcase,
  newspaper: Newspaper,
  "message-square": MessageSquare,
  "file-text": FileText,
  users: Users,
  grid: Grid,
  settings: Settings,
  user: User,
  "log-out": LogOut,
};

interface SidebarNavProps {
  navigationGroups: NavigationGroup[];
  className?: string;
  isOpen?: boolean;
  onClose?: () => void;
}

function normalizePath(pathname: string) {
  return pathname.replace(/^\/(ar|en)(?=\/|$)/, "") || "/";
}

function isNavItemActive(currentPath: string, href: string) {
  // Keep dashboard home active only on exact route
  if (href === "/dashboard") {
    return currentPath === href;
  }

  return currentPath === href || currentPath.startsWith(`${href}/`);
}

function NavItem({
  item,
  onItemClick,
}: {
  item: NavigationItem;
  onItemClick?: () => void;
}) {
  const t = useTranslations("dashboard.navigation");
  const pathname = usePathname();
  const currentPath = normalizePath(pathname);
  const router = useRouter();
  const [isOpen, setIsOpen] = React.useState(false);
  const isActive = isNavItemActive(currentPath, item.href);
  const itemTitle = t(item.titleKey);
  const locale = useLocale();
  const isRtl = locale === "ar";
  const itemBorderClass = "border-s-2 border-s-transparent";
  const itemActiveBorderClass = "border-s-white";
  const isLogout = item.href === "/logout";

  // Get the icon component from the map
  const IconComponent = item.icon ? iconMap[item.icon] : null;

  // If item has children, render collapsible
  if (item.children && item.children.length > 0) {
    return (
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            dir={isRtl ? "rtl" : "ltr"}
            className={cn(
              "h-12 w-full rounded-none px-4 !text-white hover:bg-white/10 hover:!text-white active:bg-white/15",
              itemBorderClass,
              isActive && cn(itemActiveBorderClass, "bg-white/15 !text-white")
            )}
          >
            <div className="flex min-w-0 flex-1 items-center justify-start gap-2">
              {item.iconUrl ? (
                <div className="relative h-6 w-6 shrink-0">
                  <Image
                    src={item.iconUrl}
                    alt={itemTitle}
                    fill
                    className="object-contain"
                  />
                </div>
              ) : IconComponent ? (
                <IconComponent className="h-5 w-5 shrink-0 text-white" />
              ) : null}
              <span className="truncate text-start text-base font-normal tracking-[-0.2px]">
                {itemTitle}
              </span>
            </div>
            <ChevronDown
              className={cn(
                "h-4 w-4 shrink-0 text-white/90 transition-transform duration-200",
                isOpen && "rotate-180"
              )}
            />
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="space-y-1">
          {item.children.map((child) => {
            const isChildActive = isNavItemActive(currentPath, child.href);
            return (
              <Link key={child.href} href={child.href} onClick={onItemClick}>
                <Button
                  variant="ghost"
                  dir={isRtl ? "rtl" : "ltr"}
                  className={cn(
                    "h-11 w-full rounded-none px-4 !text-white/80 hover:bg-white/10 hover:!text-white active:bg-white/15",
                    itemBorderClass,
                    isChildActive && cn(itemActiveBorderClass, "bg-white/15 !text-white")
                  )}
                >
                  <div className="flex min-w-0 flex-1 items-center justify-start gap-2">
                    {item.iconUrl ? (
                      <div className="relative h-5 w-5 shrink-0">
                        <Image
                          src={child.iconUrl || item.iconUrl}
                          alt={t(child.titleKey)}
                          fill
                          className="object-contain"
                        />
                      </div>
                    ) : IconComponent ? (
                      <IconComponent className="h-4 w-4 shrink-0" />
                    ) : null}
                    <span className="truncate text-start text-sm">
                      {t(child.titleKey)}
                    </span>
                  </div>
                </Button>
              </Link>
            );
          })}
        </CollapsibleContent>
      </Collapsible>
    );
  }

  // Regular nav item without children
  const navButton = (
    <Button
      variant="ghost"
      dir={isRtl ? "rtl" : "ltr"}
      className={cn(
        "h-12 w-full rounded-none px-4 !text-white hover:bg-white/10 hover:!text-white active:bg-white/15",
        itemBorderClass,
        isActive && cn(itemActiveBorderClass, "bg-white/15 !text-white")
      )}
    >
      <div className="flex min-w-0 flex-1 items-center justify-start gap-2">
        {item.iconUrl ? (
          <div className="relative h-6 w-6 shrink-0">
            <Image
              src={item.iconUrl}
              alt={itemTitle}
              fill
              className="object-contain"
            />
          </div>
        ) : IconComponent ? (
          <IconComponent className="h-5 w-5 shrink-0 text-white" />
        ) : null}
        <span className="truncate text-start text-base font-normal tracking-[-0.2px]">
          {itemTitle}
        </span>
      </div>
    </Button>
  );

  if (isLogout) {
    return (
      <div
        onClick={async () => {
          await clearAuthSession();
          router.refresh();
          router.replace("/login");
        }}
        className="flex cursor-pointer items-center"
      >
        {navButton}
      </div>
    );
  }

  return (
    <Link href={item.href} onClick={onItemClick} className="flex items-center">
      {navButton}
    </Link>
  );
}


export function SidebarNav({
  navigationGroups,
  className,
  isOpen = true,
  onClose,
}: SidebarNavProps) {
  const t = useTranslations("dashboard.navigation");
  const tCommon = useTranslations("common");
  const [searchQuery, setSearchQuery] = React.useState("");

  const { ready, canKey } = usePermissions();

  const permittedGroups = React.useMemo(() => {
    if (!ready) {
      return navigationGroups;
    }

    const itemAllowed = (item: NavigationItem) =>
      !item.permission || canKey(item.permission);

    return navigationGroups
      .map((group) => ({
        ...group,
        items: group.items
          .filter(itemAllowed)
          .map((item) =>
            item.children
              ? { ...item, children: item.children.filter(itemAllowed) }
              : item,
          )
          .filter((item) => !item.children || item.children.length > 0),
      }))
      .filter((group) => group.items.length > 0);
  }, [navigationGroups, ready, canKey]);

  const filteredNavigationGroups = React.useMemo(() => {
    if (!searchQuery.trim()) return permittedGroups;

    const lowerSearch = searchQuery.toLowerCase().trim();
    return permittedGroups
      .map((group) => ({
        ...group,
        items: group.items.filter((item) => {
          const inTitle = t(item.titleKey).toLowerCase().includes(lowerSearch);
          const inChildren = item.children?.some((child) =>
            t(child.titleKey).toLowerCase().includes(lowerSearch)
          );
          return inTitle || inChildren;
        }),
      }))
      .filter((group) => group.items.length > 0);
  }, [permittedGroups, searchQuery, t]);

  // Prevent body scroll when sidebar is open on mobile
  React.useEffect(() => {
    if (isOpen && window.innerWidth < 1024) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }

    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  const locale = useLocale();
  const isRtl = locale === "ar";


  return (
    <>
      <div
        data-sidebar-nav
        className={cn(
          "fixed inset-y-0 z-40 flex w-[260px] flex-col bg-sidebar pb-6 transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0",
          isRtl ? "right-0 border-s border-sidebar-border" : "left-0 border-e border-sidebar-border",
          !isOpen && (isRtl ? "translate-x-full" : "-translate-x-full"),
          className
        )}
      >
        <div className="flex h-[72px] items-center justify-between px-4">
          <div className="flex h-[31px] w-20 items-center justify-center">
            <Image
              src="/images/login/icons/maal co logo 1.svg"
              alt="Maaal Holding Logo"
              width={80}
              height={31}
              className="object-contain"
            />
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="h-10 w-10 rounded-lg !text-white hover:bg-white/10 active:bg-white/15"
            onClick={onClose}
          >
            <Menu className="h-5 w-5" />
          </Button>

        </div>

        <div className="px-4">
          <div className="relative">
            <Search className="absolute start-4 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
            <Input
              type="search"
              placeholder={`${tCommon("search")}...`}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="h-12 rounded-lg border-0 bg-white/10 ps-11 text-sm text-white placeholder:text-white/70 focus-visible:bg-white/10 focus-visible:ring-white/25"
            />
          </div>
        </div>

        <ScrollArea className="mt-4 flex-1 px-0">
          {!ready ? (
            <div className="space-y-2 px-4 pb-4" aria-hidden="true">
              {Array.from({ length: 8 }).map((_, index) => (
                <div
                  key={index}
                  className="h-10 w-full animate-pulse rounded bg-sidebar-accent/40"
                />
              ))}
            </div>
          ) : (
            <div className="space-y-4 pb-4">
              {filteredNavigationGroups.map((group, index) => (
                <div key={`${group.titleKey}-${index}`} className="space-y-2">
                  <div className="px-4">
                    <p className={cn("text-start", isRtl ? "text-end" : "text-start", "text-sm font-bold tracking-[-0.2px] text-white/60")}>
                      {t(group.titleKey)}
                    </p>
                  </div>
                  <div className="space-y-1">
                    {group.items.map((item) => (
                      <NavItem key={item.href} item={item} onItemClick={onClose} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </div>
    </>
  );
}