Badge

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useState, type ReactNode } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { Cancel01Icon } from '@hugeicons/core-free-icons';

export type BadgeVariant = 'solid' | 'outline' | 'subtle';
export type BadgeColor = 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'neutral';
export type BadgeSize = 'sm' | 'md' | 'lg';

export interface BadgeProps {
  children: ReactNode;
  variant?: BadgeVariant;
  color?: BadgeColor;
  size?: BadgeSize;
  dismissible?: boolean;
  onDismiss?: () => void;
  icon?: ReactNode;
  dot?: boolean;
  className?: string;
}

const colorMap: Record<BadgeColor, Record<BadgeVariant, string>> = {
  primary: {
    solid: 'bg-brand-500 text-white',
    outline: 'bg-transparent border border-brand-500 text-brand-500',
    subtle: 'bg-brand-500/10 text-brand-500',
  },
  accent: {
    solid: 'bg-brand-300 text-white',
    outline: 'bg-transparent border border-brand-300 text-brand-400',
    subtle: 'bg-brand-300/10 text-brand-400',
  },
  success: {
    solid: 'bg-success-600 text-white dark:bg-success-500',
    outline: 'bg-transparent border border-success-500 text-success-600 dark:text-success-400',
    subtle: 'bg-success-50 text-success-700 dark:bg-success-500/10 dark:text-success-400',
  },
  warning: {
    solid: 'bg-warn-500 text-white',
    outline: 'bg-transparent border border-warn-500 text-warn-600 dark:text-warn-400',
    subtle: 'bg-warn-50 text-warn-700 dark:bg-warn-500/10 dark:text-warn-400',
  },
  error: {
    solid: 'bg-danger-600 text-white dark:bg-danger-500',
    outline: 'bg-transparent border border-danger-500 text-danger-600 dark:text-danger-400',
    subtle: 'bg-danger-50 text-danger-700 dark:bg-danger-500/10 dark:text-danger-400',
  },
  neutral: {
    solid: 'bg-neutral-500 text-white',
    outline: 'bg-transparent border border-(--border) text-(--text-muted)',
    subtle: 'bg-neutral-100 text-neutral-500 dark:bg-neutral-500/10 dark:text-neutral-400',
  },
};

const sizeStyles: Record<BadgeSize, string> = {
  sm: 'text-[10px] px-2 py-0.5 gap-1',
  md: 'text-[10px] px-2.5 py-0.5 gap-1.5',
  lg: 'text-xs px-3 py-1 gap-1.5',
};

const dotSizes: Record<BadgeSize, string> = {
  sm: 'w-1.5 h-1.5',
  md: 'w-2 h-2',
  lg: 'w-2.5 h-2.5',
};

const dotColors: Record<BadgeColor, string> = {
  primary: 'bg-brand-500',
  accent: 'bg-brand-300',
  success: 'bg-success-500',
  warning: 'bg-warn-500',
  error: 'bg-danger-500',
  neutral: 'bg-neutral-400',
};

export function Badge({
  children,
  variant = 'subtle',
  color = 'primary',
  size = 'md',
  dismissible = false,
  onDismiss,
  icon,
  dot = false,
  className = '',
}: BadgeProps) {
  const [visible, setVisible] = useState(true);

  const handleDismiss = () => {
    setVisible(false);
    onDismiss?.();
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.span
          initial={{ opacity: 0, scale: 0.85 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.85 }}
          transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}
          className={`inline-flex items-center font-medium rounded-lg whitespace-nowrap capitalize ${colorMap[color][variant]} ${sizeStyles[size]} ${className}`}
        >
          {dot && (
            <span aria-hidden="true" className={`rounded-full shrink-0 ${dotSizes[size]} ${variant === 'solid' ? 'bg-white/70' : dotColors[color]}`} />
          )}
          {icon && <span aria-hidden="true" className="shrink-0 [&>svg]:w-3.5 [&>svg]:h-3.5">{icon}</span>}
          {children}
          {dismissible && (
            <button
              type="button"
              onClick={handleDismiss}
              className="shrink-0 ml-0.5 rounded p-0.5 hover:bg-black/10 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-current"
              aria-label="Dismiss"
            >
              <HugeiconsIcon icon={Cancel01Icon} size={10} aria-hidden="true" />
            </button>
          )}
        </motion.span>
      )}
    </AnimatePresence>
  );
}

export interface BadgeGroupProps {
  children: ReactNode;
  gap?: 'sm' | 'md' | 'lg';
  className?: string;
}

const gapStyles: Record<string, string> = {
  sm: 'gap-1',
  md: 'gap-2',
  lg: 'gap-3',
};

export function BadgeGroup({ children, gap = 'md', className = '' }: BadgeGroupProps) {
  return (
    <div className={`flex flex-wrap items-center ${gapStyles[gap]} ${className}`}>
      {children}
    </div>
  );
}