import { Chip, Tooltip } from '@mui/material'
import type { ReactElement } from 'react'
import { BADGE_COLORS } from '../../lib/ds'

export type BadgeSemanticVariant = keyof typeof BADGE_COLORS

export interface GenericBadgeProps {
  label: string
  /**
   * Semantic variant key from BADGE_COLORS (preferred).
   * Example: semanticVariant="confidenceHigh" instead of color="#1a7a4a"
   */
  semanticVariant?: BadgeSemanticVariant
  /**
   * Raw hex color — use only when no semantic variant fits.
   * Prefer semanticVariant to avoid hardcoded colors.
   */
  color?: string
  /** transparent: semi-opaque bg (color + 18% opacity) | solid: filled bg, white text */
  variant?: 'transparent' | 'solid'
  /** Adds a 1px border at color 25% opacity (transparent variant only) */
  showBorder?: boolean
  /** fontWeight 700 instead of 600 */
  bold?: boolean
  /** Optional lucide / MUI icon element — sized by the caller */
  icon?: ReactElement
  size?: 'small' | 'medium'
  /** Wraps the badge in a Tooltip */
  tooltip?: string
  ariaLabel?: string
}

export function GenericBadge({
  label,
  semanticVariant,
  color: colorProp,
  variant = 'transparent',
  showBorder = false,
  bold = false,
  icon,
  size = 'small',
  tooltip,
  ariaLabel,
}: GenericBadgeProps) {
  const color = semanticVariant ? BADGE_COLORS[semanticVariant] : (colorProp ?? '#64748b')

  const chip = (
    <Chip
      size={size}
      label={label}
      icon={icon}
      aria-label={ariaLabel}
      sx={{
        fontWeight: bold ? 700 : 600,
        fontSize: size === 'small' ? '0.7rem' : '0.8125rem',
        bgcolor: variant === 'solid' ? color : `${color}18`,
        color: variant === 'solid' ? 'white' : color,
        border: variant === 'transparent' && showBorder ? `1px solid ${color}40` : 'none',
        '& .MuiChip-icon': { ml: 0.5 },
      }}
    />
  )

  return tooltip ? <Tooltip title={tooltip} arrow>{chip}</Tooltip> : chip
}
