/**
 * 质控报告抽屉组件
 * 
 * 功能：
 * - 展示质控报告摘要
 * - 展示严重问题和警告问题列表
 * - 展示表单统计
 * - 支持导出 XML 格式报告
 */

import React, { useState, useEffect } from 'react';
import {
  Drawer,
  Tabs,
  Statistic,
  Row,
  Col,
  Card,
  Table,
  Tag,
  Space,
  Button,
  Spin,
  Empty,
  Typography,
  message,
  Progress,
  Tooltip,
} from 'antd';
import {
  DownloadOutlined,
  ReloadOutlined,
  ExclamationCircleOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  FileTextOutlined,
  BarChartOutlined,
} from '@ant-design/icons';
import type { QcReport } from '../../api/iitProjectApi';
import * as iitProjectApi from '../../api/iitProjectApi';

const { Text } = Typography;
const { TabPane } = Tabs;

interface QcReportDrawerProps {
  open: boolean;
  onClose: () => void;
  projectId: string;
  projectName: string;
}

const QcReportDrawer: React.FC<QcReportDrawerProps> = ({
  open,
  onClose,
  projectId,
  projectName,
}) => {
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [report, setReport] = useState<QcReport | null>(null);

  // 加载报告
  const loadReport = async (forceRefresh = false) => {
    if (forceRefresh) {
      setRefreshing(true);
    } else {
      setLoading(true);
    }

    try {
      let data: QcReport;
      if (forceRefresh) {
        data = await iitProjectApi.refreshQcReport(projectId);
        message.success('报告已刷新');
      } else {
        data = await iitProjectApi.getQcReport(projectId, 'json') as QcReport;
      }
      setReport(data);
    } catch (error: any) {
      message.error(error.message || '加载报告失败');
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  // 导出 XML 报告（导出前自动刷新，确保获取最新数据）
  const handleExportXml = async () => {
    try {
      message.loading({ content: '正在生成最新报告...', key: 'export' });
      
      // 1. 先刷新报告（确保获取最新质控结果）
      await iitProjectApi.refreshQcReport(projectId);
      
      // 2. 获取刷新后的 XML 报告
      const xmlData = await iitProjectApi.getQcReport(projectId, 'xml') as string;
      
      // 3. 创建 Blob 并下载
      const blob = new Blob([xmlData], { type: 'application/xml' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      const now = new Date();
      const dateStr = now.toISOString().split('T')[0];
      const timeStr = now.toTimeString().slice(0, 5).replace(':', '');  // HHMM 格式
      link.download = `qc-report-${projectId}-${dateStr}-${timeStr}.xml`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      
      message.success({ content: '报告已导出', key: 'export' });
    } catch (error: any) {
      message.error({ content: error.message || '导出失败', key: 'export' });
    }
  };

  useEffect(() => {
    if (open) {
      loadReport();
    }
  }, [open, projectId]);

  // 渲染摘要
  const renderSummary = () => {
    if (!report) return null;
    const { summary } = report;

    // V2.1: 防护空值
    if (!summary) {
      return (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无摘要数据，请尝试刷新报告"
        />
      );
    }

    // 安全获取数值
    const totalRecords = summary.totalRecords ?? 0;
    const passRate = summary.passRate ?? 0;
    const criticalIssues = summary.criticalIssues ?? 0;
    const warningIssues = summary.warningIssues ?? 0;
    const completedRecords = summary.completedRecords ?? 0;

    return (
      <div className="qc-report-summary">
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card size="small">
              <Statistic
                title="总记录数"
                value={totalRecords}
                valueStyle={{ color: '#1890ff' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic
                title="通过率"
                value={passRate}
                suffix="%"
                valueStyle={{ color: passRate >= 80 ? '#52c41a' : '#ff4d4f' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic
                title="严重问题"
                value={criticalIssues}
                valueStyle={{ color: '#ff4d4f' }}
                prefix={<ExclamationCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic
                title="警告问题"
                value={warningIssues}
                valueStyle={{ color: '#faad14' }}
                prefix={<WarningOutlined />}
              />
            </Card>
          </Col>
        </Row>

        <Card size="small" style={{ marginTop: 16 }}>
          <Row gutter={16}>
            <Col span={12}>
              <Text type="secondary">完成记录</Text>
              <Progress
                percent={totalRecords > 0 ? Math.round((completedRecords / totalRecords) * 100) : 0}
                status="active"
              />
            </Col>
            <Col span={12}>
              <Text type="secondary">待确认</Text>
              <Statistic value={summary.pendingQueries ?? 0} valueStyle={{ fontSize: 20 }} />
            </Col>
          </Row>
        </Card>

        <Card size="small" style={{ marginTop: 16 }}>
          <Text type="secondary">报告生成时间: </Text>
          <Text>{report.generatedAt ? new Date(report.generatedAt).toLocaleString() : '-'}</Text>
          <br />
          <Text type="secondary">最后质控时间: </Text>
          <Text>{summary.lastQcTime ? new Date(summary.lastQcTime).toLocaleString() : '-'}</Text>
        </Card>
      </div>
    );
  };

  // 渲染问题列表
  const renderIssues = (issues: QcReport['criticalIssues'] | QcReport['warningIssues'], type: 'critical' | 'warning') => {
    const columns = [
      {
        title: '记录 ID',
        dataIndex: 'recordId',
        key: 'recordId',
        width: 100,
        render: (text: string) => <Text code>{text}</Text>,
      },
      {
        title: '规则',
        dataIndex: 'ruleName',
        key: 'ruleName',
        width: 150,
        ellipsis: true,
      },
      {
        title: '问题描述',
        dataIndex: 'message',
        key: 'message',
        ellipsis: true,
        render: (text: string) => (
          <Tooltip title={text}>
            <span>{text}</span>
          </Tooltip>
        ),
      },
      {
        title: '字段',
        dataIndex: 'field',
        key: 'field',
        width: 120,
        render: (text: string) => text ? <Text code>{text}</Text> : '-',
      },
      {
        title: '检测时间',
        dataIndex: 'detectedAt',
        key: 'detectedAt',
        width: 140,
        render: (text: string) => text ? new Date(text).toLocaleDateString() : '-',
      },
    ];

    return (
      <Table
        dataSource={issues}
        columns={columns}
        rowKey={(record, index) => `${record.recordId}-${record.ruleId}-${index}`}
        size="small"
        pagination={{ pageSize: 10 }}
        locale={{
          emptyText: (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description={type === 'critical' ? '无严重问题' : '无警告问题'}
            />
          ),
        }}
      />
    );
  };

  // 渲染表单统计
  const renderFormStats = () => {
    if (!report?.formStats?.length) {
      return <Empty description="暂无表单统计数据" />;
    }

    const columns = [
      {
        title: '表单',
        dataIndex: 'formLabel',
        key: 'formLabel',
      },
      {
        title: '检查数',
        dataIndex: 'totalChecks',
        key: 'totalChecks',
        width: 80,
        align: 'center' as const,
      },
      {
        title: '通过',
        dataIndex: 'passed',
        key: 'passed',
        width: 80,
        align: 'center' as const,
        render: (text: number) => <Text type="success">{text}</Text>,
      },
      {
        title: '失败',
        dataIndex: 'failed',
        key: 'failed',
        width: 80,
        align: 'center' as const,
        render: (text: number) => <Text type="danger">{text}</Text>,
      },
      {
        title: '通过率',
        dataIndex: 'passRate',
        key: 'passRate',
        width: 120,
        render: (rate: number) => (
          <Progress
            percent={rate}
            size="small"
            status={rate >= 80 ? 'success' : rate >= 60 ? 'normal' : 'exception'}
          />
        ),
      },
    ];

    return (
      <Table
        dataSource={report?.formStats ?? []}
        columns={columns}
        rowKey="formName"
        size="small"
        pagination={false}
      />
    );
  };

  return (
    <Drawer
      title={
        <Space>
          <FileTextOutlined />
          <span>质控报告 - {projectName}</span>
        </Space>
      }
      placement="right"
      width={800}
      open={open}
      onClose={onClose}
      extra={
        <Space>
          <Button
            icon={<ReloadOutlined spin={refreshing} />}
            onClick={() => loadReport(true)}
            loading={refreshing}
          >
            刷新报告
          </Button>
          <Button
            type="primary"
            icon={<DownloadOutlined />}
            onClick={handleExportXml}
          >
            导出 XML
          </Button>
        </Space>
      }
    >
      {loading ? (
        <div style={{ textAlign: 'center', padding: 50 }}>
          <Spin size="large" />
          <div style={{ marginTop: 16 }}>
            <Text type="secondary">正在生成报告...</Text>
          </div>
        </div>
      ) : report ? (
        <Tabs defaultActiveKey="summary">
          <TabPane
            tab={
              <span>
                <BarChartOutlined />
                摘要
              </span>
            }
            key="summary"
          >
            {renderSummary()}
          </TabPane>
          <TabPane
            tab={
              <span>
                <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
                严重问题
                {(report.criticalIssues?.length ?? 0) > 0 && (
                  <Tag color="red" style={{ marginLeft: 8 }}>
                    {report.criticalIssues?.length ?? 0}
                  </Tag>
                )}
              </span>
            }
            key="critical"
          >
            {renderIssues(report.criticalIssues ?? [], 'critical')}
          </TabPane>
          <TabPane
            tab={
              <span>
                <WarningOutlined style={{ color: '#faad14' }} />
                警告问题
                {(report.warningIssues?.length ?? 0) > 0 && (
                  <Tag color="orange" style={{ marginLeft: 8 }}>
                    {report.warningIssues?.length ?? 0}
                  </Tag>
                )}
              </span>
            }
            key="warning"
          >
            {renderIssues(report.warningIssues ?? [], 'warning')}
          </TabPane>
          <TabPane
            tab={
              <span>
                <CheckCircleOutlined />
                表单统计
              </span>
            }
            key="forms"
          >
            {renderFormStats()}
          </TabPane>
        </Tabs>
      ) : (
        <Empty description="暂无报告数据" />
      )}
    </Drawer>
  );
};

export default QcReportDrawer;