import React from 'react';
import { Tag } from 'antd';
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  MinusCircleOutlined,
  PauseCircleOutlined,
  QuestionCircleOutlined,
  SyncOutlined,
  WarningOutlined,
} from '@ant-design/icons';

type StatusType =
  | 'pending'
  | 'inspecting'
  | 'released'
  | 'abnormal'
  | 'idle'
  | 'running'
  | 'paused'
  | 'completed'
  | 'online'
  | 'offline';

interface StatusBadgeProps {
  status: StatusType;
  type?: 'badge' | 'tag';
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type = 'badge' }) => {
  const config = (() => {
    switch (status) {
      case 'pending':
        return { color: 'warning', text: '待查验', icon: <ClockCircleOutlined style={{ color: '#faad14' }} /> };
      case 'inspecting':
      case 'running':
        return { color: 'processing', text: '查验中', icon: <SyncOutlined style={{ color: '#1890ff' }} /> };
      case 'released':
      case 'completed':
        return { color: 'success', text: '已放行', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
      case 'abnormal':
        return { color: 'error', text: '异常', icon: <WarningOutlined style={{ color: '#ff4d4f' }} /> };
      case 'idle':
        return { color: 'default', text: '空闲', icon: <MinusCircleOutlined style={{ color: '#d9d9d9' }} /> };
      case 'paused':
        return { color: 'warning', text: '已暂停', icon: <PauseCircleOutlined style={{ color: '#faad14' }} /> };
      case 'online':
        return { color: 'success', text: '在线', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
      case 'offline':
        return { color: 'error', text: '离线', icon: <CloseCircleOutlined style={{ color: '#ff4d4f' }} /> };
      default:
        return { color: 'default', text: '未知', icon: <QuestionCircleOutlined style={{ color: '#d9d9d9' }} /> };
    }
  })();

  if (type === 'tag') {
    return <Tag color={config.color} icon={config.icon}>{config.text}</Tag>;
  }

  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      {config.icon}
      <span>{config.text}</span>
    </span>
  );
};