import * as React from "react"
import { Badge, type BadgeProps } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import { cva, type VariantProps } from "class-variance-authority"

const statusBadgeVariants = cva(
  "rounded-full px-3 py-1 font-medium flex items-center gap-2 w-fit border transition-all duration-200 hover:scale-105 active:scale-95 cursor-default hover:shadow-sm",
  {
    variants: {
      status: {
        success: "bg-green-200 bg-opacity-50 hover:bg-green-200/70 border-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800",
        warning: "bg-yellow-200 bg-opacity-50 hover:bg-yellow-200/70 border-yellow-500/20 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800",
        error: "bg-red-200 bg-opacity-50 hover:bg-red-200/70 border-red-500/20 text-red-700 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
        info: "bg-blue-200 bg-opacity-50 hover:bg-blue-200/70 border-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800",
        default: "bg-gray-200 bg-opacity-50 hover:bg-gray-200/70 border-gray-500/20 text-gray-700 dark:bg-gray-800/50 dark:text-gray-300 dark:border-gray-700",
      },
    },
  }
)

const dotVariants = cva("h-2 w-2 rounded-full shrink-0 animate-pulse", {
  variants: {
    status: {
      success: "bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]",
      warning: "bg-yellow-500 shadow-[0_0_8px_rgba(234,179,8,0.4)]",
      error: "bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]",
      info: "bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.4)]",
      default: "bg-gray-500 shadow-[0_0_8px_rgba(107,114,128,0.4)]",
    },
  },
})

export interface StatusBadgeProps extends Omit<BadgeProps, "variant">, VariantProps<typeof statusBadgeVariants> {
  dotClassName?: string
  variant?: BadgeProps["variant"]
}

/**
 * A reusable StatusBadge component that extends the base Badge.
 * It now supports status variants for consistent dashboard styling.
 */
export function StatusBadge({
  children,
  className,
  dotClassName,
  status,
  variant = "outline",
  ...props
}: StatusBadgeProps) {
  return (
    <Badge
      variant={variant}
      className={cn(
        status ? statusBadgeVariants({ status }) : "rounded-full px-3 py-1 font-medium flex items-center gap-2 w-fit",
        className
      )}
      {...props}
    >
      {(status || dotClassName) && (
        <span
          className={cn(
            status ? dotVariants({ status }) : "h-2 w-2 rounded-full shrink-0",
            dotClassName
          )}
          aria-hidden="true"
        />
      )}
      {children}
    </Badge>
  )
}

/**
 * ⚡ Optimization: Generic MappedStatusBadge
 * - Provides a standardized way to map raw status values to labels and variants.
 * - Reduces duplication across domain-specific status badge components.
 */
export const MappedStatusBadge = React.memo(
  <T extends string>({
    status,
    mapping,
    fallbackLabel = "Unbekannt",
  }: {
    status: T | string;
    mapping: Record<T, { label: string; status: StatusBadgeProps["status"] }>;
    fallbackLabel?: string;
  }) => {
    const { label, status: statusVariant } = (
      status && mapping[status as T] ? mapping[status as T] : null
    ) || {
      label: status || fallbackLabel,
      status: "default",
    };

    return <StatusBadge status={statusVariant}>{label}</StatusBadge>;
  }
);

MappedStatusBadge.displayName = "MappedStatusBadge";