"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type NavLink = { href: string; label: string; exact?: boolean };

const LINKS: NavLink[] = [
  { href: "/admin", label: "Menu", exact: true },
  { href: "/admin/ingredients", label: "Ingrédients" },
  { href: "/admin/gallery", label: "Galerie" },
  { href: "/admin/site", label: "Textes du site" },
  { href: "/admin/schedule", label: "Où me trouver" },
];

function isActive(pathname: string, href: string, exact?: boolean): boolean {
  if (exact) return pathname === href;
  return pathname === href || pathname.startsWith(`${href}/`);
}

function linkClassName(active: boolean): string {
  const base =
    "rounded-full px-3 py-1.5 text-sm font-medium text-chocolat transition-colors";
  return active
    ? `${base} bg-gaufre/30 font-semibold shadow-sm ring-1 ring-gaufre/40`
    : `${base} hover:bg-gaufre/15`;
}

export function AdminNav() {
  const pathname = usePathname();

  return (
    <nav className="sticky top-0 z-10 border-b border-chocolat/10 bg-white/90 px-4 py-3 backdrop-blur-sm">
      <div className="mx-auto flex max-w-4xl flex-wrap items-center gap-2 sm:gap-6">
        <span className="text-sm font-semibold text-chocolat">Administration</span>
        {LINKS.map(({ href, label, exact }) => {
          const active = isActive(pathname, href, exact);
          return (
            <Link key={href} href={href} className={linkClassName(active)}>
              {label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
