import { Card, Collapse, Space, Typography, Tag, Alert, Empty, List, Divider } from 'antd';
import {
  ExperimentOutlined,
  WarningOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import type { MethodologyReview as MethodologyReviewType, MethodologyPart, MethodologyIssue } from '../../api/reviewApi';
import ScoreCard from './ScoreCard';

const { Title, Text, Paragraph } = Typography;
const { Panel } = Collapse;

interface MethodologyReviewProps {
  data: MethodologyReviewType;
}

/**
 * 方法学评估详情组件
 * 展示3个部分的方法学评估结果
 */
const MethodologyReview = ({ data }: MethodologyReviewProps) => {
  if (!data) {
    return <Empty description="暂无评估数据" />;
  }

  // 获取严重程度显示
  const getSeverityDisplay = (severity: 'major' | 'minor') => {
    const config = {
      major: {
        color: 'error' as const,
        text: '严重',
      },
      minor: {
        color: 'warning' as const,
        text: '轻微',
      },
    };
    return config[severity];
  };

  // 统计数据
  const stats = {
    totalParts: data.parts.length,
    totalIssues: data.parts.reduce((sum, part) => sum + part.issues.length, 0),
    majorIssues: data.parts.reduce((sum, part) => {
      return sum + part.issues.filter((issue) => issue.severity === 'major').length;
    }, 0),
    minorIssues: data.parts.reduce((sum, part) => {
      return sum + part.issues.filter((issue) => issue.severity === 'minor').length;
    }, 0),
  };

  return (
    <Card title={
      <Space>
        <ExperimentOutlined />
        <span>方法学评估详情</span>
      </Space>
    }>
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 总体评分 */}
        <ScoreCard
          title="总体评分"
          score={data.overall_score}
          description="方法学综合评分"
          size="large"
        />

        {/* 总结 */}
        <Alert
          message="评估总结"
          description={data.summary}
          type="info"
          showIcon
        />

        {/* 统计信息 */}
        <Card size="small">
          <Space size="large">
            <div>
              <Text type="secondary">评估部分：</Text>
              <Text strong style={{ fontSize: 16, marginLeft: 8 }}>{stats.totalParts}</Text>
            </div>
            <Divider type="vertical" />
            <div>
              <Text type="secondary">发现问题：</Text>
              <Text strong style={{ fontSize: 16, marginLeft: 8 }}>{stats.totalIssues}</Text>
            </div>
            <Divider type="vertical" />
            <div>
              <Text type="danger">严重：</Text>
              <Text strong style={{ fontSize: 16, marginLeft: 8, color: '#f5222d' }}>{stats.majorIssues}</Text>
            </div>
            <Divider type="vertical" />
            <div>
              <Text type="warning">轻微：</Text>
              <Text strong style={{ fontSize: 16, marginLeft: 8, color: '#faad14' }}>{stats.minorIssues}</Text>
            </div>
          </Space>
        </Card>

        {/* 详细评估结果（3个部分） */}
        <Card title="详细评估（3个部分）" size="small">
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {data.parts.map((part: MethodologyPart, partIndex: number) => (
              <Card
                key={partIndex}
                title={
                  <Space>
                    <Text strong style={{ fontSize: 16 }}>{part.part}</Text>
                    <Tag color="blue">{part.score}分</Tag>
                    <Tag color={part.issues.length === 0 ? 'success' : 'warning'}>
                      {part.issues.length}个问题
                    </Tag>
                  </Space>
                }
                size="small"
              >
                {part.issues.length === 0 ? (
                  <Alert
                    message="该部分检查通过，未发现问题"
                    type="success"
                    showIcon
                  />
                ) : (
                  <Collapse defaultActiveKey={part.issues.map((_, issueIndex) => issueIndex.toString())}>
                    {part.issues.map((issue: MethodologyIssue, issueIndex: number) => {
                      const severityDisplay = getSeverityDisplay(issue.severity);
                      
                      return (
                        <Panel
                          header={
                            <Space>
                              <Tag color={severityDisplay.color}>
                                {severityDisplay.text}
                              </Tag>
                              <Text strong>{issue.type}</Text>
                            </Space>
                          }
                          key={issueIndex}
                        >
                          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                            {/* 问题描述 */}
                            <div>
                              <Text strong style={{ color: '#f5222d' }}>
                                <WarningOutlined style={{ marginRight: 8 }} />
                                问题描述：
                              </Text>
                              <Paragraph style={{ marginTop: 8, marginBottom: 0, paddingLeft: 24 }}>
                                {issue.description}
                              </Paragraph>
                            </div>

                            {/* 位置 */}
                            <div>
                              <Text strong style={{ color: '#1890ff' }}>
                                <InfoCircleOutlined style={{ marginRight: 8 }} />
                                问题位置：
                              </Text>
                              <Paragraph style={{ marginTop: 8, marginBottom: 0, paddingLeft: 24 }}>
                                {issue.location}
                              </Paragraph>
                            </div>

                            {/* 改进建议 */}
                            <div>
                              <Text strong style={{ color: '#52c41a' }}>
                                改进建议：
                              </Text>
                              <Alert
                                message={issue.suggestion}
                                type="success"
                                showIcon
                                style={{ marginTop: 8 }}
                              />
                            </div>
                          </Space>
                        </Panel>
                      );
                    })}
                  </Collapse>
                )}
              </Card>
            ))}
          </Space>
        </Card>

        {/* 提示信息 */}
        <Alert
          message="方法学评估说明"
          description={
            <Space direction="vertical">
              <Text>• <strong>科研设计评估</strong>：检查研究类型、对象、设计要素等</Text>
              <Text>• <strong>统计学方法描述</strong>：检查软件、资料类型、统计方法等描述是否完整</Text>
              <Text>• <strong>统计分析评估</strong>：检查统计方法使用和结果描述是否正确</Text>
            </Space>
          }
          type="info"
          showIcon
        />
      </Space>
    </Card>
  );
};

export default MethodologyReview;

