"use client";

import Link from "next/link";
import { Fragment } from "react";
import { Loader2, MoreHorizontal, type LucideIcon } from "lucide-react";
import { useTranslation } from "react-i18next";

import { buttonVariants } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";

export type AdminRowActionItem = {
  key: string;
  label: React.ReactNode;
  icon?: LucideIcon;
  onClick?: () => void;
  href?: string;
  disabled?: boolean;
  destructive?: boolean;
  hidden?: boolean;
};

type AdminRowActionsMenuProps = {
  actions: AdminRowActionItem[];
  busy?: boolean;
  align?: "start" | "center" | "end";
  ariaLabel?: string;
  className?: string;
  triggerClassName?: string;
};

/** 表格行操作：省略号触发，下拉展示带图标的菜单项；破坏性操作前自动加分隔线。 */
export function AdminRowActionsMenu({
  actions,
  busy = false,
  align = "end",
  ariaLabel,
  className,
  triggerClassName,
}: AdminRowActionsMenuProps) {
  const { t } = useTranslation("common");
  const visible = actions.filter((item) => !item.hidden);

  if (visible.length === 0) {
    return <span className={cn("text-xs text-muted-foreground", className)}>—</span>;
  }

  return (
    <div className={cn("flex justify-center", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger
          disabled={busy}
          aria-label={ariaLabel ?? t("aria.rowActionsMenu")}
          className={cn(
            buttonVariants({ variant: "outline", size: "icon-sm" }),
            "text-muted-foreground hover:text-foreground",
            triggerClassName,
          )}
        >
          {busy ? (
            <Loader2 className="size-4 animate-spin" aria-hidden />
          ) : (
            <MoreHorizontal className="size-4" aria-hidden />
          )}
        </DropdownMenuTrigger>
        <DropdownMenuContent align={align} className="min-w-[10.5rem]">
          {visible.map((action, index) => {
            const prev = visible[index - 1];
            const showSeparator = Boolean(action.destructive && prev && !prev.destructive);
            const Icon = action.icon;
            const content = (
              <>
                {Icon ? <Icon aria-hidden /> : null}
                {action.label}
              </>
            );

            const item = action.href ? (
              <DropdownMenuItem
                key={action.key}
                disabled={action.disabled || busy}
                variant={action.destructive ? "destructive" : "default"}
                render={<Link href={action.href} />}
              >
                {content}
              </DropdownMenuItem>
            ) : (
              <DropdownMenuItem
                key={action.key}
                disabled={action.disabled || busy}
                variant={action.destructive ? "destructive" : "default"}
                onClick={() => action.onClick?.()}
              >
                {content}
              </DropdownMenuItem>
            );

            return (
              <Fragment key={action.key}>
                {showSeparator ? <DropdownMenuSeparator /> : null}
                {item}
              </Fragment>
            );
          })}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
