"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 { 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 EnhancedScreenshotOptions,
} 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<EnhancedScreenshotOptions>({
    format: "png",
    quality: 0.9,
    scale: 1,
    backgroundColor: "#ffffff",
    timeout: 30000,
    waitForImages: true,
    waitForFonts: true,
    addWatermark: true,
  })

  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 {
      const result = await enhancedScreenshotService.captureViewport({
        ...screenshotOptions,
        ...getViewportSize(),
        watermarkText: `${page.name} - ${new Date().toLocaleString()}`,
      })

      if (result.success && result.dataUrl) {
        return {
          ...screenshot,
          status: "success",
          dataUrl: result.dataUrl,
          method: result.method,
          size: getViewportSize(),
        }
      } else {
        throw new Error(result.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 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-3">
          <TabsTrigger value="capture">页面截图</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">
                    <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>
                  )}

                  <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>

                  <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="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-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>
  )
}