"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import {
  LayoutDashboard,
  BedDouble,
  CalendarRange,
  Users,
  Calendar,
  LogIn,
  CreditCard,
  FileText,
  BarChart3,
  UserCog,
  Settings,
  Hotel,
  Menu,
} from "lucide-react";

const NAV_ITEMS = [
  { 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"] },
];

export function MobileNav({ role, hotelName }: { role: string; hotelName: string }) {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);

  const items = NAV_ITEMS.filter((item) => !item.roles || item.roles.includes(role));

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" className="lg:hidden">
          <Menu className="w-5 h-5" />
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-xs left-0 top-0 translate-x-0 translate-y-0 h-screen rounded-none p-0 bg-sidebar text-white border-0">
        <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">
            <Hotel className="w-5 h-5" />
          </div>
          <div>
            <p className="text-sm font-semibold">{hotelName}</p>
            <p className="text-xs text-white/50">Gestion hôtelière</p>
          </div>
        </div>
        <nav className="py-4 px-3 space-y-1 overflow-y-auto">
          {items.map((item) => {
            const isActive =
              item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setOpen(false)}
                className={cn("nav-link", isActive && "nav-link-active")}
              >
                <Icon className="w-4 h-4" />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>
      </DialogContent>
    </Dialog>
  );
}