"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { cn } from "@/lib/utils";

const nav = [
  { label: "Overview",         href: "/dashboard" },
  { label: "My Orders",        href: "/dashboard/orders" },
  { label: "Payments",         href: "/dashboard/payments" },
  { label: "Shipping Address", href: "/dashboard/shipping" },
  { label: "Settings",         href: "/dashboard/settings" },
  { label: "Support Center",   href: "/dashboard/support" },
  { label: "My Reviews",       href: "/dashboard/reviews" },
];

function NavLinks({ onClose }: { onClose?: () => void }) {
  const pathname = usePathname();

  return (
    <nav className="flex flex-col py-4">
      {nav.map((item) => {
        const active = pathname === item.href;
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onClose}
            className={cn(
              "relative flex items-center px-8 py-5 text-[15px] transition-colors",
              active
                ? "text-[#00BCD4] font-medium"
                : "text-gray-800 hover:text-[#00BCD4]"
            )}
          >
            {active && (
              <span className="absolute left-0 top-0 h-full w-[3.5px] rounded-r-full bg-[#00BCD4]" />
            )}
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}

export function MobileMenuButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
      aria-label="Open menu"
    >
      <svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  );
}

export function MobileDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        className={cn(
          "fixed inset-0 z-40 bg-black/30 transition-opacity lg:hidden",
          open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
        )}
      />

      {/* Drawer */}
      <div
        className={cn(
          "fixed top-0 left-0 z-50 h-full w-64 bg-white rounded-r-2xl shadow-xl transition-transform duration-300 lg:hidden",
          open ? "translate-x-0" : "-translate-x-full"
        )}
      >
        {/* Close */}
        <div className="flex items-center justify-between px-6 py-5 border-b border-gray-100">
          <span className="text-base font-semibold text-gray-900">Menu</span>
          <button onClick={onClose} className="p-1 rounded-md hover:bg-gray-100 transition-colors">
            <svg className="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <NavLinks onClose={onClose} />
      </div>
    </>
  );
}

export default function Sidebar() {
  return (
    <aside className="hidden lg:flex w-60 shrink-0 flex-col bg-white rounded-2xl self-start sticky top-6">
      <NavLinks />
    </aside>
  );
}
