'use client'

import type { HTMLAttributes, ReactNode } from 'react'

import { Chip as HeroChip, CloseButton } from '@heroui/react'

type LegacyColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type LegacyVariant = 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'dot'

type ChipProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
  children: ReactNode
  color?: LegacyColor
  size?: 'sm' | 'md' | 'lg'
  variant?: LegacyVariant
  classNames?: {
    base?: string
    content?: string
    closeButton?: string
  }
  onClose?: () => void
}

function mapColor(color: LegacyColor): 'default' | 'accent' | 'success' | 'warning' | 'danger' {
  if (color === 'primary') return 'accent'
  if (color === 'secondary') return 'accent'

  return color
}

function mapVariant(variant: LegacyVariant): 'primary' | 'secondary' | 'tertiary' | 'soft' {
  if (variant === 'solid' || variant === 'shadow') return 'primary'
  if (variant === 'bordered' || variant === 'faded') return 'secondary'
  // HeroUI v2 `flat` / `light` were muted fills — map to v3 `soft`, not transparent `tertiary`
  // (transparent + soft-foreground on dark surfaces makes the label invisible).
  if (variant === 'flat' || variant === 'light') return 'soft'

  // `dot` (and any other legacy leftover) stays text-only.
  return 'tertiary'
}

export function Chip({ children, className, classNames, color = 'default', size, variant = 'flat', onClose, ...rest }: ChipProps) {
  return (
    <HeroChip
      className={`${variant === 'shadow' ? 'shadow-md' : ''} ${classNames?.base ?? ''} ${className ?? ''}`.trim()}
      color={mapColor(color)}
      size={size}
      variant={mapVariant(variant)}
      {...rest}
    >
      <HeroChip.Label className={classNames?.content}>{children}</HeroChip.Label>
      {onClose ? (
        <CloseButton
          aria-label="حذف"
          className={classNames?.closeButton}
          onPress={onClose}
        />
      ) : null}
    </HeroChip>
  )
}