"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import {
  Package, ShoppingBag, Newspaper, BookOpen, MapPin, GearSix, SignOut, Users,
} from "@phosphor-icons/react";
import type { AdminRole } from "@/lib/adminAuth";

const ALL_NAV_LINKS = [
  { href: "/admin/commandes",     label: "Commandes",    icon: <ShoppingBag size={13} weight="bold" />, roles: ["admin", "commandes"] },
  { href: "/admin/produits",      label: "Produits",     icon: <Package     size={13} weight="bold" />, roles: ["admin"] },
  { href: "/admin/utilisateurs",  label: "Utilisateurs", icon: <Users       size={13} weight="bold" />, roles: ["admin"] },
  { href: "/admin/actualites",    label: "Actualités",   icon: <Newspaper   size={13} weight="bold" />, roles: ["admin"] },
  { href: "/admin/recettes",      label: "Recettes",     icon: <BookOpen    size={13} weight="bold" />, roles: ["admin"] },
  { href: "/admin/boutiques",     label: "Boutiques",    icon: <MapPin      size={13} weight="bold" />, roles: ["admin"] },
  { href: "/admin/parametres",    label: "Paramètres",   icon: <GearSix     size={13} weight="bold" />, roles: ["admin"] },
];

export default function AdminNav({ role }: { role: AdminRole }) {
  const pathname = usePathname();
  const [loading, setLoading] = useState(false);

  const navLinks = ALL_NAV_LINKS.filter(l => l.roles.includes(role));

  const handleLogout = async () => {
    setLoading(true);
    await fetch("/api/auth/logout", { method: "POST" });
    window.location.href = "/admin/login";
  };

  return (
    <header className="bg-white border-b border-brand-dark/8 sticky top-0 z-10">
      <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between gap-3">

        {/* Brand + Nav */}
        <div className="flex items-center gap-4">
          <Image src="/logo.png" alt="Asli Food" width={180} height={160} className="h-7 w-auto object-contain" />
          {role === "commandes" && (
            <span className="text-[10px] font-bold tracking-widest uppercase text-brand-dark/40 border border-brand-dark/15 px-2.5 py-1 rounded-full">
              Resp. Commandes
            </span>
          )}
          <nav className="flex gap-1">
            {navLinks.map(({ href, label }) => {
              const active = pathname.startsWith(href);
              return (
                <Link
                  key={href}
                  href={href}
                  className={`px-3.5 py-1.5 rounded-full text-xs font-bold tracking-wide capitalize transition-colors duration-200 ${
                    active
                      ? "bg-brand-dark text-brand-yellow"
                      : "text-brand-dark/40 hover:text-brand-dark"
                  }`}
                >
                  {label}
                </Link>
              );
            })}
          </nav>
        </div>

        {/* Logout */}
        <button
          onClick={handleLogout}
          disabled={loading}
          className="flex items-center gap-1.5 text-brand-dark/40 hover:text-brand-dark font-semibold px-3 py-2 rounded-full text-xs transition-colors duration-200 disabled:opacity-40"
          title="Déconnexion"
        >
          {loading
            ? <span className="w-4 h-4 border-2 border-current/30 border-t-current rounded-full animate-spin" />
            : <SignOut size={16} weight="bold" />
          }
          <span className="hidden sm:inline">Déconnexion</span>
        </button>
      </div>
    </header>
  );
}