/**
 * [FE-AIAUTO-003] 演进阶段展示组件
 * 展示自动化等级的演进阶段和能力说明
 */

import React from 'react';
import {
  Card,
  Row,
  Col,
  Steps,
  Tag,
  Typography,
  Space,
  Badge,
  Tooltip,
  Descriptions,
  Progress,
} from 'antd';
import {
  RobotOutlined,
  UserOutlined,
  ThunderboltOutlined,
  SafetyOutlined,
  CheckCircleOutlined,
  LockOutlined,
} from '@ant-design/icons';
import { AutomationLevel, LEVEL_CAPABILITIES, RiskLevel } from '@/services/autoExecutionDataSource';

const { Title, Text, Paragraph } = Typography;

const RISK_LEVEL_COLORS: Record<RiskLevel, string> = {
  LOW: 'green',
  MEDIUM: 'orange',
  HIGH: 'red',
  CRITICAL: 'purple',
};

const LEVEL_ICONS: Record<AutomationLevel, React.ReactNode> = {
  L1: <UserOutlined />,
  L2: <RobotOutlined />,
  L3: <ThunderboltOutlined />,
  L4: <SafetyOutlined />,
};

const LEVEL_DESCRIPTIONS: Record<AutomationLevel, {
  title: string;
  subtitle: string;
  features: string[];
  requirements: string[];
}> = {
  L1: {
    title: '建议模式',
    subtitle: '所有操作需人工确认',
    features: [
      'AI仅提供建议',
      '所有决策需人工审核',
      '适合新模块或高风险场景',
      '完整的操作日志记录',
    ],
    requirements: [
      '无需前置条件',
      '默认初始等级',
    ],
  },
  L2: {
    title: '辅助模式',
    subtitle: '低风险操作可自动执行',
    features: [
      '低风险操作自动执行',
      '中高风险需人工审核',
      '支持金额限制',
      '自动回滚机制',
    ],
    requirements: [
      '执行次数 ≥ 100次',
      '成功率 ≥ 95%',
      '平均置信度 ≥ 80%',
    ],
  },
  L3: {
    title: '自动模式',
    subtitle: '大部分操作可自动执行',
    features: [
      '大部分操作自动执行',
      '仅高风险需审核',
      '支持更高金额限制',
      '智能异常检测',
    ],
    requirements: [
      'L2等级运行 ≥ 7天',
      '执行次数 ≥ 500次',
      '成功率 ≥ 97%',
    ],
  },
  L4: {
    title: '全自主模式',
    subtitle: '完全自动化运行',
    features: [
      '全自动化执行',
      '包含关键操作',
      '实时监控告警',
      '智能风险控制',
    ],
    requirements: [
      'L3等级运行 ≥ 30天',
      '执行次数 ≥ 2000次',
      '成功率 ≥ 99%',
      '管理员审批',
    ],
  },
};

interface EvolutionStageProps {
  currentLevel?: AutomationLevel;
  onLevelClick?: (level: AutomationLevel) => void;
}

const EvolutionStage: React.FC<EvolutionStageProps> = ({
  currentLevel = 'L1',
  onLevelClick,
}) => {
  const levels: AutomationLevel[] = ['L1', 'L2', 'L3', 'L4'];
  const currentIndex = levels.indexOf(currentLevel);

  return (
    <Card title="自动化等级演进路线" className="evolution-stage-card">
      <Steps
        current={currentIndex}
        size="small"
        items={levels.map((level, index) => {
          const capability = LEVEL_CAPABILITIES[level];
          const desc = LEVEL_DESCRIPTIONS[level];
          const isActive = index <= currentIndex;
          const isLocked = index > currentIndex + 1;

          return {
            title: (
              <Space>
                <Tag color={isActive ? 'processing' : 'default'}>{level}</Tag>
                {isLocked && <LockOutlined style={{ color: '#999' }} />}
              </Space>
            ),
            description: desc.title,
            icon: LEVEL_ICONS[level],
            status: isActive ? 'finish' : 'wait',
          };
        })}
      />

      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        {levels.map((level, index) => {
          const capability = LEVEL_CAPABILITIES[level];
          const desc = LEVEL_DESCRIPTIONS[level];
          const isActive = index <= currentIndex;
          const isCurrent = index === currentIndex;

          return (
            <Col span={6} key={level}>
              <Card
                size="small"
                hoverable={isActive}
                onClick={() => isActive && onLevelClick?.(level)}
                style={{
                  opacity: isActive ? 1 : 0.6,
                  border: isCurrent ? '2px solid #1890ff' : undefined,
                }}
              >
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Space>
                    {LEVEL_ICONS[level]}
                    <Text strong>{level}</Text>
                    <Tag color={isCurrent ? 'blue' : 'default'}>{desc.title}</Tag>
                  </Space>
                  
                  <Text type="secondary" style={{ fontSize: 12 }}>
                    {desc.subtitle}
                  </Text>

                  <Descriptions column={1} size="small">
                    <Descriptions.Item label="最大风险等级">
                      <Tag color={RISK_LEVEL_COLORS[capability.max_risk_level]}>
                        {capability.max_risk_level}
                      </Tag>
                    </Descriptions.Item>
                    <Descriptions.Item label="金额倍数">
                      {capability.max_amount_multiplier}x
                    </Descriptions.Item>
                    <Descriptions.Item label="需审批">
                      {capability.requires_approval ? (
                        <CheckCircleOutlined style={{ color: '#52c41a' }} />
                      ) : (
                        <Text type="secondary">否</Text>
                      )}
                    </Descriptions.Item>
                  </Descriptions>

                  {index > 0 && (
                    <>
                      <Text type="secondary" style={{ fontSize: 11 }}>升级条件:</Text>
                      <ul style={{ margin: 0, paddingLeft: 16, fontSize: 11 }}>
                        {desc.requirements.map((req, i) => (
                          <li key={i}>{req}</li>
                        ))}
                      </ul>
                    </>
                  )}
                </Space>
              </Card>
            </Col>
          );
        })}
      </Row>

      <Card size="small" style={{ marginTop: 16, background: '#fafafa' }}>
        <Title level={5}>等级能力对比</Title>
        <Row gutter={16}>
          <Col span={6}>
            <Text strong>风险承受能力</Text>
            <Progress
              percent={(currentIndex + 1) * 25}
              format={() => `${['LOW', 'MEDIUM', 'HIGH', 'CRITICAL'][currentIndex]}`}
              strokeColor={{
                '0%': '#52c41a',
                '50%': '#faad14',
                '100%': '#f5222d',
              }}
            />
          </Col>
          <Col span={6}>
            <Text strong>自动化程度</Text>
            <Progress
              percent={(currentIndex + 1) * 25}
              format={() => `${(currentIndex + 1) * 25}%`}
              strokeColor="#1890ff"
            />
          </Col>
          <Col span={6}>
            <Text strong>金额限制倍数</Text>
            <Progress
              percent={Math.min(LEVEL_CAPABILITIES[currentLevel].max_amount_multiplier * 20, 100)}
              format={() => `${LEVEL_CAPABILITIES[currentLevel].max_amount_multiplier}x`}
              strokeColor="#722ed1"
            />
          </Col>
          <Col span={6}>
            <Text strong>人工干预需求</Text>
            <Progress
              percent={100 - (currentIndex * 30)}
              format={() => currentIndex === 0 ? '100%' : currentIndex === 1 ? '70%' : currentIndex === 2 ? '40%' : '10%'}
              strokeColor="#13c2c2"
            />
          </Col>
        </Row>
      </Card>
    </Card>
  );
};

export default EvolutionStage;
