/**
 * Badge Component
 *
 * 🔒 STYLE LOCKED - See DESIGN_SYSTEM.md for available colors and variants.
 * Do not modify colors or add new ones without updating DESIGN_SYSTEM.md first.
 */
import clsx from "clsx";

type BadgeVariant = "solid" | "soft" | "outline" | "light";
type BadgeSize = "xs" | "sm" | "md";
type BadgeTone = "brand" | "success" | "warning" | "danger" | "info" | "neutral";
type BadgeColor = "success" | "warning" | "error" | "danger" | "info" | "primary" | "brand" | "light" | "neutral";

interface BadgeProps {
  variant?: BadgeVariant; // Visual treatment (light maps to soft)
  size?: BadgeSize; // Badge size
  tone?: BadgeTone; // Badge color tone
  color?: BadgeColor; // Alias for tone (for backward compatibility)
  startIcon?: React.ReactNode; // Icon at the start
  endIcon?: React.ReactNode; // Icon at the end
  children: React.ReactNode; // Badge content
  className?: string; // Additional classes
}

const toneStyles: Record<
  BadgeTone,
  {
    solid: string;
    soft: string;
    outline: string;
  }
> = {
  brand: {
    solid: "bg-brand-500 text-white",
    soft: "bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-300",
    outline:
      "text-brand-600 ring-1 ring-brand-200 dark:ring-brand-500/30 dark:text-brand-300",
  },
  success: {
    solid: "bg-success-500 text-white",
    soft: "bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-300",
    outline:
      "text-success-600 ring-1 ring-success-200 dark:ring-success-500/30 dark:text-success-300",
  },
  warning: {
    solid: "bg-warning-500 text-white",
    soft: "bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-300",
    outline:
      "text-warning-600 ring-1 ring-warning-200 dark:ring-warning-500/30 dark:text-warning-300",
  },
  danger: {
    solid: "bg-error-500 text-white",
    soft: "bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-300",
    outline:
      "text-error-600 ring-1 ring-error-200 dark:ring-error-500/30 dark:text-error-300",
  },
  info: {
    solid: "bg-blue-light-500 text-white",
    soft: "bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-300",
    outline:
      "text-blue-light-600 ring-1 ring-blue-light-200 dark:ring-blue-light-500/30 dark:text-blue-light-300",
  },
  neutral: {
    solid: "bg-gray-800 text-white",
    soft: "bg-gray-100 text-gray-700 dark:bg-white/5 dark:text-white/80",
    outline:
      "text-gray-700 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/80",
  },
};

const sizeClasses: Record<BadgeSize, string> = {
  xs: "h-5 px-2 text-[11px]",
  sm: "h-6 px-2.5 text-xs",
  md: "h-7 px-3 text-sm",
};

const Badge: React.FC<BadgeProps> = ({
  variant = "soft",
  tone,
  color,
  size = "sm",
  startIcon,
  endIcon,
  children,
  className = "",
}) => {
  // Map color prop to tone (for backward compatibility)
  const resolvedTone: BadgeTone = tone || (() => {
    if (!color) return "brand";
    // Map color values to tone values
    const colorToToneMap: Record<string, BadgeTone> = {
      "success": "success",
      "warning": "warning",
      "error": "danger",
      "danger": "danger",
      "info": "info",
      "primary": "brand",
      "brand": "brand",
      "light": "neutral",
      "neutral": "neutral",
    };
    return colorToToneMap[color] || "brand";
  })();

  // Map variant "light" to "soft" (for backward compatibility)
  const resolvedVariant: "solid" | "soft" | "outline" = variant === "light" ? "soft" : variant;

  const toneClass = toneStyles[resolvedTone][resolvedVariant];

  return (
    <span
      className={clsx(
        "inline-flex items-center justify-center gap-1 rounded-full font-medium uppercase tracking-wide",
        sizeClasses[size],
        toneClass,
        className,
      )}
    >
      {startIcon && <span className="flex items-center">{startIcon}</span>}
      {children}
      {endIcon && <span className="flex items-center">{endIcon}</span>}
    </span>
  );
};

export default Badge;
