import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { useAuth } from "@/context/AuthContext";
import {
  LayoutDashboard,
  Users,
  Calendar,
  Wallet,
  FileBadge,
  ShieldCheck,
  GraduationCap,
  FileText,
  Briefcase,
  Settings,
  BarChart3,
  HandCoins,
  ChevronRight,
} from "lucide-react";

const navGroups = [
  {
    label: "Main",
    items: [
      { name: "Dashboard",   href: "/dashboard",              icon: LayoutDashboard, perm: "dashboard:view" },
      { name: "Employees",        href: "/dashboard/employees",         icon: Users,           perm: "employees:view" },
      { name: "Resigned Employees",  href: "/dashboard/employees/leaved",  icon: Users,           perm: "employees:view" },
      { name: "Attendance",          href: "/dashboard/attendance",        icon: Calendar,        perm: "attendance:view" },
      { name: "Payroll",     href: "/dashboard/payroll",      icon: Wallet,          perm: "payroll:view" },
    ],
  },
  {
    label: "Finance",
    items: [
      { name: "Loans / Advance",  href: "/dashboard/loans",           icon: HandCoins,    perm: "loans:view" },
      { name: "Social Security",  href: "/dashboard/social-security", icon: FileBadge,    perm: "social_security:view" },
    ],
  },
  {
    label: "HR & Compliance",
    items: [
      { name: "Leave",       href: "/dashboard/leave",       icon: Briefcase,     perm: "leaves:view" },
      { name: "Compliance",  href: "/dashboard/compliance",  icon: ShieldCheck,   perm: "compliance:view" },
      { name: "Training",    href: "/dashboard/training",    icon: GraduationCap, perm: "training:view" },
      { name: "Contracts",   href: "/dashboard/contracts",   icon: FileText,      perm: "contracts:view" },
      { name: "Reports",     href: "/dashboard/reports",     icon: BarChart3,     perm: "reports:view" },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const { hasPermission } = useAuth();

  const isActive = (href: string) => {
    if (href === "/dashboard") return pathname === "/dashboard";
    if (href === "/dashboard/employees") return pathname === "/dashboard/employees" || (pathname?.startsWith("/dashboard/employees/") && !pathname?.startsWith("/dashboard/employees/leaved"));
    return pathname === href || pathname?.startsWith(href + "/");
  };

  return (
    <div className="flex h-screen flex-col bg-[#131312] text-white">
      {/* Logo */}
      <div className="flex h-16 shrink-0 items-center gap-3 px-5 border-b border-white/8">
        <Link href="/dashboard" className="flex items-center gap-2 justify-center rounded-md bg-white/10 ring-1 ring-white/15">
          <ShieldCheck className="h-4.5 w-4.5 text-white" />
        </Link>
        <div>
          <p className="text-sm font-bold tracking-tight text-white leading-none">Colour Club</p>
          <p className="text-[10px] font-medium text-white/40 tracking-widest uppercase mt-0.5">HRM Platform</p>
        </div>
      </div>

      {/* Nav */}
      <div className="flex flex-1 flex-col overflow-y-auto px-3 py-4 gap-5">
        {navGroups.map((group) => {
          const visibleItems = group.items.filter((item) => hasPermission(item.perm));
          if (!visibleItems.length) return null;
          return (
            <div key={group.label}>
              <p className="mb-1.5 px-2 text-[10px] font-semibold uppercase tracking-widest text-white/45">{group.label}</p>
              <nav className="space-y-0.5">
                {visibleItems.map((item) => {
                  const active = isActive(item.href);
                  return (
                    <div key={item.name}>
                      <Link
                        href={item.href}
                        className={cn(
                          "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all duration-150",
                          active
                            ? "bg-white/10 text-white"
                            : "text-white/75 hover:bg-white/6 hover:text-white"
                        )}
                      >
                        <item.icon className={cn("h-4 w-4 flex-shrink-0", active ? "text-white" : "text-white/60 group-hover:text-white")} />
                        <span className="flex-1">{item.name}</span>
                        {active && <ChevronRight className="h-3 w-3 text-white/30" />}
                      </Link>
                    </div>
                  );
                })}
              </nav>
            </div>
          );
        })}
      </div>

      {/* Settings */}
      {hasPermission("settings:view") && (
        <div className="border-t border-white/8 p-3">
          <Link
            href="/dashboard/settings"
            className={cn(
              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all",
              pathname?.includes("/settings") ? "bg-white/10 text-white" : "text-white/75 hover:bg-white/6 hover:text-white"
            )}
          >
            <Settings className="h-4 w-4" />
            Settings
          </Link>
        </div>
      )}
    </div>
  );
}