//====================================
// File: Navbar.tsx
// componente Navbar
// @author: "villari.andrea@libero.it"
// @version: "1.1.0 2026-05-31"
//====================================
"use client";

import { ReactNode } from "react";
import Link from "next/link";
import Image from "next/image";
import GlobalStabilimentoSelector from "./GlobalStabilimentoSelector";
import type { AppPermissions } from "@/src/lib/permissions";

interface NavLink {
  href: string;
  label: string;
  visible: (p: AppPermissions) => boolean;
}

const navLinks: NavLink[] = [
  { href: "/", label: "Home", visible: () => true },
  { href: "/movimenti", label: "Movimenti", visible: () => true },
  { href: "/articoli", label: "Articoli", visible: () => true },
  { href: "/macchine", label: "Macchine", visible: () => true },
  {
    href: "/stabilimenti",
    label: "Stabilimenti",
    visible: (p) => p.canManageStabilimenti,
  },
  { href: "/utenti", label: "Utenti", visible: (p) => p.canManageUtenti },
];

export default function Navbar({
  actions,
  permissions,
  userLabel,
}: {
  actions?: ReactNode;
  permissions: AppPermissions;
  userLabel?: string;
}) {
  const visibleLinks = navLinks.filter((link) => link.visible(permissions));

  return (
    <nav className="border-b border-zinc-800 bg-black">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-between h-32">
          <Link
            href="/"
            className="flex items-center hover:opacity-80 transition-opacity"
          >
            <Image
              src="/immagini/Logo.webp"
              alt="MagRicambi"
              width={480}
              height={120}
              priority
              className="h-28 w-auto"
            />
          </Link>

          <div className="flex items-center space-x-6">
            {visibleLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-sm text-zinc-300 hover:text-zinc-100 transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>

          <div className="flex-1 flex justify-center px-4">
            <GlobalStabilimentoSelector />
          </div>

          <div className="flex items-center gap-4">
            {userLabel ? (
              <span className="text-xs text-zinc-500 hidden lg:inline">{userLabel}</span>
            ) : null}
            {actions ? <div className="flex items-center">{actions}</div> : null}
          </div>
        </div>
      </div>
    </nav>
  );
}
