import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Card,
  Button,
  Space,
  Typography,
  Row,
  Col,
  Statistic,
  Table,
  Tag,
  Divider,
  Descriptions,
  Select,
  Checkbox,
  message,
  Steps,
  Result,
} from 'antd';
import {
  FileTextOutlined,
  FileExcelOutlined,
  FilePdfOutlined,
  FileWordOutlined,
  DownloadOutlined,
  PrinterOutlined,
  HistoryOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { fetchCase, fetchAssessments, fetchReports, generateReport, getReportDownloadUrl } from '../../services/api';

const Reports: React.FC = () => {
  const { id = '1' } = useParams();
  const qc = useQueryClient();
  const [generated, setGenerated] = useState(false);

  const { data: currentCase } = useQuery({ queryKey: ['case', id], queryFn: () => fetchCase(id) });
  const { data: assessData } = useQuery({ queryKey: ['assessments', id], queryFn: () => fetchAssessments(id) });
  const { data: reportsData } = useQuery({ queryKey: ['reports', id], queryFn: () => fetchReports(id) });

  const allAssessments = assessData?.items ?? [];
  const reportsList = reportsData?.items ?? [];

  const confirmedAssessments = allAssessments.filter(
    (a) => a.reviewStatus === 'confirmed' && a.assessedAmount > 0,
  );
  const totalConfirmed = confirmedAssessments.reduce(
    (s, a) => s + a.assessedAmount,
    0,
  );

  const genMutation = useMutation({
    mutationFn: (reportType: string) => generateReport(id, { report_type: reportType }),
    onSuccess: () => {
      setGenerated(true);
      qc.invalidateQueries({ queryKey: ['reports', id] });
      message.success('报告生成成功');
    },
  });

  if (!currentCase) return null;

  const historyColumns: ColumnsType<(typeof mockReports)[0]> = [
    {
      title: '类型',
      dataIndex: 'type',
      width: 100,
      render: (t: string) => {
        const map: Record<string, { icon: React.ReactNode; label: string; color: string }> = {
          pdf: { icon: <FilePdfOutlined />, label: 'PDF', color: 'red' },
          excel: { icon: <FileExcelOutlined />, label: 'Excel', color: 'green' },
          word: { icon: <FileWordOutlined />, label: 'Word', color: 'blue' },
        };
        const cfg = map[t] || map.pdf;
        return <Tag icon={cfg.icon} color={cfg.color}>{cfg.label}</Tag>;
      },
    },
    {
      title: '版本',
      dataIndex: 'version',
      width: 80,
      render: (v: number) => `v${v}`,
    },
    {
      title: '生成时间',
      dataIndex: 'createdAt',
      width: 180,
    },
    {
      title: '操作',
      width: 120,
      render: () => (
        <Space>
          <Button type="link" size="small" icon={<DownloadOutlined />}>
            下载
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card variant="borderless">
            <Statistic
              title="已确认被骗金额"
              value={totalConfirmed}
              precision={2}
              prefix="¥"
              valueStyle={{ color: '#cf1322', fontSize: 24 }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card variant="borderless">
            <Statistic
              title="已确认交易笔数"
              value={confirmedAssessments.length}
              suffix="笔"
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card variant="borderless">
            <Statistic
              title="历史报告"
              value={reportsList.length}
              suffix="份"
              prefix={<HistoryOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={14}>
          <Card
            title={
              <Space>
                <FileTextOutlined />
                <span>生成报告</span>
              </Space>
            }
            style={{ marginBottom: 24 }}
          >
            <Descriptions column={2} size="small" style={{ marginBottom: 24 }}>
              <Descriptions.Item label="案件编号">
                {currentCase.caseNo}
              </Descriptions.Item>
              <Descriptions.Item label="案件名称">
                {currentCase.title}
              </Descriptions.Item>
              <Descriptions.Item label="受害人">
                {currentCase.victimName}
              </Descriptions.Item>
              <Descriptions.Item label="承办人">
                {currentCase.handler}
              </Descriptions.Item>
              <Descriptions.Item label="已确认金额">
                <Typography.Text strong style={{ color: '#cf1322' }}>
                  ¥{totalConfirmed.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
                </Typography.Text>
              </Descriptions.Item>
              <Descriptions.Item label="确认笔数">
                {confirmedAssessments.length} 笔
              </Descriptions.Item>
            </Descriptions>

            <Divider />

            <Typography.Text strong>导出格式：</Typography.Text>
            <div style={{ margin: '12px 0 24px' }}>
              <Space size={16}>
                <Card
                  hoverable
                  style={{ width: 140, textAlign: 'center' }}
                  styles={{ body: { padding: 16 } }}
                >
                  <FileExcelOutlined style={{ fontSize: 32, color: '#52c41a' }} />
                  <div style={{ marginTop: 8 }}>
                    <Typography.Text>Excel 汇总表</Typography.Text>
                  </div>
                  <div>
                    <Checkbox defaultChecked>选择</Checkbox>
                  </div>
                </Card>
                <Card
                  hoverable
                  style={{ width: 140, textAlign: 'center' }}
                  styles={{ body: { padding: 16 } }}
                >
                  <FilePdfOutlined style={{ fontSize: 32, color: '#cf1322' }} />
                  <div style={{ marginTop: 8 }}>
                    <Typography.Text>PDF 报告</Typography.Text>
                  </div>
                  <div>
                    <Checkbox defaultChecked>选择</Checkbox>
                  </div>
                </Card>
                <Card
                  hoverable
                  style={{ width: 140, textAlign: 'center' }}
                  styles={{ body: { padding: 16 } }}
                >
                  <FileWordOutlined style={{ fontSize: 32, color: '#1677ff' }} />
                  <div style={{ marginTop: 8 }}>
                    <Typography.Text>Word 文书</Typography.Text>
                  </div>
                  <div>
                    <Checkbox>选择</Checkbox>
                  </div>
                </Card>
              </Space>
            </div>

            <Typography.Text strong>报告内容：</Typography.Text>
            <div style={{ margin: '12px 0 24px' }}>
              <Space direction="vertical">
                <Checkbox defaultChecked>被骗金额汇总表</Checkbox>
                <Checkbox defaultChecked>交易明细清单（含证据索引）</Checkbox>
                <Checkbox defaultChecked>资金流转路径图</Checkbox>
                <Checkbox defaultChecked>交易时间轴</Checkbox>
                <Checkbox defaultChecked>认定理由与排除说明</Checkbox>
                <Checkbox>笔录辅助问询建议</Checkbox>
                <Checkbox>原始截图附件</Checkbox>
              </Space>
            </div>

            {!generated ? (
              <Button
                type="primary"
                size="large"
                icon={<FileTextOutlined />}
                loading={genMutation.isPending}
                onClick={() => genMutation.mutate('excel')}
                block
              >
                {genMutation.isPending ? '正在生成报告...' : '生成报告'}
              </Button>
            ) : (
              <Result
                status="success"
                title="报告已生成"
                subTitle="您可以下载或打印以下报告文件"
                extra={[
                  <Button
                    key="excel"
                    icon={<DownloadOutlined />}
                    onClick={() => message.info('演示模式：下载 Excel')}
                  >
                    下载 Excel
                  </Button>,
                  <Button
                    key="pdf"
                    type="primary"
                    icon={<DownloadOutlined />}
                    onClick={() => message.info('演示模式：下载 PDF')}
                  >
                    下载 PDF
                  </Button>,
                  <Button
                    key="print"
                    icon={<PrinterOutlined />}
                    onClick={() => message.info('演示模式：打印')}
                  >
                    打印
                  </Button>,
                ]}
              />
            )}
          </Card>
        </Col>

        <Col span={10}>
          <Card
            title={
              <Space>
                <HistoryOutlined />
                <span>历史报告</span>
              </Space>
            }
            style={{ marginBottom: 24 }}
          >
            <Table
              rowKey="id"
              columns={historyColumns}
              dataSource={reportsList}
              pagination={false}
              size="small"
            />
          </Card>

          <Card title="报告预览" style={{ minHeight: 300 }}>
            <div
              style={{
                background: '#fafafa',
                border: '1px dashed #d9d9d9',
                borderRadius: 8,
                padding: 24,
                textAlign: 'center',
                minHeight: 240,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <FileTextOutlined style={{ fontSize: 48, color: '#bfbfbf' }} />
              <Typography.Text type="secondary" style={{ marginTop: 12 }}>
                {generated
                  ? '点击左侧"下载"查看完整报告'
                  : '生成报告后可在此预览'}
              </Typography.Text>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Reports;