import { Badge } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { forwardRef } from "react";
import { useTranslation } from "../i18n";

export type CustomerInvoiceStatus = "draft" | "issued" | "sent" | "received" | "rejected";

export type CustomerInvoiceStatusBadgeProps = {
  status: string; // permitir cualquier valor
  className?: string;
};

const statusColorConfig: Record<CustomerInvoiceStatus, { badge: string; dot: string }> = {
  draft: {
    badge:
      "bg-gray-600/10 dark:bg-gray-600/20 hover:bg-gray-600/10 text-gray-500 border-gray-600/60",
    dot: "bg-gray-500",
  },
  issued: {
    badge:
      "bg-amber-600/10 dark:bg-amber-600/20 hover:bg-amber-600/10 text-amber-500 border-amber-600/60",
    dot: "bg-amber-500",
  },
  sent: {
    badge:
      "bg-cyan-600/10 dark:bg-cyan-600/20 hover:bg-cyan-600/10 text-cyan-500 border-cyan-600/60 shadow-none rounded-full",
    dot: "bg-cyan-500",
  },
  received: {
    badge:
      "bg-emerald-600/10 dark:bg-emerald-600/20 hover:bg-emerald-600/10 text-emerald-500 border-emerald-600/60",
    dot: "bg-emerald-500",
  },
  rejected: {
    badge: "bg-red-600/10 dark:bg-red-600/20 hover:bg-red-600/10 text-red-500 border-red-600/60",
    dot: "bg-red-500",
  },
};

export const CustomerInvoiceStatusBadge = forwardRef<
  HTMLDivElement,
  CustomerInvoiceStatusBadgeProps
>(({ status, className, ...props }, ref) => {
  const { t } = useTranslation();
  const normalizedStatus = status.toLowerCase() as CustomerInvoiceStatus;
  const config = statusColorConfig[normalizedStatus];
  const commonClassName = "transition-colors duration-200 cursor-pointer shadow-none rounded-full";

  if (!config) {
    return (
      <Badge ref={ref} className={cn(commonClassName, className)} {...props}>
        {status}
      </Badge>
    );
  }

  return (
    <Badge className={cn(commonClassName, config.badge, className)} {...props}>
      <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />
      {t(`catalog.status.${status}`)}
    </Badge>
  );
});

CustomerInvoiceStatusBadge.displayName = "CustomerInvoiceStatusBadge";
