"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  BedDouble,
  CalendarRange,
  Users,
  Calendar,
  LogIn,
  CreditCard,
  FileText,
  BarChart3,
  UserCog,
  Settings,
  Hotel,
} from "lucide-react";

interface NavItem {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  roles?: string[]; // si défini, restreint aux rôles donnés
}

const NAV_ITEMS: NavItem[] = [
  { href: "/", label: "Tableau de bord", icon: LayoutDashboard },
  { href: "/chambres", label: "Chambres", icon: BedDouble },
  { href: "/reservations", label: "Réservations", icon: CalendarRange },
  { href: "/clients", label: "Clients", icon: Users },
  { href: "/calendrier", label: "Calendrier", icon: Calendar },
  { href: "/checkin", label: "Check-in / out", icon: LogIn },
  { href: "/paiements", label: "Paiements", icon: CreditCard },
  { href: "/factures", label: "Factures", icon: FileText },
  { href: "/rapports", label: "Rapports", icon: BarChart3, roles: ["ADMIN", "MANAGER"] },
  { href: "/utilisateurs", label: "Utilisateurs", icon: UserCog, roles: ["ADMIN"] },
  { href: "/parametres", label: "Paramètres", icon: Settings, roles: ["ADMIN"] },
];

interface SidebarProps {
  role: string;
  hotelName: string;
}

export function Sidebar({ role, hotelName }: SidebarProps) {
  const pathname = usePathname();

  const visibleItems = NAV_ITEMS.filter((item) => {
    if (!item.roles) return true;
    return item.roles.includes(role);
  });

  return (
    <aside className="hidden lg:flex flex-col w-[260px] bg-sidebar text-white fixed inset-y-0 left-0 z-40">
      {/* Header */}
      <div className="h-16 flex items-center gap-3 px-5 border-b border-white/10">
        <div className="w-9 h-9 rounded-md bg-accent flex items-center justify-center flex-shrink-0">
          <Hotel className="w-5 h-5 text-white" />
        </div>
        <div className="min-w-0">
          <p className="text-sm font-semibold truncate">{hotelName}</p>
          <p className="text-xs text-white/50">Gestion hôtelière</p>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
        {visibleItems.map((item) => {
          const isActive =
            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn("nav-link", isActive && "nav-link-active")}
            >
              <Icon className="w-4 h-4 flex-shrink-0" />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>

      <div className="p-4 border-t border-white/10 text-xs text-white/40">
        v1.0.0 · © {new Date().getFullYear()}
      </div>
    </aside>
  );
}