"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Home, Briefcase, Calendar, DollarSign, User, Star, Settings, HelpCircle, LogOut, Clock } from "lucide-react"

const menuItems = [
  {
    href: "/plumber",
    label: "نظرة عامة",
    icon: Home,
  },
  {
    href: "/plumber/jobs",
    label: "المهام",
    icon: Briefcase,
  },
  {
    href: "/plumber/schedule",
    label: "الجدولة",
    icon: Calendar,
  },
  {
    href: "/plumber/earnings",
    label: "الأرباح",
    icon: DollarSign,
  },
  {
    href: "/plumber/reviews",
    label: "التقييمات",
    icon: Star,
  },
  {
    href: "/plumber/availability",
    label: "أوقات العمل",
    icon: Clock,
  },
  {
    href: "/plumber/profile",
    label: "الملف الشخصي",
    icon: User,
  },
  {
    href: "/plumber/settings",
    label: "الإعدادات",
    icon: Settings,
  },
  {
    href: "/plumber/support",
    label: "المساعدة",
    icon: HelpCircle,
  },
]

export default function PlumberSidebar() {
  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(--name-item)] text-white hover:bg-[var(--name-item)]/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>
  )
}