/**
 * 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" | "purple" | "indigo" | "pink" | "teal" | "cyan" | "blue";
type BadgeColor = "success" | "warning" | "error" | "danger" | "info" | "primary" | "brand" | "light" | "neutral" | "purple" | "indigo" | "pink" | "teal" | "cyan" | "blue";

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-700 dark:bg-brand-500/15 dark:text-brand-400",
    outline:
      "text-brand-700 ring-1 ring-brand-200 dark:ring-brand-500/30 dark:text-brand-400",
  },
  success: {
    solid: "bg-success-500 text-white",
    soft: "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400",
    outline:
      "text-success-700 ring-1 ring-success-200 dark:ring-success-500/30 dark:text-success-400",
  },
  warning: {
    solid: "bg-warning-500 text-white",
    soft: "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400",
    outline:
      "text-warning-700 ring-1 ring-warning-200 dark:ring-warning-500/30 dark:text-warning-400",
  },
  danger: {
    solid: "bg-error-500 text-white",
    soft: "bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-400",
    outline:
      "text-error-700 ring-1 ring-error-200 dark:ring-error-500/30 dark:text-error-400",
  },
  info: {
    solid: "bg-blue-light-500 text-white",
    soft: "bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400",
    outline:
      "text-blue-light-700 ring-1 ring-blue-light-200 dark:ring-blue-light-500/30 dark:text-blue-light-400",
  },
  neutral: {
    solid: "bg-gray-800 text-white",
    soft: "bg-gray-100 text-gray-800 dark:bg-white/5 dark:text-white/90",
    outline:
      "text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90",
  },
  purple: {
    solid: "bg-purple-600 text-white",
    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
    outline:
      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
  },
  indigo: {
    solid: "bg-indigo-600 text-white",
    soft: "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400",
    outline:
      "text-indigo-700 ring-1 ring-indigo-200 dark:ring-indigo-500/30 dark:text-indigo-400",
  },
  pink: {
    solid: "bg-pink-600 text-white",
    soft: "bg-pink-50 text-pink-700 dark:bg-pink-500/15 dark:text-pink-400",
    outline:
      "text-pink-700 ring-1 ring-pink-200 dark:ring-pink-500/30 dark:text-pink-400",
  },
  teal: {
    solid: "bg-teal-600 text-white",
    soft: "bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400",
    outline:
      "text-teal-700 ring-1 ring-teal-200 dark:ring-teal-500/30 dark:text-teal-400",
  },
  cyan: {
    solid: "bg-cyan-600 text-white",
    soft: "bg-cyan-50 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400",
    outline:
      "text-cyan-700 ring-1 ring-cyan-200 dark:ring-cyan-500/30 dark:text-cyan-400",
  },
  blue: {
    solid: "bg-blue-600 text-white",
    soft: "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
    outline:
      "text-blue-700 ring-1 ring-blue-200 dark:ring-blue-500/30 dark:text-blue-400",
  },
};

const sizeClasses: Record<BadgeSize, string> = {
  xs: "min-h-[20px] px-2.5 py-1 text-[11px] leading-[1.4]",
  sm: "min-h-[24px] px-3 py-1 text-xs leading-[1.4]",
  md: "min-h-[28px] px-3.5 py-1.5 text-sm leading-[1.4]",
};

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",
      "purple": "purple",
      "indigo": "indigo",
      "pink": "pink",
      "teal": "teal",
      "cyan": "cyan",
      "blue": "blue",
    };
    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 font-normal",
        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;
