'use client'

import { ReactNode } from 'react'
import { cn } from '@/lib/utils'
import * as PhosphorIcons from '@phosphor-icons/react'

// Helper to get Phosphor icon component from name
function getIcon(iconName?: string): React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | null {
  if (!iconName) return null
  
  // Convert kebab-case to PascalCase for Phosphor icons
  const pascalCase = iconName
    .split('-')
    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
    .join('')
  
  const IconComponent = (PhosphorIcons as Record<string, unknown>)[pascalCase] as React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | undefined
  return IconComponent || null
}

type BadgeColor = 
  | 'gray' 
  | 'blue' 
  | 'green' 
  | 'yellow' 
  | 'orange' 
  | 'red' 
  | 'purple' 
  | 'white' 
  | 'surface' 
  | 'white-destructive' 
  | 'surface-destructive'

type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
type BadgeShape = 'rounded' | 'pill'

interface BadgeProps {
  children: ReactNode
  color?: BadgeColor
  size?: BadgeSize
  shape?: BadgeShape
  icon?: string
  stroke?: boolean
  disabled?: boolean
  className?: string
}

// Color variants - filled background
const colorVariants: Record<BadgeColor, string> = {
  gray: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300',
  green: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300',
  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300',
  orange: 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300',
  red: 'bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300',
  purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
  white: 'bg-white text-gray-900 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700',
  surface: 'bg-muted text-foreground',
  'white-destructive': 'bg-white text-red-600 border border-red-200 dark:bg-gray-900 dark:text-red-400 dark:border-red-800',
  'surface-destructive': 'bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-400',
}

// Color variants - stroke/outline
const strokeVariants: Record<BadgeColor, string> = {
  gray: 'border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300',
  blue: 'border border-blue-300 text-blue-700 dark:border-blue-600 dark:text-blue-300',
  green: 'border border-green-300 text-green-700 dark:border-green-600 dark:text-green-300',
  yellow: 'border border-yellow-300 text-yellow-700 dark:border-yellow-600 dark:text-yellow-300',
  orange: 'border border-orange-300 text-orange-700 dark:border-orange-600 dark:text-orange-300',
  red: 'border border-red-300 text-red-700 dark:border-red-600 dark:text-red-300',
  purple: 'border border-purple-300 text-purple-700 dark:border-purple-600 dark:text-purple-300',
  white: 'border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300',
  surface: 'border border-border text-foreground',
  'white-destructive': 'border border-red-300 text-red-600 dark:border-red-600 dark:text-red-400',
  'surface-destructive': 'border border-red-300 text-red-600 dark:border-red-600 dark:text-red-400',
}

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

// Icon size variants
const iconSizeVariants: Record<BadgeSize, string> = {
  xs: 'h-2.5 w-2.5',
  sm: 'h-3 w-3',
  md: 'h-3.5 w-3.5',
  lg: 'h-4 w-4',
}

// Shape variants
const shapeVariants: Record<BadgeShape, string> = {
  rounded: 'rounded-md',
  pill: 'rounded-full',
}

export function Badge({
  children,
  color = 'gray',
  size = 'md',
  shape = 'rounded',
  icon,
  stroke = false,
  disabled = false,
  className,
}: BadgeProps) {
  const IconComponent = getIcon(icon)
  
  return (
    <span
      className={cn(
        'inline-flex items-center font-medium whitespace-nowrap',
        sizeVariants[size],
        shapeVariants[shape],
        stroke ? strokeVariants[color] : colorVariants[color],
        disabled && 'opacity-50 cursor-not-allowed',
        className
      )}
    >
      {IconComponent && (
        <IconComponent 
          className={cn(iconSizeVariants[size], 'shrink-0')} 
          weight="bold" 
        />
      )}
      {children}
    </span>
  )
}
