import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';

interface StatusBadgeProps {
  status: ReviewStatus;
  issueCount?: number;
  className?: string;
  size?: 'default' | 'sm' | 'lg';
  clickable?: boolean;
  onClick?: () => void;
}

/**
 * 文件评查状态标签组件
 * 根据评查状态显示不同样式的标签
 */
export function StatusBadge({ 
  status, 
  issueCount = 0, 
  className = '',
  size,
  clickable = false,
  onClick
}: StatusBadgeProps) {
  const statusMap: Record<ReviewStatus, string> = {
    [ReviewStatus.PASS]: 'success',
    [ReviewStatus.WARNING]: 'warning',
    [ReviewStatus.FAIL]: 'error',
    [ReviewStatus.PENDING]: 'processing'
  };
  
  const badgeType = statusMap[status] || 'default';
  const sizeClass = size ? `status-badge-${size}` : '';
  const clickableClass = clickable ? 'status-badge-clickable' : '';
  
  // 根据状态选择图标
  const getStatusIcon = () => {
    switch (status) {
      case ReviewStatus.PASS:
        return <i className="ri-checkbox-circle-line"></i>;
      case ReviewStatus.WARNING:
        return <i className="ri-alert-line"></i>;
      case ReviewStatus.FAIL:
        return <i className="ri-close-circle-line"></i>;
      case ReviewStatus.PENDING:
        return <i className="ri-time-line"></i>;
      default:
        return null;
    }
  };

  const handleClick = () => {
    if (clickable && onClick) {
      onClick();
    }
  };

  return (
    <span 
      className={`status-badge status-badge-${badgeType} status-badge-with-icon ${sizeClass} ${clickableClass} ${className}`}
      onClick={handleClick}
      role={clickable ? "button" : undefined}
      tabIndex={clickable ? 0 : undefined}
    >
      {getStatusIcon()}
      {REVIEW_STATUS_LABELS[status]}
      {issueCount > 0 && ` (${issueCount})`}
    </span>
  );
}