"use client";

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

type SidebarProps = {
  role: "admin" | "volunteer";
};

export default function Sidebar({ role }: SidebarProps) {
  const path = usePathname();

  // Admin Navigation list — order matches spec:
  // Dashboard, Programs, Volunteers, Applications, Reminders, Merit & Awards,
  // Certificates, Feedback, My Profile
  const adminNav = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
    { href: "/programs", label: "Programs", icon: CalendarDays },
    { href: "/volunteers", label: "Volunteers", icon: Users },
    { href: "/applications", label: "Applications", icon: ClipboardCheck },
    { href: "/reminders", label: "Reminders", icon: BellRing },
    { href: "/merit", label: "Merit & Awards", icon: Award },
    { href: "/certificates", label: "Certificates", icon: FileBadge },
    { href: "/feedback", label: "Feedback", icon: MessageSquareText },
    { href: "/profile", label: "My Profile", icon: UserCircle },
  ];

  // Volunteer (Student) Navigation list — order matches spec:
  // Dashboard, Programs, My Applications, Inbox, Certificates, Merit Points,
  // Achievements, Feedback, My Profile
  const volunteerNav = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
    { href: "/programs", label: "Programs", icon: CalendarDays },
    { href: "/applications", label: "My Applications", icon: ClipboardCheck },
    { href: "/inbox", label: "Inbox", icon: Bell },
    { href: "/certificates", label: "Certificates", icon: FileBadge },
    { href: "/merit", label: "Merit Points", icon: Award },
    { href: "/achievement", label: "Achievements", icon: Sparkles },
    { href: "/feedback", label: "Feedback", icon: MessageSquareText },
    { href: "/profile", label: "My Profile", icon: UserCircle },
  ];

  const nav = role === "admin" ? adminNav : volunteerNav;

  return (
    <aside className="hidden w-64 shrink-0 flex-col border-r border-sand-dark/60 bg-white md:flex">
      <div className="flex items-center gap-2.5 px-5 py-5">
        <div className="flex h-9 w-9 items-center justify-center rounded-card bg-emerald text-sm font-extrabold text-white">
          PI
        </div>
        <div className="leading-tight">
          <p className="text-sm font-bold text-ink">Pusat Islam</p>
          <p className="text-xs text-muted">Volunteer {role === "admin" ? "Admin" : "Student"}</p>
        </div>
      </div>
      <nav className="flex-1 space-y-1 px-3 py-2">
        {nav.map(({ href, label, icon: Icon }) => {
          const active = href === "/" ? path === "/" : path.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-light text-emerald"
                  : "text-muted hover:bg-sand hover:text-ink"
              }`}
            >
              <Icon size={18} />
              {label}
            </Link>
          );
        })}
      </nav>
      <div className="px-5 py-4 text-xs text-muted">UPSI · Smart VMS</div>
    </aside>
  );
}