import { forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/shared/utils";

const badgeVariants = cva(
  "inline-flex items-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        success: "bg-success-soft text-success hover:bg-success-soft/80",
        warning: "bg-warning-soft text-foreground hover:bg-warning-soft/80",
        error: "bg-danger-soft text-danger hover:bg-danger-soft/80",
        info: "bg-info-soft text-info hover:bg-info-soft/80",
        outline: "border border-border bg-background text-foreground hover:bg-muted",
        ghost: "text-foreground hover:bg-muted",
      },
      size: {
        sm: "px-2 py-0.5 text-xs rounded",
        default: "px-2.5 py-1 text-xs rounded-md",
        lg: "px-3 py-1.5 text-sm rounded-lg",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
  icon?: React.ReactNode;
  dot?: boolean;
  removable?: boolean;
  onRemove?: () => void;
}

const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant, size, icon, dot, removable, onRemove, children, ...props }, ref) => {
    return (
      <span ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props}>
        {dot && (
          <span
            className={cn(
              "mr-1.5 h-1.5 w-1.5 rounded-full",
              variant === "success" && "bg-success",
              variant === "warning" && "bg-warning",
              variant === "error" && "bg-danger",
              variant === "info" && "bg-info",
              variant === "default" && "bg-primary-foreground",
              variant === "secondary" && "bg-secondary-foreground",
              variant === "outline" && "bg-muted-foreground",
              variant === "ghost" && "bg-muted-foreground"
            )}
          />
        )}
        {icon && <span className="mr-1">{icon}</span>}
        {children}
        {removable && (
          <button
            type="button"
            onClick={onRemove}
            className={cn(
              "ml-1 inline-flex h-3 w-3 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-ring/20",
              variant === "default" && "text-primary-foreground hover:bg-primary-foreground/10",
              variant === "secondary" && "text-secondary-foreground hover:bg-black/10",
              (variant === "success" ||
                variant === "warning" ||
                variant === "error" ||
                variant === "info") &&
                "hover:bg-black/10"
            )}
            aria-label="Remove"
          >
            <svg className="h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
              <path
                d="M1.5 1.5l5 5m0-5l-5 5"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
            </svg>
          </button>
        )}
      </span>
    );
  }
);
Badge.displayName = "Badge";

export { Badge, badgeVariants };
export type { BadgeProps };
