import React, { useState, useRef } from 'react';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/client/components/ui/card';
import { toast } from 'sonner';
import { Upload, Download, Trash2, FileText, GitMerge } from 'lucide-react';
import { documentsClient } from '@/client/api';

interface WordFile {
  id: string;
  file: File;
  name: string;
  size: number;
  type: string;
}

const WordMergePage: React.FC = () => {
  const [files, setFiles] = useState<WordFile[]>([]);
  const [isMerging, setIsMerging] = useState(false);
  const [mergedFile, setMergedFile] = useState<Blob | null>(null);
  const [outputFormat, setOutputFormat] = useState<'pdf' | 'docx'>('docx');
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 格式化文件大小
  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];
  };

  // 处理文件选择
  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = event.target.files;
    if (!selectedFiles) return;

    const newFiles: WordFile[] = [];
    for (let i = 0; i < selectedFiles.length; i++) {
      const file = selectedFiles[i];
      // 检查是否为Word文档
      if (file.type === 'application/msword' || 
          file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
          file.name.endsWith('.doc') || 
          file.name.endsWith('.docx')) {
        newFiles.push({
          id: Math.random().toString(36).substr(2, 9),
          file,
          name: file.name,
          size: file.size,
          type: file.type
        });
      } else {
        toast.warning(`文件 ${file.name} 不是Word文档格式，已跳过`);
      }
    }

    if (newFiles.length > 0) {
      setFiles(prev => [...prev, ...newFiles]);
      toast.success(`成功添加 ${newFiles.length} 个Word文档`);
    }

    // 清空input以便再次选择相同文件
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  // 删除文件
  const handleRemoveFile = (id: string) => {
    setFiles(prev => prev.filter(file => file.id !== id));
  };

  // 清空所有文件
  const handleClearAll = () => {
    setFiles([]);
    setMergedFile(null);
  };

  // 合并Word文档
  const handleMergeFiles = async () => {
    if (files.length < 2) {
      toast.error('请至少选择2个Word文档进行合并');
      return;
    }

    setIsMerging(true);
    try {

      // 调用后端API进行文档合并
      const response = await documentsClient.merge.$post({
        form: {
          files: files.map(f => f.file),
          outputFormat,
          preserveFormatting: true
        }
      });

      if (response.status !== 200) {
        const errorData = await response.json();
        throw new Error(errorData.message || '文档合并失败');
          }

      const result = await response.json();
      
      if (result.success) {
      // 从data URL中提取base64数据并转换为Blob
      const dataUrl = result.downloadUrl;
      const base64Data = dataUrl.split(',')[1];
      const byteCharacters = atob(base64Data);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], {
        type: outputFormat === 'pdf' ? 'application/pdf' : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      });
      
      setMergedFile(blob);
      toast.success(result.message);
      } else {
        throw new Error(result.message);
      }
    } catch (error) {
      console.error('合并失败:', error);
      toast.error(error instanceof Error ? error.message : '文档合并失败，请重试');
    } finally {
      setIsMerging(false);
    }
  };

  // 下载合并后的文档
  const handleDownload = () => {
    if (!mergedFile) return;

    const url = URL.createObjectURL(mergedFile);
    const a = document.createElement('a');
    a.href = url;
    a.download = `合并文档_${new Date().toISOString().slice(0, 10)}.docx`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <div className="p-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">Word文档合并</h1>
        <div className="flex gap-2">
          {files.length > 0 && (
            <Button variant="outline" onClick={handleClearAll}>
              <Trash2 className="h-4 w-4 mr-2" />
              清空
            </Button>
          )}
          <Button onClick={() => fileInputRef.current?.click()}>
            <Upload className="h-4 w-4 mr-2" />
            添加Word文档
          </Button>
        </div>
      </div>

      <input
        ref={fileInputRef}
        type="file"
        multiple
        accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        onChange={handleFileSelect}
        className="hidden"
      />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 文件列表 */}
        <Card>
          <CardHeader>
            <CardTitle>已选文档 ({files.length})</CardTitle>
          </CardHeader>
          <CardContent>
            {files.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                <FileText className="h-12 w-12 mx-auto mb-4 text-gray-300" />
                <p>请添加Word文档进行合并</p>
                <p className="text-sm mt-1">支持 .doc 和 .docx 格式</p>
              </div>
            ) : (
              <div className="space-y-3 max-h-96 overflow-y-auto">
                {files.map((file) => (
                  <div
                    key={file.id}
                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50"
                  >
                    <div className="flex-1 min-w-0">
                      <p className="font-medium truncate" title={file.name}>
                        {file.name}
                      </p>
                      <p className="text-sm text-gray-500">
                        {formatFileSize(file.size)} • {file.type}
                      </p>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleRemoveFile(file.id)}
                      className="text-red-600 hover:text-red-700"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* 操作面板 */}
        <Card>
          <CardHeader>
            <CardTitle>合并操作</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <p className="text-sm text-gray-600">
                选择多个Word文档后，点击合并按钮将它们合并为一个文档。
              </p>
              
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h4 className="font-medium text-blue-800 mb-2">使用说明：</h4>
                <ul className="text-sm text-blue-700 space-y-1">
                  <li>• 支持 .doc 和 .docx 格式的Word文档</li>
                  <li>• 至少需要选择2个文档进行合并</li>
                  <li>• 合并后的文档将保持原有格式</li>
                  <li>• 文档将按添加顺序进行合并</li>
                </ul>
              </div>
            </div>

            <div className="space-y-3">
              {/* 输出格式选择 */}
              <div className="flex items-center gap-4">
                <label className="text-sm font-medium">输出格式:</label>
                <div className="flex gap-2">
                  <label className="flex items-center gap-1">
                    <input
                      type="radio"
                      value="docx"
                      checked={outputFormat === 'docx'}
                      onChange={(e) => setOutputFormat(e.target.value as 'pdf' | 'docx')}
                      className="w-4 h-4"
                    />
                    Word (.docx)
                  </label>
                  <label className="flex items-center gap-1">
                    <input
                      type="radio"
                      value="pdf"
                      checked={outputFormat === 'pdf'}
                      onChange={(e) => setOutputFormat(e.target.value as 'pdf' | 'docx')}
                      className="w-4 h-4"
                    />
                    PDF (.pdf)
                  </label>
                </div>
              </div>

              <Button
                onClick={handleMergeFiles}
                disabled={files.length < 2 || isMerging}
                className="w-full"
              >
                <GitMerge className="h-4 w-4 mr-2" />
                {isMerging ? '合并中...' : `合并文档 (${files.length})`}
              </Button>

              {mergedFile && (
                <Button
                  onClick={handleDownload}
                  variant="secondary"
                  className="w-full"
                >
                  <Download className="h-4 w-4 mr-2" />
                  下载合并后的文档
                </Button>
              )}
            </div>

            {files.length > 0 && (
              <div className="text-sm text-gray-500">
                <p>文档顺序：将按照列表中的顺序进行合并</p>
                <p>您可以通过删除后重新添加来调整顺序</p>
                <p className="mt-2 text-blue-600">
                  处理流程：Word → PDF → 合并PDF → {outputFormat === 'pdf' ? '输出PDF' : 'PDF转Word'}
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 状态提示 */}
      {isMerging && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-lg font-medium">正在合并文档...</p>
            <p className="text-gray-600">请稍候，这可能需要一些时间</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default WordMergePage;