"use client";

import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  CalendarCheck2,
  CalendarDays,
  Contact,
  GraduationCap,
  UserCircle,
  ClipboardList,
  Stethoscope,
  Megaphone,
  Clock3,
  BellRing,
} from "lucide-react";

import { NavItem } from "@/components/ui/nav-item";

import { UserRole } from "@prisma/client";

const navItems = [
  {
    section: "Heute",
    href: "/dashboard/notdienst/alarm",
    label: "Notdienstalarm",
    icon: BellRing,
    exact: true,
    allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR, UserRole.ELTERN],
  },
  {
    section: "Heute",
    href: "/dashboard/personal",
    label: "Personal & Arbeitszeit",
    icon: Clock3,
    exact: false,
    allowedRoles: [UserRole.ADMIN, UserRole.ERZIEHER],
  },
  {
    section: "Heute",
    href: "/dashboard",
    label: "Übersicht",
    icon: LayoutDashboard,
    exact: true,
  },
  {
    section: "Heute",
    href: "/dashboard/mitteilungen",
    label: "Mitteilungen",
    icon: Megaphone,
    exact: false,
  },
  {
    section: "Heute",
    href: "/dashboard/notdienst",
    label: "Notdienst (Eltern)",
    icon: CalendarCheck2,
    exact: true,
    badge: "4",
    allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR, UserRole.ELTERN],
  },
  {
    section: "Heute",
    href: "/dashboard/notdienst/plan",
    label: "Notdienst-Planung",
    icon: CalendarCheck2,
    exact: false,
    allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR],
  },
  {
    section: "Heute",
    href: "/dashboard/kalender",
    label: "Terminkalender",
    icon: CalendarDays,
    exact: false,
  },
  {
    section: "Heute",
    href: "/dashboard/adressbuch",
    label: "Adressbuch",
    icon: Contact,
    exact: false,
  },
  {
    section: "Verwaltung",
    href: "/dashboard/families",
    label: "Familienverwaltung",
    icon: Users,
    exact: false,
    allowedRoles: [UserRole.ADMIN],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/admin/dienste",
    label: "Dienstplan",
    icon: ClipboardList,
    exact: false,
    allowedRoles: [UserRole.ADMIN],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/admin/news",
    label: "Schwarzes Brett",
    icon: Megaphone,
    exact: false,
    allowedRoles: [UserRole.ADMIN],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/admin/kalender",
    label: "Event-Anmeldungen",
    icon: CalendarCheck2,
    exact: false,
    allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/admin/abwesenheiten",
    label: "Abwesenheiten",
    icon: Stethoscope,
    exact: false,
    allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR, UserRole.ERZIEHER],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/erzieher",
    label: "ErzieherInnen",
    icon: GraduationCap,
    exact: false,
    allowedRoles: [UserRole.ADMIN],
  },
  {
    section: "Verwaltung",
    href: "/dashboard/profil",
    label: "Mein Profil",
    icon: UserCircle,
    exact: false,
  },
];

export function SidebarNav({ role }: { role: UserRole }) {
  const pathname = usePathname();
  const visibleItems = navItems.filter(
    ({ allowedRoles }) =>
      !allowedRoles || (allowedRoles as UserRole[]).includes(role),
  );
  const sections = ["Heute", "Verwaltung"];

  return (
    <nav className="flex flex-col gap-8 px-5">
      {sections.map((section) => (
        <div key={section}>
          <p className="mb-3 px-2.5 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.18em]">
            {section}
          </p>
          <div className="flex flex-col gap-1">
            {visibleItems
              .filter((item) => item.section === section)
              .map(({ href, label, icon, exact, badge }) => {
                const isActive = exact
                  ? pathname === href
                  : pathname.startsWith(href);
                return (
                  <NavItem
                    key={href}
                    href={href}
                    label={label}
                    icon={icon}
                    active={isActive}
                    badge={badge}
                  />
                );
              })}
          </div>
        </div>
      ))}
    </nav>
  );
}