"use client"

import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { getDocumentationCatalog, type DocumentationPage } from "@/lib/documentation/catalog"
import { FileText, Download, Loader2, CheckCircle, XCircle, Eye, RefreshCw } from "lucide-react"

type PageStatus = "pending" | "loading" | "success" | "error"

type PageState = {
  page: DocumentationPage
  status: PageStatus
  error?: string
}

export default function DocumentationToolPage() {
  const [isGenerating, setIsGenerating] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [progress, setProgress] = useState(0)
  const [currentPage, setCurrentPage] = useState<string | null>(null)
  const [pageStates, setPageStates] = useState<PageState[]>([])
  const [previewPath, setPreviewPath] = useState<string | null>(null)
  const [showPreview, setShowPreview] = useState(false)
  const iframeRef = useRef<HTMLIFrameElement>(null)

  const pages = useMemo(() => getDocumentationCatalog(), [])

  const groupedPages = useMemo(() => {
    const groups: Record<string, DocumentationPage[]> = {}
    for (const page of pages) {
      if (!groups[page.group]) groups[page.group] = []
      groups[page.group].push(page)
    }
    return groups
  }, [pages])

  useEffect(() => {
    setPageStates(pages.map((page) => ({ page, status: "pending" })))
  }, [pages])

  const handleGenerate = async () => {
    setError(null)
    setIsGenerating(true)
    setProgress(0)
    setCurrentPage(null)
    setPageStates(pages.map((page) => ({ page, status: "loading" })))

    try {
      // Simulate progress while waiting for the API
      let progressValue = 0
      const progressInterval = setInterval(() => {
        progressValue += 2
        const pageIndex = Math.floor((progressValue / 100) * pages.length)
        const nextPage = pages[Math.min(pageIndex, pages.length - 1)]
        if (nextPage) setCurrentPage(nextPage.title)
        setProgress(Math.min(progressValue, 90))

        // Update page states to show progress
        setPageStates((prev) =>
          prev.map((s, idx) => ({
            ...s,
            status: idx < pageIndex ? "success" : idx === pageIndex ? "loading" : "pending",
          })),
        )
      }, 800)

      // Get token from URL if provided
      const urlParams = new URLSearchParams(window.location.search)
      const token = urlParams.get("token") || ""

      const response = await fetch(`/api/documentation/generate${token ? `?token=${token}` : ""}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...(token ? { "x-documentation-token": token } : {}),
        },
      })

      clearInterval(progressInterval)

      if (!response.ok) {
        const text = await response.text().catch(() => "")
        let errorMessage = `生成失败(${response.status})`
        try {
          const json = JSON.parse(text)
          errorMessage = json.error || errorMessage
        } catch {
          if (text) errorMessage = text
        }
        throw new Error(errorMessage)
      }

      setProgress(100)
      setCurrentPage("完成")
      setPageStates(pages.map((page) => ({ page, status: "success" })))

      const blob = await response.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `应用功能文档_${new Date().toISOString().slice(0, 10)}.docx`
      document.body.appendChild(a)
      a.click()
      a.remove()
      URL.revokeObjectURL(url)
    } catch (e) {
      const message = e instanceof Error ? e.message : String(e)
      setError(message)
      setPageStates((prev) => prev.map((s) => ({ ...s, status: "error" })))
    } finally {
      setIsGenerating(false)
    }
  }

  const handlePreview = useCallback((path: string) => {
    setPreviewPath(path)
    setShowPreview(true)
  }, [])

  const getStatusIcon = (status: PageStatus) => {
    switch (status) {
      case "pending":
        return <div className="w-4 h-4 rounded-full bg-gray-600" />
      case "loading":
        return <Loader2 className="w-4 h-4 animate-spin text-teal-400" />
      case "success":
        return <CheckCircle className="w-4 h-4 text-green-500" />
      case "error":
        return <XCircle className="w-4 h-4 text-red-500" />
    }
  }

  return (
    <main className="min-h-screen bg-background text-foreground p-4 pb-24">
      <div className="max-w-md mx-auto space-y-4">
        {/* Header */}
        <div className="flex items-center gap-3 py-2">
          <FileText className="w-6 h-6 text-teal-400" />
          <div>
            <h1 className="text-lg font-semibold">文档生成器</h1>
            <p className="text-xs text-muted-foreground">自动截图并导出专业文档</p>
          </div>
        </div>

        {/* Info Card */}
        <div className="bg-card border border-border rounded-xl p-4 space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">页面总数</span>
            <span className="font-medium text-teal-400">{pages.length} 个</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">分组数量</span>
            <span className="font-medium">{Object.keys(groupedPages).length} 组</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">输出格式</span>
            <span className="font-medium">Word (.docx)</span>
          </div>
        </div>

        {/* Progress */}
        {isGenerating && (
          <div className="bg-card border border-border rounded-xl p-4 space-y-3">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">生成进度</span>
              <span className="font-medium text-teal-400">{Math.round(progress)}%</span>
            </div>
            <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-teal-500 to-cyan-400 transition-all duration-300"
                style={{ width: `${progress}%` }}
              />
            </div>
            {currentPage && <p className="text-xs text-muted-foreground truncate">正在处理: {currentPage}</p>}
          </div>
        )}

        {/* Error */}
        {error && (
          <div className="bg-destructive/10 border border-destructive/30 text-destructive rounded-xl p-3 text-sm">
            <p className="font-medium mb-1">生成失败</p>
            <p className="text-xs opacity-80">{error}</p>
            <p className="text-xs mt-2 opacity-60">提示: 如需授权,请在URL中添加 ?token=your_token</p>
          </div>
        )}

        {/* Generate Button */}
        <button
          type="button"
          onClick={handleGenerate}
          disabled={isGenerating}
          className="w-full bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-xl py-3.5 font-medium disabled:opacity-60 flex items-center justify-center gap-2 shadow-lg shadow-teal-500/20"
        >
          {isGenerating ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              <span>正在生成文档...</span>
            </>
          ) : (
            <>
              <Download className="w-5 h-5" />
              <span>一键生成 Word 文档</span>
            </>
          )}
        </button>

        {/* Page List */}
        <div className="space-y-3">
          <h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
            <span>文档目录预览</span>
            <span className="text-xs opacity-60">({pages.length}个页面)</span>
          </h2>

          {Object.entries(groupedPages).map(([group, groupPages]) => (
            <div key={group} className="bg-card border border-border rounded-xl overflow-hidden">
              <div className="px-3 py-2 bg-muted/50 border-b border-border">
                <h3 className="text-sm font-medium text-teal-400">{group}</h3>
              </div>
              <div className="divide-y divide-border">
                {groupPages.map((page, index) => {
                  const state = pageStates.find((s) => s.page.path === page.path)
                  return (
                    <div
                      key={page.path}
                      className="px-3 py-2.5 flex items-center gap-3 hover:bg-muted/30 transition-colors"
                    >
                      <span className="text-xs text-muted-foreground w-5">{index + 1}</span>
                      {state && getStatusIcon(state.status)}
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{page.title}</p>
                        {page.subtitle && <p className="text-xs text-muted-foreground truncate">{page.subtitle}</p>}
                      </div>
                      <button
                        type="button"
                        onClick={() => handlePreview(page.path)}
                        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
                        title="预览页面"
                      >
                        <Eye className="w-4 h-4" />
                      </button>
                    </div>
                  )
                })}
              </div>
            </div>
          ))}
        </div>

        {/* Features */}
        <div className="bg-card border border-border rounded-xl p-4 space-y-3">
          <h3 className="text-sm font-medium">文档包含内容</h3>
          <ul className="text-xs text-muted-foreground space-y-2">
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
              <span>自动生成的目录结构</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
              <span>所有页面的真实截图(iPhone 14 Pro Max尺寸)</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
              <span>每个页面的功能说明与路径</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
              <span>按功能模块分组整理</span>
            </li>
          </ul>
        </div>

        {/* Note */}
        <p className="text-xs text-muted-foreground text-center">生成过程需要30-60秒，请耐心等待</p>
      </div>

      {/* Preview Modal */}
      {showPreview && previewPath && (
        <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
          <div className="bg-card rounded-2xl w-full max-w-md overflow-hidden border border-border">
            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
              <h3 className="font-medium text-sm">页面预览</h3>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => iframeRef.current?.contentWindow?.location.reload()}
                  className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
                >
                  <RefreshCw className="w-4 h-4" />
                </button>
                <button
                  type="button"
                  onClick={() => setShowPreview(false)}
                  className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
                >
                  <XCircle className="w-4 h-4" />
                </button>
              </div>
            </div>
            <div className="w-full aspect-[430/932] bg-white">
              <iframe ref={iframeRef} src={previewPath} className="w-full h-full" title="Page Preview" />
            </div>
          </div>
        </div>
      )}
    </main>
  )
}