MIF_E31221222/sigap-website/app/_components/admin/navigations/nav-main.tsx

"use client";

import { ChevronRight } from "lucide-react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/app/_components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
} from "@/app/_components/ui/sidebar";

import type * as TablerIcons from "@tabler/icons-react";

import { useNavigations } from "@/app/_hooks/use-navigations";

interface SubSubItem {
  title: string;
  url: string;
}

interface SubItem {
  title: string;
  url: string;
  icon?: TablerIcons.Icon;
  subSubItems?: SubSubItem[];
}

interface NavItem {
  title: string;
  url: string;
  icon?: TablerIcons.Icon;
  isActive?: boolean;
  subItems?: SubItem[];
}

// Helper function to ensure URLs are properly formatted
function formatUrl(url: string): string {
  // If URL starts with a slash, it's already absolute
  if (url.startsWith("/")) {
    return url;
  }

  // Otherwise, ensure it's properly formatted relative to root
  // Remove any potential duplicated '/dashboard' prefixes
  if (url.startsWith("dashboard/")) {
    return "/" + url;
  }

  return "/" + url;
}

function SubSubItemComponent({ item }: { item: SubSubItem }) {
  const router = useNavigations();
  const formattedUrl = formatUrl(item.url);
  const isActive = router.pathname === formattedUrl;

  return (
    <SidebarMenuItem>
      <SidebarMenuButton
        asChild
        className={
          isActive
            ? "font-medium bg-primary/10 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:bg-primary"
            : ""
        }
      >
        <a href={formattedUrl} className={isActive ? "text-primary" : ""}>
          <span>{item.title}</span>
        </a>
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
}

function SubItemComponent({ item }: { item: SubItem }) {
  const router = useNavigations();
  const formattedUrl = formatUrl(item.url);
  const isActive = router.pathname === formattedUrl;
  const hasSubSubItems = item.subSubItems && item.subSubItems.length > 0;

  if (!hasSubSubItems) {
    return (
      <SidebarMenuItem>
        <SidebarMenuButton
          asChild
          className={
            isActive
              ? "font-medium bg-primary/10 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:bg-primary"
              : ""
          }
        >
          <a href={formattedUrl} className={isActive ? "text-primary" : ""}>
            {item.icon && (
              <item.icon className={isActive ? "text-primary" : ""} />
            )}
            <span>{item.title}</span>
          </a>
        </SidebarMenuButton>
      </SidebarMenuItem>
    );
  }

  return (
    <Collapsible asChild className="group/collapsible">
      <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton
            className={
              isActive
                ? "font-medium bg-primary/10 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:bg-primary"
                : ""
            }
          >
            {item.icon && (
              <item.icon className={isActive ? "text-primary" : ""} />
            )}
            <span className={isActive ? "text-primary" : ""}>{item.title}</span>
            <ChevronRight
              className={`ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 ${isActive ? "text-primary" : ""}`}
            />
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {item.subSubItems!.map((subSubItem) => (
              <SubSubItemComponent key={subSubItem.title} item={subSubItem} />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  );
}

function RecursiveNavItem({ item, index }: { item: NavItem; index: number }) {
  const router = useNavigations();
  const formattedUrl = formatUrl(item.url);
  const isActive = router.pathname === formattedUrl;
  const hasSubItems = item.subItems && item.subItems.length > 0;

  if (!hasSubItems) {
    return (
      <SidebarMenuItem>
        <SidebarMenuButton
          tooltip={item.title}
          asChild
          className={
            isActive
              ? "font-medium bg-primary/10 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:bg-primary"
              : ""
          }
        >
          <a href={formattedUrl} className={isActive ? "text-primary" : ""}>
            {item.icon && (
              <item.icon className={isActive ? "text-primary" : ""} />
            )}
            <span>{item.title}</span>
          </a>
        </SidebarMenuButton>
      </SidebarMenuItem>
    );
  }

  return (
    <Collapsible
      key={item.title}
      asChild
      defaultOpen={index === 1}
      className="group/collapsible"
    >
      <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton
            tooltip={item.title}
            className={
              isActive
                ? "font-medium bg-primary/10 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:bg-primary"
                : ""
            }
          >
            {item.icon && (
              <item.icon className={isActive ? "text-primary" : ""} />
            )}
            <span className={isActive ? "text-primary" : ""}>{item.title}</span>
            {hasSubItems && (
              <ChevronRight
                className={`ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 ${isActive ? "text-primary" : ""}`}
              />
            )}
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {item.subItems!.map((subItem) => (
              <SubItemComponent key={subItem.title} item={subItem} />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  );
}

export function NavMain({ items }: { items: NavItem[] }) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Platform</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item, index) => (
          <RecursiveNavItem key={item.title} item={item} index={index} />
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}