import { cn } from "@/lib/utils";
import { Badge } from "@/ui";
import { t } from "i18next";
import { RefreshCwIcon } from "lucide-react";
import { forwardRef } from "react";

export type QuoteStatusBadgeProps = {
  status: string;
  isEditable?: boolean;
  className?: string;
};

type QuoteStatus = "draft" | "ready" | "delivered" | "accepted" | "rejected" | "archived";

const statusColorConfig: Record<
  QuoteStatus,
  { color: string; bgColor: string; hoverColor: string; hoverBgColor: string }
> = {
  draft: {
    color: "text-gray-700",
    bgColor: "bg-gray-200",
    hoverColor: "hover:text-gray-900",
    hoverBgColor: "hover:bg-gray-300",
  },
  ready: {
    color: "text-blue-700",
    bgColor: "bg-blue-200",
    hoverColor: "hover:text-blue-900",
    hoverBgColor: "hover:bg-blue-300",
  },
  delivered: {
    color: "text-yellow-700",
    bgColor: "bg-yellow-200",
    hoverColor: "hover:text-yellow-900",
    hoverBgColor: "hover:bg-yellow-300",
  },
  accepted: {
    color: "text-green-700",
    bgColor: "bg-green-200",
    hoverColor: "hover:text-green-900",
    hoverBgColor: "hover:bg-green-300",
  },
  rejected: {
    color: "text-red-700",
    bgColor: "bg-red-200",
    hoverColor: "hover:text-red-900",
    hoverBgColor: "hover:bg-red-300",
  },
  archived: {
    color: "text-purple-700",
    bgColor: "bg-purple-200",
    hoverColor: "hover:text-purple-900",
    hoverBgColor: "hover:bg-purple-300",
  },
};

export const QuoteStatusBadge = forwardRef<HTMLDivElement, QuoteStatusBadgeProps>(
  ({ status, isEditable, className, ...props }, ref) => {
    return (
      <div ref={ref}>
        <Badge
          className={cn(
            statusColorConfig[status as QuoteStatus].bgColor,
            statusColorConfig[status as QuoteStatus].color,
            statusColorConfig[status as QuoteStatus].hoverBgColor,
            statusColorConfig[status as QuoteStatus].hoverColor,
            "transition-colors duration-200 cursor-pointer flex items-center group",
            className
          )}
          {...props}
        >
          {t(`quotes.status.${status}`)}
          {isEditable && (
            <RefreshCwIcon className='w-3 h-3 ml-2 transition-opacity opacity-0 group-hover:opacity-100' />
          )}
        </Badge>
      </div>
    );
  }
);
