"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { toast } from "@/components/ui/use-toast"
import {
  Camera,
  Download,
  FileText,
  ImageIcon,
  Settings,
  Eye,
  Trash2,
  RefreshCw,
  Monitor,
  Smartphone,
  Tablet,
  Globe,
  CheckCircle,
  XCircle,
  Clock,
  Zap,
} from "lucide-react"
import { enhancedScreenshotService, type ScreenshotOptions } from "@/lib/documentation/enhanced-screenshot-service"
import { generateDocx } from "@/lib/documentation/docx-generator"
import { pageRegistry } from "@/lib/documentation/page-registry"

interface Screenshot {
  id: string
  name: string
  url: string
  dataUrl?: string
  timestamp: Date
  status: "pending" | "success" | "failed" | "capturing"
  error?: string
  method?: string
  size?: { width: number; height: number }
}

interface DocumentSettings {
  title: string
  author: string
  description: string
  includeTimestamp: boolean
  includePageUrls: boolean
  imageFormat: "png" | "jpeg" | "webp"
  imageQuality: number
  pageSize: "A4" | "A3" | "Letter"
  orientation: "portrait" | "landscape"
}

export default function DocumentationPage() {
  const [screenshots, setScreenshots] = useState<Screenshot[]>([])
  const [selectedPages, setSelectedPages] = useState<string[]>([])
  const [isCapturing, setIsCapturing] = useState(false)
  const [captureProgress, setCaptureProgress] = useState(0)
  const [isGeneratingDoc, setIsGeneratingDoc] = useState(false)
  const [previewMode, setPreviewMode] = useState<"desktop" | "tablet" | "mobile">("desktop")
  const [currentPreviewUrl, setCurrentPreviewUrl] = useState("")
  const [documentSettings, setDocumentSettings] = useState<DocumentSettings>({
    title: "用户数据资产中台文档",
    author: "系统管理员",
    description: "自动生成的系统文档",
    includeTimestamp: true,
    includePageUrls: true,
    imageFormat: "png",
    imageQuality: 0.9,
    pageSize: "A4",
    orientation: "portrait",
  })

  const previewRef = useRef<HTMLIFrameElement>(null)
  const [screenshotOptions, setScreenshotOptions] = useState<ScreenshotOptions>({
    format: "png",
    quality: 0.9,
    scale: 1,
    backgroundColor: "#ffffff",
    timeout: 30000,
  })

  const pages = pageRegistry.getAllPages()

  useEffect(() => {
    // 初始化选中所有页面
    setSelectedPages(pages.map((p) => p.path))
  }, [])

  const handlePageSelection = (pagePath: string, checked: boolean) => {
    if (checked) {
      setSelectedPages((prev) => [...prev, pagePath])
    } else {
      setSelectedPages((prev) => prev.filter((p) => p !== pagePath))
    }
  }

  const selectAllPages = () => {
    setSelectedPages(pages.map((p) => p.path))
  }

  const deselectAllPages = () => {
    setSelectedPages([])
  }

  const getViewportSize = () => {
    switch (previewMode) {
      case "mobile":
        return { width: 375, height: 667 }
      case "tablet":
        return { width: 768, height: 1024 }
      default:
        return { width: 1920, height: 1080 }
    }
  }

  const captureScreenshot = async (page: (typeof pages)[0]): Promise<Screenshot> => {
    const screenshot: Screenshot = {
      id: `${page.path}-${Date.now()}`,
      name: page.name,
      url: page.path,
      timestamp: new Date(),
      status: "capturing",
    }

    try {
      // 方法1: 尝试直接截图当前页面（如果是当前页面）
      if (window.location.pathname === page.path) {
        const result = await enhancedScreenshotService.captureViewport({
          ...screenshotOptions,
          ...getViewportSize(),
        })

        if (result.success && result.dataUrl) {
          return {
            ...screenshot,
            status: "success",
            dataUrl: result.dataUrl,
            method: result.method,
            size: getViewportSize(),
          }
        }
      }

      // 方法2: 使用新窗口截图
      const newWindow = window.open(
        page.path,
        "_blank",
        `width=${getViewportSize().width},height=${getViewportSize().height}`,
      )

      if (!newWindow) {
        throw new Error("无法打开新窗口，请检查浏览器弹窗设置")
      }

      // 等待页面加载
      await new Promise((resolve, reject) => {
        const timeout = setTimeout(() => {
          newWindow.close()
          reject(new Error("页面加载超时"))
        }, 15000)

        const checkLoaded = () => {
          try {
            if (newWindow.document && newWindow.document.readyState === "complete") {
              clearTimeout(timeout)
              resolve(void 0)
            } else {
              setTimeout(checkLoaded, 100)
            }
          } catch (e) {
            // 跨域问题，等待一段时间后继续
            setTimeout(checkLoaded, 100)
          }
        }

        newWindow.addEventListener("load", () => {
          clearTimeout(timeout)
          setTimeout(resolve, 2000) // 额外等待2秒确保渲染完成
        })

        checkLoaded()
      })

      // 尝试截图新窗口
      let result
      try {
        if (newWindow.document && newWindow.document.body) {
          result = await enhancedScreenshotService.captureElement(newWindow.document.body, {
            ...screenshotOptions,
            ...getViewportSize(),
          })
        }
      } catch (e) {
        console.warn("新窗口截图失败，尝试其他方法:", e)
      }

      newWindow.close()

      if (result?.success && result.dataUrl) {
        return {
          ...screenshot,
          status: "success",
          dataUrl: result.dataUrl,
          method: result.method,
          size: getViewportSize(),
        }
      }

      // 方法3: 使用iframe截图（最后的备选方案）
      const iframe = document.createElement("iframe")
      iframe.style.position = "absolute"
      iframe.style.left = "-9999px"
      iframe.style.width = `${getViewportSize().width}px`
      iframe.style.height = `${getViewportSize().height}px`
      iframe.src = page.path

      document.body.appendChild(iframe)

      try {
        await new Promise((resolve, reject) => {
          const timeout = setTimeout(() => {
            reject(new Error("iframe加载超时"))
          }, 15000)

          iframe.onload = () => {
            clearTimeout(timeout)
            setTimeout(resolve, 2000) // 等待渲染完成
          }
        })

        // 尝试截图iframe内容
        if (iframe.contentDocument && iframe.contentDocument.body) {
          result = await enhancedScreenshotService.captureElement(iframe.contentDocument.body, {
            ...screenshotOptions,
            ...getViewportSize(),
          })
        }
      } finally {
        document.body.removeChild(iframe)
      }

      if (result?.success && result.dataUrl) {
        return {
          ...screenshot,
          status: "success",
          dataUrl: result.dataUrl,
          method: result.method,
          size: getViewportSize(),
        }
      }

      throw new Error("所有截图方法都失败了")
    } catch (error) {
      console.error(`截图失败 ${page.name}:`, error)
      return {
        ...screenshot,
        status: "failed",
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }

  const startCapture = async () => {
    if (selectedPages.length === 0) {
      toast({
        title: "请选择页面",
        description: "请至少选择一个页面进行截图",
        variant: "destructive",
      })
      return
    }

    setIsCapturing(true)
    setCaptureProgress(0)
    setScreenshots([])

    const selectedPageObjects = pages.filter((p) => selectedPages.includes(p.path))
    const newScreenshots: Screenshot[] = []

    for (let i = 0; i < selectedPageObjects.length; i++) {
      const page = selectedPageObjects[i]

      // 更新进度
      setCaptureProgress((i / selectedPageObjects.length) * 100)

      // 添加待处理的截图
      const pendingScreenshot: Screenshot = {
        id: `${page.path}-${Date.now()}`,
        name: page.name,
        url: page.path,
        timestamp: new Date(),
        status: "capturing",
      }

      newScreenshots.push(pendingScreenshot)
      setScreenshots([...newScreenshots])

      try {
        const screenshot = await captureScreenshot(page)

        // 更新截图状态
        const updatedScreenshots = [...newScreenshots]
        updatedScreenshots[i] = screenshot
        setScreenshots(updatedScreenshots)
        newScreenshots[i] = screenshot

        if (screenshot.status === "success") {
          toast({
            title: "截图成功",
            description: `${page.name} 截图完成`,
          })
        } else {
          toast({
            title: "截图失败",
            description: `${page.name}: ${screenshot.error}`,
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error(`截图过程出错:`, error)
        const failedScreenshot: Screenshot = {
          ...pendingScreenshot,
          status: "failed",
          error: error instanceof Error ? error.message : "未知错误",
        }

        const updatedScreenshots = [...newScreenshots]
        updatedScreenshots[i] = failedScreenshot
        setScreenshots(updatedScreenshots)
        newScreenshots[i] = failedScreenshot
      }

      // 添加延迟避免过快请求
      if (i < selectedPageObjects.length - 1) {
        await new Promise((resolve) => setTimeout(resolve, 1000))
      }
    }

    setCaptureProgress(100)
    setIsCapturing(false)

    const successCount = newScreenshots.filter((s) => s.status === "success").length
    const failedCount = newScreenshots.filter((s) => s.status === "failed").length

    toast({
      title: "截图完成",
      description: `成功: ${successCount}, 失败: ${failedCount}`,
      variant: successCount > 0 ? "default" : "destructive",
    })
  }

  const retryFailedScreenshots = async () => {
    const failedScreenshots = screenshots.filter((s) => s.status === "failed")

    if (failedScreenshots.length === 0) {
      toast({
        title: "没有失败的截图",
        description: "所有截图都已成功",
      })
      return
    }

    setIsCapturing(true)
    setCaptureProgress(0)

    for (let i = 0; i < failedScreenshots.length; i++) {
      const failedScreenshot = failedScreenshots[i]
      const page = pages.find((p) => p.path === failedScreenshot.url)

      if (!page) continue

      setCaptureProgress((i / failedScreenshots.length) * 100)

      // 更新状态为重新截图中
      setScreenshots((prev) =>
        prev.map((s) => (s.id === failedScreenshot.id ? { ...s, status: "capturing" as const } : s)),
      )

      try {
        const newScreenshot = await captureScreenshot(page)

        setScreenshots((prev) => prev.map((s) => (s.id === failedScreenshot.id ? newScreenshot : s)))

        if (newScreenshot.status === "success") {
          toast({
            title: "重试成功",
            description: `${page.name} 截图完成`,
          })
        }
      } catch (error) {
        console.error(`重试截图失败:`, error)
        setScreenshots((prev) =>
          prev.map((s) =>
            s.id === failedScreenshot.id
              ? { ...s, status: "failed" as const, error: error instanceof Error ? error.message : "未知错误" }
              : s,
          ),
        )
      }

      await new Promise((resolve) => setTimeout(resolve, 1000))
    }

    setCaptureProgress(100)
    setIsCapturing(false)
  }

  const generateDocument = async () => {
    const successfulScreenshots = screenshots.filter((s) => s.status === "success" && s.dataUrl)

    if (successfulScreenshots.length === 0) {
      toast({
        title: "没有可用的截图",
        description: "请先成功截图至少一个页面",
        variant: "destructive",
      })
      return
    }

    setIsGeneratingDoc(true)

    try {
      const docBuffer = await generateDocx(successfulScreenshots, documentSettings)

      // 下载文档
      const blob = new Blob([docBuffer], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      })

      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `${documentSettings.title.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, "_")}_${new Date().toISOString().split("T")[0]}.docx`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

      toast({
        title: "文档生成成功",
        description: `已生成包含 ${successfulScreenshots.length} 个截图的文档`,
      })
    } catch (error) {
      console.error("文档生成失败:", error)
      toast({
        title: "文档生成失败",
        description: error instanceof Error ? error.message : "未知错误",
        variant: "destructive",
      })
    } finally {
      setIsGeneratingDoc(false)
    }
  }

  const deleteScreenshot = (id: string) => {
    setScreenshots((prev) => prev.filter((s) => s.id !== id))
    toast({
      title: "截图已删除",
      description: "截图已从列表中移除",
    })
  }

  const clearAllScreenshots = () => {
    setScreenshots([])
    toast({
      title: "已清空所有截图",
      description: "所有截图已从列表中移除",
    })
  }

  const previewPage = (url: string) => {
    setCurrentPreviewUrl(url)
  }

  const getStatusIcon = (status: Screenshot["status"]) => {
    switch (status) {
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "failed":
        return <XCircle className="h-4 w-4 text-red-500" />
      case "capturing":
        return <Clock className="h-4 w-4 text-blue-500 animate-spin" />
      default:
        return <Clock className="h-4 w-4 text-gray-400" />
    }
  }

  const getPreviewIcon = () => {
    switch (previewMode) {
      case "mobile":
        return <Smartphone className="h-4 w-4" />
      case "tablet":
        return <Tablet className="h-4 w-4" />
      default:
        return <Monitor className="h-4 w-4" />
    }
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">文档生成器</h1>
          <p className="text-muted-foreground mt-1">自动截图并生成系统文档</p>
        </div>
        <div className="flex items-center space-x-2">
          <Badge variant="outline" className="flex items-center space-x-1">
            <Zap className="h-3 w-3" />
            <span>增强版截图</span>
          </Badge>
        </div>
      </div>

      <Tabs defaultValue="capture" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="capture">页面截图</TabsTrigger>
          <TabsTrigger value="preview">预览页面</TabsTrigger>
          <TabsTrigger value="screenshots">截图管理</TabsTrigger>
          <TabsTrigger value="settings">文档设置</TabsTrigger>
        </TabsList>

        <TabsContent value="capture" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Globe className="h-5 w-5" />
                    <span>选择页面</span>
                  </CardTitle>
                  <CardDescription>选择需要截图的页面，支持多选</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <Button variant="outline" size="sm" onClick={selectAllPages}>
                        全选
                      </Button>
                      <Button variant="outline" size="sm" onClick={deselectAllPages}>
                        取消全选
                      </Button>
                    </div>
                    <Badge variant="secondary">
                      已选择 {selectedPages.length} / {pages.length} 个页面
                    </Badge>
                  </div>

                  <ScrollArea className="h-[400px]">
                    <div className="space-y-2">
                      {pages.map((page) => (
                        <div
                          key={page.path}
                          className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50"
                        >
                          <Checkbox
                            checked={selectedPages.includes(page.path)}
                            onCheckedChange={(checked) => handlePageSelection(page.path, checked as boolean)}
                          />
                          <div className="flex-1 min-w-0">
                            <div className="font-medium">{page.name}</div>
                            <div className="text-sm text-muted-foreground truncate">{page.path}</div>
                            {page.description && (
                              <div className="text-xs text-muted-foreground mt-1">{page.description}</div>
                            )}
                          </div>
                          <Button variant="ghost" size="sm" onClick={() => previewPage(page.path)}>
                            <Eye className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>
            </div>

            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Settings className="h-5 w-5" />
                    <span>截图设置</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">预览模式</label>
                    <Select
                      value={previewMode}
                      onValueChange={(value: "desktop" | "tablet" | "mobile") => setPreviewMode(value)}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="desktop">
                          <div className="flex items-center space-x-2">
                            <Monitor className="h-4 w-4" />
                            <span>桌面 (1920x1080)</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="tablet">
                          <div className="flex items-center space-x-2">
                            <Tablet className="h-4 w-4" />
                            <span>平板 (768x1024)</span>
                          </div>
                        </SelectItem>
                        <SelectItem value="mobile">
                          <div className="flex items-center space-x-2">
                            <Smartphone className="h-4 w-4" />
                            <span>手机 (375x667)</span>
                          </div>
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">图片格式</label>
                    <Select
                      value={screenshotOptions.format}
                      onValueChange={(value: "png" | "jpeg" | "webp") =>
                        setScreenshotOptions((prev) => ({ ...prev, format: value }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="png">PNG (高质量)</SelectItem>
                        <SelectItem value="jpeg">JPEG (小文件)</SelectItem>
                        <SelectItem value="webp">WebP (平衡)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">
                      图片质量: {Math.round((screenshotOptions.quality || 0.9) * 100)}%
                    </label>
                    <input
                      type="range"
                      min="0.1"
                      max="1"
                      step="0.1"
                      value={screenshotOptions.quality || 0.9}
                      onChange={(e) =>
                        setScreenshotOptions((prev) => ({
                          ...prev,
                          quality: Number.parseFloat(e.target.value),
                        }))
                      }
                      className="w-full"
                    />
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">缩放比例: {screenshotOptions.scale || 1}x</label>
                    <input
                      type="range"
                      min="0.5"
                      max="3"
                      step="0.1"
                      value={screenshotOptions.scale || 1}
                      onChange={(e) =>
                        setScreenshotOptions((prev) => ({
                          ...prev,
                          scale: Number.parseFloat(e.target.value),
                        }))
                      }
                      className="w-full"
                    />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Camera className="h-5 w-5" />
                    <span>开始截图</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {isCapturing && (
                    <div className="space-y-2">
                      <div className="flex items-center justify-between text-sm">
                        <span>截图进度</span>
                        <span>{Math.round(captureProgress)}%</span>
                      </div>
                      <Progress value={captureProgress} />
                    </div>
                  )}

                  <div className="space-y-2">
                    <Button
                      onClick={startCapture}
                      disabled={isCapturing || selectedPages.length === 0}
                      className="w-full"
                    >
                      {isCapturing ? (
                        <>
                          <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                          截图中...
                        </>
                      ) : (
                        <>
                          <Camera className="mr-2 h-4 w-4" />
                          开始截图
                        </>
                      )}
                    </Button>

                    {screenshots.some((s) => s.status === "failed") && (
                      <Button
                        variant="outline"
                        onClick={retryFailedScreenshots}
                        disabled={isCapturing}
                        className="w-full bg-transparent"
                      >
                        <RefreshCw className="mr-2 h-4 w-4" />
                        重试失败的截图
                      </Button>
                    )}
                  </div>

                  <div className="text-sm text-muted-foreground">
                    <div className="flex items-center justify-between">
                      <span>总页面数:</span>
                      <span>{pages.length}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span>已选择:</span>
                      <span>{selectedPages.length}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span>已截图:</span>
                      <span>{screenshots.length}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="preview" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  {getPreviewIcon()}
                  <span>页面预览</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Select
                    value={previewMode}
                    onValueChange={(value: "desktop" | "tablet" | "mobile") => setPreviewMode(value)}
                  >
                    <SelectTrigger className="w-[150px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="desktop">桌面</SelectItem>
                      <SelectItem value="tablet">平板</SelectItem>
                      <SelectItem value="mobile">手机</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardTitle>
              <CardDescription>预览页面在不同设备上的显示效果</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="border rounded-lg overflow-hidden bg-gray-100 p-4">
                <div
                  className="mx-auto bg-white shadow-lg rounded-lg overflow-hidden"
                  style={{
                    width: `${getViewportSize().width}px`,
                    height: `${getViewportSize().height}px`,
                    maxWidth: "100%",
                    transform: "scale(0.5)",
                    transformOrigin: "top center",
                  }}
                >
                  {currentPreviewUrl ? (
                    <iframe
                      ref={previewRef}
                      src={currentPreviewUrl}
                      className="w-full h-full border-0"
                      title="页面预览"
                    />
                  ) : (
                    <div className="flex items-center justify-center h-full text-muted-foreground">
                      <div className="text-center">
                        <Globe className="h-12 w-12 mx-auto mb-4 opacity-50" />
                        <p>请从左侧选择一个页面进行预览</p>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="screenshots" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <ImageIcon className="h-5 w-5" />
                  <span>截图管理</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="outline">{screenshots.filter((s) => s.status === "success").length} 成功</Badge>
                  <Badge variant="destructive">{screenshots.filter((s) => s.status === "failed").length} 失败</Badge>
                  {screenshots.length > 0 && (
                    <Button variant="outline" size="sm" onClick={clearAllScreenshots}>
                      <Trash2 className="h-4 w-4 mr-1" />
                      清空
                    </Button>
                  )}
                </div>
              </CardTitle>
              <CardDescription>管理已截取的页面截图</CardDescription>
            </CardHeader>
            <CardContent>
              {screenshots.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                  <ImageIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>暂无截图</p>
                  <p className="text-sm">请先在"页面截图"标签页中截取页面</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {screenshots.map((screenshot) => (
                    <Card key={screenshot.id} className="overflow-hidden">
                      <div className="aspect-video bg-gray-100 relative">
                        {screenshot.dataUrl ? (
                          <img
                            src={screenshot.dataUrl || "/placeholder.svg"}
                            alt={screenshot.name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="flex items-center justify-center h-full">
                            {screenshot.status === "capturing" ? (
                              <RefreshCw className="h-8 w-8 animate-spin text-blue-500" />
                            ) : (
                              <ImageIcon className="h-8 w-8 text-gray-400" />
                            )}
                          </div>
                        )}
                        <div className="absolute top-2 right-2">{getStatusIcon(screenshot.status)}</div>
                      </div>
                      <CardContent className="p-4">
                        <div className="space-y-2">
                          <div className="font-medium truncate">{screenshot.name}</div>
                          <div className="text-sm text-muted-foreground truncate">{screenshot.url}</div>
                          {screenshot.method && (
                            <Badge variant="outline" className="text-xs">
                              {screenshot.method}
                            </Badge>
                          )}
                          {screenshot.error && <div className="text-xs text-red-500 truncate">{screenshot.error}</div>}
                          <div className="text-xs text-muted-foreground">{screenshot.timestamp.toLocaleString()}</div>
                          <div className="flex items-center justify-between">
                            <div className="text-xs text-muted-foreground">
                              {screenshot.size && `${screenshot.size.width}×${screenshot.size.height}`}
                            </div>
                            <Button variant="ghost" size="sm" onClick={() => deleteScreenshot(screenshot.id)}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {screenshots.some((s) => s.status === "success") && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <FileText className="h-5 w-5" />
                  <span>生成文档</span>
                </CardTitle>
                <CardDescription>将成功的截图生成为Word文档</CardDescription>
              </CardHeader>
              <CardContent>
                <Button onClick={generateDocument} disabled={isGeneratingDoc} className="w-full">
                  {isGeneratingDoc ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      生成中...
                    </>
                  ) : (
                    <>
                      <Download className="mr-2 h-4 w-4" />
                      生成Word文档
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>
          )}
        </TabsContent>

        <TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="h-5 w-5" />
                <span>文档设置</span>
              </CardTitle>
              <CardDescription>配置生成的Word文档格式和内容</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">文档标题</label>
                    <Input
                      value={documentSettings.title}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          title: e.target.value,
                        }))
                      }
                      placeholder="输入文档标题"
                    />
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">作者</label>
                    <Input
                      value={documentSettings.author}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          author: e.target.value,
                        }))
                      }
                      placeholder="输入作者姓名"
                    />
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">文档描述</label>
                    <Textarea
                      value={documentSettings.description}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          description: e.target.value,
                        }))
                      }
                      placeholder="输入文档描述"
                      rows={3}
                    />
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">页面大小</label>
                    <Select
                      value={documentSettings.pageSize}
                      onValueChange={(value: "A4" | "A3" | "Letter") =>
                        setDocumentSettings((prev) => ({ ...prev, pageSize: value }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="A4">A4</SelectItem>
                        <SelectItem value="A3">A3</SelectItem>
                        <SelectItem value="Letter">Letter</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium">页面方向</label>
                    <Select
                      value={documentSettings.orientation}
                      onValueChange={(value: "portrait" | "landscape") =>
                        setDocumentSettings((prev) => ({ ...prev, orientation: value }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="portrait">纵向</SelectItem>
                        <SelectItem value="landscape">横向</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-3">
                    <label className="text-sm font-medium">包含内容</label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={documentSettings.includeTimestamp}
                          onCheckedChange={(checked) =>
                            setDocumentSettings((prev) => ({
                              ...prev,
                              includeTimestamp: checked as boolean,
                            }))
                          }
                        />
                        <label className="text-sm">包含时间戳</label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={documentSettings.includePageUrls}
                          onCheckedChange={(checked) =>
                            setDocumentSettings((prev) => ({
                              ...prev,
                              includePageUrls: checked as boolean,
                            }))
                          }
                        />
                        <label className="text-sm">包含页面URL</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}