import { cn } from '@/lib/utils'

type SeriesType =
  | 'grfi'
  | 'investment'
  | 'pl'
  | 'spark'
  | 'inner-circle'
  | 'reset'
  | 'decision'
  | 'regeneration'
  | 'm2m'
  | 'backstage'

type PillSize = 'sm' | 'md' | 'lg'

interface SeriesPillProps {
  series: SeriesType | string
  children: React.ReactNode
  size?: PillSize
  className?: string
}

const seriesColors: Record<string, { bg: string; text: string }> = {
  grfi: { bg: 'bg-sand', text: 'text-espresso' },
  investment: { bg: 'bg-brass', text: 'text-soft-white' },
  pl: { bg: 'bg-bordeaux', text: 'text-soft-white' },
  spark: { bg: 'bg-rose', text: 'text-espresso' },
  'inner-circle': { bg: 'bg-gold', text: 'text-espresso' },
  reset: { bg: 'bg-sand', text: 'text-espresso' },
  decision: { bg: 'bg-sand', text: 'text-espresso' },
  regeneration: { bg: 'bg-sand', text: 'text-espresso' },
  m2m: { bg: 'bg-sand', text: 'text-espresso' },
  backstage: { bg: 'bg-warm-gray', text: 'text-espresso' },
}

const sizeClasses: Record<PillSize, string> = {
  sm: 'px-2 py-1 text-[10px]',
  md: 'px-3.5 py-1.5 text-[11px]',
  lg: 'px-6 py-2.5 text-[13px]',
}

export function SeriesPill({
  series,
  children,
  size = 'md',
  className,
}: SeriesPillProps) {
  const seriesKey = series.toLowerCase().replace(/\s+/g, '-')
  const colors = seriesColors[seriesKey] || seriesColors.grfi

  return (
    <span
      className={cn(
        'inline-flex items-center',
        sizeClasses[size],
        colors.bg,
        colors.text,
        'font-bold tracking-[0.08em] uppercase',
        'rounded-full',
        className
      )}
    >
      {children}
    </span>
  )
}

// Generic badge component for other use cases
interface BadgeProps {
  variant?: 'default' | 'new' | 'popular' | 'success' | 'warning' | 'error' | 'investment' | 'daily' | 'grfi'
  children: React.ReactNode
  className?: string
}

const badgeVariants: Record<string, string> = {
  default: 'bg-sand text-espresso',
  new: 'bg-brass text-soft-white',
  popular: 'bg-bordeaux text-soft-white',
  success: 'bg-success text-soft-white',
  warning: 'bg-warning text-espresso',
  error: 'bg-error text-soft-white',
  investment: 'bg-gold text-espresso',
  daily: 'bg-sand text-espresso',
  grfi: 'bg-rose text-espresso',
}

export function Badge({
  variant = 'default',
  children,
  className,
}: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center',
        'px-2.5 py-1',
        'text-xs font-semibold',
        'rounded-md',
        badgeVariants[variant],
        className
      )}
    >
      {children}
    </span>
  )
}