"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { performLogout } from "@/lib/auth/logout";

const navItems = [
  {
    href: "/",
    label: "الرئيسية",
    icon: "ri-home-5-line",
    activeIcon: "ri-home-5-fill",
  },
  {
    href: "/scooters",
    label: "مركباتي",
    icon: "ri-e-bike-line",
    activeIcon: "ri-e-bike-fill",
  },
  {
    href: "/earnings",
    label: "الأرباح",
    icon: "ri-bar-chart-2-line",
    activeIcon: "ri-bar-chart-2-fill",
  },
  {
    href: "/profile",
    label: "حسابي",
    icon: "ri-user-3-line",
    activeIcon: "ri-user-3-fill",
  },
  {
    href: "/settlements",
    label: "التسويات",
    icon: "ri-bank-card-line",
    activeIcon: "ri-bank-card-fill",
  },
  {
    href: "/complaints",
    label: "الشكاوى",
    icon: "ri-customer-service-2-line",
    activeIcon: "ri-customer-service-2-fill",
  },
];

export default function Sidebar() {
  const path = usePathname();
  const router = useRouter();

  const handleLogout = () => {
    void performLogout((loginPath) => router.replace(loginPath));
  };

  return (
    <aside className="fixed top-0 right-0 h-screen w-64 bg-[#1E2128] border-l border-white/5 flex flex-col z-50">
      <div className="px-6 py-6 border-b border-white/5">
        <img
          src="/imgs/beeb-logo.svg"
          alt="BEEPBEEP Logo"
          className="w-full h-24 object-contain"
        />
      </div>

      <nav className="flex-1 px-4 py-6 flex flex-col gap-1">
        {navItems.map((item) => {
          const active = path === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer transition-all ${active ? "bg-[#FCD704]/15 text-[#FCD704]" : "text-gray-400 hover:bg-white/5 hover:text-white"}`}
            >
              <div className="w-5 h-5 flex items-center justify-center">
                <i
                  className={`${active ? item.activeIcon : item.icon} text-lg`}
                />
              </div>
              <span
                className={`text-sm font-medium ${active ? "text-[#FCD704]" : ""}`}
              >
                {item.label}
              </span>
            </Link>
          );
        })}
      </nav>

      <div className="px-4 py-5 border-t border-white/5">
        <button
          onClick={handleLogout}
          className="w-full flex items-center gap-2 px-4 py-2.5 rounded-xl text-red-400 hover:bg-red-400/10 transition-all cursor-pointer"
        >
          <div className="w-4 h-4 flex items-center justify-center">
            <i className="ri-logout-box-r-line text-base" />
          </div>
          <span className="text-xs font-medium">تسجيل الخروج</span>
        </button>
      </div>
    </aside>
  );
}