"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard,
  Users,
  Package,
  ShoppingCart,
  Wrench,
  DollarSign,
  MessageSquare,
  Settings,
  BarChart3,
  UserCheck,
} from "lucide-react"

const menuItems = [
  { href: "/admin", icon: LayoutDashboard, label: "لوحة التحكم" },
  { href: "/admin/users", icon: Users, label: "إدارة المستخدمين" },
  { href: "/admin/plumbers", icon: UserCheck, label: "إدارة السباكين" },
  { href: "/admin/products", icon: Package, label: "إدارة المنتجات" },
  { href: "/admin/orders", icon: ShoppingCart, label: "إدارة الطلبات" },
  { href: "/admin/services", icon: Wrench, label: "إدارة الخدمات" },
  { href: "/admin/financial", icon: DollarSign, label: "التقارير المالية" },
  { href: "/admin/analytics", icon: BarChart3, label: "التحليلات" },
  { href: "/admin/complaints", icon: MessageSquare, label: "الشكاوى والدعم" },
  { href: "/admin/settings", icon: Settings, label: "إعدادات النظام" },
]

export default function AdminSidebar() {
  const pathname = usePathname()

  return (
    <div className="w-64 bg-white border-l border-border-color h-full">
      <div className="p-6 border-b border-border-color">
        <h2 className="text-xl font-bold text-dark-color">لوحة الإدارة</h2>
      </div>

      <nav className="p-4">
        <ul className="space-y-2">
          {menuItems.map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href

            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                    isActive ? "bg-main-color text-white" : "text-parg-color hover:bg-bg-color hover:text-dark-color"
                  }`}
                >
                  <Icon className="w-5 h-5" />
                  <span className="font-medium">{item.label}</span>
                </Link>
              </li>
            )
          })}
        </ul>
      </nav>
    </div>
  )
}