"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { User, ShoppingBag, Wrench, Heart, MapPin, Settings, HelpCircle, LogOut, Home } from "lucide-react"

const menuItems = [
  {
    href: "/dashboard",
    label: "نظرة عامة",
    icon: Home,
  },
  {
    href: "/dashboard/orders",
    label: "طلباتي",
    icon: ShoppingBag,
  },
  {
    href: "/dashboard/services",
    label: "خدماتي",
    icon: Wrench,
  },
  {
    href: "/dashboard/favorites",
    label: "المفضلة",
    icon: Heart,
  },
  {
    href: "/dashboard/addresses",
    label: "العناوين",
    icon: MapPin,
  },
  {
    href: "/dashboard/profile",
    label: "الملف الشخصي",
    icon: User,
  },
  {
    href: "/dashboard/settings",
    label: "الإعدادات",
    icon: Settings,
  },
  {
    href: "/dashboard/support",
    label: "المساعدة",
    icon: HelpCircle,
  },
]

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

  const handleLogout = async () => {
    try {
      await fetch("/api/auth/logout", { method: "POST" })
      window.location.href = "/"
    } catch (error) {
      console.error("Logout error:", error)
    }
  }

  return (
    <div className="w-64 bg-[var(--white-color)] border-l border-[var(--border-color)] h-full">
      <div className="p-6">
        <h2 className="text-xl font-bold text-[var(--dark-color)] mb-6">لوحة التحكم</h2>

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

            return (
              <Link key={item.href} href={item.href}>
                <Button
                  variant={isActive ? "default" : "ghost"}
                  className={`w-full justify-start gap-3 ${
                    isActive
                      ? "bg-[var(--main-color)] text-[var(--dark-color)] hover:bg-[var(--main-color)]/90"
                      : "text-[var(--parg-color)] hover:text-[var(--dark-color)] hover:bg-[var(--bg-color)]"
                  }`}
                >
                  <Icon className="w-5 h-5" />
                  {item.label}
                </Button>
              </Link>
            )
          })}
        </nav>

        <div className="mt-8 pt-8 border-t border-[var(--border-color)]">
          <Button
            onClick={handleLogout}
            variant="ghost"
            className="w-full justify-start gap-3 text-[var(--dark-red)] hover:text-[var(--dark-red)] hover:bg-red-50"
          >
            <LogOut className="w-5 h-5" />
            تسجيل الخروج
          </Button>
        </div>
      </div>
    </div>
  )
}