"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  UserCheck,
  FileText,
  GraduationCap,
  FlaskConical,
  ShoppingBag,
  Megaphone,
  UsersRound,
  Settings as SettingsIcon,
  History,
  Layout,
  BookOpenCheck,
  ClipboardList,
  BookOpen,
  Mail,
  Route,
  HeartPulse,
  Images,
  Search,
  BarChart3,
  Lightbulb,
} from "lucide-react";
import { clsx } from "clsx";

type NavItem = {
  href: string;
  label: string;
  Icon: typeof LayoutDashboard;
  group: "overview" | "people" | "content" | "commerce" | "system";
  badge?: string | number;
};

const groups: { id: NavItem["group"]; label: string }[] = [
  { id: "overview", label: "Overview" },
  { id: "people", label: "People" },
  { id: "content", label: "Content" },
  { id: "commerce", label: "Commerce" },
  { id: "system", label: "System" },
];

const items: NavItem[] = [
  { href: "/admin", label: "Dashboard", Icon: LayoutDashboard, group: "overview" },
  { href: "/admin/analytics", label: "Analytics", Icon: BarChart3, group: "overview" },
  { href: "/admin/search", label: "Search", Icon: Search, group: "overview" },
  { href: "/admin/notifications", label: "Notifications", Icon: Megaphone, group: "overview" },
  { href: "/admin/applications", label: "Applications", Icon: UserCheck, group: "people" },
  { href: "/admin/members", label: "Members", Icon: Users, group: "people" },
  { href: "/admin/team", label: "Team", Icon: UsersRound, group: "people" },
  { href: "/admin/blog", label: "Blog", Icon: FileText, group: "content" },
  { href: "/admin/academy", label: "Academy", Icon: GraduationCap, group: "content" },
  { href: "/admin/research", label: "Research", Icon: FlaskConical, group: "content" },
  { href: "/admin/research/applications", label: "Research · applications", Icon: UserCheck, group: "content" },
  { href: "/admin/research/proposals", label: "Research · proposals", Icon: Lightbulb, group: "content" },
  { href: "/admin/atlas", label: "Atlas", Icon: BookOpen, group: "content" },
  { href: "/admin/consentiq", label: "ConsentIQ", Icon: ClipboardList, group: "content" },
  { href: "/admin/orthoprep", label: "OrthoPrep", Icon: BookOpenCheck, group: "content" },
  { href: "/admin/product-pages", label: "Product pages", Icon: Layout, group: "content" },
  { href: "/admin/media", label: "Media", Icon: Images, group: "content" },
  { href: "/admin/store", label: "Store products", Icon: ShoppingBag, group: "commerce" },
  { href: "/admin/store/orders", label: "Store orders", Icon: ShoppingBag, group: "commerce" },
  { href: "/admin/emails", label: "Email log", Icon: Mail, group: "system" },
  { href: "/admin/email-templates", label: "Email templates", Icon: Mail, group: "system" },
  { href: "/admin/redirects", label: "Redirects", Icon: Route, group: "system" },
  { href: "/admin/health", label: "Health", Icon: HeartPulse, group: "system" },
  { href: "/admin/audit", label: "Audit log", Icon: History, group: "system" },
  { href: "/admin/settings", label: "Settings", Icon: SettingsIcon, group: "system" },
];

type Props = {
  pendingCount?: number;
};

export function AdminNav({ pendingCount }: Props) {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === "/admin") return pathname === "/admin";
    return pathname === href || pathname.startsWith(`${href}/`);
  };

  return (
    <nav aria-label="Admin sections" className="flex flex-col gap-5">
      {groups.map((group) => {
        const groupItems = items.filter((i) => i.group === group.id);
        return (
          <div key={group.id} className="flex flex-col gap-1">
            <div className="px-3 text-[10px] font-bold uppercase tracking-[0.15em] text-[var(--color-slate)]">
              {group.label}
            </div>
            <ul className="flex flex-col gap-0.5">
              {groupItems.map((item) => {
                const active = isActive(item.href);
                const showBadge =
                  item.href === "/admin/applications" &&
                  pendingCount !== undefined &&
                  pendingCount > 0;
                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      className={clsx(
                        "group flex items-center gap-2.5 rounded-lg px-3 py-2 text-[14px] font-medium transition-colors",
                        active
                          ? "bg-[var(--color-blue)] text-white shadow-sm"
                          : "text-[var(--color-ink)]/80 hover:bg-[var(--color-mist)] hover:text-[var(--color-blue)]",
                      )}
                      aria-current={active ? "page" : undefined}
                    >
                      <item.Icon
                        className={clsx(
                          "h-[18px] w-[18px] shrink-0",
                          active ? "text-white" : "text-[var(--color-slate)] group-hover:text-[var(--color-blue)]",
                        )}
                        aria-hidden
                      />
                      <span className="flex-1 truncate">{item.label}</span>
                      {showBadge && (
                        <span
                          className={clsx(
                            "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full px-1.5 text-[11px] font-bold",
                            active
                              ? "bg-white/20 text-white"
                              : "bg-[var(--color-blue)] text-white",
                          )}
                        >
                          {pendingCount}
                        </span>
                      )}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        );
      })}
    </nav>
  );
}
