import React, { forwardRef, HTMLAttributes } from 'react';
import { clsx } from 'clsx';
import { AlertTriangle, AlertCircle, Info } from 'lucide-react';

export type SeverityLevel = 'high' | 'medium' | 'low';

export interface SeverityBadgeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
  /**
   * Severity level determining color and icon
   * @default 'medium'
   */
  severity: SeverityLevel;

  /**
   * Count to display
   */
  count: number;

  /**
   * Label text to display
   * @default Auto-generated from severity ('ALTO', 'MEDIO', 'BAJO')
   */
  label?: string;

  /**
   * Size variant
   * @default 'md'
   */
  size?: 'sm' | 'md' | 'lg';

  /**
   * Whether to show the icon
   * @default true
   */
  showIcon?: boolean;
}

/**
 * SeverityBadge - Displays alert severity with icon, count, and label
 *
 * Matches the reference design showing badges like "9 ALTO" and "19 MEDIO"
 *
 * Features:
 * - Severity-based color coding (high=red, medium=yellow, low=blue)
 * - Icon + count + label layout
 * - Consistent sizing and spacing
 * - Accessible with proper ARIA labels
 * - Theme-aware with CSS custom properties
 *
 * @example
 * ```tsx
 * <SeverityBadge severity="high" count={9} />
 * <SeverityBadge severity="medium" count={19} />
 * <SeverityBadge severity="low" count={3} label="BAJO" />
 * ```
 */
export const SeverityBadge = forwardRef<HTMLDivElement, SeverityBadgeProps>(({
  severity,
  count,
  label,
  size = 'md',
  showIcon = true,
  className,
  ...props
}, ref) => {
  // Default labels based on severity
  const defaultLabels: Record<SeverityLevel, string> = {
    high: 'ALTO',
    medium: 'MEDIO',
    low: 'BAJO',
  };

  const displayLabel = label || defaultLabels[severity];

  // Icons for each severity level
  const severityIcons: Record<SeverityLevel, React.ElementType> = {
    high: AlertTriangle,
    medium: AlertCircle,
    low: Info,
  };

  const Icon = severityIcons[severity];

  // Base classes
  const baseClasses = [
    'inline-flex items-center',
    'rounded-full',
    'font-semibold',
    'border-2',
    'transition-all duration-200 ease-in-out',
  ];

  // Severity-specific classes using CSS custom properties
  const severityClasses = {
    high: [
      'bg-[var(--color-error-100)]',
      'text-[var(--color-error-700)]',
      'border-[var(--color-error-300)]',
    ],
    medium: [
      'bg-[var(--color-warning-100)]',
      'text-[var(--color-warning-700)]',
      'border-[var(--color-warning-300)]',
    ],
    low: [
      'bg-[var(--color-info-100)]',
      'text-[var(--color-info-700)]',
      'border-[var(--color-info-300)]',
    ],
  };

  // Size-specific classes
  const sizeClasses = {
    sm: {
      container: 'gap-1.5 px-2.5 py-1',
      text: 'text-xs',
      icon: 'w-3.5 h-3.5',
    },
    md: {
      container: 'gap-2 px-3 py-1.5',
      text: 'text-sm',
      icon: 'w-4 h-4',
    },
    lg: {
      container: 'gap-2.5 px-4 py-2',
      text: 'text-base',
      icon: 'w-5 h-5',
    },
  };

  const classes = clsx(
    baseClasses,
    severityClasses[severity],
    sizeClasses[size].container,
    className
  );

  // Accessibility label
  const ariaLabel = `${count} ${displayLabel.toLowerCase()} severity alert${count !== 1 ? 's' : ''}`;

  return (
    <div
      ref={ref}
      className={classes}
      role="status"
      aria-label={ariaLabel}
      {...props}
    >
      {showIcon && (
        <Icon
          className={clsx('flex-shrink-0', sizeClasses[size].icon)}
          aria-hidden="true"
        />
      )}

      <span className={clsx('font-bold tabular-nums', sizeClasses[size].text)}>
        {count}
      </span>

      <span className={clsx('uppercase tracking-wide', sizeClasses[size].text)}>
        {displayLabel}
      </span>
    </div>
  );
});

SeverityBadge.displayName = 'SeverityBadge';

export default SeverityBadge;
