file-starter/src/client/admin-shadcn/pages/WordPreview.tsx

import { useState, useRef } from 'react';
import * as XLSX from 'xlsx';
import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
import ImageModule from 'open-docxtemplater-image-module-2';
import JSZip from 'jszip';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Input } from '@/client/components/ui/input';
import { Label } from '@/client/components/ui/label';
import { Alert, AlertDescription } from '@/client/components/ui/alert';
import {
  FileText, Upload, Download, Eye, FileWarning, FileSpreadsheet,
  RefreshCw, CheckCircle, AlertCircle, DownloadCloud, Image, Package,
  X, ZoomIn, ZoomOut, ChevronLeft, ChevronRight
} from 'lucide-react';
import { toast } from 'sonner';
import WordViewer from '@/client/admin-shadcn/components/WordViewer';
import { Badge } from '@/client/components/ui/badge';
import { Progress } from '@/client/components/ui/progress';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/client/components/ui/dialog';

interface WordFile {
  id: string;
  name: string;
  size: number;
  url: string;
  previewUrl?: string;
}

interface ExcelRow {
  [key: string]: string | number;
}

interface ImageMapping {
  [key: string]: {
    [imageName: string]: File;
  };
}

interface ProcessingResult {
  originalFile: File;
  generatedFiles: Array<{
    name: string;
    content: Blob;
    fields: Record<string, string>;
  }>;
  total: number;
}

export default function WordPreview() {
  const [selectedWordFile, setSelectedWordFile] = useState<File | null>(null);
  const [selectedExcelFile, setSelectedExcelFile] = useState<File | null>(null);
  const [imageZipFile, setImageZipFile] = useState<File | null>(null);
  const [previewFile, setPreviewFile] = useState<WordFile | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [previewLoading, setPreviewLoading] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const [processingResult, setProcessingResult] = useState<ProcessingResult | null>(null);
  const [excelData, setExcelData] = useState<ExcelRow[]>([]);
  const [processingProgress, setProcessingProgress] = useState(0);
  const [imageMappings, setImageMappings] = useState<ImageMapping>({});
  const [imagePreviewUrls, setImagePreviewUrls] = useState<Record<string, Record<string, string>>>({});
  const [selectedImage, setSelectedImage] = useState<{
    url: string;
    name: string;
    folder: string;
  } | null>(null);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [allImages, setAllImages] = useState<Array<{ url: string; name: string; folder: string }>>([]);
  
  const wordFileInputRef = useRef<HTMLInputElement>(null);
  const excelFileInputRef = useRef<HTMLInputElement>(null);
  const imageZipInputRef = useRef<HTMLInputElement>(null);

  // 文件选择处理
  const handleWordFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const validTypes = [
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      ];
      const maxSize = 10 * 1024 * 1024;

      if (!validTypes.includes(file.type)) {
        toast.error('请选择有效的Word文件（.docx格式）');
        return;
      }

      if (file.size > maxSize) {
        toast.error('文件大小超过10MB限制');
        return;
      }

      setSelectedWordFile(file);
      setShowPreview(false);
      toast.success('Word模板已选择');
    }
  };

  const handleExcelFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const validTypes = [
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-excel'
      ];
      const maxSize = 10 * 1024 * 1024;

      if (!validTypes.includes(file.type)) {
        toast.error('请选择有效的Excel文件（.xlsx/.xls格式）');
        return;
      }

      if (file.size > maxSize) {
        toast.error('文件大小超过10MB限制');
        return;
      }

      setSelectedExcelFile(file);
      parseExcelFile(file);
      toast.success('Excel数据文件已选择');
    }
  };

  const handleImageZipSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const validTypes = ['application/zip', 'application/x-zip-compressed'];
      const maxSize = 50 * 1024 * 1024;

      if (!validTypes.includes(file.type)) {
        toast.error('请选择有效的ZIP压缩文件');
        return;
      }

      if (file.size > maxSize) {
        toast.error('压缩文件大小超过50MB限制');
        return;
      }

      setImageZipFile(file);
      await parseImageZip(file);
      toast.success('图片压缩文件已选择');
    }
  };

  // 解析Excel文件
  const parseExcelFile = async (file: File) => {
    try {
      const data = await file.arrayBuffer();
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];

      if (jsonData.length < 2) {
        toast.error('Excel文件格式不正确，需要包含表头和至少一行数据');
        return;
      }

      const headers = jsonData[0] as string[];
      const rows: ExcelRow[] = [];

      for (let i = 1; i < jsonData.length; i++) {
        const row = jsonData[i];
        const rowData: ExcelRow = {};
        headers.forEach((header, index) => {
          rowData[header] = row[index] || '';
        });
        rows.push(rowData);
      }

      setExcelData(rows);
      toast.success(`成功解析 ${rows.length} 条数据记录`);
    } catch (error) {
      toast.error('Excel文件解析失败');
      console.error('Excel parsing error:', error);
    }
  };

  // 解析图片压缩文件
  const parseImageZip = async (file: File) => {
    try {
      const zip = new JSZip();
      const zipContent = await zip.loadAsync(file);
      const newImageMappings: ImageMapping = {};
      const newImagePreviewUrls: Record<string, Record<string, string>> = {};
      const allImages: Array<{ url: string; name: string; folder: string }> = [];

      // 解析文件夹结构：第一层为序号，第二层为图片
      for (const [path, zipEntry] of Object.entries(zipContent.files)) {
        if (!zipEntry.dir && isImageFile(path)) {
          const pathParts = path.split('/');
          if (pathParts.length >= 2) {
            const folderIndex = pathParts[0]; // 序号文件夹
            const imageName = pathParts[pathParts.length - 1].split('.')[0]; // 去掉扩展名的文件名
            const fullImageName = pathParts[pathParts.length - 1]; // 完整文件名
            
            if (!newImageMappings[folderIndex]) {
              newImageMappings[folderIndex] = {};
              newImagePreviewUrls[folderIndex] = {};
            }
            
            const imageFile = await zipEntry.async('blob');
            newImageMappings[folderIndex][imageName] = new File([imageFile], imageName, {
              type: getImageMimeType(path)
            });
            
            // 创建预览URL
            const previewUrl = URL.createObjectURL(imageFile);
            newImagePreviewUrls[folderIndex][imageName] = previewUrl;
            
            allImages.push({
              url: previewUrl,
              name: fullImageName,
              folder: folderIndex
            });
          }
        }
      }

      setImageMappings(newImageMappings);
      setImagePreviewUrls(newImagePreviewUrls);
      setAllImages(allImages);
      toast.success(`成功解析 ${Object.keys(newImageMappings).length} 个文件夹的图片`);
    } catch (error) {
      toast.error('图片压缩文件解析失败');
      console.error('Image zip parsing error:', error);
    }
  };

  // 工具函数
  const isImageFile = (filename: string): boolean => {
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
    return imageExtensions.some(ext => filename.toLowerCase().endsWith(ext));
  };

  const getImageMimeType = (filename: string): string => {
    const extension = filename.toLowerCase().split('.').pop();
    const mimeTypes: Record<string, string> = {
      'jpg': 'image/jpeg',
      'jpeg': 'image/jpeg',
      'png': 'image/png',
      'gif': 'image/gif',
      'bmp': 'image/bmp',
      'webp': 'image/webp'
    };
    return mimeTypes[extension || ''] || 'image/jpeg';
  };

  // 替换Word字段并插入图片
  const replaceFieldsInWord = async (wordFile: File, excelRow: ExcelRow, rowIndex: number): Promise<Blob> => {
    try {
      const arrayBuffer = await wordFile.arrayBuffer();
      const zip = new PizZip(arrayBuffer);
      
      // 配置图片模块
      const imageOpts = {
        centered: false,
        getImage: (tagValue: string) => {
          console.log('tagValue', tagValue);
          if (tagValue && typeof tagValue === 'string') {
            // 从imageMappings中获取对应的图片
            const folderIndex = (rowIndex + 1).toString();
            const imageFile = imageMappings[folderIndex]?.[tagValue];
            if (imageFile) {
              return imageFile.arrayBuffer();
            }
          }
          return null;
        },
        getSize: () => [200, 150] // 固定尺寸
      };
      
      const imageModule = new ImageModule(imageOpts);

      const doc = new Docxtemplater(zip, {
        paragraphLoop: true,
        linebreaks: true,
        modules: [imageModule]
      })

      // 处理嵌套数据结构
      const processedData: Record<string, any> = {};
      
      // 处理普通字段
      Object.entries(excelRow).forEach(([key, value]) => {
        if (key.includes('.')) {
          const parts = key.split('.');
          let current = processedData;
          for (let i = 0; i < parts.length - 1; i++) {
            if (!current[parts[i]]) {
              current[parts[i]] = {};
            }
            current = current[parts[i]];
          }
          current[parts[parts.length - 1]] = value;
        } else {
          processedData[key] = value;
        }
      });

      // 处理图片字段 - 直接传递图片名称
      const folderIndex = (rowIndex + 1).toString();
      if (imageMappings[folderIndex]) {
        for (const [imageName] of Object.entries(imageMappings[folderIndex])) {
          processedData[imageName] = imageName;
        }
      }

      doc.render(processedData);
      
      const generatedDoc = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });

      return generatedDoc;
    } catch (error) {
      console.error('Word处理错误:', error);
      throw new Error('Word文档处理失败，请检查模板格式');
    }
  };

  // 处理文件
  const processFiles = async () => {
    if (!selectedWordFile || !selectedExcelFile || excelData.length === 0) {
      toast.error('请先选择Word模板和Excel数据文件');
      return;
    }

    setIsLoading(true);
    setProcessingProgress(0);
    
    try {
      const generatedFiles: ProcessingResult['generatedFiles'] = [];
      
      for (let i = 0; i < excelData.length; i++) {
        const row = excelData[i];
        const processedBlob = await replaceFieldsInWord(selectedWordFile, row, i);
        
        const fileName = `processed_${i + 1}_${selectedWordFile.name}`;
        generatedFiles.push({
          name: fileName,
          content: processedBlob,
          fields: row
        });

        setProcessingProgress(((i + 1) / excelData.length) * 100);
      }

      const result: ProcessingResult = {
        originalFile: selectedWordFile,
        generatedFiles,
        total: generatedFiles.length
      };

      setProcessingResult(result);
      toast.success(`成功生成 ${generatedFiles.length} 个文档`);
      
    } catch (error) {
      toast.error('文档处理失败');
      console.error('Processing error:', error);
    } finally {
      setIsLoading(false);
      setProcessingProgress(0);
    }
  };

  // 预览功能
  const handlePreview = async () => {
    if (!selectedWordFile) {
      toast.error('请先选择Word文件');
      return;
    }

    setPreviewLoading(true);
    setShowPreview(true);
    
    try {
      const fileUrl = URL.createObjectURL(selectedWordFile);
      const wordFile: WordFile = {
        id: Date.now().toString(),
        name: selectedWordFile.name,
        size: selectedWordFile.size,
        url: fileUrl,
        previewUrl: fileUrl
      };
      
      setPreviewFile(wordFile);
      toast.success('正在预览Word模板...');
    } catch (error) {
      toast.error('文件预览失败');
      console.error('Preview error:', error);
      setShowPreview(false);
    } finally {
      setPreviewLoading(false);
    }
  };

  // 下载功能
  const downloadProcessedFile = (file: ProcessingResult['generatedFiles'][0]) => {
    const url = URL.createObjectURL(file.content);
    const a = document.createElement('a');
    a.href = url;
    a.download = file.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const downloadAllFiles = () => {
    if (!processingResult) return;

    processingResult.generatedFiles.forEach((file, index) => {
      setTimeout(() => {
        downloadProcessedFile(file);
      }, index * 500);
    });
  };

  const clearAllFiles = () => {
    setSelectedWordFile(null);
    setSelectedExcelFile(null);
    setImageZipFile(null);
    setExcelData([]);
    setProcessingResult(null);
    setImageMappings({});
    setImagePreviewUrls({});
    setSelectedImage(null);
    setAllImages([]);
    setPreviewFile(null);
    setShowPreview(false);
    
    if (wordFileInputRef.current) wordFileInputRef.current.value = '';
    if (excelFileInputRef.current) excelFileInputRef.current.value = '';
    if (imageZipInputRef.current) imageZipInputRef.current.value = '';
    
    toast.success('已清除所有文件');
  };

  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 openImagePreview = (url: string, name: string, folder: string) => {
    const imageIndex = allImages.findIndex(img => img.url === url);
    setCurrentImageIndex(imageIndex !== -1 ? imageIndex : 0);
    setSelectedImage({ url, name, folder });
  };

  const closeImagePreview = () => {
    setSelectedImage(null);
  };

  const navigateImage = (direction: 'prev' | 'next') => {
    if (allImages.length === 0) return;
    
    let newIndex = currentImageIndex;
    if (direction === 'prev') {
      newIndex = currentImageIndex > 0 ? currentImageIndex - 1 : allImages.length - 1;
    } else {
      newIndex = currentImageIndex < allImages.length - 1 ? currentImageIndex + 1 : 0;
    }
    
    setCurrentImageIndex(newIndex);
    setSelectedImage(allImages[newIndex]);
  };

  const getTotalImages = () => {
    return Object.values(imagePreviewUrls).reduce((total, folder) => total + Object.keys(folder).length, 0);
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Word批量处理工具（增强版）</h1>
        <p className="text-muted-foreground">支持图片压缩文件，自动生成替换字段和图片的文档</p>
      </div>

      {/* 文件上传区域 */}
      <div className="grid gap-6 md:grid-cols-3">
        {/* Word模板上传 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              选择Word模板
            </CardTitle>
            <CardDescription>
              支持 .docx 格式的Word文档，最大10MB
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid w-full items-center gap-1.5">
              <Label htmlFor="word-file">Word模板文件</Label>
              <Input
                ref={wordFileInputRef}
                id="word-file"
                type="file"
                accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                onChange={handleWordFileSelect}
              />
            </div>

            {selectedWordFile && (
              <Alert>
                <FileText className="h-4 w-4" />
                <AlertDescription>
                  <div className="space-y-1">
                    <p><strong>文件名:</strong> {selectedWordFile.name}</p>
                    <p><strong>大小:</strong> {formatFileSize(selectedWordFile.size)}</p>
                  </div>
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </Card>

        {/* Excel数据上传 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5" />
              选择Excel数据
            </CardTitle>
            <CardDescription>
              支持 .xlsx/.xls 格式的Excel文档，最大10MB
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid w-full items-center gap-1.5">
              <Label htmlFor="excel-file">Excel数据文件</Label>
              <Input
                ref={excelFileInputRef}
                id="excel-file"
                type="file"
                accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                onChange={handleExcelFileSelect}
              />
            </div>

            {selectedExcelFile && (
              <Alert>
                <FileSpreadsheet className="h-4 w-4" />
                <AlertDescription>
                  <div className="space-y-1">
                    <p><strong>文件名:</strong> {selectedExcelFile.name}</p>
                    <p><strong>大小:</strong> {formatFileSize(selectedExcelFile.size)}</p>
                    {excelData.length > 0 && (
                      <p><strong>数据行数:</strong> {excelData.length}</p>
                    )}
                  </div>
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </Card>

        {/* 图片压缩文件上传 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Package className="h-5 w-5" />
              选择图片压缩包
            </CardTitle>
            <CardDescription>
              支持 .zip 格式压缩包，最大50MB
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid w-full items-center gap-1.5">
              <Label htmlFor="image-zip">图片压缩文件</Label>
              <Input
                ref={imageZipInputRef}
                id="image-zip"
                type="file"
                accept=".zip,application/zip,application/x-zip-compressed"
                onChange={handleImageZipSelect}
              />
            </div>

            {imageZipFile && (
              <Alert>
                <Image className="h-4 w-4" />
                <AlertDescription>
                  <div className="space-y-1">
                    <p><strong>文件名:</strong> {imageZipFile.name}</p>
                    <p><strong>大小:</strong> {formatFileSize(imageZipFile.size)}</p>
                    {Object.keys(imageMappings).length > 0 && (
                      <p><strong>文件夹数:</strong> {Object.keys(imageMappings).length}</p>
                    )}
                  </div>
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 操作按钮 */}
      <Card>
        <CardHeader>
          <CardTitle>操作区域</CardTitle>
          <CardDescription>选择文件后执行相应操作</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2 flex-wrap">
            <Button
              onClick={handlePreview}
              disabled={!selectedWordFile || previewLoading}
              variant="outline"
            >
              <Eye className="h-4 w-4 mr-2" />
              预览模板
            </Button>
            
            <Button
              onClick={processFiles}
              disabled={!selectedWordFile || !selectedExcelFile || excelData.length === 0 || isLoading}
              className="bg-blue-600 hover:bg-blue-700"
            >
              {isLoading ? (
                <>
                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                  处理中...
                </>
              ) : (
                <>
                  <Upload className="h-4 w-4 mr-2" />
                  开始处理
                </>
              )}
            </Button>

            <Button
              onClick={clearAllFiles}
              variant="outline"
              className="text-red-600 hover:text-red-700"
            >
              清除所有
            </Button>
          </div>

          {isLoading && (
            <div className="space-y-2">
              <Progress value={processingProgress} className="w-full" />
              <p className="text-sm text-muted-foreground text-center">
                正在处理文档... {Math.round(processingProgress)}%
              </p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 预览区域 */}
      {showPreview && selectedWordFile && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              文档预览
            </CardTitle>
            <CardDescription>
              {selectedWordFile.name}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <WordViewer file={selectedWordFile} />
          </CardContent>
        </Card>
      )}

      {/* 图片映射预览 */}
      {Object.keys(imageMappings).length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Image className="h-5 w-5" />
              图片映射预览
            </CardTitle>
            <CardDescription>
              共 {getTotalImages()} 张图片，点击缩略图查看大图
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {Object.entries(imagePreviewUrls).map(([folder, images]) => (
                <div key={folder} className="border rounded-lg p-4">
                  <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
                    <Package className="h-4 w-4" />
                    文件夹 {folder} ({Object.keys(images).length} 张图片)
                  </h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
                    {Object.entries(images).map(([imageName, previewUrl]) => (
                      <div
                        key={imageName}
                        className="group relative cursor-pointer"
                        onClick={() => openImagePreview(previewUrl, imageName, folder)}
                      >
                        <div className="aspect-square rounded-lg overflow-hidden border hover:border-blue-500 transition-colors">
                          <img
                            src={previewUrl}
                            alt={imageName}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="mt-1">
                          <p className="text-xs text-center truncate text-gray-600 group-hover:text-blue-600">
                            {imageName}
                          </p>
                        </div>
                        <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity rounded-lg flex items-center justify-center">
                          <ZoomIn className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 数据预览 */}
      {excelData.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5" />
              Excel数据预览
            </CardTitle>
            <CardDescription>
              显示前5行数据，共 {excelData.length} 行
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    {Object.keys(excelData[0]).map(header => (
                      <th key={header} className="text-left p-2 font-medium">
                        {header}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {excelData.slice(0, 5).map((row, index) => (
                    <tr key={index} className="border-b">
                      {Object.values(row).map((value, valueIndex) => (
                        <td key={valueIndex} className="p-2">
                          {String(value)}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
              {excelData.length > 5 && (
                <p className="text-sm text-muted-foreground mt-2 text-center">
                  还有 {excelData.length - 5} 行数据...
                </p>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 处理结果预览 */}
      {processingResult && processingResult.generatedFiles.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              处理结果预览
            </CardTitle>
            <CardDescription>
              预览第一个生成的文档
            </CardDescription>
          </CardHeader>
          <CardContent>
            <WordViewer file={processingResult.generatedFiles[0].content} />
          </CardContent>
        </Card>
      )}

      {/* 处理结果 */}
      {processingResult && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5 text-green-500" />
              处理完成
            </CardTitle>
            <CardDescription>
              共生成 {processingResult.total} 个文档
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <Button
                onClick={downloadAllFiles}
                className="w-full"
              >
                <DownloadCloud className="h-4 w-4 mr-2" />
                下载全部文档
              </Button>
              
              <div className="space-y-2 max-h-64 overflow-y-auto">
                {processingResult.generatedFiles.map((file, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                  >
                    <div>
                      <p className="font-medium">{file.name}</p>
                      <p className="text-sm text-muted-foreground">
                        包含 {Object.keys(file.fields).length} 个字段
                      </p>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => downloadProcessedFile(file)}
                    >
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 使用说明 */}
      <Card>
        <CardHeader>
          <CardTitle>使用说明（增强版）</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3 text-sm">
            <div>
              <h4 className="font-medium mb-1">1. 准备Word模板</h4>
              <p className="text-muted-foreground">
                使用 {'{字段名}'} 格式作为文本占位符，使用 {'{%image:图片名%}'} 格式作为图片占位符
              </p>
            </div>
            
            <div>
              <h4 className="font-medium mb-1">2. 准备Excel数据</h4>
              <p className="text-muted-foreground">
                Excel文件第一行为表头，列名应与Word模板中的字段名对应
              </p>
            </div>
            
            <div>
              <h4 className="font-medium mb-1">3. 准备图片压缩包</h4>
              <p className="text-muted-foreground">
                压缩包结构：第一层为序号文件夹（1,2,3...对应Excel行），第二层为图片文件（文件名对应模板中的图片名）
              </p>
            </div>
            
            <div>
              <h4 className="font-medium mb-1">4. 图片命名规则</h4>
              <p className="text-muted-foreground">
                例如：模板中使用 {'{%logo%}'}，则图片文件应命名为 logo.jpg/png等
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 注意事项 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5" />
            注意事项
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 text-sm">
            <p>• Word模板中的字段名必须与Excel表头完全匹配</p>
            <p>• 图片文件名必须与模板中的图片占位符匹配（不含扩展名）</p>
            <p>• 文件夹序号必须与Excel行号对应（第1行对应文件夹"1"）</p>
            <p>• 如果图片不存在，对应位置将留空</p>
            <p>• 支持jpg、jpeg、png、gif、bmp、webp格式图片</p>
            <p>• 图片占位符使用 {'{%图片名%}'} 格式，如 {'{%logo%}'}</p>
          </div>
        </CardContent>
      </Card>

      {/* 图片查看器模态框 */}
      <Dialog open={selectedImage !== null} onOpenChange={closeImagePreview}>
        <DialogContent className="max-w-4xl max-h-[90vh] p-0">
          <DialogHeader className="px-6 py-4 border-b">
            <DialogTitle className="flex items-center justify-between">
              <span>图片预览</span>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <span>{selectedImage?.folder} / {selectedImage?.name}</span>
                <span>({currentImageIndex + 1} / {allImages.length})</span>
              </div>
            </DialogTitle>
          </DialogHeader>
          
          {selectedImage && (
            <div className="relative">
              <div className="flex items-center justify-center p-4">
                <img
                  src={selectedImage.url}
                  alt={selectedImage.name}
                  className="max-w-full max-h-[70vh] object-contain"
                />
              </div>
              
              {/* 导航按钮 */}
              {allImages.length > 1 && (
                <>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="absolute left-2 top-1/2 -translate-y-1/2"
                    onClick={() => navigateImage('prev')}
                  >
                    <ChevronLeft className="h-5 w-5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="absolute right-2 top-1/2 -translate-y-1/2"
                    onClick={() => navigateImage('next')}
                  >
                    <ChevronRight className="h-5 w-5" />
                  </Button>
                </>
              )}
              
              {/* 底部信息 */}
              <div className="px-6 py-3 border-t bg-gray-50">
                <div className="flex items-center justify-between text-sm">
                  <div>
                    <span className="font-medium">文件名:</span> {selectedImage.name}
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      const a = document.createElement('a');
                      a.href = selectedImage.url;
                      a.download = selectedImage.name;
                      a.click();
                    }}
                  >
                    <Download className="h-4 w-4 mr-2" />
                    下载图片
                  </Button>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}