"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";
import { ChevronDown, LayoutGrid } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { NavbarMenuLink } from "@/lib/navbar-menu-data";
import { cn } from "@/lib/utils";

interface NavbarMenuDropdownProps {
  label: string;
  browseLabel: string;
  browseHref: string;
  items: readonly NavbarMenuLink[];
}

const triggerClassName =
  "flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2";

const panelClassName =
  "min-w-[220px] rounded-xl border border-gray-100 bg-white p-2 shadow-xl";

export function NavbarMenuDropdown({
  label,
  browseLabel,
  browseHref,
  items,
}: NavbarMenuDropdownProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className={triggerClassName}>
        {label}
        <ChevronDown className="h-3.5 w-3.5 text-gray-500" aria-hidden />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className={panelClassName}>
        <DropdownMenuItem asChild className="cursor-pointer p-0 focus:bg-transparent">
          <Link
            href={browseHref}
            className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold text-blue-600 hover:bg-blue-50"
          >
            <LayoutGrid className="h-4 w-4 shrink-0" aria-hidden />
            {browseLabel}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator className="mx-2 bg-gray-100" />
        {items.map((item) => (
          <DropdownMenuItem
            key={item.href}
            asChild
            className="cursor-pointer rounded-lg px-3 py-2 text-sm text-gray-700 focus:bg-gray-50"
          >
            <Link href={item.href}>{item.label}</Link>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

interface NavbarLearnDropdownProps {
  items: readonly NavbarMenuLink[];
  label?: string;
}

export function NavbarLearnDropdown({ items, label }: NavbarLearnDropdownProps) {
  const t = useTranslations("auto.componentsLayoutNavbarMenuDropdown");
  const resolvedLabel = label ?? t("learn");

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className={triggerClassName}>
        {resolvedLabel}
        <ChevronDown className="h-3.5 w-3.5 text-gray-500" aria-hidden />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className={cn(panelClassName, "min-w-[180px]")}>
        {items.map((item) => (
          <DropdownMenuItem
            key={item.href}
            asChild
            className="cursor-pointer rounded-lg px-3 py-2 text-sm text-gray-700 focus:bg-gray-50"
          >
            <Link href={item.href}>{item.label}</Link>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
