import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { InboxOutlined, FileExcelOutlined, BarChartOutlined, FileWordOutlined } from '@ant-design/icons';
import { Upload, Card, Button, Steps, message, Input, Spin, Result, Progress, Alert, Typography } from 'antd';
import type { UploadFile } from 'antd/es/upload/interface';
import { marked } from 'marked';
import styles from './index.less';
import { Document, Packer, Paragraph as DocxParagraph, TextRun } from 'docx';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import useAIRequest from '@/hooks/useAIRequest';

const { Dragger } = Upload;
const { TextArea } = Input;
const { Title, Paragraph } = Typography;

interface AnalysisResponse {
  id: string;
  choices: {
    message: {
      content: string;
    };
  }[];
}


interface ReportSection {
  title: string;
  content: string;
}

interface ReportData {
  title: string;
  summary: string;
  sections: ReportSection[];
  charts: any[];
  markdown: string;
}

const ReportPage: React.FC = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [currentStep, setCurrentStep] = useState(0);
  const [loading, setLoading] = useState(false);
  const [goal, setGoal] = useState('');
  const [reportData, setReportData] = useState<any>(null);
  const [wordUrl, setWordUrl] = useState<string>('');
  const [progress, setProgress] = useState(0);
  const [previewData, setPreviewData] = useState<any>(null);

  const handleUpload = async (file: File) => {
    setLoading(true);
    try {
      const isImage = file.type.startsWith('image/');
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                      file.type === 'application/vnd.ms-excel';
      const isCsv = file.type === 'text/csv';

      if (isImage) {
        // 处理图片文件
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = async () => {
          const base64Image = reader.result as string;
          await analyzeData({
            type: 'image_url',
            image_url: {
              url: base64Image
            }
          });
        };
      } else if (isExcel || isCsv) {
        // 处理 Excel/CSV 文件
        const reader = new FileReader();
        reader.onload = async (e) => {
          const data = e.target?.result;
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
          const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
          
          // 将数据转换为字符串
          const textContent = jsonData.map(row => row.join('\t')).join('\n');
          
          await analyzeData({
            type: 'text',
            text: textContent
          });
        };
        reader.readAsArrayBuffer(file);
      } else {
        message.error('不支持的文件格式');
        setLoading(false);
      }
    } catch (error) {
      message.error('文件处理失败');
      console.error('文件处理失败:', error);
      setLoading(false);
    }
  };

  const { loading: aiLoading, sendRequest } = useAIRequest();

  const analyzeData = async (content: any) => {
    setLoading(true);
    try {
      const result = await sendRequest([
        {
          type: 'text',
          text: '请分析这些数据的趋势和关键信息，并给出专业的分析见解。'
        },
        content
      ]);
      
      setPreviewData({
        columns: ['分析结果'],
        data: [[result]]
      });
      
      message.success('数据分析成功');
      setCurrentStep(1);
    } catch (error) {
      message.error('数据分析失败');
      console.error('API调用失败:', error);
    } finally {
    setLoading(false);
  }
  };

  const generateReport = async () => {
    try {
      const result = await sendRequest([
        {
          type: 'text',
          text: `请基于以下分析目标和数据，生成一份详细的markdown格式分析报告，包含标题、概述、详细分析等章节：${goal}\n${previewData?.data[0][0]}`
        }
      ], {
        maxTokens: 2000
      });
      
      // 解析 markdown 内容
      const titleMatch = result.match(/^#\s+(.+)$/m);
      const title = titleMatch ? titleMatch[1] : '数据分析报告';
      
      setReportData({
        title,
        summary: '',
        sections: [],
        charts: [],
        markdown: result
      });

      setWordUrl('https://example.com/report.docx');
      message.success('报告生成成功');
      setCurrentStep(2);
    } catch (error) {
      message.error('报告生成失败');
    }
  };

  const generateWordDocument = async (markdown: string) => {
  const doc = new Document({
    sections: [
      {
        properties: {},
        children: markdown.split('\n').map(line => {
          if (line.startsWith('# ')) {
            return new DocxParagraph({
              text: line.replace('# ', ''),
              heading: 'Heading1'
            });
          }
          if (line.startsWith('## ')) {
            return new DocxParagraph({
              text: line.replace('## ', ''),
              heading: 'Heading2'
            });
          }
          return new DocxParagraph({
            children: [
              new TextRun({
                text: line,
                size: 24
              })
            ]
          });
        })
      }
    ]
  });

  const blob = await Packer.toBlob(doc);
  saveAs(blob, '数据分析报告.docx');
};

const handleDownload = async () => {
  if (reportData?.markdown) {
    try {
      await generateWordDocument(reportData.markdown);
      message.success('报告下载成功');
    } catch (error) {
      message.error('报告下载失败');
      console.error('下载失败:', error);
    }
  }
};

  const renderPreview = () => {
    if (!previewData) return null;
    return (
      <Card className={styles.previewCard} title="数据预览">
        <table className={styles.previewTable}>
          <thead>
            <tr>
              {previewData.columns.map((col: string) => (
                <th key={col}>{col}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {previewData.data.map((row: any[], index: number) => (
              <tr key={index}>
                {row.map((cell, cellIndex) => (
                  <td key={cellIndex}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    );
  };

  const renderReport = () => {
    if (!reportData?.markdown) return null;
    
    return (
      <div 
        className={styles.reportContent}
        dangerouslySetInnerHTML={{ __html: marked(reportData.markdown) }}
      />
    );
  };

  const steps = [
    {
      title: '上传文件',
      icon: <FileExcelOutlined />,
      content: (
        <div className={styles.uploadStep}>
          <Alert
            message="支持的文件格式"
            description="Excel文件 (.xlsx, .xls) 或 CSV文件 (.csv)"
            type="info"
            showIcon
            style={{ marginBottom: 24 }}
          />
          <Dragger
            fileList={fileList}
            beforeUpload={(file) => {
              // const isExcelOrCsv =
              //   file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
              //   file.type === 'application/vnd.ms-excel' ||
              //   file.type === 'text/csv';
              // if (!isExcelOrCsv) {
              //   message.error('只支持上传 Excel 或 CSV 文件！');
              //   return false;
              // }
              setFileList([file]);
              handleUpload(file);
              return false;
            }}
            onRemove={() => {
              setFileList([]);
              setCurrentStep(0);
              setPreviewData(null);
              return true;
            }}
          >
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
            <p className="ant-upload-hint">支持 Excel 和 CSV 文件格式</p>
          </Dragger>
          {loading && (
            <Progress percent={progress} status="active" style={{ marginTop: 24 }} />
          )}
          {renderPreview()}
        </div>
      ),
    },
    {
      title: '设置目标',
      icon: <BarChartOutlined />,
      content: (
        <div className={styles.goalStep}>
          <Title level={4}>分析目标设置</Title>
          <Paragraph type="secondary">
            请详细描述您的分析需求，例如：
            <ul>
              <li>分析销售趋势和影响因素</li>
              <li>识别客户购买行为模式</li>
              <li>预测未来销售情况</li>
            </ul>
          </Paragraph>
          <TextArea
            placeholder="请输入你想要分析的目标，例如：分析销售趋势、客户分布等"
            rows={4}
            value={goal}
            onChange={(e) => setGoal(e.target.value)}
            className={styles.goalInput}
          />
          <Button 
            type="primary" 
            onClick={generateReport} 
            disabled={!goal}
            size="large"
            className={styles.generateButton}
          >
            开始生成报告
          </Button>
          {loading && (
            <div className={styles.progressContainer}>
              <Progress percent={progress} status="active" />
              <Paragraph type="secondary">正在生成分析报告，请稍候...</Paragraph>
            </div>
          )}
        </div>
      ),
    },
    {
      title: '查看报告',
      icon: <FileWordOutlined />,
      content: wordUrl && (
        <div className={styles.reportStep}>
          <Card>
            <Result
              status="success"
              title="报告生成成功"
              subTitle="您可以查看报告预览或下载完整报告"
              extra={[
                <Button
                  type="primary"
                  icon={<FileWordOutlined />}
                  onClick={handleDownload}
                  key="download"
                  size="large"
                >
                  下载完整报告
                </Button>,
                <Button
                  onClick={() => {
                    setCurrentStep(0);
                    setFileList([]);
                    setGoal('');
                    setWordUrl('');
                    setPreviewData(null);
                    setReportData(null);
                  }}
                  key="again"
                  size="large"
                >
                  重新生成
                </Button>,
              ]}
            />
            {renderReport()}
          </Card>
        </div>
      ),
    },
  ];

  return (
    <PageContainer
      title="智能图表分析"
      subTitle="上传数据图表，快速获取专业分析见解"
    >
      <Card className={styles.container}>
        <Steps
          current={currentStep}
          items={steps}
          className={styles.steps}
        />
        <div className={styles.content}>
          <Spin spinning={loading}>{steps[currentStep].content}</Spin>
        </div>
      </Card>
    </PageContainer>
  );
};



export default ReportPage;