"use client"

import * as React from "react"
import { useState, useRef, useEffect } from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { X, Loader2, AlertCircle } from "lucide-react"

interface PDFTronViewerDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  fileUrl?: string
  fileName?: string
}



export function PDFTronViewerDialog({
  open,
  onOpenChange,
  fileUrl,
  fileName
}: PDFTronViewerDialogProps) {
  const viewerRef = useRef<HTMLDivElement>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [instance, setInstance] = useState<any>(null)

  // PDFTron WebViewer 초기화
  const initializeViewer = async () => {
    if (!viewerRef.current || !fileUrl) return

    setIsLoading(true)
    setError(null)

    try {
      // @pdftron/webviewer 패키지에서 동적으로 import
      const { default: WebViewer } = await import("@pdftron/webviewer")
      
      const viewerInstance = await WebViewer({
        path: '/pdftronWeb',
        licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
        fullAPI: false,
        enableFilePicker: false,
        enableRedaction: false,
        enableMeasurement: false,
        enableAnnotations: false,
        disabledElements: [
          'header',
          'toolsHeader',
          'searchButton',
          'menuButton',
          'viewControlsButton',
          'selectToolButton',
          'freeHandToolButton',
          'textSelectButton',
          'panToolButton',
          'annotationCommentButton',
          'leftPanel',
          'leftPanelButton',
          'notesPanelButton',
          'searchPanel',
          'thumbnailControl',
          'outlineControl',
          'contextMenuPopup',
          'toolsOverlay',
          'signatureModal',
          'redactionModal',
          'linkModal',
          'filterModal',
          'passwordModal',
          'progressModal',
          'errorModal',
          'toolbarGroup-Annotate',
          'toolbarGroup-Shapes',
          'toolbarGroup-Edit',
          'toolbarGroup-Insert',
          'toolbarGroup-Forms',
          'toolbarGroup-View',
          'downloadButton',
          'printButton',
          'saveAsButton',
          'textToolButton',
          'stickyToolButton',
          'calloutToolButton',
          'rubberStampToolButton',
          'stampToolButton',
          'freeTextToolButton',
          'toolsButton'
        ]
      }, viewerRef.current)

      setInstance(viewerInstance)

      // 문서 로드
      if (fileUrl) {
        const { documentViewer } = viewerInstance.Core
        
        // 문서 로드 완료 후 읽기 전용 설정
        documentViewer.addEventListener('documentLoaded', () => {
          setIsLoading(false)
        })

        // 문서 로드
        viewerInstance.UI.loadDocument(fileUrl)
      } else {
        setIsLoading(false)
      }

    } catch (err) {
      console.error('PDFTron 뷰어 초기화 실패:', err)
      setError('문서를 불러올 수 없습니다. PDFTron이 설치되어 있는지 확인해주세요.')
      setIsLoading(false)
    }
  }

  // 다이얼로그가 열릴 때 뷰어 초기화
  useEffect(() => {
    if (open && fileUrl) {
      // 약간의 지연을 두어 DOM이 완전히 렌더링된 후 초기화
      const timer = setTimeout(initializeViewer, 100)
      return () => clearTimeout(timer)
    }
  }, [open, fileUrl])

  // 다이얼로그가 닫힐 때 정리
  useEffect(() => {
    if (!open && instance) {
      try {
        // WebViewer 인스턴스 정리
        if (viewerRef.current) {
          viewerRef.current.innerHTML = ''
        }
        setInstance(null)
      } catch (err) {
        console.error('뷰어 정리 실패:', err)
      }
    }
  }, [open, instance])

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[90vh] h-[90vh] p-0">
        <DialogHeader className="px-4 py-3 border-b">
          <div className="flex items-center justify-between">
            <div>
              <DialogTitle className="text-lg font-semibold">
                {fileName || '문서 뷰어'}
              </DialogTitle>
              <DialogDescription className="text-sm text-gray-600 mt-1">
                PDF 및 Office 문서를 읽기 전용으로 보기
              </DialogDescription>
            </div>
            {/* <Button
              variant="ghost"
              size="sm"
              onClick={() => onOpenChange(false)}
            >
            </Button> */}
          </div>
        </DialogHeader>
        
        <div className="flex-1 relative">
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center bg-white z-10">
              <div className="flex flex-col items-center gap-3">
                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
                <span className="text-gray-600">문서를 불러오는 중...</span>
              </div>
            </div>
          )}
          
          {error && (
            <div className="absolute inset-0 flex items-center justify-center bg-white z-10">
              <div className="flex flex-col items-center gap-3 text-center max-w-md">
                <AlertCircle className="h-12 w-12 text-red-500" />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-2">문서를 불러올 수 없습니다</h3>
                  <p className="text-gray-600 text-sm">{error}</p>
                </div>
                <Button 
                  variant="outline" 
                  onClick={() => onOpenChange(false)}
                  className="mt-2"
                >
                  닫기
                </Button>
              </div>
            </div>
          )}
          
          <div 
            ref={viewerRef} 
            className="w-full h-full"
            style={{ height: 'calc(90vh - 60px)' }}
          />
        </div>
      </DialogContent>
    </Dialog>
  )
}