import { useState, useRef, useCallback } from "react";
import { type ActionFunctionArgs, type MetaFunction, json } from "@remix-run/node";
import { Form, useActionData, useNavigation, useSubmit } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { Alert } from "~/components/ui/Alert";
import { UploadArea, type UploadAreaRef } from "~/components/ui/UploadArea";
import { FileProgress } from "~/components/ui/FileProgress";
import { FileTag } from "~/components/ui/FileTag";
import documentUploadStyles from "~/styles/pages/document-upload.css?url";

export const links = () => [
  { rel: "stylesheet", href: documentUploadStyles }
];

export const meta: MetaFunction = () => {
  return [
    { title: "上传文档 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "上传文档进行AI审核" }
  ];
};

export const handle = {
  breadcrumb: "上传文档"
};

// 模拟API支持的文件类型
const SUPPORTED_FILE_TYPES = [
  { id: "1", name: "销售合同" },
  { id: "2", name: "采购合同" },
  { id: "3", name: "专卖许可证" },
  { id: "4", name: "行政处罚决定书" },
  { id: "5", name: "承包协议" }
];

// 模拟API支持的存储类型
const STORAGE_TYPES = [
  { id: "minio", name: "MinIO对象存储" },
  { id: "local", name: "本地文件系统" },
  { id: "s3", name: "Amazon S3" }
];

// 文件上传完成后的操作选项
const AFTER_UPLOAD_OPTIONS = [
  { id: "list", name: "返回文档列表" },
  { id: "stay", name: "留在当前页面" },
  { id: "audit", name: "立即开始审核" }
];

// 定义接口
interface UploadedFile {
  id: string;
  name: string;
  size: number;
  status: "waiting" | "uploading" | "success" | "error";
  progress: number;
  error?: string;
  newName?: string;
  type: string;
}

interface ActionData {
  success?: boolean;
  error?: string;
  files?: UploadedFile[];
}

// Action函数处理表单提交
export const action = async ({ request }: ActionFunctionArgs) => {
  // 在实际应用中，这里应该处理文件上传逻辑
  // 例如使用FormData API获取文件并调用后端API
  
  try {
    const formData = await request.formData();
    const docType = formData.get("docType") as string;
    const docNumber = formData.get("docNumber") as string;
    const docRemark = formData.get("docRemark") as string;
    const isTestDocument = formData.get("isTestDocument") === "true";
    const storageType = formData.get("storageType") as string;
    const afterUpload = formData.get("afterUpload") as string;
    
    // 在真实情况下，这里将处理文件上传
    // 由于Remix在服务器端不直接处理文件，我们将在客户端处理文件上传
    // 然后将文件信息发送给服务器
    
    // 模拟处理过程
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    return json<ActionData>({
      success: true,
      files: [] // 服务器处理的文件列表将返回这里
    });
  } catch (error) {
    console.error("Upload error:", error);
    return json<ActionData>(
      { 
        success: false, 
        error: error instanceof Error ? error.message : "文件上传过程中发生错误" 
      },
      { status: 400 }
    );
  }
};

// 格式化文件大小
function formatFileSize(bytes: number): string {
  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];
}

// 获取文件扩展名
function getFileExtension(filename: string): string {
  return filename.split('.').pop()?.toLowerCase() || "";
}

// 检查文件类型是否支持
function isFileTypeSupported(filename: string): boolean {
  const ext = getFileExtension(filename);
  return ["pdf", "doc", "docx", "txt"].includes(ext);
}

export default function DocumentUpload() {
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const submit = useSubmit();
  const uploading = navigation.state === "submitting";
  
  const [files, setFiles] = useState<UploadedFile[]>([]);
  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
  const [isTestDocument, setIsTestDocument] = useState(false);
  const [uploadComplete, setUploadComplete] = useState(false);
  const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
  
  const uploadAreaRef = useRef<UploadAreaRef>(null);
  const formRef = useRef<HTMLFormElement>(null);
  
  // 处理文件选择
  const handleFilesSelected = useCallback((fileList: FileList) => {
    const newFiles: UploadedFile[] = [];
    
    Array.from(fileList).forEach(file => {
      // 检查文件类型
      if (!isFileTypeSupported(file.name)) {
        alert(`不支持的文件类型: ${file.name}\n请上传PDF、DOC、DOCX或TXT格式文件`);
        return;
      }
      
      // 检查文件大小
      if (file.size > 50 * 1024 * 1024) { // 50MB
        alert(`文件过大: ${file.name}\n文件大小不能超过50MB`);
        return;
      }
      
      // 检查是否已添加
      const isDuplicate = files.some(f => f.name === file.name && f.size === file.size);
      if (isDuplicate) {
        alert(`文件已添加: ${file.name}`);
        return;
      }
      
      // 添加新文件
      newFiles.push({
        id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
        name: file.name,
        size: file.size,
        status: "waiting",
        progress: 0,
        type: getFileExtension(file.name)
      });
    });
    
    setFiles(prev => [...prev, ...newFiles]);
    // 重置文件输入，允许再次选择相同文件
    uploadAreaRef.current?.resetFileInput();
  }, [files]);
  
  // 移除文件
  const removeFile = useCallback((fileId: string) => {
    setFiles(prev => prev.filter(file => file.id !== fileId));
    setSelectedFileIds(prev => prev.filter(id => id !== fileId));
  }, []);
  
  // 批量删除文件
  const removeSelectedFiles = useCallback(() => {
    if (selectedFileIds.length === 0) return;
    
    if (confirm(`确定要删除选中的 ${selectedFileIds.length} 个文件吗？`)) {
      setFiles(prev => prev.filter(file => !selectedFileIds.includes(file.id)));
      setSelectedFileIds([]);
    }
  }, [selectedFileIds]);
  
  // 清空文件列表
  const clearAllFiles = useCallback(() => {
    if (files.length === 0) return;
    
    if (confirm('确定要清空文件列表吗？')) {
      setFiles([]);
      setSelectedFileIds([]);
    }
  }, [files.length]);
  
  // 切换文件选择
  const toggleFileSelection = useCallback((fileId: string, selected: boolean) => {
    if (selected) {
      setSelectedFileIds(prev => [...prev, fileId]);
    } else {
      setSelectedFileIds(prev => prev.filter(id => id !== fileId));
    }
  }, []);
  
  // 更新文件名
  const updateFileName = useCallback((fileId: string, newName: string) => {
    setFiles(prev => 
      prev.map(file => 
        file.id === fileId 
          ? { ...file, newName: newName + '.' + getFileExtension(file.name) }
          : file
      )
    );
  }, []);
  
  // 提交表单
  const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    
    const form = event.currentTarget;
    const docType = form.docType.value;
    
    // 表单验证
    if (!docType) {
      alert('请选择文档类型');
      return;
    }
    
    if (files.length === 0) {
      alert('请至少上传一个文档');
      return;
    }
    
    // 创建FormData对象
    const formData = new FormData(form);
    formData.append("isTestDocument", isTestDocument.toString());
    
    // 在实际应用中，这里应该处理文件上传
    // 如果Remix不能直接处理文件上传，可以考虑使用预签名URL或其他方法
    // 这里我们模拟文件上传进度
    simulateUpload();
    
    // 提交表单
    submit(formData, { method: "post", encType: "multipart/form-data" });
  }, [files.length, isTestDocument, submit]);
  
  // 模拟文件上传进度
  const simulateUpload = useCallback(() => {
    const updatedFiles = [...files];
    
    // 设置所有文件为上传中状态
    updatedFiles.forEach(file => {
      file.status = "uploading";
      file.progress = 0;
    });
    
    setFiles(updatedFiles);
    
    // 模拟进度更新
    const interval = setInterval(() => {
      setFiles(prevFiles => {
        const newFiles = [...prevFiles];
        let allComplete = true;
        
        newFiles.forEach(file => {
          if (file.status === "uploading") {
            // 增加进度
            file.progress += Math.random() * 10;
            
            if (file.progress >= 100) {
              file.progress = 100;
              
              // 模拟有10%概率上传失败
              if (Math.random() > 0.9) {
                file.status = "error";
                file.error = "上传失败，请重试";
              } else {
                file.status = "success";
              }
            } else {
              allComplete = false;
            }
          }
        });
        
        // 如果所有文件都完成了，停止定时器
        if (allComplete) {
          clearInterval(interval);
          setTimeout(() => {
            // 检查是否有文件上传错误
            const hasErrors = newFiles.some(file => file.status === "error");
            if (!hasErrors) {
              setUploadComplete(true);
            }
          }, 1000);
        }
        
        return newFiles;
      });
    }, 200);
  }, [files]);
  
  // 重新上传文件
  const retryUpload = useCallback((fileId: string) => {
    setFiles(prev => 
      prev.map(file => 
        file.id === fileId 
          ? { ...file, status: "uploading", progress: 0, error: undefined }
          : file
      )
    );
    
    // 模拟重新上传
    setTimeout(() => {
      setFiles(prev => 
        prev.map(file => {
          if (file.id === fileId) {
            const success = Math.random() > 0.1;
            return { 
              ...file, 
              status: success ? "success" : "error",
              progress: 100,
              error: success ? undefined : "上传失败，请重试"
            };
          }
          return file;
        })
      );
    }, 2000);
  }, []);
  
  // 重置表单，继续上传
  const resetForm = useCallback(() => {
    setFiles([]);
    setUploadComplete(false);
    setSelectedFileIds([]);
    formRef.current?.reset();
  }, []);
  
  return (
    <div className="document-upload-page">
      <div className="page-header">
        <h2 className="page-title">上传文档</h2>
        <div>
          <Button to="/documents" type="default" className="mr-2">
            <i className="ri-arrow-left-line"></i> 返回
          </Button>
          <Button
            type="primary"
            disabled={files.length === 0 || uploading}
            onClick={() => formRef.current?.requestSubmit()}
          >
            <i className="ri-upload-2-line"></i> 开始上传
          </Button>
        </div>
      </div>
      
      <Card>
        {!uploadComplete ? (
          <Form ref={formRef} method="post" onSubmit={handleSubmit} encType="multipart/form-data">
            <div className="form-grid">
              <div className="form-group">
                <label className="form-label" htmlFor="docType">
                  文档类型 <span className="text-red-500">*</span>
                </label>
                <select 
                  id="docType" 
                  name="docType" 
                  className="form-select w-full" 
                  required
                >
                  <option value="">请选择文档类型</option>
                  {SUPPORTED_FILE_TYPES.map(type => (
                    <option key={type.id} value={type.id}>
                      {type.name}
                    </option>
                  ))}
                </select>
                <div className="form-tip">不同文档类型应用不同的评查规则</div>
              </div>
              
              <div className="form-group">
                <label className="form-label" htmlFor="docNumber">
                  文档编号
                </label>
                <input
                  type="text"
                  id="docNumber"
                  name="docNumber"
                  className="form-input w-full"
                  placeholder="请输入合同编号、许可证号等"
                />
                <div className="form-tip">如无编号可留空，系统将自动识别</div>
              </div>
            </div>
            
            <div className="form-group">
              <label className="form-label" htmlFor="docRemark">
                备注信息
              </label>
              <textarea
                id="docRemark"
                name="docRemark"
                className="form-textarea w-full"
                placeholder="可输入文档的相关描述或备注信息"
                rows={2}
              ></textarea>
            </div>
            
            <div className="form-group">
              <label className="form-label">
                上传文档 <span className="text-red-500">*</span>
              </label>
              
              <UploadArea
                ref={uploadAreaRef}
                onFilesSelected={handleFilesSelected}
                accept=".pdf,.doc,.docx,.txt"
                multiple={true}
                icon="ri-upload-cloud-line"
                mainText="拖拽文件到此处或点击上传"
                tipText="支持 PDF、DOC、DOCX、TXT 格式文档，单个文件大小不超过50MB"
                disabled={uploading}
              />
              
              <div className="switch-container">
                <label className="switch">
                  <input
                    type="checkbox"
                    checked={isTestDocument}
                    onChange={e => setIsTestDocument(e.target.checked)}
                  />
                  <span className="slider"></span>
                </label>
                <span>标记为测试文档（不计入正式统计）</span>
              </div>
              
              {files.length > 0 && (
                <div className="batch-actions">
                  <div>
                    <span className="text-sm">已选择 {selectedFileIds.length} 个文件</span>
                  </div>
                  <div>
                    <Button 
                      type="default" 
                      size="small" 
                      className="mr-2"
                      onClick={removeSelectedFiles}
                      disabled={selectedFileIds.length === 0 || uploading}
                    >
                      <i className="ri-delete-bin-line"></i> 删除选中
                    </Button>
                    <Button 
                      type="default" 
                      size="small"
                      onClick={clearAllFiles}
                      disabled={files.length === 0 || uploading}
                    >
                      <i className="ri-close-circle-line"></i> 清空列表
                    </Button>
                  </div>
                </div>
              )}
              
              <div className="file-list">
                {files.map(file => (
                  <div key={file.id} className="file-item">
                    <input
                      type="checkbox"
                      checked={selectedFileIds.includes(file.id)}
                      onChange={e => toggleFileSelection(file.id, e.target.checked)}
                      disabled={uploading || file.status === "uploading"}
                      className="mr-3"
                    />
                    
                    <FileTag
                      extension={getFileExtension(file.name)}
                      size="lg"
                      className="mr-3"
                    />
                    
                    <div className="file-info">
                      <div className="file-name flex items-center">
                        <span>{file.newName || file.name}</span>
                        {file.status !== "uploading" && (
                          <button
                            type="button"
                            className="ml-2 text-primary text-sm"
                            onClick={() => {
                              const fileName = file.name;
                              const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));
                              const newName = prompt('编辑文件名', nameWithoutExt);
                              if (newName) {
                                updateFileName(file.id, newName);
                              }
                            }}
                            disabled={uploading}
                          >
                            <i className="ri-edit-line"></i>
                          </button>
                        )}
                      </div>
                      
                      <div className="file-meta">
                        <span className="file-size">{formatFileSize(file.size)}</span>
                        <span className={`file-status ${file.status === "error" ? "text-red-500" : ""}`}>
                          {file.status === "waiting" && "等待上传"}
                          {file.status === "uploading" && "上传中..."}
                          {file.status === "success" && "上传成功"}
                          {file.status === "error" && (
                            <>
                              {file.error}
                              <button
                                type="button"
                                className="ml-2 text-primary text-xs"
                                onClick={() => retryUpload(file.id)}
                              >
                                <i className="ri-refresh-line"></i> 重试
                              </button>
                            </>
                          )}
                        </span>
                      </div>
                      
                      <div className="progress-bar">
                        <div className="progress-bar-inner" style={{ width: `${file.progress}%` }}></div>
                      </div>
                    </div>
                    
                    <div className="file-actions">
                      <Button
                        type="text"
                        size="small"
                        className="text-red-500"
                        onClick={() => removeFile(file.id)}
                        disabled={uploading || file.status === "uploading"}
                        title="删除文件"
                      >
                        <i className="ri-delete-bin-line"></i>
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            <div className="advanced-options">
              <div 
                className={`advanced-options-toggle ${showAdvancedOptions ? 'open' : ''}`}
                onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
              >
                <span>高级上传设置</span>
                <i className="ri-arrow-down-s-line"></i>
              </div>
              
              <div 
                className="advanced-options-content" 
                style={{ display: showAdvancedOptions ? 'block' : 'none' }}
              >
                <div className="grid grid-cols-2 gap-4">
                  <div className="form-group">
                    <label className="form-label" htmlFor="storageType">存储方式</label>
                    <select
                      id="storageType"
                      name="storageType"
                      className="form-select w-full"
                      defaultValue="minio"
                    >
                      {STORAGE_TYPES.map(type => (
                        <option key={type.id} value={type.id}>
                          {type.name}
                        </option>
                      ))}
                    </select>
                    <div className="form-tip">选择文档的存储位置</div>
                  </div>
                  
                  <div className="form-group">
                    <label className="form-label" htmlFor="afterUpload">上传后操作</label>
                    <select
                      id="afterUpload"
                      name="afterUpload"
                      className="form-select w-full"
                      defaultValue="list"
                    >
                      {AFTER_UPLOAD_OPTIONS.map(option => (
                        <option key={option.id} value={option.id}>
                          {option.name}
                        </option>
                      ))}
                    </select>
                    <div className="form-tip">上传完成后自动执行的操作</div>
                  </div>
                </div>
              </div>
            </div>
          </Form>
        ) : (
          <div className="upload-complete-actions" style={{ display: "block" }}>
            <Alert type="success" className="mb-4">
              所有文件上传成功！
            </Alert>
            
            <div>
              <Button type="default" className="mr-2" onClick={resetForm}>
                <i className="ri-add-line"></i> 继续上传
              </Button>
              <Button to="/documents" type="default" className="mr-2">
                <i className="ri-list-check-line"></i> 查看文档列表
              </Button>
              <Button to="/documents/1?action=audit" type="primary">
                <i className="ri-play-circle-line"></i> 开始审核
              </Button>
            </div>
          </div>
        )}
      </Card>
    </div>
  );
}