/**
 * 评查选项卡组件
 * 提供三个选项卡：评查结果、AI智能分析、文件信息
 */
import { ReactNode, useState, useRef } from 'react';
import { useNavigate, useRevalidator } from 'react-router-dom';
import { loadingBarService } from '~/components/ui/LoadingBar';
import { Modal } from '~/components/ui/Modal';
import { UploadArea, type UploadAreaRef } from '~/components/ui/UploadArea';
import { Button } from '~/components/ui/Button';
import { toastService } from '~/components/ui/Toast';
// import { DOCUMENT_URL } from "~/api/axios-client";
import { uploadContractTemplate } from '~/api/files/files-upload';
import axios from 'axios';

interface ReviewTabsProps {
  activeTab: string;
  onTabChange: (tabKey: string) => void;
  children: ReactNode;
  fileInfo: {
    id?: number;
    previousRoute?: string;
    path?: string;
    auditStatus?: number;
    type?: string;
    comparisonId?: number;
  };
  onConfirmResults: () => void;
  jwtToken?: string | null;
}

export function ReviewTabs({ activeTab, onTabChange, children, fileInfo, onConfirmResults, jwtToken }: ReviewTabsProps) {
  const [isNavigating, setIsNavigating] = useState(false);
  const [isReuploadModalOpen, setIsReuploadModalOpen] = useState(false);
  const [selectedTemplateFiles, setSelectedTemplateFiles] = useState<File[]>([]);
  const [isUploading, setIsUploading] = useState(false);
  const uploadAreaRef = useRef<UploadAreaRef>(null);
  const navigate = useNavigate();
  const revalidator = useRevalidator();

  // 返回上一级
  const handleBack = () => {
    // 防抖处理 - 如果已经在导航中，不重复触发
    if (isNavigating) return;

    // 设置导航状态为true
    setIsNavigating(true);
    loadingBarService.show();

    // 根据来源页面返回
    const previousRoute = fileInfo.previousRoute || 'documents';
    const returnTo = previousRoute === 'documents'
      ? "/documents/list"
      : previousRoute === 'filesUpload'
        ? "/files/upload"
        : "/rules-files";
      // 立即导航返回
      navigate(returnTo);
      // 触发上级页面数据重新加载
      revalidator.revalidate();
  };

  // 下载原文件
  const handleDownloadFile = async () => {
    try {
      // 使用 PDF 代理路由获取文件，自动添加 JWT 认证
      const downloadUrl = `/api/pdf-proxy?path=${encodeURIComponent(fileInfo.path || '')}`;

      // 使用axios获取文件内容
      const response = await axios.get(downloadUrl, {
        responseType: 'blob'
      });

      // axios已经返回Blob
      const blob = response.data;

      // 创建Blob URL
      const blobUrl = URL.createObjectURL(blob);

      // 创建一个隐藏的a标签并点击它
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = blobUrl;
      // 从路径中获取文件名
      const fileName = fileInfo.path?.split('/').pop() || 'document';
      a.download = decodeURIComponent(fileName);
      document.body.appendChild(a);
      a.click();

      // 清理
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
      }, 100);
    } catch (error) {
      console.error('下载文件失败:', error);
      alert(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  };

  // 打开重新上传模板模态框
  const handleOpenReuploadModal = () => {
    setIsReuploadModalOpen(true);
    setSelectedTemplateFiles([]);
  };

  // 关闭重新上传模板模态框
  const handleCloseReuploadModal = () => {
    setIsReuploadModalOpen(false);
    setSelectedTemplateFiles([]);
    // 重置文件输入
    if (uploadAreaRef.current) {
      uploadAreaRef.current.resetFileInput();
    }
  };

  // 处理模板文件选择
  const handleTemplateFilesSelected = (files: FileList) => {
    try {
      if (files.length > 0) {
        // 验证文件类型，允许PDF和Word文件
        const validFiles: File[] = [];
        let hasInvalidFiles = false;

        Array.from(files).forEach(file => {
          const fileName = file.name.toLowerCase();
          const isValidType =
            file.type === 'application/pdf' ||
            fileName.endsWith('.pdf') ||
            file.type === 'application/msword' ||
            file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
            fileName.endsWith('.doc') ||
            fileName.endsWith('.docx');

          if (isValidType) {
            validFiles.push(file);
          } else {
            hasInvalidFiles = true;
            console.error(`无效的文件类型: ${file.name}, 类型: ${file.type}`);
          }
        });

        if (hasInvalidFiles) {
          toastService.error('只能上传PDF或Word格式的文件');
        }

        if (validFiles.length > 0) {
          setSelectedTemplateFiles(validFiles);
        }
      }
    } catch (error) {
      console.error('处理模板文件选择时发生错误:', error);
      toastService.error('文件选择失败，请重试');
    }
  };


  // 确认上传模板文件
  const handleConfirmUpload = async () => {
    if (selectedTemplateFiles.length === 0) {
      toastService.error('请先选择要上传的模板文件');
      return;
    }

    // 验证必需的参数
    if (!fileInfo.id) {
      toastService.error('文档ID不能为空');
      return;
    }

    try {
      setIsUploading(true);

      console.log('【重新上传模板】开始上传:', {
        fileName: selectedTemplateFiles[0].name,
        documentId: fileInfo.id,
        comparisonId: fileInfo.comparisonId
      });

      // 调用专门的合同模板上传接口
      const uploadResult = await uploadContractTemplate(
        selectedTemplateFiles[0],      // file: File 对象
        fileInfo.id,                    // documentId: 合同文件的id
        fileInfo.comparisonId,          // comparisonId: 模板预览文件的id (可选)
        jwtToken || undefined           // jwtToken
      );

      console.log('【重新上传模板】上传结果:', uploadResult);

      if (uploadResult.error) {
        throw new Error(uploadResult.error);
      }

      toastService.success('模板文件上传成功，结构比对数据将会发生更新，即将返回上一页...');

      await new Promise(resolve => setTimeout(resolve, 2000));

      handleCloseReuploadModal();
      handleBack();

    } catch (error) {
      console.error('上传模板文件失败:', error);
      toastService.error(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
    } finally {
      setIsUploading(false);
    }
  };

  // 格式化文件大小
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };
  
  return (
    <div className="tab-container w-full flex-1">
      <div className="tab-nav w-full flex justify-between">
        {/* 评查结果、AI智能分析、文件信息 */}
        <div className="flex">
          <button
            className={`tab-nav-item ${activeTab === 'preview' ? 'active' : ''}`}
            onClick={() => onTabChange('preview')}
            type="button"
            aria-pressed={activeTab === 'preview'}
          >
            <i className="ri-file-text-line"></i> 评查结果
          </button>
          {/* <button 
            className={`tab-nav-item ${activeTab === 'analysis' ? 'active' : ''}`}
            onClick={() => onTabChange('analysis')}
            type="button"
            aria-pressed={activeTab === 'analysis'}
          >
            <i className="ri-lightbulb-line"></i> AI智能分析
          </button> */}
          {fileInfo.type === '1' && (
            <button 
              className={`tab-nav-item ${activeTab === 'filecompare' ? 'active' : ''}`}
              onClick={() => onTabChange('filecompare')}
              type="button"
              aria-pressed={activeTab === 'filecompare'}
            >
              <i className="ri-flip-horizontal-line"></i> 结构比对
            </button>
          )}
          <button
            className={`tab-nav-item ${activeTab === 'fileinfo' ? 'active' : ''}`}
            onClick={() => onTabChange('fileinfo')}
            type="button"
            aria-pressed={activeTab === 'fileinfo'}
          >
            <i className="ri-information-line"></i> 文件信息
          </button>
        </div>
        {/* 操作按钮 */}
        <div className="flex space-x-3">
          {/* 重新上传 */}
          {activeTab === 'filecompare' && (
            <button 
              className="ant-btn ant-btn-default flex items-center my-2 mr-4"
              onClick={handleOpenReuploadModal}
            >
              <i className="ri-refresh-line mr-1"></i> 重新上传模板
            </button>
          )}
          {/* 返回上一级 */}
          <button
            className="ant-btn ant-btn-default flex items-center my-2"
            onClick={() => handleBack()}
            disabled={isNavigating}
          >
            <i className="ri-arrow-left-line mr-1"></i> {isNavigating ? '返回中...' : '返回'}
          </button>
          <button
            className="ant-btn ant-btn-default flex items-center my-2"
            onClick={handleDownloadFile}
          >
            <i className="ri-file-download-line mr-1"></i> 下载原文件
          </button>
          {/* <button 
            className="ant-btn ant-btn-default flex items-center"
            onClick={handleExportReport}
          >
            <i className="ri-file-copy-line mr-1"></i> 导出评查报告
          </button> */}
          <button
            className={`ant-btn ant-btn-primary my-2 flex items-center ${fileInfo.auditStatus === 1 ? 'hidden' : ''}`}
            onClick={onConfirmResults}
          >
            <i className="ri-check-double-line mr-1"></i> 确认评查结果
          </button>
        </div>
      </div>

      <div className="tab-content w-full">
        {children}
      </div>

      {/* 重新上传模板模态框 */}
      <Modal
        isOpen={isReuploadModalOpen}
        onClose={handleCloseReuploadModal}
        title="重新上传模板"
        size="medium"
        footer={
          <div className="flex justify-end space-x-3">
            <Button
              type="default"
              onClick={handleCloseReuploadModal}
              disabled={isUploading}
            >
              取消
            </Button>
            <Button
              type="primary"
              onClick={handleConfirmUpload}
              disabled={selectedTemplateFiles.length === 0 || isUploading}
              icon={isUploading ? 'ri-loader-4-line animate-spin' : undefined}
            >
              {isUploading ? '上传中...' : '确定上传'}
            </Button>
          </div>
        }
      >
        <div className="space-y-4">
          <div className="text-sm text-gray-600 mb-4">
            <p>请选择新的模板文件用于结构比对。</p>
            <p className="mt-2 text-orange-600">
              <i className="ri-information-line mr-1"></i>
              注意：支持PDF和Word格式的文件，上传后将替换当前的比对模板。
            </p>
          </div>

          <UploadArea
            ref={uploadAreaRef}
            onFilesSelected={handleTemplateFilesSelected}
            accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            multiple={false}
            icon="ri-file-text-line"
            buttonText="选择模板文件"
            mainText="点击或拖拽文件到此区域"
            tipText={
              <span className="text-xs text-gray-500">
                支持格式：PDF、DOC、DOCX
              </span>
            }
            disabled={isUploading}
          />

          {/* 已选择的文件列表 */}
          {selectedTemplateFiles.length > 0 && (
            <div className="mt-4">
              <h4 className="text-sm font-medium text-gray-900 mb-2">已选择的文件：</h4>
              <div className="space-y-2">
                {selectedTemplateFiles.map((file, index) => {
                  // 根据文件类型确定图标和颜色
                  const fileName = file.name.toLowerCase();
                  let fileIcon = 'ri-file-pdf-line';
                  let iconColor = 'text-red-500';

                  if (fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
                    fileIcon = 'ri-file-word-2-line';
                    iconColor = 'text-blue-600';
                  }

                  return (
                    <div
                      key={index}
                      className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border"
                    >
                      <div className="flex items-center">
                        <i className={`${fileIcon} ${iconColor} mr-2`}></i>
                        <div>
                          <div className="text-sm font-medium text-gray-900">
                            {file.name}
                          </div>
                          <div className="text-xs text-gray-500">
                            {formatFileSize(file.size)}
                          </div>
                        </div>
                      </div>
                      <button
                        className="text-gray-400 hover:text-red-500 transition-colors"
                        onClick={() => {
                          setSelectedTemplateFiles(prev =>
                            prev.filter((_, i) => i !== index)
                          );
                          if (uploadAreaRef.current) {
                            uploadAreaRef.current.resetFileInput();
                          }
                        }}
                        disabled={isUploading}
                      >
                        <i className="ri-close-line"></i>
                      </button>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </Modal>
    </div>
  );
}