"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { de } from "@/lib/i18n/de";

/**
 * Seitennavigation des Admin-Panels. Client-Komponente nur wegen `usePathname`
 * (aktiver Zustand). Keine Geschäftslogik, keine Datenabhängigkeit.
 */
const ITEMS = [
  { href: "/admin/merkmale", label: de.admin.navMerkmale },
  { href: "/admin/merkmale/proposals", label: de.admin.navVorschlaege },
  { href: "/admin/vorlagen", label: de.admin.navVorlagen },
  { href: "/admin/geraete-kategorien", label: de.admin.navKategorien },
  { href: "/admin/wehren", label: de.admin.navWehren },
  { href: "/admin/audit", label: de.admin.navAudit },
] as const;

export function AdminNav() {
  const pathname = usePathname();
  return (
    <nav
      aria-label="Administrationsnavigation"
      className="border-b border-rand bg-white"
    >
      <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-1 px-6 py-2">
        <span className="mr-4 font-display text-sm font-semibold text-navy">
          {de.admin.titel}
        </span>
        {ITEMS.map((item) => {
          const active =
            pathname === item.href ||
            (item.href !== "/admin/merkmale" &&
              pathname.startsWith(item.href)) ||
            (item.href === "/admin/merkmale" &&
              pathname === "/admin/merkmale");
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={active ? "page" : undefined}
              className={cn(
                "rounded px-3 py-1.5 text-sm font-medium transition-colors",
                active
                  ? "bg-navy text-white"
                  : "text-anthrazit/80 hover:bg-nebel hover:text-anthrazit",
              )}
            >
              {item.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
