"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  UserCheck,
  FileText,
  Building2,
  Stethoscope,
  Package,
  Calendar,
  CreditCard,
  Plane,
  Search,
  PenSquare,
  BarChart2,
  Settings,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

const NAV_ITEMS = [
  { label: "Dashboard", icon: LayoutDashboard, href: "/admin" },
  { label: "Leads", icon: Users, href: "/admin/leads" },
  { label: "Patients", icon: UserCheck, href: "/admin/patients" },
  { label: "Treatment Plans", icon: FileText, href: "/admin/treatment-plans" },
  { label: "Hospitals", icon: Building2, href: "/admin/hospitals" },
  { label: "Doctors", icon: Stethoscope, href: "/admin/doctors" },
  { label: "Packages", icon: Package, href: "/admin/packages" },
  { label: "Appointments", icon: Calendar, href: "/admin/appointments" },
  { label: "Payments", icon: CreditCard, href: "/admin/payments" },
  { label: "Visa Support", icon: Plane, href: "/admin/visa" },
  { label: "SEO Center", icon: Search, href: "/admin/seo" },
  { label: "Blog", icon: PenSquare, href: "/admin/blog" },
  { label: "Reports", icon: BarChart2, href: "/admin/reports" },
  { label: "Settings", icon: Settings, href: "/admin/settings" },
];

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

  return (
    <aside
      className={`relative flex flex-col bg-white border-r border-slate-100 transition-all duration-300 ${
        collapsed ? "w-16" : "w-56"
      }`}
    >
      {/* Toggle Button */}
      <button
        onClick={() => setCollapsed(!collapsed)}
        className="absolute -right-3 top-6 z-10 w-6 h-6 bg-white border border-slate-200 rounded-full shadow flex items-center justify-center hover:bg-slate-50 transition-colors"
      >
        {collapsed ? (
          <ChevronRight className="w-3 h-3 text-slate-500" />
        ) : (
          <ChevronLeft className="w-3 h-3 text-slate-500" />
        )}
      </button>

      <nav className="flex-1 overflow-y-auto admin-scroll py-2">
        {NAV_ITEMS.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}
              className={`flex items-center gap-3 px-3 py-2.5 mx-2 my-0.5 rounded-lg transition-all text-sm group ${
                isActive
                  ? "bg-purple-600 text-white"
                  : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
              }`}
              title={collapsed ? item.label : undefined}
            >
              <Icon className={`w-4 h-4 flex-shrink-0 ${isActive ? "text-white" : "text-slate-500 group-hover:text-slate-700"}`} />
              {!collapsed && (
                <span className="font-medium truncate">{item.label}</span>
              )}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}