/**
 * DashboardBadge
 *
 * Standardized badge component with consistent color variants for dashboard use.
 * Uses the BADGE_STYLES tokens from designTokens.
 *
 * @example
 * // Basic usage
 * <DashboardBadge variant="success">Active</DashboardBadge>
 *
 * @example
 * // With different colors
 * <DashboardBadge variant="blue">New</DashboardBadge>
 * <DashboardBadge variant="purple">Premium</DashboardBadge>
 * <DashboardBadge variant="yellow">Pending</DashboardBadge>
 *
 * @example
 * // Small size
 * <DashboardBadge variant="green" size="sm">✓</DashboardBadge>
 */

import React from "react";
import { cn } from "@/lib/utils";

// =============================================================================
// TYPES
// =============================================================================

export type BadgeVariant =
  | "default"
  | "blue"
  | "green"
  | "emerald"
  | "red"
  | "yellow"
  | "amber"
  | "orange"
  | "purple"
  | "violet"
  | "pink"
  | "indigo"
  | "cyan"
  | "teal"
  // Semantic variants
  | "success"
  | "warning"
  | "error"
  | "info";

export type BadgeSize = "sm" | "default" | "lg";

export interface DashboardBadgeProps {
  /** Color variant */
  variant?: BadgeVariant;
  /** Size variant */
  size?: BadgeSize;
  /** Additional className */
  className?: string;
  /** Badge content */
  children: React.ReactNode;
  /** Make the badge pill-shaped (more rounded) */
  pill?: boolean;
}

// =============================================================================
// COLOR VARIANTS
// =============================================================================

/**
 * Color classes for each variant
 * Format: background (light mode) / background (dark mode) / text (light) / text (dark)
 */
const VARIANT_CLASSES: Record<BadgeVariant, string> = {
  // Neutral
  default: "bg-muted text-muted-foreground",

  // Colors
  blue: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300",
  green: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300",
  emerald: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
  red: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300",
  yellow: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300",
  amber: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
  orange: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300",
  purple: "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300",
  violet: "bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300",
  pink: "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300",
  indigo: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300",
  cyan: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300",
  teal: "bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300",

  // Semantic (maps to colors)
  success: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
  warning: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
  error: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300",
  info: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300",
};

const SIZE_CLASSES: Record<BadgeSize, string> = {
  sm: "px-1.5 py-0.5 text-[10px]",
  default: "px-2.5 py-0.5 text-xs",
  lg: "px-3 py-1 text-sm",
};

// =============================================================================
// MAIN COMPONENT
// =============================================================================

export const DashboardBadge: React.FC<DashboardBadgeProps> = ({
  variant = "default",
  size = "default",
  className,
  children,
  pill = true,
}) => {
  const roundedClass = pill ? "rounded-full" : "rounded-md";

  return (
    <span
      className={cn(
        "inline-flex items-center font-medium",
        roundedClass,
        VARIANT_CLASSES[variant],
        SIZE_CLASSES[size],
        className
      )}
    >
      {children}
    </span>
  );
};

// =============================================================================
// STATUS BADGE (for common status patterns)
// =============================================================================

export type StatusType = "active" | "inactive" | "pending" | "completed" | "failed" | "cancelled";

const STATUS_CONFIG: Record<StatusType, { variant: BadgeVariant; label: string }> = {
  active: { variant: "success", label: "Active" },
  inactive: { variant: "default", label: "Inactive" },
  pending: { variant: "warning", label: "Pending" },
  completed: { variant: "success", label: "Completed" },
  failed: { variant: "error", label: "Failed" },
  cancelled: { variant: "default", label: "Cancelled" },
};

export interface StatusBadgeProps {
  status: StatusType;
  /** Override the default label */
  label?: string;
  /** Size variant */
  size?: BadgeSize;
  /** Additional className */
  className?: string;
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({
  status,
  label,
  size = "default",
  className,
}) => {
  const config = STATUS_CONFIG[status];

  return (
    <DashboardBadge variant={config.variant} size={size} className={className}>
      {label || config.label}
    </DashboardBadge>
  );
};

// =============================================================================
// METRIC BADGE (for showing numbers with context)
// =============================================================================

export interface MetricBadgeProps {
  /** The metric value */
  value: number;
  /** Suffix to show after value (e.g., "%", "K") */
  suffix?: string;
  /** Prefix to show before value (e.g., "+", "$") */
  prefix?: string;
  /** Color variant */
  variant?: BadgeVariant;
  /** Size variant */
  size?: BadgeSize;
  /** Additional className */
  className?: string;
}

export const MetricBadge: React.FC<MetricBadgeProps> = ({
  value,
  suffix = "",
  prefix = "",
  variant = "default",
  size = "default",
  className,
}) => {
  return (
    <DashboardBadge variant={variant} size={size} className={cn("tabular-nums", className)}>
      {prefix}{value.toLocaleString()}{suffix}
    </DashboardBadge>
  );
};

// =============================================================================
// TREND BADGE (for showing positive/negative changes)
// =============================================================================

export interface TrendBadgeProps {
  /** The trend value (positive or negative) */
  value: number;
  /** Whether higher is better (affects color) */
  moreIsBetter?: boolean;
  /** Show as percentage */
  asPercentage?: boolean;
  /** Size variant */
  size?: BadgeSize;
  /** Additional className */
  className?: string;
}

export const TrendBadge: React.FC<TrendBadgeProps> = ({
  value,
  moreIsBetter = true,
  asPercentage = true,
  size = "default",
  className,
}) => {
  const isPositive = value > 0;
  const isGood = isPositive === moreIsBetter;
  const variant: BadgeVariant = value === 0 ? "default" : isGood ? "success" : "error";

  const displayValue = asPercentage
    ? `${value > 0 ? "+" : ""}${value.toFixed(1)}%`
    : `${value > 0 ? "+" : ""}${value.toLocaleString()}`;

  return (
    <DashboardBadge variant={variant} size={size} className={cn("tabular-nums", className)}>
      {displayValue}
    </DashboardBadge>
  );
};

export default DashboardBadge;
