path: root/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx

"use client";

import React, {
  useState,
  useEffect,
  useRef,
  SetStateAction,
  Dispatch,
} from "react";
import { WebViewerInstance } from "@pdftron/webviewer";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

interface BasicContractSignViewerProps {
  contractId?: number;
  filePath?: string;
  isOpen?: boolean;
  onClose?: () => void;
  onSign?: (documentData: ArrayBuffer) => Promise<void>;
  instance: WebViewerInstance | null;
  setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>;
}

export function BasicContractSignViewer({
  contractId,
  filePath,
  isOpen = false,
  onClose,
  onSign,
  instance,
  setInstance,
}: BasicContractSignViewerProps) {
  const [fileLoading, setFileLoading] = useState<boolean>(true);
  const viewer = useRef<HTMLDivElement>(null);
  const initialized = useRef(false);
  const isCancelled = useRef(false);
  const [showDialog, setShowDialog] = useState(isOpen);

  // 다이얼로그 상태 동기화
  useEffect(() => {
    setShowDialog(isOpen);
  }, [isOpen]);

  // WebViewer 초기화
  useEffect(() => {
    if (!initialized.current && viewer.current) {
      initialized.current = true;
      isCancelled.current = false;

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

            // viewerElement이 확실히 존재함을 확인
            const viewerElement = viewer.current;
            if (!viewerElement) return;

            WebViewer(
              {
                path: "/pdftronWeb",
                licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
                fullAPI: true,
              },
              viewerElement
            ).then((instance: WebViewerInstance) => {
              setInstance(instance);
              setFileLoading(false);
              
              const { disableElements, setToolbarGroup } = instance.UI;
 
              disableElements([
                "toolbarGroup-Annotate",
                "toolbarGroup-Shapes",
                "toolbarGroup-Insert",
                "toolbarGroup-Edit",
                // "toolbarGroup-FillAndSign",
                "toolbarGroup-Forms",
              ]);
              setToolbarGroup("toolbarGroup-View");
            });
          });
        }
      });
    }

    return () => {
      if (instance) {
        instance.UI.dispose();
      }
      isCancelled.current = true;
      setTimeout(() => cleanupHtmlStyle(), 500);
    };
  }, []);

  // 문서 로드
  useEffect(() => {
    if (!instance || !filePath) return;
    console.log("📄 파일 로드 시도:", { filePath });
    
    
    // filePath를 /api/files/ 엔드포인트를 통해 접근하도록 변환
    // 한글 파일명의 경우 URL 인코딩 처리
    const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
    const encodedPath = normalizedPath.split('/').map(part => encodeURIComponent(part)).join('/');
    const apiFilePath = `/api/files/${encodedPath}`;
    
    console.log("📄 파일 로드 시도:", { originalPath: filePath, encodedPath: apiFilePath });
    loadDocument(instance, apiFilePath);
  }, [instance, filePath]);

  // 간소화된 문서 로드 함수
  const loadDocument = async (instance: WebViewerInstance, documentPath: string) => {
    setFileLoading(true);
    try {
      const { documentViewer } = instance.Core;
      
      await documentViewer.loadDocument(documentPath, { extension: 'pdf' });
      
    } catch (err) {
      console.error("문서 로딩 중 오류 발생:", err);
      toast.error("문서를 불러오는데 실패했습니다.");
    } finally {
      setFileLoading(false);
    }
  };

  // 서명 저장 핸들러
  const handleSave = async () => {
    if (!instance) return;
    
    try {
      const { documentViewer } = instance.Core;
      const doc = documentViewer.getDocument();
      
      // 서명된 문서 데이터 가져오기
      const documentData = await doc.getFileData({
        includeAnnotations: true,
      });
      
      // 외부에서 제공된 onSign 핸들러가 있으면 호출
      if (onSign) {
        await onSign(documentData);
      } else {
        // 기본 동작 - 서명 성공 메시지 표시
        toast.success("계약서가 성공적으로 서명되었습니다.");
      }
      
      handleClose();
    } catch (err) {
      console.error("서명 저장 중 오류 발생:", err);
      toast.error("서명을 저장하는데 실패했습니다.");
    }
  };

  // 다이얼로그 닫기 핸들러
  const handleClose = () => {
    if (onClose) {
      onClose();
    } else {
      setShowDialog(false);
    }
  };
  
  // 인라인 뷰어 렌더링 (다이얼로그 모드가 아닐 때)
  if (!isOpen && !onClose) {
    return (
      <div className="border rounded-md overflow-hidden" style={{ height: '600px' }}>
        <div ref={viewer} className="h-[100%]">
          {fileLoading && (
            <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>
      </div>
    );
  }

  // 다이얼로그 뷰어 렌더링
  return (
    <Dialog open={showDialog} onOpenChange={handleClose}>
      <DialogContent className="w-[70vw]" style={{ maxWidth: "none" }}>
        <DialogHeader>
          <DialogTitle>기본계약서 서명</DialogTitle>
          <DialogDescription>
            계약서를 확인하고 서명을 진행해주세요.
          </DialogDescription>
        </DialogHeader>
        <div className="h-[calc(70vh-60px)]">
          <div ref={viewer} className="h-[100%]">
            {fileLoading && (
              <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>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={handleClose} disabled={fileLoading}>
            취소
          </Button>
          <Button onClick={handleSave} disabled={fileLoading}>
            서명 완료
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// WebViewer 정리 함수
const cleanupHtmlStyle = () => {
  // iframe 스타일 정리 (WebViewer가 추가한 스타일)
  const elements = document.querySelectorAll('.Document_container');
  elements.forEach((elem) => {
    elem.remove();
  });
};