import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const badgeVariants = cva('inline-flex items-center justify-center transition-all shrink-0', {
  variants: {
    variant: {
      // 数字徽章 - 显示具体数字
      number:
        'bg-important-normal rounded-full min-w-4 h-4 px-1 txt-numMonotype-xs text-txt-primary-normal',
      // 省略号徽章 - 显示99+
      ellipsis:
        'bg-important-normal rounded-full min-w-4 h-4 px-1 txt-numMonotype-xs text-txt-primary-normal',
      // 点状徽章 - 只显示红点
      dot: 'bg-important-normal rounded-full w-2 h-2',
      // 标签徽章 - 用于显示文字标签
      tag: 'bg-surface-element-normal backdrop-blur-sm rounded px-2 py-0.5 txt-label-s text-txt-primary-normal',
      // 状态徽章 - 用于在线状态等
      status: 'bg-positive-normal rounded-full w-3 h-3 border-2 border-surface-base-normal',
    },
    size: {
      small: '',
      medium: '',
      large: 'min-w-6 h-6 txt-label-s',
    },
  },
  compoundVariants: [
    {
      variant: 'number',
      size: 'large',
      class: 'min-w-6 h-6 px-2 txt-label-s',
    },
    {
      variant: 'ellipsis',
      size: 'large',
      class: 'min-w-6 h-6 px-2 txt-label-s',
    },
    {
      variant: 'dot',
      size: 'large',
      class: 'w-3 h-3',
    },
  ],
  defaultVariants: {
    variant: 'number',
    size: 'medium',
  },
})

interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
  asChild?: boolean
  count?: number
  maxCount?: number
  showZero?: boolean
  dot?: boolean
}

function Badge({
  className,
  variant,
  size,
  asChild = false,
  count = 0,
  maxCount = 99,
  showZero = false,
  dot = false,
  children,
  ...props
}: BadgeProps) {
  const Comp = asChild ? Slot : 'span'

  // 如果是点状模式，直接渲染点
  if (dot || variant === 'dot') {
    return (
      <Comp
        data-slot="badge"
        className={cn(badgeVariants({ variant: 'dot', size }), className)}
        {...props}
      />
    )
  }

  // 如果count为0且不显示0，则不渲染
  if (count === 0 && !showZero && !children) {
    return null
  }

  // 确定显示的内容
  let displayContent: React.ReactNode = children

  if (!children && typeof count === 'number') {
    if (count > maxCount) {
      // displayContent = `${maxCount}+`
      displayContent = <i className="iconfont icon-More" style={{ fontSize: 12 }} />
      variant = variant || 'ellipsis'
    } else {
      displayContent = count.toString()
      variant = variant || 'number'
    }
  }

  return (
    <Comp data-slot="badge" className={cn(badgeVariants({ variant, size }), className)} {...props}>
      {displayContent}
    </Comp>
  )
}

// 预设组件
const NumberBadge = React.forwardRef<
  HTMLSpanElement,
  Omit<BadgeProps, 'variant'> & { count: number }
>(({ count, maxCount = 99, ...props }, ref) => (
  <Badge ref={ref} variant="number" count={count} maxCount={maxCount} {...props} />
))
NumberBadge.displayName = 'NumberBadge'

const DotBadge = React.forwardRef<HTMLSpanElement, Omit<BadgeProps, 'variant' | 'count'>>(
  (props, ref) => <Badge ref={ref} variant="dot" {...props} />
)
DotBadge.displayName = 'DotBadge'

const TagBadge = React.forwardRef<HTMLSpanElement, Omit<BadgeProps, 'variant' | 'count'>>(
  ({ children, ...props }, ref) => (
    <Badge ref={ref} variant="tag" {...props}>
      {children}
    </Badge>
  )
)
TagBadge.displayName = 'TagBadge'

const StatusBadge = React.forwardRef<HTMLSpanElement, Omit<BadgeProps, 'variant' | 'count'>>(
  (props, ref) => <Badge ref={ref} variant="status" {...props} />
)
StatusBadge.displayName = 'StatusBadge'

export { Badge, NumberBadge, DotBadge, TagBadge, StatusBadge, badgeVariants, type BadgeProps }
