"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,
  Box,
  CreditCard,
  ReceiptText,
} from "lucide-react";
import { cn } from "@/lib/utils";

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

  const handleLogout = () => {
    sessionStorage.removeItem("customer_session");
    localStorage.removeItem("customer_session");
    localStorage.removeItem("teertham_auth_token");
    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/fixed-bookings",
      label: "Fixed Bookings",
      icon: Box,
    },
    {
      href: "/user/payment-methods",
      label: "Payment Methods",
      icon: CreditCard,
    },
    {
      href: "/user/my-transactions",
      label: "My transactions",
      icon: ReceiptText,
    },
    {
      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>
  );
}