"use client";

import React, {
  useState,
  useEffect,
  useRef,
  SetStateAction,
  Dispatch,
  useMemo,
  useCallback,
} from "react";
import { WebViewerInstance } from "@pdftron/webviewer";
import { Loader2, FileText, ClipboardList, AlertTriangle, FileSignature, Target, CheckCircle2 } from "lucide-react";
import { toast } from "sonner";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Upload } from "lucide-react";
import { CompleteSurveyRequest, SurveyAnswerData, completeSurvey, getActiveSurveyTemplate, type SurveyTemplateWithQuestions } from '../service';
import { ConditionalSurveyHandler, useConditionalSurvey } from '../vendor-table/survey-conditional';
import { useForm, useWatch, Controller } from "react-hook-form";

interface FileInfo {
  path: string;
  name: string;
  type: 'main' | 'attachment' | 'survey';
}

interface BasicContractSignViewerProps {
  contractId?: number;
  filePath?: string;
  additionalFiles?: FileInfo[];
  templateName?: string;
  isOpen?: boolean;
  onClose?: () => void;
  onSign?: (documentData: ArrayBuffer, surveyData?: any) => Promise<void>;
  instance: WebViewerInstance | null;
  setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>;
  onSurveyComplete?: () => void; // 🔥 새로 추가
  onSignatureComplete?: () => void; // 🔥 새로 추가
  t?: (key: string) => string;
}

// 폼 데이터 타입 정의
interface SurveyFormData {
  [key: string]: {
    answerValue?: string;
    detailText?: string;
    otherText?: string;
    files?: File[];
  };
}

// 자동 서명 필드 생성을 위한 타입 정의
interface SignaturePattern {
  regex: RegExp;
  name: string;
  priority: number;
  offsetX?: number;
  offsetY?: number;
  width?: number;
  height?: number;
}

// 초간단 안전한 서명 필드 감지 클래스
class AutoSignatureFieldDetector {
  private instance: WebViewerInstance;
  private signaturePatterns: SignaturePattern[];

  constructor(instance: WebViewerInstance) {
    this.instance = instance;
    this.signaturePatterns = this.initializePatterns();
  }

  private initializePatterns(): SignaturePattern[] {
    return [
      {
        regex: /서명\s*[:：]\s*[_\-\s]{3,}/gi,
        name: "한국어_서명_콜론",
        priority: 10,
        offsetX: 80,
        offsetY: -5,
        width: 150,
        height: 40
      },
      {
        regex: /서명란\s*[_\-\s]{0,}/gi,
        name: "한국어_서명란",
        priority: 9,
        offsetX: 60,
        offsetY: -5,
        width: 150,
        height: 40
      },
      {
        regex: /signature\s*[:：]\s*[_\-\s]{3,}/gi,
        name: "영어_signature_콜론",
        priority: 8,
        offsetX: 120,
        offsetY: -5,
        width: 150,
        height: 40
      },
      {
        regex: /sign\s+here\s*[:：]?\s*[_\-\s]{0,}/gi,
        name: "영어_sign_here",
        priority: 9,
        offsetX: 100,
        offsetY: -5,
        width: 150,
        height: 40
      }
    ];
  }

  async detectAndCreateSignatureFields(): Promise<string[]> {
    console.log("🔍 안전한 서명 필드 감지 시작...");

    try {
      if (!this.instance?.Core?.documentViewer) {
        throw new Error("WebViewer 인스턴스가 유효하지 않습니다.");
      }

      const { Core } = this.instance;
      const { documentViewer } = Core;

      const document = documentViewer.getDocument();
      if (!document) {
        throw new Error("PDF 문서가 로드되지 않았습니다.");
      }

      console.log("📄 문서 확인 완료, 기본 서명 필드 생성...");
      const defaultField = await this.createSimpleSignatureField();

      console.log("✅ 서명 필드 생성 완료");
      return [defaultField];

    } catch (error) {
      console.error("📛 서명 필드 생성 실패:", error);

      let errorMessage = "서명 필드 생성에 실패했습니다.";
      if (error instanceof Error) {
        if (error.message.includes("인스턴스")) {
          errorMessage = "뷰어가 준비되지 않았습니다.";
        } else if (error.message.includes("문서")) {
          errorMessage = "문서를 불러오는 중입니다.";
        }
      }

      throw new Error(errorMessage);
    }
  }

  private async createSimpleSignatureField(): Promise<string> {
    try {
      const { Core } = this.instance;
      const { documentViewer, annotationManager, Annotations } = Core;

      const pageCount = documentViewer.getPageCount();
      const pageWidth = documentViewer.getPageWidth(pageCount) || 612;
      const pageHeight = documentViewer.getPageHeight(pageCount) || 792;

      console.log(`📏 페이지 정보: ${pageCount}페이지, 크기 ${pageWidth}x${pageHeight}`);

      const fieldName = `simple_signature_${Date.now()}`;
      const flags = new Annotations.WidgetFlags();

      const formField = new Core.Annotations.Forms.Field(
        `SignatureFormField`,
        {
          type: "Sig",
          flags,
        }
      );

      const signatureWidget = new Annotations.SignatureWidgetAnnotation(formField, {
        Width: 150,
        Height: 50
      });

      signatureWidget.setPageNumber(pageCount);
      signatureWidget.setX(pageWidth * 0.7);
      signatureWidget.setY(pageHeight * 0.85);
      signatureWidget.setWidth(150);
      signatureWidget.setHeight(50);

      annotationManager.addAnnotation(signatureWidget);
      annotationManager.redrawAnnotation(signatureWidget);

      console.log(`✅ 서명 필드 생성: ${fieldName}`);
      return fieldName;

    } catch (error) {
      console.error("📛 서명 필드 생성 실패:", error);
      return "manual_signature_required";
    }
  }
}

function useAutoSignatureFields(instance: WebViewerInstance | null) {
  const [signatureFields, setSignatureFields] = useState<string[]>([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const processingRef = useRef(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (!instance) return;

    const { documentViewer } = instance.Core;

    const handleDocumentLoaded = () => {
      if (processingRef.current) {
        console.log("📛 이미 처리 중이므로 스킵");
        return;
      }

      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = null;
      }

      timeoutRef.current = setTimeout(async () => {
        if (processingRef.current) return;

        processingRef.current = true;
        setIsProcessing(true);
        setError(null);

        try {
          console.log("📄 문서 로드 완료, 서명 필드 처리 시작...");

          if (!instance?.Core?.documentViewer?.getDocument()) {
            throw new Error("문서가 준비되지 않았습니다.");
          }

          const detector = new AutoSignatureFieldDetector(instance);
          const fields = await detector.detectAndCreateSignatureFields();

          setSignatureFields(fields);

          if (fields.length > 0) {
            const hasSimpleField = fields.some(field => field.startsWith('simple_signature_'));

            if (hasSimpleField) {
              toast.success("📝 서명 필드가 생성되었습니다.", {
                description: "마지막 페이지 하단의 파란색 영역에서 서명해주세요.",
                icon: <FileSignature className="h-4 w-4 text-blue-500" />,
                duration: 5000
              });
            } else {
              toast.success(`📋 ${fields.length}개의 서명 필드를 확인했습니다.`, {
                description: "기존 서명 필드가 발견되었습니다.",
                icon: <CheckCircle2 className="h-4 w-4 text-green-500" />,
                duration: 4000
              });
            }
          }

        } catch (error) {
          console.error("📛 서명 필드 처리 실패:", error);

          const errorMessage = error instanceof Error ? error.message : "서명 필드 처리에 실패했습니다.";
          setError(errorMessage);

          toast.info("수동 서명 모드", {
            description: "문서에서 서명할 위치를 직접 클릭해주세요.",
            icon: <FileSignature className="h-4 w-4 text-blue-500" />
          });
        } finally {
          setIsProcessing(false);
          processingRef.current = false;
        }
      }, 3000);
    };

    documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded);
    documentViewer.addEventListener('documentLoaded', handleDocumentLoaded);

    return () => {
      documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded);

      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = null;
      }

      processingRef.current = false;
    };
  }, [instance]);

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      processingRef.current = false;
    };
  }, []);

  return {
    signatureFields,
    isProcessing,
    hasSignatureFields: signatureFields.length > 0,
    error
  };
}

// 🔥 서명 감지를 위한 커스텀 훅 수정
function useSignatureDetection(instance: WebViewerInstance | null, onSignatureComplete?: () => void) {
  const [hasValidSignature, setHasValidSignature] = useState(false);
  const checkIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const lastSignatureStateRef = useRef(false);
  const onSignatureCompleteRef = useRef(onSignatureComplete);

  // 콜백 레퍼런스 업데이트
  useEffect(() => {
    onSignatureCompleteRef.current = onSignatureComplete;
  }, [onSignatureComplete]);

  const checkSignatureFields = useCallback(async () => {
    if (!instance?.Core?.annotationManager) {
      console.log('🔍 서명 체크: annotationManager 없음');
      return false;
    }

    try {
      const { annotationManager, documentViewer } = instance.Core;
      
      // 문서가 로드되지 않았으면 false 반환
      if (!documentViewer.getDocument()) {
        console.log('🔍 서명 체크: 문서 미로드');
        return false;
      }

      let hasSignature = false;

      // 1. Form Fields 확인 (더 정확한 방법)
      const fieldManager = annotationManager.getFieldManager();
      const fields = fieldManager.getFields();
      
      console.log('🔍 폼 필드 확인:', fields.map(field => ({
        name: field.name,
        type: field.type,
        value: field.value,
        hasValue: !!field.value
      })));

      // 서명 필드 확인
      for (const field of fields) {
        // PDFTron에서 서명 필드는 보통 'Sig' 타입이지만, 값이 있는지 정확히 확인
        if (field.type === 'Sig' || field.name?.toLowerCase().includes('signature')) {
          if (field.value && (
            typeof field.value === 'string' && field.value.length > 0 ||
            typeof field.value === 'object' && field.value !== null
          )) {
            hasSignature = true;
            console.log('🔍 서명 필드에서 서명 발견:', field.name, field.value);
            break;
          }
        }
      }

      // 2. Signature Widget Annotations 확인
      if (!hasSignature) {
        const annotations = annotationManager.getAnnotationsList();
        console.log('🔍 주석 확인:', annotations.length, '개');
        
        for (const annotation of annotations) {
          // SignatureWidgetAnnotation 타입 확인
          if (annotation.elementName === 'signatureWidget' || 
              annotation.constructor.name === 'SignatureWidgetAnnotation' ||
              annotation.Subject === 'Signature') {
            
            // 서명 데이터가 있는지 확인
            const hasSignatureData = annotation.getImageData && annotation.getImageData() ||
                                   annotation.getPath && annotation.getPath() ||
                                   annotation.getCustomData && annotation.getCustomData('signature-data');
            
            if (hasSignatureData) {
              hasSignature = true;
              console.log('🔍 서명 위젯에서 서명 발견:', annotation);
              break;
            }
          }
        }
      }

      // 3. Ink/FreeHand Annotations 확인 (직접 그린 서명)
      if (!hasSignature) {
        const annotations = annotationManager.getAnnotationsList();
        
        for (const annotation of annotations) {
          if (annotation.elementName === 'freeHand' || 
              annotation.elementName === 'ink' ||
              annotation.constructor.name === 'FreeHandAnnotation') {
            
            // 경로 데이터가 있으면 서명으로 간주
            const hasPath = annotation.getPath && annotation.getPath().length > 0;
            if (hasPath) {
              hasSignature = true;
              console.log('🔍 자유 그리기에서 서명 발견:', annotation);
              break;
            }
          }
        }
      }

      console.log('🔍 최종 서명 감지 결과:', { 
        hasSignature, 
        fieldsCount: fields.length,
        annotationsCount: annotationManager.getAnnotationsList().length 
      });
      
      return hasSignature;
    } catch (error) {
      console.error('📛 서명 확인 중 에러:', error);
      return false;
    }
  }, [instance]);

  // 실시간 서명 감지 (무한 렌더링 방지)
  useEffect(() => {
    if (!instance?.Core) return;

    const startMonitoring = () => {
      // 기존 인터벌 정리
      if (checkIntervalRef.current) {
        clearInterval(checkIntervalRef.current);
        checkIntervalRef.current = null;
      }

      console.log('🔍 서명 모니터링 시작');

      // 2초마다 서명 상태 확인 (1초보다 간격을 늘려 성능 개선)
      checkIntervalRef.current = setInterval(async () => {
        try {
          const hasSignature = await checkSignatureFields();
          
          // 상태가 실제로 변경되었을 때만 업데이트
          if (hasSignature !== lastSignatureStateRef.current) {
            console.log('🔍 서명 상태 변경:', lastSignatureStateRef.current, '->', hasSignature);
            
            lastSignatureStateRef.current = hasSignature;
            setHasValidSignature(hasSignature);
            
            // 서명이 완료되었을 때 콜백 실행
            if (hasSignature && onSignatureCompleteRef.current) {
              console.log('✍️ 서명 완료 콜백 실행!');
              onSignatureCompleteRef.current();
            }
          }
        } catch (error) {
          console.error('📛 서명 모니터링 에러:', error);
        }
      }, 2000);
    };

    // 문서 로드 후 모니터링 시작
    const { documentViewer } = instance.Core;
    
    const handleDocumentLoaded = () => {
      console.log('📄 문서 로드 완료, 서명 모니터링 준비');
      // 문서 로드 후 3초 뒤에 모니터링 시작 (안정성 확보)
      setTimeout(startMonitoring, 3000);
    };

    if (documentViewer?.getDocument()) {
      // 이미 문서가 로드되어 있다면 바로 시작
      setTimeout(startMonitoring, 1000);
    } else {
      // 문서 로드 대기
      documentViewer?.addEventListener('documentLoaded', handleDocumentLoaded);
    }

    // 클리너 함수
    return () => {
      console.log('🧹 서명 모니터링 정리');
      if (checkIntervalRef.current) {
        clearInterval(checkIntervalRef.current);
        checkIntervalRef.current = null;
      }
      documentViewer?.removeEventListener('documentLoaded', handleDocumentLoaded);
    };
  }, [instance]); // onSignatureComplete 제거하여 무한 렌더링 방지

  // 수동 서명 확인 함수
  const manualCheckSignature = useCallback(async () => {
    console.log('🔍 수동 서명 확인 요청');
    const hasSignature = await checkSignatureFields();
    setHasValidSignature(hasSignature);
    lastSignatureStateRef.current = hasSignature;
    return hasSignature;
  }, [checkSignatureFields]);

  return {
    hasValidSignature,
    checkSignature: manualCheckSignature
  };
}

export function BasicContractSignViewer({
  contractId,
  filePath,
  additionalFiles = [],
  templateName = "",
  isOpen = false,
  onClose,
  onSign,
  instance,
  setInstance,
  onSurveyComplete, // 🔥 추가
  onSignatureComplete, // 🔥 추가
  t = (key: string) => key,
}: BasicContractSignViewerProps) {

  const [fileLoading, setFileLoading] = useState<boolean>(true);
  const [activeTab, setActiveTab] = useState<string>("main");
  const [surveyData, setSurveyData] = useState<any>({});
  const [isInitialLoaded, setIsInitialLoaded] = useState<boolean>(false);
  const [surveyTemplate, setSurveyTemplate] = useState<SurveyTemplateWithQuestions | null>(null);
  const [surveyLoading, setSurveyLoading] = useState<boolean>(false);
  const [isSubmitting, setIsSubmitting] = useState(false); // 제출 상태 추가

  const conditionalHandler = useConditionalSurvey(surveyTemplate);

  const viewer = useRef<HTMLDivElement>(null);
  const initialized = useRef(false);
  const isCancelled = useRef(false);
  const currentDocumentPath = useRef<string>("");
  const [showDialog, setShowDialog] = useState(isOpen);
  const webViewerInstance = useRef<WebViewerInstance | null>(null);

  const { signatureFields, isProcessing: isAutoSignProcessing, hasSignatureFields, error: autoSignError } = useAutoSignatureFields(webViewerInstance.current || instance);
  
  // 🔥 서명 감지 훅 사용
  const { hasValidSignature } = useSignatureDetection(webViewerInstance.current || instance, onSignatureComplete);

  const isComplianceTemplate = templateName.includes('준법');
  const isNDATemplate = templateName.includes('비밀유지') || templateName.includes('NDA');

  const allFiles: FileInfo[] = React.useMemo(() => {
    const files: FileInfo[] = [];

    if (filePath) {
      files.push({
        path: filePath,
        name: templateName || "기본 계약서",
        type: "main",
      });
    }

    const normalizedAttachments: FileInfo[] = (additionalFiles || [])
      .map((f: any, idx: number) => ({
        path: f.path ?? f.filePath ?? "",
        name: `첨부파일 ${idx + 1}`,
        type: "attachment" as const,
      }))
      .filter(f => !!f.path);

    files.push(...normalizedAttachments);

    if (isComplianceTemplate) {
      files.push({
        path: "",
        name: "준법 설문조사",
        type: "survey",
      });
    }

    return files;
  }, [filePath, additionalFiles, templateName, isComplianceTemplate]);

  const cleanupHtmlStyle = () => {
    const elements = document.querySelectorAll('.Document_container');
    elements.forEach((elem) => {
      elem.remove();
    });
  };

  const cleanupWebViewer = () => {
    console.log("🧹 WebViewer 정리 시작");

    if (webViewerInstance.current) {
      try {
        const { documentViewer } = webViewerInstance.current.Core;
        if (documentViewer && documentViewer.getDocument()) {
          documentViewer.closeDocument();
        }

        if (webViewerInstance.current.UI && typeof webViewerInstance.current.UI.dispose === 'function') {
          webViewerInstance.current.UI.dispose();
        }
      } catch (error) {
        console.warn("WebViewer 정리 중 에러 (무시됨):", error);
      }

      webViewerInstance.current = null;
    }

    if (instance && setInstance) {
      setInstance(null);
    }

    setTimeout(() => cleanupHtmlStyle(), 100);
  };

  useEffect(() => {
    setShowDialog(isOpen);

    if (isOpen && isComplianceTemplate && !surveyTemplate) {
      loadSurveyTemplate();
    }

    if (isOpen) {
      setIsInitialLoaded(false);
      currentDocumentPath.current = "";
    }
  }, [isOpen, isComplianceTemplate]);

  useEffect(() => {
    if (!filePath) return;

    setIsInitialLoaded(false);
    currentDocumentPath.current = "";
    setActiveTab("main");

    const currentInstance = webViewerInstance.current || instance;

    if (currentInstance) {
      const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
      const encodedPath = normalizedPath.split('/').map(part => encodeURIComponent(part)).join('/');
      const apiFilePath = `/api/files/${encodedPath}`;

      loadDocument(currentInstance, apiFilePath, true).then(() => {
        setIsInitialLoaded(true);
      }).catch((error) => {
        console.error("📛 문서 로드 실패:", error);
      });
    }
  }, [filePath, instance]);

  const loadSurveyTemplate = async () => {
    setSurveyLoading(true);

    try {
      const template = await getActiveSurveyTemplate();
      setSurveyTemplate(template);
    } catch (error) {
      console.error('📛 설문조사 템플릿 로드 실패:', error);
      setSurveyTemplate(null);
    } finally {
      setSurveyLoading(false);
    }
  };

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

      const initializeWebViewer = () => {
        if (!viewer.current || isCancelled.current) {
          return;
        }

        const viewerElement = viewer.current;

        if (!viewerElement.isConnected) {
          setTimeout(initializeWebViewer, 100);
          return;
        }

        cleanupWebViewer();

        import("@pdftron/webviewer").then(({ default: WebViewer }) => {
          if (isCancelled.current || !viewer.current) {
            return;
          }

          WebViewer(
            {
              path: "/pdftronWeb",
              licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
              fullAPI: true,
            },
            viewerElement
          ).then((newInstance) => {
            if (isCancelled.current) {
              return;
            }

            webViewerInstance.current = newInstance;
            setInstance(newInstance);
            setFileLoading(false);

            const { documentViewer } = newInstance.Core;
            const FitMode = newInstance.UI.FitMode;

            const handleDocumentLoaded = () => {
              setFileLoading(false);
              newInstance.UI.setFitMode(FitMode.FitWidth);

              requestAnimationFrame(() => {
                try {
                  documentViewer.refreshAll();
                  documentViewer.updateView();
                  window.dispatchEvent(new Event("resize"));
                  setTimeout(() => window.dispatchEvent(new Event("resize")), 100);
                } catch (e) {
                  console.warn("layout refresh skipped", e);
                }
              });
            };

            documentViewer.addEventListener('documentLoaded', handleDocumentLoaded);

            newInstance.UI.setMinZoomLevel('25%');
            newInstance.UI.setMaxZoomLevel('400%');

            newInstance.UI.disableElements([
              "toolbarGroup-Annotate",
              "toolbarGroup-Shapes",
              "toolbarGroup-Insert",
              "toolbarGroup-Edit",
              "toolbarGroup-FillAndSign",
              "toolbarGroup-Forms",
              "saveAsButton",
              "downloadButton",
            ]);

            documentViewer.addEventListener('documentLoadingError', (error) => {
              console.error("📛 문서 로딩 에러:", error);

              let showToast = true;
              let errorMessage = "문서를 불러오는데 실패했습니다.";

              if (error && typeof error === 'object') {
                const errorStr = JSON.stringify(error).toLowerCase();

                if (errorStr.includes('linearized') || errorStr.includes('getreference')) {
                  showToast = false;
                } else if (errorStr.includes('network')) {
                  errorMessage = "네트워크 연결을 확인해주세요.";
                } else if (errorStr.includes('permission')) {
                  errorMessage = "문서에 접근할 권한이 없습니다.";
                }
              }

              if (showToast) {
                setFileLoading(false);
                toast.error(errorMessage);
              }
            });

          }).catch((error) => {
            console.error("📛 WebViewer 초기화 실패:", error);
            setFileLoading(false);
            toast.error("뷰어 초기화에 실패했습니다.");
          });
        }).catch((error) => {
          console.error("📛 WebViewer 모듈 로드 실패:", error);
          setFileLoading(false);
          toast.error("뷰어 모듈을 불러오는데 실패했습니다.");
        });
      };

      requestAnimationFrame(() => {
        setTimeout(initializeWebViewer, 50);
      });
    }

    return () => {
      isCancelled.current = true;
      cleanupWebViewer();
    };
  }, [setInstance]);

  const getExtFromPath = (p: string) => {
    const m = p.toLowerCase().match(/\.([a-z0-9]+)(?:\?.*)?$/);
    return m ? m[1] : undefined;
  };

  const loadDocument = async (
    instance: WebViewerInstance,
    documentPath: string,
    forceReload = false
  ) => {
    if (!forceReload && currentDocumentPath.current === documentPath) {
      return;
    }

    setFileLoading(true);
    try {
      if (!instance || !instance.UI || !instance.Core) {
        throw new Error("WebViewer 인스턴스가 유효하지 않습니다.");
      }

      const ext = getExtFromPath(documentPath);
      await instance.UI.loadDocument(documentPath, {
        ...(ext ? { extension: ext } : {}),
        filename: documentPath.split("/").pop(),
      });

      currentDocumentPath.current = documentPath;

      const { documentViewer } = instance.Core;
      requestAnimationFrame(() => {
        try {
          documentViewer.refreshAll();
          documentViewer.updateView();
          window.dispatchEvent(new Event("resize"));
          setTimeout(() => window.dispatchEvent(new Event("resize")), 100);
        } catch (e) {
          console.warn("레이아웃 새로고침 스킵:", e);
        }
      });
    } catch (error) {
      console.error("📛 문서 로딩 실패:", error);
      currentDocumentPath.current = "";

      let msg = "문서를 불러오는데 실패했습니다.";
      if (error instanceof Error) {
        const s = error.message.toLowerCase();
        if (s.includes("network") || s.includes("fetch")) {
          msg = "네트워크 연결을 확인해주세요.";
        } else if (s.includes("permission") || s.includes("access")) {
          msg = "문서에 접근할 권한이 없습니다.";
        } else if (s.includes("corrupt") || s.includes("invalid")) {
          msg = "파일이 손상되었거나 형식이 올바르지 않습니다.";
        } else if (s.includes("linearized") || s.includes("getreference")) {
          msg = "";
        }
      }
      if (msg) toast.error(msg);
    } finally {
      setFileLoading(false);
    }
  };

  const collectFormData = async (instance: WebViewerInstance) => {
    try {
      const { annotationManager } = instance.Core;
      const fieldManager = annotationManager.getFieldManager();
      const fields = fieldManager.getFields();

      const formData: any = {};
      fields.forEach((field: any) => {
        formData[field.name] = field.value;
      });

      return formData;
    } catch (error) {
      console.error('📛 폼 데이터 수집 실패:', error);
      return {};
    }
  };

  const handleTabChange = async (newTab: string) => {
    setActiveTab(newTab);
    if (newTab === "survey") return;

    const currentInstance = webViewerInstance.current || instance;
    if (!currentInstance || fileLoading) return;

    let targetFile: FileInfo | undefined;
    if (newTab === "main") {
      targetFile = allFiles.find(f => f.type === "main");
    } else if (newTab.startsWith("file-")) {
      const fileIndex = parseInt(newTab.replace("file-", ""), 10);
      targetFile = allFiles.filter(f => f.type !== 'survey')[fileIndex];
    }

    if (!targetFile?.path) {
      console.warn("📛 대상 파일을 찾을 수 없음:", newTab, allFiles);
      return;
    }

    const normalizedPath = targetFile.path.startsWith("/")
      ? targetFile.path.substring(1)
      : targetFile.path;
    const encodedPath = normalizedPath.split("/").map(encodeURIComponent).join("/");
    const apiFilePath = `/api/files/${encodedPath}`;

    try {
      currentDocumentPath.current = "";
      await loadDocument(currentInstance, apiFilePath, true);
      setIsInitialLoaded(true);

      const { documentViewer } = currentInstance.Core;
      requestAnimationFrame(() => {
        try {
          documentViewer.refreshAll();
          documentViewer.updateView();
          window.dispatchEvent(new Event("resize"));
        } catch (e) {
          console.warn("탭 변경 후 레이아웃 새로고침 스킵:", e);
        }
      });
    } catch (e) {
      console.error("📛 탭 변경 실패:", e);
    }
  };

  useEffect(() => {
    const currentInstance = webViewerInstance.current || instance;

    if (!currentInstance || !filePath || isInitialLoaded) {
      return;
    }

    const isMainTab = activeTab === 'main';
    const shouldLoadInitial = allFiles.length === 1 || isMainTab;

    if (!shouldLoadInitial || currentDocumentPath.current !== "") {
      return;
    }

    const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
    const encodedPath = normalizedPath.split('/').map(part => encodeURIComponent(part)).join('/');
    const apiFilePath = `/api/files/${encodedPath}`;

    currentDocumentPath.current = "";

    loadDocument(currentInstance, apiFilePath, true).then(() => {
      setIsInitialLoaded(true);
    }).catch((error) => {
      console.error("📛 초기 마운트 로드 실패:", error);
    });
  }, [webViewerInstance.current, instance, filePath, activeTab, isInitialLoaded, allFiles.length]);

  const handleSave = async () => {
    const currentInstance = webViewerInstance.current || instance;
    if (!currentInstance) return;

    try {
      const { documentViewer, annotationManager } = currentInstance.Core;
      const doc = documentViewer.getDocument();

      if (!doc) {
        toast.error("문서가 로드되지 않았습니다.");
        return;
      }

      const formData = await collectFormData(currentInstance);

      const xfdfString = await annotationManager.exportAnnotations();
      const documentData = await doc.getFileData({
        xfdfString,
        downloadType: "pdf",
      });

      if (isComplianceTemplate && !surveyData.completed) {
        toast.error("준법 설문조사를 먼저 완료해주세요.");
        setActiveTab('survey');
        return;
      }

      if (onSign) {
        await onSign(documentData, { formData, surveyData, signatureFields });
      } else {
        toast.success("계약서가 성공적으로 서명되었습니다.");
      }

      handleClose();
    } catch (error) {
      console.error("📛 서명 저장 실패:", error);
      toast.error("서명을 저장하는데 실패했습니다.");
    }
  };

  const handleClose = () => {
    if (onClose) {
      onClose();
    } else {
      setShowDialog(false);
    }
  };

  // 개선된 SurveyComponent
  const SurveyComponent = () => {
    const {
      control,
      watch,
      setValue,
      getValues,
      formState: { errors },
      trigger,
    } = useForm<SurveyFormData>({
      defaultValues: {},
      mode: 'onChange'
    });

    const watchedValues = watch();
    const [uploadedFiles, setUploadedFiles] = useState<Record<number, File[]>>({});

    // 📊 실시간 진행 상태 계산
    const progressStatus = useMemo(() => {
      if (!conditionalHandler || !surveyTemplate) {
        return {
          visibleQuestions: [],
          totalRequired: 0,
          completedRequired: 0,
          completedQuestionIds: [],
          incompleteQuestionIds: [],
          progressPercentage: 0,
          debugInfo: {}
        };
      }

      console.log('🔄 실시간 프로그레스 재계산 중...');
      console.log('📝 원본 watchedValues:', watchedValues);

      // 현재 답변을 조건부 핸들러가 인식할 수 있는 형태로 변환
      const convertedAnswers: Record<number, any> = {};
      Object.entries(watchedValues).forEach(([questionId, value]) => {
        const id = parseInt(questionId);
        const convertedValue = {
          questionId: id,
          answerValue: value?.answerValue || '',
          detailText: value?.detailText || '',
          otherText: value?.otherText || '',
          files: value?.files || []
        };

        convertedAnswers[id] = convertedValue;

        // 각 질문의 변환 과정 로그
        if (value?.answerValue) {
          console.log(`📝 질문 ${id} 변환:`, {
            원본: value,
            변환후: convertedValue
          });
        }
      });

      console.log('📝 변환된 답변들 최종:', convertedAnswers);

      const result = conditionalHandler.getSimpleProgressStatus(convertedAnswers);

      console.log('📊 실시간 진행 상태 최종 결과:', {
        전체표시질문: result.visibleQuestions.length,
        필수질문수: result.totalRequired,
        완료된필수질문: result.completedRequired,
        진행률: result.progressPercentage,
        완료된질문들: result.completedQuestionIds,
        미완료질문들: result.incompleteQuestionIds,
        기본질문: result.visibleQuestions.filter(q => !q.parentQuestionId).length,
        조건부질문: result.visibleQuestions.filter(q => q.parentQuestionId).length,
        완료된기본질문: result.completedQuestionIds.filter(id => !result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length,
        완료된조건부질문: result.completedQuestionIds.filter(id => !!result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length
      });

      // 🚨 조건부 질문들의 답변 상태 특별 점검
      const conditionalQuestions = result.visibleQuestions.filter(q => q.parentQuestionId);
      if (conditionalQuestions.length > 0) {
        console.log('🚨 조건부 질문들 답변 상태 점검:', conditionalQuestions.map(q => ({
          id: q.id,
          questionNumber: q.questionNumber,
          isRequired: q.isRequired,
          parentId: q.parentQuestionId,
          watchedValue: watchedValues[q.id],
          convertedAnswer: convertedAnswers[q.id],
          hasWatchedAnswer: !!watchedValues[q.id]?.answerValue,
          hasConvertedAnswer: !!convertedAnswers[q.id]?.answerValue,
          isInRequiredList: result.totalRequired,
          isCompleted: result.completedQuestionIds.includes(q.id)
        })));
      }

      return result;
    }, [conditionalHandler, watchedValues, surveyTemplate]);

    // 🎯 동적 상태 정보
    const visibleQuestions = progressStatus.visibleQuestions;
    const totalVisibleQuestions = visibleQuestions.length;
    const baseQuestionCount = surveyTemplate?.questions.length || 0;
    const conditionalQuestionCount = totalVisibleQuestions - baseQuestionCount;
    const hasConditionalQuestions = conditionalQuestionCount > 0;

    // ✅ 완료 가능 여부
    const canComplete = progressStatus.totalRequired > 0 &&
      progressStatus.completedRequired === progressStatus.totalRequired;

    if (surveyLoading) {
      return (
        <div className="h-full w-full">
          <Card className="h-full">
            <CardContent className="flex flex-col items-center justify-center h-full py-12">
              <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
              <p className="text-sm text-muted-foreground">설문조사를 불러오는 중...</p>
            </CardContent>
          </Card>
        </div>
      );
    }

    if (!surveyTemplate) {
      return (
        <div className="h-full w-full">
          <Card className="h-full">
            <CardContent className="flex flex-col items-center justify-center h-full py-12">
              <AlertTriangle className="h-8 w-8 text-red-500 mb-4" />
              <p className="text-sm text-muted-foreground">설문조사 템플릿을 불러올 수 없습니다.</p>
              <Button
                variant="outline"
                onClick={loadSurveyTemplate}
                className="mt-2"
              >
                다시 시도
              </Button>
            </CardContent>
          </Card>
        </div>
      );
    }

    // 🚨 템플릿이 로드되면 모든 질문들의 isRequired 속성 확인
    React.useEffect(() => {
      if (surveyTemplate && surveyTemplate.questions) {
        console.log('🚨 설문 템플릿의 모든 질문들 isRequired 속성 확인:', surveyTemplate.questions.map(q => ({
          id: q.id,
          questionNumber: q.questionNumber,
          questionText: q.questionText?.substring(0, 30) + '...',
          isRequired: q.isRequired,
          parentQuestionId: q.parentQuestionId,
          conditionalValue: q.conditionalValue,
          isConditional: !!q.parentQuestionId
        })));

        const allQuestions = surveyTemplate.questions.length;
        const requiredQuestions = surveyTemplate.questions.filter(q => q.isRequired).length;
        const conditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId).length;
        const requiredConditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId && q.isRequired).length;

        console.log('📊 템플릿 질문 통계:', {
          전체질문수: allQuestions,
          전체필수질문수: requiredQuestions,
          조건부질문수: conditionalQuestions,
          필수조건부질문수: requiredConditionalQuestions,
          기본질문수: allQuestions - conditionalQuestions,
          필수기본질문수: requiredQuestions - requiredConditionalQuestions
        });

        // 🚨 만약 조건부 질문들이 필수가 아니라면 경고
        if (conditionalQuestions > 0 && requiredConditionalQuestions === 0) {
          console.warn('⚠️ 경고: 조건부 질문들이 모두 필수가 아닙니다! 데이터베이스 확인 필요');
          console.warn('조건부 질문들:', surveyTemplate.questions.filter(q => q.parentQuestionId));
        }
      }
    }, [surveyTemplate]);

    const handleFileUpload = useCallback((questionId: number, files: FileList | null) => {
      if (!files) return;

      const fileArray = Array.from(files);
      setUploadedFiles(prev => ({
        ...prev,
        [questionId]: fileArray
      }));

      setValue(`${questionId}.files`, fileArray);
    }, [setValue]);

    const handleAnswerChange = useCallback((questionId: number, field: string, value: any) => {
      console.log(`📝 답변 변경: 질문 ${questionId}, 필드 ${field}, 값:`, value);

      // 해당 질문이 조건부 질문인지 확인
      const question = visibleQuestions.find(q => q.id === questionId);
      if (question) {
        console.log(`📋 질문 ${questionId} 상세 정보:`, {
          id: question.id,
          questionNumber: question.questionNumber,
          isRequired: question.isRequired,
          parentQuestionId: question.parentQuestionId,
          conditionalValue: question.conditionalValue,
          isConditional: !!question.parentQuestionId
        });
      }

      setValue(`${questionId}.${field}`, value);

      // setValue 후 현재 값 확인
      setTimeout(() => {
        const currentFormValues = getValues();
        console.log(`✅ setValue 후 확인 - 질문 ${questionId}:`, {
          설정한값: value,
          저장된전체값: currentFormValues[questionId],
          전체폼값: currentFormValues
        });
      }, 0);

      // 부모 질문의 답변이 변경되면 조건부 자식 질문들 처리
      if (field === 'answerValue' && conditionalHandler) {
        const currentValues = getValues();
        const convertedAnswers: Record<number, any> = {};

        Object.entries(currentValues).forEach(([qId, qValue]) => {
          const id = parseInt(qId);
          convertedAnswers[id] = {
            questionId: id,
            answerValue: qValue?.answerValue || '',
            detailText: qValue?.detailText || '',
            otherText: qValue?.otherText || '',
            files: qValue?.files || []
          };
        });

        // 새로운 답변 반영
        convertedAnswers[questionId] = {
          ...convertedAnswers[questionId],
          questionId,
          [field]: value
        };

        console.log(`🔄 질문 ${questionId}의 답변 변경으로 인한 조건부 질문 처리...`);
        console.log(`🔄 변경 후 전체 답변:`, convertedAnswers);

        // 영향받는 자식 질문들의 답변 초기화
        const clearedAnswers = conditionalHandler.clearAffectedChildAnswers(questionId, value, convertedAnswers);

        console.log(`🧹 정리된 답변들:`, clearedAnswers);

        // 삭제된 답변들을 폼에서도 제거
        Object.keys(convertedAnswers).forEach(qId => {
          const id = parseInt(qId);
          if (id !== questionId && !clearedAnswers[id]) {
            console.log(`🗑️ 질문 ${id} 답변 초기화`);
            setValue(`${id}`, {
              answerValue: '',
              detailText: '',
              otherText: '',
              files: []
            });

            // 업로드된 파일도 초기화
            setUploadedFiles(prev => {
              const updated = { ...prev };
              delete updated[id];
              return updated;
            });
          }
        });
      }
    }, [setValue, getValues, conditionalHandler, visibleQuestions]);

    // 🔥 설문조사 완료 핸들러 수정
    const handleSurveyComplete = useCallback(async () => {
      console.log('🎯 설문조사 완료 시도');

      // 이미 제출 중이면 중복 실행 방지
      if (isSubmitting) {
        console.log('⚠️ 이미 제출 중...');
        return;
      }

      setIsSubmitting(true);

      try {
        const currentValues = getValues();
        console.log('📝 현재 폼 값들:', currentValues);

        // 폼 검증
        const isValid = await trigger();
        console.log('🔍 폼 검증 결과:', isValid);

        // 진행 상태 최종 확인
        console.log('📊 최종 진행 상태:', {
          totalRequired: progressStatus.totalRequired,
          completedRequired: progressStatus.completedRequired,
          canComplete,
          완료된질문들: progressStatus.completedQuestionIds,
          미완료질문들: progressStatus.incompleteQuestionIds
        });

        if (!canComplete) {
          let errorMessage = '모든 필수 항목을 완료해주세요.';
          let errorDescription = `${progressStatus.completedRequired}/${progressStatus.totalRequired} 완료됨`;

          // 구체적인 미완료 이유 표시
          if (progressStatus.incompleteQuestionIds.length > 0) {
            const incompleteReasons = progressStatus.incompleteQuestionIds.map(id => {
              const debug = progressStatus.debugInfo?.[id];
              const question = visibleQuestions.find(q => q.id === id);
              return `• Q${question?.questionNumber}: ${question?.questionText?.substring(0, 40)}...\n  → ${debug?.incompleteReason || '답변 필요'}`;
            }).slice(0, 3);

            errorDescription = incompleteReasons.join('\n\n');

            if (progressStatus.incompleteQuestionIds.length > 3) {
              errorDescription += `\n\n... 외 ${progressStatus.incompleteQuestionIds.length - 3}개 항목`;
            }
          }

          toast.error(errorMessage, {
            description: errorDescription,
            icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
            duration: 12000
          });

          // 첫 번째 미완료 질문으로 스크롤
          if (progressStatus.incompleteQuestionIds.length > 0) {
            const firstIncompleteId = progressStatus.incompleteQuestionIds[0];
            const element = document.getElementById(`question-${firstIncompleteId}`);
            if (element) {
              element.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
          }

          return;
        }

        // 필수 데이터 확인
        if (!contractId || !surveyTemplate?.id) {
          toast.error('계약서 정보 또는 설문 템플릿 정보가 없습니다.');
          return;
        }

        // 서버 액션에 전달할 데이터 준비
        const surveyAnswers: SurveyAnswerData[] = Object.entries(currentValues)
          .map(([questionId, value]) => ({
            questionId: parseInt(questionId),
            answerValue: value?.answerValue || '',
            detailText: value?.detailText || '',
            otherText: value?.otherText || '',
            files: value?.files || []
          }))
          .filter(answer =>
            // 빈 답변 필터링 (하지만 필수 질문의 답변이 완료되었음을 이미 확인했음)
            answer.answerValue || answer.detailText || (answer.files && answer.files.length > 0)
          );

        const requestData: CompleteSurveyRequest = {
          contractId: contractId,
          templateId: surveyTemplate.id,
          answers: surveyAnswers,
          progressStatus: progressStatus // 디버깅용 추가 정보
        };

        console.log('📤 서버로 전송할 데이터:', {
          contractId: requestData.contractId,
          templateId: requestData.templateId,
          answersCount: requestData.answers.length,
          answers: requestData.answers.map(a => ({
            questionId: a.questionId,
            hasAnswer: !!a.answerValue,
            hasDetail: !!a.detailText,
            hasOther: !!a.otherText,
            filesCount: a.files?.length || 0
          }))
        });

        // 제출 중 토스트 표시
        const submitToast = toast.loading('설문조사를 저장하는 중...', {
          description: '잠시만 기다려주세요.',
          duration: Infinity
        });

        // 서버 액션 호출
        const result = await completeSurvey(requestData);

        // 로딩 토스트 제거
        toast.dismiss(submitToast);

        if (result.success) {
          // 클라이언트 상태 업데이트 (기존 로직 유지)
          setSurveyData({
            completed: true,
            answers: surveyAnswers,
            timestamp: new Date().toISOString(),
            progressStatus: progressStatus,
            totalQuestions: totalVisibleQuestions,
            conditionalQuestions: conditionalQuestionCount,
            responseId: result.data?.responseId // 서버에서 반환된 응답 ID 저장
          });

          // 🔥 부모 컴포넌트에 설문조사 완료 알림
          if (onSurveyComplete) {
            onSurveyComplete();
          }

          toast.success("🎉 설문조사가 완료되었습니다!", {
            description: `총 ${progressStatus.totalRequired}개 필수 질문 완료${hasConditionalQuestions ? ` (조건부 ${conditionalQuestionCount}개 포함)` : ''}`,
            icon: <CheckCircle2 className="h-5 w-5 text-green-500" />,
            duration: 5000
          });

          console.log('✅ 설문조사 완료:', {
            totalAnswered: surveyAnswers.length,
            totalRequired: progressStatus.totalRequired,
            conditionalQuestions: conditionalQuestionCount,
            responseId: result.data?.responseId
          });

          // 자동으로 메인 탭으로 이동 (선택사항)
          setTimeout(() => {
            setActiveTab('main');
          }, 2000);

        } else {
          // 서버 에러 처리
          console.error('❌ 서버 응답 에러:', result.message);
          toast.error('설문조사 저장 실패', {
            description: result.message || '서버에서 오류가 발생했습니다.',
            icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
            duration: 8000
          });
        }

      } catch (error) {
        console.error('❌ 설문조사 저장 중 예외 발생:', error);

        let errorMessage = '설문조사 저장에 실패했습니다.';
        let errorDescription = '네트워크 연결을 확인하고 다시 시도해주세요.';

        if (error instanceof Error) {
          errorDescription = error.message;
        }

        toast.error(errorMessage, {
          description: errorDescription,
          icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
          duration: 10000
        });
      } finally {
        setIsSubmitting(false);
      }
    }, [
      getValues,
      trigger,
      progressStatus,
      visibleQuestions,
      canComplete,
      contractId,
      surveyTemplate?.id,
      totalVisibleQuestions,
      conditionalQuestionCount,
      hasConditionalQuestions,
      isSubmitting,
      setActiveTab,
      onSurveyComplete // 🔥 추가
    ]);

    // OTHER 텍스트 입력 컴포넌트
    const OtherTextInput = ({ questionId, fieldName }: { questionId: number; fieldName: string }) => {
      const answerValue = useWatch({
        control,
        name: `${fieldName}.answerValue`
      });

      if (answerValue !== 'OTHER') return null;

      return (
        <Controller
          name={`${fieldName}.otherText`}
          control={control}
          render={({ field }) => (
            <Input
              {...field}
              placeholder="기타 내용을 입력해주세요"
              className="mt-2"
            />
          )}
        />
      );
    };

    return (
      <div className="h-full w-full flex flex-col">
        <Card className="h-full flex flex-col">
          <CardHeader className="flex-shrink-0">
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center">
                <ClipboardList className="h-5 w-5 mr-2 text-amber-500" />
                {surveyTemplate.name}
                {conditionalHandler && (
                  <Badge variant="outline" className="ml-2 text-xs">
                    조건부 질문 지원
                  </Badge>
                )}
              </div>
              <div className="text-sm text-gray-600">
                {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료
              </div>
            </CardTitle>

            <CardDescription>
              {surveyTemplate.description}

              {/* 🎯 동적 질문 수 표시 */}
              <div className="mt-2 space-y-1">
                <div className="flex items-center text-sm">
                  <span className="text-gray-600">
                    📋 총 {totalVisibleQuestions}개 질문
                    {hasConditionalQuestions && (
                      <span className="text-blue-600 ml-1">
                        (기본 {baseQuestionCount}개 + 조건부 {conditionalQuestionCount}개)
                      </span>
                    )}
                  </span>
                </div>

                {hasConditionalQuestions && (
                  <div className="text-blue-600 text-sm">
                    ⚡ 답변에 따라 {conditionalQuestionCount}개 추가 질문이 나타났습니다
                  </div>
                )}
              </div>
            </CardDescription>

            {/* 📊 동적 프로그레스 바 */}
            <div className="space-y-2">
              <div className="flex justify-between text-xs text-gray-600">
                <span>필수 질문 진행률</span>
                <span>
                  {Math.round(progressStatus.progressPercentage)}%
                  {hasConditionalQuestions && (
                    <span className="ml-1 text-blue-600">
                      (조건부 포함)
                    </span>
                  )}
                </span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500 ease-out"
                  style={{ width: `${progressStatus.progressPercentage}%` }}
                />
              </div>

              {/* 세부 진행 상황 */}
              {progressStatus.totalRequired > 0 && (
                <div className="text-xs text-gray-500 flex justify-between">
                  <span>완료: {progressStatus.completedRequired}개</span>
                  <span>남은 필수: {progressStatus.totalRequired - progressStatus.completedRequired}개</span>
                </div>
              )}
            </div>
          </CardHeader>

          <CardContent className="flex-1 min-h-0 overflow-y-auto">
            <form onSubmit={(e) => e.preventDefault()} className="space-y-6">
              <div className="p-4 border rounded-lg bg-yellow-50">
                <div className="flex items-start">
                  <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5 mr-2" />
                  <div>
                    <p className="font-medium text-yellow-800">중요 안내</p>
                    <p className="text-sm text-yellow-700 mt-1">
                      본 설문조사는 준법 의무 확인을 위한 필수 절차입니다. 모든 항목을 정확히 작성해주세요.
                      {conditionalHandler && (
                        <span className="block mt-1">
                          ⚡ 답변에 따라 추가 질문이 나타날 수 있으며, 이 경우 모든 추가 질문도 완료해야 합니다.
                        </span>
                      )}
                    </p>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                {visibleQuestions.map((question: any) => {
                  const fieldName = `${question.id}`;
                  const isComplete = progressStatus.completedQuestionIds.includes(question.id);
                  const isConditional = !!question.parentQuestionId;

                  return (
                    <div
                      key={question.id}
                      id={`question-${question.id}`}
                      className={`mb-6 p-4 border rounded-lg transition-colors duration-200 ${isConditional
                          ? 'bg-blue-50 border-blue-200'
                          : 'bg-gray-50 border-gray-200'
                        } ${!isComplete && question.isRequired ? 'ring-2 ring-red-100' : ''}`}
                    >
                      <div className="flex items-start justify-between mb-3">
                        <div className="flex-1">
                          <Label className="text-sm font-medium text-gray-900 flex items-center flex-wrap gap-2">
                            <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
                              Q{question.questionNumber}
                            </span>

                            {isConditional && (
                              <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">
                                ⚡ 조건부 질문
                              </span>
                            )}

                            {question.questionType === 'FILE' && (
                              <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">
                                📎 파일 업로드
                              </span>
                            )}

                            <div className="w-full mt-1">
                              {question.questionText}
                              {question.isRequired && <span className="text-red-500 ml-1">*</span>}
                            </div>
                          </Label>
                        </div>

                        {isComplete && (
                          <CheckCircle2 className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                        )}
                      </div>

                      {/* 질문 타입별 렌더링 (기존 코드와 동일) */}
                      {/* RADIO 타입 */}
                      {question.questionType === 'RADIO' && (
                        <Controller
                          name={`${fieldName}.answerValue`}
                          control={control}
                          rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
                          render={({ field }) => (
                            <RadioGroup
                              value={field.value || ''}
                              onValueChange={(value) => {
                                field.onChange(value);
                                handleAnswerChange(question.id, 'answerValue', value);
                              }}
                              className="space-y-2"
                            >
                              {question.options?.map((option: any) => (
                                <div key={option.id} className="flex items-center space-x-2">
                                  <RadioGroupItem value={option.optionValue} id={`${question.id}-${option.id}`} />
                                  <Label htmlFor={`${question.id}-${option.id}`} className="text-sm">
                                    {option.optionText}
                                  </Label>
                                </div>
                              ))}
                            </RadioGroup>
                          )}
                        />
                      )}

                      {/* DROPDOWN 타입 */}
                      {question.questionType === 'DROPDOWN' && (
                        <div className="space-y-2">
                          <Controller
                            name={`${fieldName}.answerValue`}
                            control={control}
                            rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
                            render={({ field }) => (
                              <Select
                                value={field.value || ''}
                                onValueChange={(value) => {
                                  field.onChange(value);
                                  handleAnswerChange(question.id, 'answerValue', value);
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="선택해주세요" />
                                </SelectTrigger>
                                <SelectContent>
                                  {question.options?.map((option: any) => (
                                    <SelectItem key={option.id} value={option.optionValue}>
                                      {option.optionText}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            )}
                          />

                          <OtherTextInput questionId={question.id} fieldName={fieldName} />
                        </div>
                      )}

                      {/* TEXTAREA 타입 */}
                      {question.questionType === 'TEXTAREA' && (
                        <Controller
                          name={`${fieldName}.detailText`}
                          control={control}
                          rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
                          render={({ field }) => (
                            <Textarea
                              {...field}
                              placeholder="상세한 내용을 입력해주세요"
                              rows={4}
                            />
                          )}
                        />
                      )}

                      {/* 상세 텍스트 입력 */}
                      {question.hasDetailText && (
                        <div className="mt-3">
                          <Label className="text-sm text-gray-700 mb-2 block">상세 내용을 기술해주세요:</Label>
                          <Controller
                            name={`${fieldName}.detailText`}
                            control={control}
                            rules={{ required: question.isRequired ? '상세 내용을 입력해주세요.' : false }}
                            render={({ field }) => (
                              <Textarea
                                {...field}
                                placeholder="상세한 내용을 입력해주세요"
                                rows={3}
                                className="w-full"
                              />
                            )}
                          />
                        </div>
                      )}

                      {/* 파일 업로드 */}
                      {(question.hasFileUpload || question.questionType === 'FILE') && (
                        <div className="mt-3">
                          <Label className="text-sm text-gray-700 mb-2 block">첨부파일:</Label>
                          <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
                            <input
                              type="file"
                              multiple
                              onChange={(e) => handleFileUpload(question.id, e.target.files)}
                              className="hidden"
                              id={`file-${question.id}`}
                            />
                            <label htmlFor={`file-${question.id}`} className="cursor-pointer">
                              <div className="flex flex-col items-center">
                                <Upload className="h-8 w-8 text-gray-400 mb-2" />
                                <span className="text-sm text-gray-500">파일을 선택하거나 여기에 드래그하세요</span>
                              </div>
                            </label>

                            {uploadedFiles[question.id] && uploadedFiles[question.id].length > 0 && (
                              <div className="mt-3 space-y-1">
                                {uploadedFiles[question.id].map((file, index) => (
                                  <div key={index} className="flex items-center space-x-2 text-sm">
                                    <FileText className="h-4 w-4 text-blue-500" />
                                    <span>{file.name}</span>
                                    <span className="text-gray-500">({(file.size / 1024).toFixed(1)} KB)</span>
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </div>
                      )}

                      {/* 에러 메시지 */}
                      {errors[fieldName] && (
                        <p className="mt-2 text-sm text-red-600 flex items-center">
                          <AlertTriangle className="h-4 w-4 mr-1" />
                          {errors[fieldName]?.answerValue?.message ||
                            errors[fieldName]?.detailText?.message ||
                            '필수 항목을 완료해주세요.'}
                        </p>
                      )}
                    </div>
                  );
                })}
              </div>

              {/* ✅ 향상된 완료 버튼 */}
              <div className="flex justify-end pt-6 border-t">
                <div className="flex items-center space-x-4">
                  {/* 진행 상황 요약 */}
                  <div className="text-sm">
                    {canComplete ? (
                      <div className="text-green-600 font-medium flex items-center">
                        <CheckCircle2 className="h-4 w-4 mr-1" />
                        모든 필수 항목 완료됨
                        {hasConditionalQuestions && (
                          <span className="ml-2 text-xs text-blue-600">
                            (조건부 {conditionalQuestionCount}개 포함)
                          </span>
                        )}
                      </div>
                    ) : (
                      <div className="space-y-1">
                        <div className="flex items-center text-gray-600">
                          <AlertTriangle className="h-4 w-4 mr-1 text-red-500" />
                          {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료
                        </div>
                        {hasConditionalQuestions && (
                          <div className="text-xs text-blue-600">
                            기본 + 조건부 {conditionalQuestionCount}개 포함
                          </div>
                        )}
                      </div>
                    )}
                  </div>

                  <Button
                    type="button"
                    onClick={handleSurveyComplete}
                    disabled={!canComplete || isSubmitting}
                    className={`transition-all duration-200 ${canComplete && !isSubmitting
                        ? 'bg-green-600 hover:bg-green-700 shadow-lg'
                        : 'bg-gray-400 cursor-not-allowed'
                      }`}
                  >
                    {isSubmitting ? (
                      <>
                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                        저장 중...
                      </>
                    ) : (
                      <>
                        <CheckCircle2 className="h-4 w-4 mr-2" />
                        설문조사 완료
                      </>
                    )}
                    <span className="ml-1 text-xs">
                      ({progressStatus.completedRequired}/{progressStatus.totalRequired})
                    </span>
                  </Button>
                </div>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    );
  };
  
  // 🔥 서명 상태 표시 컴포넌트 개선
  const SignatureFieldsStatus = () => {
    if (!hasSignatureFields && !isAutoSignProcessing && !autoSignError && !hasValidSignature) return null;

    return (
      <div className="mb-2 flex items-center space-x-2">
        {isAutoSignProcessing ? (
          <Badge variant="secondary" className="text-xs">
            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
            서명 필드 생성 중...
          </Badge>
        ) : autoSignError ? (
          <Badge variant="destructive" className="text-xs bg-red-50 text-red-700 border-red-200">
            <AlertTriangle className="h-3 w-3 mr-1" />
            자동 생성 실패
          </Badge>
        ) : hasSignatureFields ? (
          <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
            <Target className="h-3 w-3 mr-1" />
            {signatureFields.length}개 서명 필드 자동 생성됨
          </Badge>
        ) : null}
        
        {/* 🔥 서명 완료 상태 표시 */}
        {hasValidSignature && (
          <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
            <CheckCircle2 className="h-3 w-3 mr-1" />
            서명 완료됨
          </Badge>
        )}
      </div>
    );
  };

  // 인라인 뷰어 렌더링
  if (!isOpen && !onClose) {
    return (
      <div className="h-full w-full flex flex-col overflow-hidden">
        {allFiles.length > 1 ? (
          <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col">
            <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0">
              <SignatureFieldsStatus />
              <TabsList className="grid w-full h-8" style={{ gridTemplateColumns: `repeat(${allFiles.length}, 1fr)` }}>
                {allFiles.map((file, index) => {
                  let tabId: string;
                  if (index === 0) {
                    tabId = 'main';
                  } else if (file.type === 'survey') {
                    tabId = 'survey';
                  } else {
                    const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey').length;
                    tabId = `file-${fileOnlyIndex}`;
                  }

                  return (
                    <TabsTrigger key={tabId} value={tabId} className="text-xs">
                      <div className="flex items-center space-x-1">
                        {file.type === 'survey' ? (
                          <ClipboardList className="h-3 w-3" />
                        ) : (
                          <FileText className="h-3 w-3" />
                        )}
                        <span className="truncate">{file.name}</span>
                        {file.type === 'survey' && surveyData.completed && (
                          <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge>
                        )}
                      </div>
                    </TabsTrigger>
                  );
                })}
              </TabsList>
            </div>

            <div className="flex-1 min-h-0 overflow-hidden relative">
              <div
                className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`}
              >
                <SurveyComponent />
              </div>

              <div
                className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`}
              >
                <div className="w-full h-full overflow-auto">
                  <div
                    ref={viewer}
                    className="w-full h-full min-h-[400px]"
                    style={{
                      position: 'relative',
                      overflow: 'visible'
                    }}
                  >
                    {fileLoading && (
                      <div className="absolute inset-0 flex flex-col items-center justify-center bg-white z-10">
                        <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
                        <p className="text-sm text-muted-foreground">문서 로딩 중...</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </Tabs>
        ) : (
          <div className="h-full w-full flex flex-col">
            <div className="flex-shrink-0 p-2">
              <SignatureFieldsStatus />
            </div>
            <div className="flex-1 min-h-0 overflow-hidden relative">
              <div className="absolute inset-0">
                <div className="w-full h-full overflow-auto">
                  <div
                    ref={viewer}
                    className="w-full h-full min-h-[400px]"
                    style={{
                      position: 'relative',
                      overflow: 'visible'
                    }}
                  >
                    {fileLoading && (
                      <div className="absolute inset-0 flex flex-col items-center justify-center bg-white z-10">
                        <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
                        <p className="text-sm text-muted-foreground">문서 로딩 중...</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  // 다이얼로그 뷰어 렌더링
  return (
    <Dialog open={showDialog} onOpenChange={handleClose}>
      <DialogContent className="w-[90vw] max-w-6xl h-[90vh] flex flex-col p-0">
        <DialogHeader className="px-6 py-4 border-b flex-shrink-0">
          <DialogTitle className="flex items-center justify-between">
            <span>기본계약서 서명</span>
            <SignatureFieldsStatus />
          </DialogTitle>
          <DialogDescription>
            계약서를 확인하고 서명을 진행해주세요.
            {isComplianceTemplate && (
              <span className="block mt-1 text-amber-600">📋 준법 설문조사를 먼저 완료해주세요.</span>
            )}
            {hasSignatureFields && (
              <span className="block mt-1 text-green-600">
                🎯 서명 위치가 자동으로 감지되었습니다.
              </span>
            )}
            {/* 🔥 서명 완료 상태 안내 */}
            {hasValidSignature && (
              <span className="block mt-1 text-green-600">
                ✅ 서명이 완료되었습니다.
              </span>
            )}
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 min-h-0 overflow-hidden">
          {allFiles.length > 1 ? (
            <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col">
              <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0">
                <TabsList className="grid w-full h-8" style={{ gridTemplateColumns: `repeat(${allFiles.length}, 1fr)` }}>
                  {allFiles.map((file, index) => {
                    const tabId = index === 0 ? 'main' : file.type === 'survey' ? 'survey' : `file-${index}`;
                    return (
                      <TabsTrigger key={tabId} value={tabId} className="text-xs">
                        <div className="flex items-center space-x-1">
                          {file.type === 'survey' ? <ClipboardList className="h-3 w-3" /> : <FileText className="h-3 w-3" />}
                          <span className="truncate">{file.name}</span>
                          {file.type === 'survey' && surveyData.completed && (
                            <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge>
                          )}
                        </div>
                      </TabsTrigger>
                    );
                  })}
                </TabsList>
              </div>

              <div className="flex-1 min-h-0 overflow-hidden relative">
                <div className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`}>
                  <SurveyComponent />
                </div>

                <div className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`}>
                  <div className="w-full h-full overflow-auto">
                    <div
                      ref={viewer}
                      className="w-full h-full min-h-[400px]"
                      style={{
                        position: 'relative',
                        overflow: 'visible'
                      }}
                    >
                      {fileLoading && (
                        <div className="absolute inset-0 flex flex-col items-center justify-center bg-white z-10">
                          <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
                          <p className="text-sm text-muted-foreground">문서 로딩 중...</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </Tabs>
          ) : (
            <div className="h-full flex flex-col">
              <div className="flex-1 min-h-0 overflow-hidden relative">
                <div className="absolute inset-0">
                  <div className="w-full h-full overflow-auto">
                    <div
                      ref={viewer}
                      className="w-full h-full min-h-[400px]"
                      style={{
                        position: 'relative',
                        overflow: 'visible'
                      }}
                    >
                      {fileLoading && (
                        <div className="absolute inset-0 flex flex-col items-center justify-center bg-white z-10">
                          <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
                          <p className="text-sm text-muted-foreground">문서 로딩 중...</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        <DialogFooter className="px-6 py-4 border-t bg-white flex-shrink-0">
          <Button variant="outline" onClick={handleClose} disabled={fileLoading}>취소</Button>
          <Button onClick={handleSave} disabled={fileLoading || isAutoSignProcessing}>
            <FileSignature className="h-4 w-4 mr-2" />
            서명 완료
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}