"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  FiCreditCard,
  FiFileText,
  FiGrid,
  FiSettings,
  FiUsers,
  FiLogOut,
} from "react-icons/fi";

interface AdminSidebarProps {
  isOpen?: boolean;
  onClose?: () => void;
  onLogout?: () => void;
}

const menuItems = [
  {
    title: "Dashboard",
    href: "/admin",
    icon: FiGrid,
  },
  {
    title: "Users",
    href: "/admin/users",
    icon: FiUsers,
  },
  {
    title: "Packages",
    href: "/admin/packages",
    icon: FiCreditCard,
  },
  {
    title: "Transactions",
    href: "/admin/transactions",
    icon: FiFileText,
  },
  {
    title: "System Settings",
    href: "/admin/settings",
    icon: FiSettings,
  },
];

export default function AdminSidebar({
  isOpen = false,
  onClose,
  onLogout,
}: AdminSidebarProps) {
  const pathname = usePathname();

  return (
    <>
      {/* Mobile Overlay */}
      

      {/* Sidebar */}
      <aside
        className={`fixed left-0 z-40 top-16 h-[calc(100vh-64px)] w-70 bg-white/95 lg:admin-sidebar-bg lg:adminsidebar-shadow backdrop-blur-xl transition-transform duration-300 lg:top-20 lg:h-[calc(100vh-80px)] lg:translate-x-0 ${
          isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
        }`}
      >
        <div className="flex h-full flex-col">
          {/* Scrollable Menu */}
          <div className="flex-1 overflow-y-auto px-6 py-10 custom-scrollbar">
            <nav className="space-y-1">
              {menuItems.map((item) => {
                const Icon = item.icon;

                const isActive =
                  pathname === item.href ||
                  (item.href !== "/admin" &&
                    pathname.startsWith(`${item.href}/`));

                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={onClose}
                    className={`flex items-center gap-3 rounded-xl px-4 py-3 text-base font-medium transition-all ${
                      isActive
                        ? "gradient1 text-white border border-white"
                        : "text-text hover:bg-white hover:text-link-1 border border-transparent"
                    }`}
                  >
                    <Icon size={18} />
                    <span>{item.title}</span>
                  </Link>
                );
              })}
            </nav>
          </div>

          {/* Bottom Logout */}
          <div className="border-t border-white/20 p-6">
            <button
              onClick={onLogout}
              className="
                flex w-full items-center justify-center gap-3
                rounded-xl border border-danger/20 cursor-pointer
                bg-danger/10 px-4 py-3
                text-sm font-semibold text-danger
                transition-all duration-300
                hover:bg-danger hover:text-white
              "
            >
              <FiLogOut size={18} />
              <span>Sign Out</span>
            </button>
          </div>
        </div>
      </aside>
      <div
        onClick={onClose}
        className={`fixed inset-0 z-30 bg-black/40 top-16 h-[calc(100vh-64px)] transition-all duration-300 lg:hidden ${
          isOpen ? "visible opacity-100" : "invisible opacity-0"
        }`}
      />
    </>
  );
}