"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import {
  LayoutDashboard,
  Users,
  Database,
  User,
  Settings,
  ChevronRight,
  ChevronLeft,
  ShieldCheck,
  Briefcase,
  FileText,
} from "lucide-react";
import { FiShield } from "react-icons/fi";
import { useState } from "react";

const menu = [
  { label: "Overview", href: "/admin/dashboard", icon: LayoutDashboard },
  { label: "User Management", href: "/admin/dashboard/users", icon: Users },
  {
    label: "Tools & APIs",
    href: "/admin/dashboard/tools-apis",
    icon: Database,
  },
  {
    label: "Plan Manager",
    href: "/admin/dashboard/plan-manager",
    icon: ShieldCheck,
  },
  {
    label: "Job Manager",
    href: "/admin/dashboard/job-manager",
    icon: Briefcase,
  },
  {
    label: "Blog Manager",
    href: "/admin/dashboard/blog-manager",
    icon: FileText,
  },
  {
    label: "Profile Settings",
    href: "/admin/dashboard/profile-settings",
    icon: User,
  },
  {
    label: "System Settings",
    href: "/admin/dashboard/settings",
    icon: Settings,
  },
];

export default function AdminSidebar({ isOpen, onClose }) {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <>
      {isOpen && (
        <div
          onClick={onClose}
          className="fixed inset-0 bg-black/40 z-40 md:hidden"
        />
      )}
      <aside
        className={`
          fixed md:static z-50 inset-y-0 left-0
          ${collapsed ? "w-18" : "w-65"}
          bg-[#0F1629] text-white flex flex-col
          border-r border-white/10
          transform transition-transform duration-300
          ${isOpen ? "translate-x-0" : "-translate-x-full"}
          md:translate-x-0
        `}
      >
        <div
          className={`${collapsed ? "p-4" : "px-5 py-3"} border-b border-white/10`}
        >
          <div className="flex items-center gap-3 justify-start">
            <div className="w-10 h-10 rounded-xl bg-[#7F22FE] flex items-center justify-center">
              <FiShield size={20} />
            </div>

            {!collapsed && (
              <div>
                <h2 className="text-sm lg:text-lg font-semibold">ADMIN</h2>
                <p className="text-xs text-[#A684FF]">AURRGANIC PANEL</p>
              </div>
            )}
          </div>
        </div>

        {!collapsed && (
          <div className="px-5 py-4 border-b border-[#FFFFFF1A]">
            <div className="flex items-center gap-2 bg-[#7F22FE33] border border-[#8E51FF4D] px-4 py-3 rounded-xl">
              <span className="w-2 h-2 bg-[#05DF72] rounded-full" />
              <span className="text-sm text-[#C4B4FF]">
                System Status: Healthy
              </span>
            </div>
          </div>
        )}

        <div className="flex-1 overflow-y-auto px-3 py-4 space-y-2 custom-scrollbar">
          {menu.map((item) => {
            const Icon = item.icon;
            const isActive =
              pathname === item.href ||
              (item.href !== "/admin/dashboard" &&
                pathname.startsWith(item.href));

            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center ${
                  collapsed ? "justify-center" : "gap-3"
                } px-4 py-3 rounded-xl text-sm font-medium transition ${
                  isActive
                    ? "bg-[#794AFF] text-white"
                    : "text-[#99A1AF] hover:bg-white/5 hover:text-white"
                }`}
              >
                <Icon size={18} />

                {!collapsed && <span>{item.label}</span>}
              </Link>
            );
          })}
        </div>

        {!collapsed && (
          <div className="p-3 border-t border-white/10 text-xs text-[#99A1AF] text-center">
            © {new Date().getFullYear()} AURRGANIC. All Rights Reserved.
          </div>
        )}

        <div className="hidden md:block relative">
          <button
            onClick={() => setCollapsed(!collapsed)}
            className="absolute -right-3 bottom-6 w-8 h-8 rounded-full bg-white text-black shadow flex items-center justify-center"
          >
            {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
          </button>
        </div>
      </aside>
    </>
  );
}