"use client";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { MoreVertical } from "lucide-react";
import type { ReactNode } from "react";
import { Fragment } from "react";

export type RowAction = {
  label: ReactNode;
  icon?: ReactNode;
  onClick?: () => void;
  href?: string;
  variant?: "default" | "destructive";
  disabled?: boolean;
  hidden?: boolean;
};

interface RowActionsMenuProps {
  items: RowAction[];
  align?: "start" | "center" | "end";
  triggerClassName?: string;
  contentClassName?: string;
  triggerLabel?: string;
}

export function RowActionsMenu({
  items,
  align = "end",
  triggerClassName,
  contentClassName,
  triggerLabel = "Actions",
}: RowActionsMenuProps) {
  const visible = items.filter((a) => !a.hidden);
  if (visible.length === 0) return null;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon"
          className={cn(
            "h-10 w-10 rounded-xl border-border text-muted-foreground",
            triggerClassName
          )}
        >
          <MoreVertical className="size-4" />
          <span className="sr-only">{triggerLabel}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align={align}
        className={cn("w-44 rounded-md p-0", contentClassName)}
      >
        {visible.map((action, idx) => {
          const isDestructive = action.variant === "destructive";

          const hoverClasses = isDestructive
            ? undefined
            : [
                "focus:bg-primary-50 focus:text-primary-500",
                "data-[highlighted]:bg-primary-50 data-[highlighted]:text-primary-500",
              ];

          const itemClassName = cn(
            "flex items-center gap-3 px-4 py-3 text-sm rounded-none cursor-pointer",
            hoverClasses
          );

          const content = (
            <>
              <span className="flex-1 text-start">{action.label}</span>
              {action.icon && (
                <span className="flex size-4 shrink-0 items-center justify-center">
                  {action.icon}
                </span>
              )}
            </>
          );

          const item = action.href ? (
            <DropdownMenuItem
              variant={isDestructive ? "destructive" : "default"}
              disabled={action.disabled}
              className={itemClassName}
              asChild
            >
              <Link href={action.href}>{content}</Link>
            </DropdownMenuItem>
          ) : (
            <DropdownMenuItem
              variant={isDestructive ? "destructive" : "default"}
              disabled={action.disabled}
              onClick={action.onClick}
              className={itemClassName}
            >
              {content}
            </DropdownMenuItem>
          );

          return (
            <Fragment key={idx}>
              {idx > 0 && <DropdownMenuSeparator className="my-0" />}
              {item}
            </Fragment>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}