"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Calendar,
  MessageSquare,
  Users,
  BarChart3,
  Settings,
  Shield,
  X,
  ClipboardList,
} from "lucide-react";
import { useState, useEffect } from "react";

interface StaffNavProps {
  user: {
    id: string;
    role: string;
  };
  isOpen: boolean;
  onClose: () => void;
}

export default function StaffNav({ user, isOpen, onClose }: StaffNavProps) {
  const pathname = usePathname();

  // Close menu on route change (mobile)
  useEffect(() => {
    if (onClose) {
      onClose();
    }
  }, [pathname, onClose]);

  const navItems = [
    {
      name: "Overview",
      href: "/staff/dashboard",
      icon: LayoutDashboard,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Demo Bookings",
      href: "/staff/dashboard/demos",
      icon: Calendar,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Contacts",
      href: "/staff/dashboard/contacts",
      icon: MessageSquare,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Users",
      href: "/staff/dashboard/users",
      icon: Users,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Site Experience",
      href: "/staff/dashboard/site-experience",
      icon: LayoutDashboard,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Analytics",
      href: "/staff/dashboard/analytics",
      icon: BarChart3,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Waitlists",
      href: "/staff/dashboard/waitlists",
      icon: ClipboardList,
      roles: ["STAFF", "ADMIN", "SUPER_ADMIN"],
    },
    {
      name: "Staff Management",
      href: "/staff/dashboard/staff",
      icon: Shield,
      roles: ["SUPER_ADMIN"],
    },
    {
      name: "Settings",
      href: "/staff/dashboard/settings",
      icon: Settings,
      roles: ["ADMIN", "SUPER_ADMIN"],
    },
  ];

  // Filter nav items based on user role
  const filteredNavItems = navItems.filter((item) =>
    item.roles.includes(user.role),
  );

  return (
    <>
      {/* Mobile Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={onClose}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`
          fixed inset-y-0 left-0 w-64 bg-white border-r border-gray-200 pt-16 z-50
          transform transition-transform duration-300 ease-in-out
          ${isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
        `}
      >
        {/* Close Button (Mobile Only) */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 text-gray-600 hover:bg-gray-100 rounded-lg lg:hidden"
          aria-label="Close menu"
        >
          <X className="w-5 h-5" />
        </button>

        <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto h-full">
          {filteredNavItems.map((item) => {
            const Icon = item.icon;
            const isActive =
              pathname === item.href ||
              (item.href !== "/staff/dashboard" &&
                pathname.startsWith(item.href));

            return (
              <Link
                key={item.name}
                href={item.href}
                className={`
                flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition
                ${
                  isActive
                    ? "bg-brand-green text-white"
                    : "text-gray-700 hover:bg-gray-100"
                }
              `}
              >
                <Icon className="w-5 h-5" />
                {item.name}
              </Link>
            );
          })}
        </nav>

        {/* Role Badge */}
        <div className="px-4 py-4 border-t border-gray-200">
          <div className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg">
            <Shield className="w-4 h-4 text-brand-green" />
            <span className="text-xs font-semibold text-gray-700 uppercase">
              {user.role.replace("_", " ")}
            </span>
          </div>
        </div>
      </aside>
    </>
  );
}