"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BedDouble,
  Bell,
  Building2,
  ClipboardCheck,
  Globe2,
  HeartPulse,
  LayoutDashboard,
  ListChecks,
  Radio,
  Settings,
  ShieldAlert,
  TabletSmartphone,
  Users,
  Wrench,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";

import type { Permission } from "@/modules/core/types";
import { navGroups, type NavIconKey } from "@/modules/shared/lib/navigation";
import { cn } from "@/lib/utils";

const iconMap: Record<NavIconKey, LucideIcon> = {
  alerts: Radio,
  audit: ListChecks,
  beds: BedDouble,
  care: ClipboardCheck,
  dashboard: LayoutDashboard,
  devices: TabletSmartphone,
  emergency: ShieldAlert,
  global: Globe2,
  health: HeartPulse,
  notices: Bell,
  organizations: Building2,
  roles: Settings,
  status: Wrench,
  users: Users,
};

type AppSidebarNavProps = {
  permissions: Permission[];
};

function isActivePath(pathname: string, href: string): boolean {
  if (href === "/app/dashboard") {
    return pathname === "/app" || pathname === href;
  }

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

export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactElement {
  const pathname = usePathname();
  const visibleNavGroups = navGroups
    .map((group) => ({
      ...group,
      items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
    }))
    .filter((group) => group.items.length > 0);

  return (
    <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4" aria-label="主导航">
      <div className="space-y-5">
        {visibleNavGroups.map((group) => (
          <section key={group.label}>
            <p className="px-3 pb-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
            <ul className="space-y-1">
              {group.items.map((item) => {
                const Icon = iconMap[item.icon];
                const isActive = isActivePath(pathname, item.href);

                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      aria-current={isActive ? "page" : undefined}
                      className={cn(
                        "group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors",
                        isActive
                          ? "bg-primary text-primary-foreground shadow-sm"
                          : "text-foreground hover:bg-secondary hover:text-primary",
                      )}
                    >
                      <Icon
                        className={cn(
                          "size-4 shrink-0 transition-colors",
                          isActive ? "text-primary-foreground" : "text-muted-foreground group-hover:text-primary",
                        )}
                        aria-hidden="true"
                      />
                      <span className="min-w-0 truncate font-medium">{item.label}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </section>
        ))}
      </div>
    </nav>
  );
}