path: root/lib/vendor-document-list/plant/upload/components/view-submission-dialog.tsx

// lib/vendor-document-list/plant/upload/components/view-submission-dialog.tsx
"use client"

import * as React from "react"
import { useState, useEffect, useRef } from "react"
import { WebViewerInstance } from "@pdftron/webviewer"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { 
  Download,
  Eye,
  FileText,
  Calendar,
  User,
  CheckCircle2,
  XCircle,
  Clock,
  RefreshCw,
  Loader2
} from "lucide-react"
import { StageSubmissionView } from "@/db/schema"
import { formatDateTime, formatDate } from "@/lib/utils"
import { toast } from "sonner"
import { downloadFile, formatFileSize } from "@/lib/file-download"

interface ViewSubmissionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  submission: StageSubmissionView
}

interface SubmissionDetail {
  id: number
  revisionNumber: number
  submissionStatus: string
  reviewStatus?: string
  reviewComments?: string
  submittedBy: string
  submittedAt: Date
  files: Array<{
    id: number
    originalFileName: string
    fileSize: number
    uploadedAt: Date
    syncStatus: string
    storageUrl: string
  }>
}

// PDFTron 문서 뷰어 컴포넌트
const DocumentViewer: React.FC<{
  open: boolean
  onClose: () => void
  files: Array<{
    id: number
    originalFileName: string
    storageUrl: string
  }>
}> = ({ open, onClose, files }) => {
  const [instance, setInstance] = useState<null | WebViewerInstance>(null)
  const [viewerLoading, setViewerLoading] = useState<boolean>(true)
  const [fileSetLoading, setFileSetLoading] = useState<boolean>(true)
  const viewer = useRef<HTMLDivElement>(null)
  const initialized = useRef(false)
  const isCancelled = useRef(false)

  const cleanupHtmlStyle = () => {
    const htmlElement = document.documentElement
    const originalStyle = htmlElement.getAttribute("style") || ""
    const colorSchemeStyle = originalStyle
      .split(";")
      .map((s) => s.trim())
      .find((s) => s.startsWith("color-scheme:"))

    if (colorSchemeStyle) {
      htmlElement.setAttribute("style", colorSchemeStyle + ";")
    } else {
      htmlElement.removeAttribute("style")
    }
  }

  useEffect(() => {
    if (open && !initialized.current) {
      initialized.current = true
      isCancelled.current = false

      requestAnimationFrame(() => {
        if (viewer.current) {
          import("@pdftron/webviewer").then(({ default: WebViewer }) => {
            if (isCancelled.current) {
              console.log("WebViewer 초기화 취소됨")
              return
            }

            WebViewer(
              {
                path: "/pdftronWeb",
                licenseKey:
                  "demo:1739264618684:616161d7030000000091db1c97c6f386d41d3506ab5b507381ef2ee2bd",
                fullAPI: true,
                css: "/globals.css",
              },
              viewer.current as HTMLDivElement
            ).then(async (instance: WebViewerInstance) => {
              setInstance(instance)
              instance.UI.enableFeatures([instance.UI.Feature.MultiTab])
              instance.UI.disableElements([
                "addTabButton",
                "multiTabsEmptyPage",
              ])
              setViewerLoading(false)
            })
          })
        }
      })
    }

    return () => {
      if (instance) {
        instance.UI.dispose()
      }
      setTimeout(() => cleanupHtmlStyle(), 500)
    }
  }, [open])

  useEffect(() => {
    const loadDocuments = async () => {
      if (instance && files.length > 0) {
        const { UI } = instance
        const tabIds = []

        for (const file of files) {
          const fileExtension = file.originalFileName.split('.').pop()?.toLowerCase()
          
          const options = {
            filename: file.originalFileName,
            ...(fileExtension === 'xlsx' || fileExtension === 'xls' ? {
              officeOptions: {
                formatOptions: {
                  applyPageBreaksToSheet: true,
                },
              },
            } : {}),
          }

          try {
            const response = await fetch(file.storageUrl)
            const blob = await response.blob()
            const tab = await UI.TabManager.addTab(blob, options)
            tabIds.push(tab)
          } catch (error) {
            console.error(`Failed to load ${file.originalFileName}:`, error)
            toast.error(`Failed to load ${file.originalFileName}`)
          }
        }

        if (tabIds.length > 0) {
          await UI.TabManager.setActiveTab(tabIds[0])
        }

        setFileSetLoading(false)
      }
    }
    
    loadDocuments()
  }, [instance, files])

  const handleClose = async () => {
    if (!fileSetLoading) {
      if (instance) {
        try {
          await instance.UI.dispose()
          setInstance(null)
        } catch (e) {
          console.warn("dispose error", e)
        }
      }
      
      setTimeout(() => cleanupHtmlStyle(), 1000)
      onClose()
    }
  }

  return (
    <Dialog open={open} onOpenChange={(val) => !val && handleClose()}>
      <DialogContent className="w-[90vw] h-[90vh]" style={{ maxWidth: "none" }}>
        <DialogHeader className="h-[38px]">
          <DialogTitle>Preview</DialogTitle>
          {/* <DialogDescription>첨부파일 미리보기</DialogDescription> */}
        </DialogHeader>
        <div
          ref={viewer}
          style={{ height: "calc(90vh - 20px - 38px - 1rem - 48px)" }}
        >
          {viewerLoading && (
            <div className="flex flex-col items-center justify-center py-12">
              <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
              <p className="text-sm text-muted-foreground">
                문서 뷰어 로딩 중...
              </p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}

export function ViewSubmissionDialog({ 
  open, 
  onOpenChange, 
  submission 
}: ViewSubmissionDialogProps) {
  const [loading, setLoading] = useState(false)
  const [submissionDetail, setSubmissionDetail] = useState<SubmissionDetail | null>(null)
  const [downloadingFiles, setDownloadingFiles] = useState<Set<number>>(new Set())
  const [viewerOpen, setViewerOpen] = useState(false)
  const [selectedFiles, setSelectedFiles] = useState<Array<{
    id: number
    originalFileName: string
    storageUrl: string
  }>>([])
  
  useEffect(() => {
    if (open && submission.latestSubmissionId) {
      fetchSubmissionDetail()
    }
  }, [open, submission.latestSubmissionId])
  
  const fetchSubmissionDetail = async () => {
    if (!submission.latestSubmissionId) return
    
    setLoading(true)
    try {
      const response = await fetch(`/api/stage-submissions/${submission.latestSubmissionId}`)
      if (response.ok) {
        const data = await response.json()
        setSubmissionDetail(data)
      }
    } catch (error) {
      console.error("Failed to fetch submission details:", error)
      toast.error("Failed to load submission details")
    } finally {
      setLoading(false)
    }
  }
  
  const handleDownload = async (file: any) => {
    setDownloadingFiles(prev => new Set(prev).add(file.id))
    
    try {
      const result = await downloadFile(
        file.storageUrl, 
        file.originalFileName,
        {
          action: 'download',
          showToast: true,
          showSuccessToast: true,
          onError: (error) => {
            console.error("Download failed:", error)
            toast.error(`Failed to download ${file.originalFileName}`)
          },
          onSuccess: (fileName, fileSize) => {
            console.log(`Successfully downloaded ${fileName}`)
          }
        }
      )
      
      if (!result.success) {
        console.error("Download failed:", result.error)
      }
    } finally {
      setDownloadingFiles(prev => {
        const newSet = new Set(prev)
        newSet.delete(file.id)
        return newSet
      })
    }
  }
  
  // PDFTron으로 미리보기 처리
  const handlePreview = (file: any) => {
    setSelectedFiles([{
      id: file.id,
      originalFileName: file.originalFileName,
      storageUrl: file.storageUrl
    }])
    setViewerOpen(true)
  }
  
  // 모든 파일 미리보기
  const handlePreviewAll = () => {
    if (submissionDetail) {
      const files = submissionDetail.files.map(file => ({
        id: file.id,
        originalFileName: file.originalFileName,
        storageUrl: file.storageUrl
      }))
      setSelectedFiles(files)
      setViewerOpen(true)
    }
  }
  
  const getStatusBadge = (status?: string) => {
    if (!status) return null
    
    const variant = status === "APPROVED" ? "success" :
                   status === "REJECTED" ? "destructive" :
                   status === "SUBMITTED" ? "default" : "secondary"
    
    return <Badge variant={variant}>{status}</Badge>
  }
  
  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-4xl max-h-[80vh]">
          <DialogHeader>
            <DialogTitle>View Submission</DialogTitle>
            <DialogDescription>
              Submission details and attached files
            </DialogDescription>
          </DialogHeader>
          
          {loading ? (
            <div className="flex items-center justify-center py-8">
              <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : submissionDetail ? (
            <Tabs defaultValue="details" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="details">Details</TabsTrigger>
                <TabsTrigger value="files">
                  Files ({submissionDetail.files.length})
                </TabsTrigger>
              </TabsList>
              
              <TabsContent value="details" className="space-y-4">
                <div className="grid gap-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-muted-foreground">
                        Revision
                      </p>
                      <p className="text-lg font-medium">
                        Rev. {submissionDetail.revisionNumber}
                      </p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-muted-foreground">
                        Status
                      </p>
                      <div className="flex items-center gap-2">
                        {getStatusBadge(submissionDetail.submissionStatus)}
                        {submissionDetail.reviewStatus && 
                          getStatusBadge(submissionDetail.reviewStatus)}
                      </div>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-muted-foreground">
                        Submitted By
                      </p>
                      <div className="flex items-center gap-2">
                        <User className="h-4 w-4 text-muted-foreground" />
                        <span>{submissionDetail.submittedBy}</span>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-muted-foreground">
                        Submitted At
                      </p>
                      <div className="flex items-center gap-2">
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                        <span>{formatDateTime(submissionDetail.submittedAt)}</span>
                      </div>
                    </div>
                  </div>
                  
                  {submissionDetail.reviewComments && (
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-muted-foreground">
                        Review Comments
                      </p>
                      <div className="p-3 bg-muted rounded-lg">
                        <p className="text-sm">{submissionDetail.reviewComments}</p>
                      </div>
                    </div>
                  )}
                </div>
              </TabsContent>
              
              <TabsContent value="files">
                <div className="flex justify-end mb-4">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handlePreviewAll}
                    disabled={submissionDetail.files.length === 0}
                  >
                    <Eye className="h-4 w-4 mr-2" />
                    모든 파일 미리보기
                  </Button>
                </div>
                <ScrollArea className="h-[400px]">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>File Name</TableHead>
                        <TableHead>Size</TableHead>
                        <TableHead>Upload Date</TableHead>
                        <TableHead>Sync Status</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {submissionDetail.files.map((file) => {
                        const isDownloading = downloadingFiles.has(file.id)
                        
                        return (
                          <TableRow key={file.id}>
                            <TableCell className="font-medium">
                              <div className="flex items-center gap-2">
                                <FileText className="h-4 w-4 text-muted-foreground" />
                                {file.originalFileName}
                              </div>
                            </TableCell>
                            <TableCell>{formatFileSize(file.fileSize)}</TableCell>
                            <TableCell>{formatDate(file.uploadedAt)}</TableCell>
                            <TableCell>
                              <Badge 
                                variant={
                                  file.syncStatus === "synced" ? "success" :
                                  file.syncStatus === "failed" ? "destructive" :
                                  "secondary"
                                }
                                className="text-xs"
                              >
                                {file.syncStatus}
                              </Badge>
                            </TableCell>
                            <TableCell className="text-right">
                              <div className="flex justify-end gap-2">
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => handleDownload(file)}
                                  disabled={isDownloading}
                                  title="Download"
                                >
                                  {isDownloading ? (
                                    <RefreshCw className="h-4 w-4 animate-spin" />
                                  ) : (
                                    <Download className="h-4 w-4" />
                                  )}
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => handlePreview(file)}
                                  disabled={isDownloading}
                                  title="Preview"
                                >
                                  {isDownloading ? (
                                    <RefreshCw className="h-4 w-4 animate-spin" />
                                  ) : (
                                    <Eye className="h-4 w-4" />
                                  )}
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        )
                      })}
                    </TableBody>
                  </Table>
                </ScrollArea>
              </TabsContent>
            </Tabs>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              No submission found
            </div>
          )}
        </DialogContent>
      </Dialog>
      
      {/* PDFTron 문서 뷰어 다이얼로그 */}
      {viewerOpen && (
        <DocumentViewer
          open={viewerOpen}
          onClose={() => {
            setViewerOpen(false)
            setSelectedFiles([])
          }}
          files={selectedFiles}
        />
      )}
    </>
  )
}