import statusBadgeStyles from '~/styles/components/status-badge.css?url';

export type StatusType = 'pending' | 'processing' | 'pass' | 'warning' | 'fail' | string;

interface StatusBadgeProps {
  status: StatusType;
  text?: string;
  className?: string;
  showIcon?: boolean;
  customIcon?: string;
}

export function links() {
  return [{ rel: "stylesheet", href: statusBadgeStyles }];
}

/**
 * 状态徽章组件
 * 用于显示文档的处理状态，如待审核、审核中、通过等
 */
export function StatusBadge({ 
  status, 
  text, 
  className = '',
  showIcon = true,
  customIcon
}: StatusBadgeProps) {
  // 状态对应的图标
  const getStatusIcon = () => {
    // 如果提供了自定义图标，优先使用
    if (customIcon) return customIcon;
    
    const statusIconMap: Record<string, string> = {
      pending: 'ri-time-line',
      processing: 'ri-loader-4-line',
      pass: 'ri-checkbox-circle-line',
      warning: 'ri-alert-line',
      fail: 'ri-error-warning-line',
    };
    return statusIconMap[status] || '';
  };

  // 状态对应的文本
  const getStatusText = () => {
    if (text) return text;
    
    const statusTextMap: Record<string, string> = {
      pending: '待审核',
      processing: '审核中',
      pass: '通过',
      warning: '警告',
      fail: '不通过',
    };
    
    // 中英文映射，方便国际化
    const statusEnglishTextMap: Record<string, string> = {
      pending: 'Pending',
      processing: 'Processing',
      pass: 'Pass',
      warning: 'Warning',
      fail: 'Failed',
    };
    
    // 获取当前语言环境，这里默认使用中文
    const lang: string = 'zh';
    
    return lang === 'en' 
      ? (statusEnglishTextMap[status] || status)
      : (statusTextMap[status] || status);
  };

  // 获取状态对应的类名
  const getStatusClass = () => {
    return `status-badge status-${status}`;
  };

  return (
    <span className={`${getStatusClass()} ${className}`}>
      {showIcon && getStatusIcon() && <i className={`${getStatusIcon()} mr-1`}></i>}
      {getStatusText()}
    </span>
  );
}