"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  CalendarDays,
  ClipboardCheck,
  Bell,
  FileBadge,
  Award,
  Sparkles,
  MessageSquareText,
  UserCircle,
  HeartHandshake,
} from "lucide-react";

// Order matches spec:
// Dashboard, Programs, My Applications, Inbox, Certificates, Merit Points,
// Achievements, Feedback, My Profile
const nav = [
  { href: "/portal", label: "Dashboard", icon: LayoutDashboard },
  { href: "/portal/programs", label: "Programs", icon: CalendarDays },
  { href: "/portal/applications", label: "My Applications", icon: ClipboardCheck },
  { href: "/portal/notifications", label: "Inbox", icon: Bell },
  { href: "/portal/certificates", label: "Certificates", icon: FileBadge },
  { href: "/portal/merit", label: "Merit Points", icon: Award },
  { href: "/portal/achievement", label: "Achievements", icon: Sparkles },
  { href: "/portal/feedback", label: "Feedback", icon: MessageSquareText },
  { href: "/portal/profile", label: "My Profile", icon: UserCircle },
];

export default function VolunteerNav() {
  const pathname = usePathname();
  return (
    <aside className="hidden w-60 shrink-0 flex-col border-r border-sand-dark/60 bg-white md:flex">
      <div className="flex items-center gap-2 px-5 py-5">
        <div className="flex h-9 w-9 items-center justify-center rounded-card bg-emerald text-white">
          <HeartHandshake size={20} />
        </div>
        <div>
          <p className="text-sm font-extrabold leading-tight text-ink">Volunteer</p>
          <p className="text-xs text-muted">Pusat Islam UPSI</p>
        </div>
      </div>
      <nav className="flex-1 space-y-1 px-3 py-2">
        {nav.map(({ href, label, icon: Icon }) => {
          const active = href === "/portal" ? pathname === href : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              className={`flex items-center gap-3 rounded-card px-3 py-2.5 text-sm font-medium transition-colors ${
                active
                  ? "bg-emerald text-white"
                  : "text-muted hover:bg-emerald-light hover:text-emerald"
              }`}
            >
              <Icon size={18} />
              {label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}