frontend/src/components/console/StatusPill.tsx

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

/**
 * 控制台状态胶囊组件
 * 统一展示 enabled/disabled/error/warning/info/incomplete/loading 状态
 */

// 支持的状态类型
export type StatusVariant = 'enabled' | 'disabled' | 'error' | 'warning' | 'info' | 'incomplete' | 'loading' | 'success';

interface StatusPillProps {
  /** 状态类型 */
  status: StatusVariant;
  /** 显示文本，为空则使用状态默认文本 */
  label?: string;
  /** 是否显示状态点 */
  showDot?: boolean;
  /** 额外的 className */
  className?: string;
}

// 状态映射配置：每种状态的颜色和默认文本
const statusConfig: Record<StatusVariant, { dot: string; text: string; bg: string }> = {
  enabled: {
    dot: 'bg-console-status-enabled',
    text: '已启用',
    bg: 'bg-console-status-enabled-bg text-console-status-enabled',
  },
  disabled: {
    dot: 'bg-console-status-disabled',
    text: '已禁用',
    bg: 'bg-console-status-disabled-bg text-console-status-disabled',
  },
  error: {
    dot: 'bg-console-status-error',
    text: '错误',
    bg: 'bg-console-status-error-bg text-console-status-error',
  },
  warning: {
    dot: 'bg-console-status-warning',
    text: '警告',
    bg: 'bg-console-status-warning-bg text-console-status-warning',
  },
  info: {
    dot: 'bg-console-status-info',
    text: '信息',
    bg: 'bg-console-status-info-bg text-console-status-info',
  },
  incomplete: {
    dot: 'bg-console-status-warning',
    text: '不完整',
    bg: 'bg-console-status-warning-bg text-console-status-warning',
  },
  loading: {
    dot: 'bg-console-text-muted animate-pulse',
    text: '加载中',
    bg: 'bg-muted text-console-text-muted',
  },
  success: {
    dot: 'bg-console-status-enabled',
    text: '成功',
    bg: 'bg-console-status-enabled-bg text-console-status-enabled',
  },
};

/**
 * 状态胶囊组件
 * 用于控制台中统一展示各种状态
 */
export function StatusPill({
  status,
  label,
  showDot = true,
  className,
}: StatusPillProps) {
  const config = statusConfig[status] || statusConfig.info;
  const displayLabel = label || config.text;

  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap px-2 py-0.5 text-xs font-medium rounded-console-sm',
        config.bg,
        className
      )}
      role="status"
      aria-label={displayLabel}
    >
      {showDot && (
        <span
          className={cn(
            'w-1.5 h-1.5 rounded-full',
            config.dot
          )}
          aria-hidden="true"
        />
      )}
      {displayLabel}
    </span>
  );
}