"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, User, Car, Hotel, Sparkles, Package, LogOut, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"

export function UserSidebar() {
  const pathname = usePathname()
  const router = useRouter()

  const handleLogout = () => {
    sessionStorage.removeItem("customer_session")
    window.dispatchEvent(new Event("sessionUpdate"))
    router.push("/")
    router.refresh()
  }

  const menuItems = [
    {
      href: "/user/dashboard",
      label: "Dashboard",
      icon: LayoutDashboard,
    },
    {
      href: "/user/manage-profile",
      label: "Manage Profile",
      icon: User,
    },
    {
      href: "/user/vehicle-bookings",
      label: "Vehicle Bookings",
      icon: Car,
    },
    {
      href: "/user/hotel-bookings",
      label: "Hotel Bookings",
      icon: Hotel,
    },
    {
      href: "/user/spiritual-bookings",
      label: "Spiritual Packages",
      icon: Sparkles,
    },
    {
      href: "/user/custom-packages",
      label: "Custom Packages",
      icon: Package,
    },
  ]

  return (
    <aside className="w-64 border-r border-border/40 bg-card/50 backdrop-blur-sm h-full">
      <div className="flex flex-col h-full">
        {/* Navigation Menu */}
        <nav className="flex-1 p-4 space-y-1">
          {menuItems.map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href

            return (
              <Link key={item.href} href={item.href}>
                <Button
                  variant={isActive ? "secondary" : "ghost"}
                  className={cn(
                    "w-full justify-start gap-3 h-11 transition-all",
                    isActive
                      ? "bg-primary/10 text-primary hover:bg-primary/15 font-medium shadow-sm"
                      : "hover:bg-muted/50 text-muted-foreground hover:text-foreground",
                  )}
                >
                  <Icon className="h-5 w-5 shrink-0" aria-hidden="true" />
                  <span className="flex-1 text-left">{item.label}</span>
                  {isActive && <ChevronRight className="h-4 w-4 shrink-0" aria-hidden="true" />}
                </Button>
              </Link>
            )
          })}
        </nav>

        {/* Logout Button */}
        <div className="p-4 border-t border-border/40">
          <Button
            variant="outline"
            className="w-full justify-start gap-3 h-11 hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30 transition-all bg-transparent"
            onClick={handleLogout}
          >
            <LogOut className="h-5 w-5" aria-hidden="true" />
            <span>Logout</span>
          </Button>
        </div>
      </div>
    </aside>
  )
}