"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  UserCircle,
  GraduationCap,
  FlaskConical,
  Users,
  KeyRound,
  ShieldCheck,
  ShoppingBag,
} from "lucide-react";
import { clsx } from "clsx";

type Item = {
  href: string;
  label: string;
  Icon: typeof LayoutDashboard;
};

const PRIMARY: Item[] = [
  { href: "/account", label: "Dashboard", Icon: LayoutDashboard },
  { href: "/account/profile", label: "Profile", Icon: UserCircle },
  { href: "/account/academy", label: "My Academy", Icon: GraduationCap },
  { href: "/account/research", label: "My Research", Icon: FlaskConical },
  { href: "/account/orders", label: "My Orders", Icon: ShoppingBag },
  { href: "/account/directory", label: "Directory", Icon: Users },
];

const SECONDARY: Item[] = [
  { href: "/account/security", label: "Security", Icon: KeyRound },
];

type Props = {
  isAdmin?: boolean;
};

export function AccountNav({ isAdmin }: Props) {
  const pathname = usePathname();
  const isActive = (href: string) => {
    if (href === "/account") return pathname === "/account";
    return pathname === href || pathname.startsWith(`${href}/`);
  };

  return (
    <nav aria-label="Member sections" className="flex flex-col gap-5">
      <ul className="flex flex-col gap-0.5">
        {PRIMARY.map((item) => {
          const active = isActive(item.href);
          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>
              </Link>
            </li>
          );
        })}
      </ul>
      <div className="flex flex-col gap-1">
        <div className="px-3 text-[10px] font-bold uppercase tracking-[0.15em] text-[var(--color-slate)]">
          Account
        </div>
        <ul className="flex flex-col gap-0.5">
          {SECONDARY.map((item) => {
            const active = isActive(item.href);
            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>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
      {isAdmin && (
        <Link
          href="/admin"
          className="mx-1 flex items-center gap-2 rounded-lg border border-[var(--color-blue)]/30 bg-[var(--color-mist)] px-3 py-2 text-[13px] font-bold text-[var(--color-blue)] transition-colors hover:bg-[var(--color-blue)] hover:text-white"
        >
          <ShieldCheck className="h-4 w-4" aria-hidden />
          Admin dashboard
        </Link>
      )}
    </nav>
  );
}
