import { type HTMLAttributes, forwardRef } from 'react'
import type { AccountStatus } from '../../types'

export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  status: AccountStatus | 'active' | 'inactive' | 'error'
  size?: 'sm' | 'md'
}

const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(
  ({ className = '', status, size = 'md', ...props }, ref) => {
    const getStatusConfig = (status: string) => {
      const configs: Record<string, { label: string; color: string }> = {
        pending: {
          label: '待检查',
          color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
        },
        checking: {
          label: '检查中',
          color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
        },
        active: {
          label: '正常',
          color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
        },
        banned: {
          label: '封禁',
          color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
        },
        token_expired: {
          label: '过期',
          color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
        },
        error: {
          label: '错误',
          color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
        },
        inactive: {
          label: '停用',
          color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
        },
      }
      return configs[status] || configs.error
    }

    const config = getStatusConfig(status)

    const sizeStyles = {
      sm: 'px-2 py-0.5 text-xs',
      md: 'px-2.5 py-1 text-xs',
    }

    return (
      <span
        ref={ref}
        className={`inline-flex items-center font-medium rounded-full ${config.color} ${sizeStyles[size]} ${className}`}
        {...props}
      >
        {config.label}
      </span>
    )
  }
)

StatusBadge.displayName = 'StatusBadge'

export default StatusBadge