"use client";

import * as React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { formatDate } from "@/lib/utils";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import type { WebViewerInstance } from "@pdftron/webviewer";
import type { BasicContractView } from "@/db/schema";
import {
  Upload,
  FileSignature,
  CheckCircle2,
  Search,
  Clock,
  FileText,
  User,
  AlertCircle,
  Calendar,
  Loader2,
  ArrowRight,
  Trophy,
  Target,
  Shield
} from "lucide-react";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { useRouter } from "next/navigation"
import { BasicContractSignViewer } from "../viewer/basic-contract-sign-viewer";
import { getVendorAttachments, processBuyerSignatureAction } from "../service";

// 계약서 상태 타입 정의
interface ContractStatus {
  id: number;
  status: 'pending' | 'completed' | 'error';
  errorMessage?: string;
}

interface BasicContractSignDialogProps {
  contracts: BasicContractView[];
  onSuccess?: () => void;
  hasSelectedRows?: boolean;
  mode?: 'vendor' | 'buyer';
  onBuyerSignComplete?: (contractId: number, signedData: ArrayBuffer) => void;
  t: (key: string) => string;
  // 외부 상태 제어를 위한 새로운 props (선택적)
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export function BasicContractSignDialog({
  contracts,
  onSuccess,
  hasSelectedRows = false,
  mode = 'vendor',
  onBuyerSignComplete,
  t,
  // 새로 추가된 props
  open: externalOpen,
  onOpenChange: externalOnOpenChange
}: BasicContractSignDialogProps) {
  // 내부 상태 (외부 제어가 없을 때 사용)
  const [internalOpen, setInternalOpen] = React.useState(false);
  const [selectedContract, setSelectedContract] = React.useState<BasicContractView | null>(null);
  const [instance, setInstance] = React.useState<null | WebViewerInstance>(null);
  const [searchTerm, setSearchTerm] = React.useState("");
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  // 추가된 state들
  const [additionalFiles, setAdditionalFiles] = React.useState<any[]>([]);
  const [isLoadingAttachments, setIsLoadingAttachments] = React.useState(false);

  // 계약서 상태 관리
  const [contractStatuses, setContractStatuses] = React.useState<ContractStatus[]>([]);

  // 서명/설문/GTC 코멘트 완료 상태 관리
  const [surveyCompletionStatus, setSurveyCompletionStatus] = React.useState<Record<number, boolean>>({});
  const [signatureStatus, setSignatureStatus] = React.useState<Record<number, boolean>>({});
  const [gtcCommentStatus, setGtcCommentStatus] = React.useState<Record<number, {
    hasComments: boolean;
    commentCount: number;
    reviewStatus?: string;
    isComplete?: boolean;
  }>>({});

  console.log(gtcCommentStatus, "gtcCommentStatus")

  const router = useRouter()

  // 실제 사용할 open 상태 (외부 제어가 있으면 외부 상태 사용, 없으면 내부 상태 사용)
  const isControlledExternally = externalOpen !== undefined;
  const open = isControlledExternally ? externalOpen : internalOpen;

  // 모드에 따른 텍스트
  const isBuyerMode = mode === 'buyer';
  const dialogTitle = isBuyerMode ? "구매자 최종승인 서명" : t("basicContracts.dialog.title");
  const signButtonText = isBuyerMode ? "최종승인 완료" : "서명 완료 및 저장";

  // 버튼 비활성화 조건
  const isButtonDisabled = !hasSelectedRows || contracts.length === 0;

  // 비활성화 이유 텍스트
  const getDisabledReason = () => {
    if (!hasSelectedRows) {
      return t("basicContracts.toolbar.selectRows");
    }
    if (contracts.length === 0) {
      return t("basicContracts.toolbar.noPendingContracts");
    }
    return "";
  };

  // 현재 선택된 계약서의 서명 완료 가능 여부 확인
const canCompleteCurrentContract = React.useMemo(() => {
  if (!selectedContract) return false;
  
  const contractId = selectedContract.id;
  
  if (isBuyerMode) {
    const signatureCompleted = signatureStatus[contractId] === true;
    return signatureCompleted;
  }
  
  const isComplianceTemplate = selectedContract.templateName?.includes('준법');
  const isGTCTemplate = selectedContract.templateName?.includes('GTC');
  
  const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true;
  
  // GTC 체크 수정
  const gtcStatus = gtcCommentStatus[contractId];
  const gtcCompleted = isGTCTemplate ? 
    (!gtcStatus?.hasComments || gtcStatus?.isComplete === true) : true;
  
  const signatureCompleted = signatureStatus[contractId] === true;
  
  return surveyCompleted && gtcCompleted && signatureCompleted;
}, [selectedContract, surveyCompletionStatus, signatureStatus, gtcCommentStatus, isBuyerMode]);


  // 계약서별 상태 초기화
  React.useEffect(() => {
    if (contracts.length > 0 && contractStatuses.length === 0) {
      setContractStatuses(
        contracts.map(contract => ({
          id: contract.id,
          status: 'pending' as const
        }))
      );
    }
  }, [contracts, contractStatuses.length]);

  // 완료된 계약서 수 계산
  const completedCount = contractStatuses.filter(status => status.status === 'completed').length;
  const totalCount = contracts.length;
  const allCompleted = completedCount === totalCount && totalCount > 0;

  // 현재 선택된 계약서의 상태
  const currentContractStatus = selectedContract
    ? contractStatuses.find(status => status.id === selectedContract.id)
    : null;

  // 다음 미완료 계약서 찾기
  const getNextPendingContract = () => {
    const pendingStatuses = contractStatuses.filter(status => status.status === 'pending');
    if (pendingStatuses.length === 0) return null;

    const nextPendingId = pendingStatuses[0].id;
    return contracts.find(contract => contract.id === nextPendingId) || null;
  };

  // 다이얼로그 열기/닫기 핸들러 (외부 제어 지원)
  const handleOpenChange = (isOpen: boolean) => {
    if (!isOpen && !allCompleted && completedCount > 0) {
      // 완료되지 않은 계약서가 있으면 확인 대화상자
      const confirmClose = window.confirm(
        `${completedCount}/${totalCount}개 계약서가 완료되었습니다. 정말 나가시겠습니까?`
      );
      if (!confirmClose) return;
    }

    // 외부 제어가 있으면 외부 콜백 호출, 없으면 내부 상태 업데이트
    if (isControlledExternally && externalOnOpenChange) {
      externalOnOpenChange(isOpen);
    } else {
      setInternalOpen(isOpen);
    }

    if (!isOpen) {
      // 다이얼로그 닫을 때 상태 초기화
      setSelectedContract(null);
      setSearchTerm("");
      setAdditionalFiles([]);
      setContractStatuses([]);
      setSurveyCompletionStatus({});
      setSignatureStatus({});
      setGtcCommentStatus({});
      // WebViewer 인스턴스 정리
      if (instance) {
        try {
          instance.UI.dispose();
        } catch (error) {
          console.log("WebViewer dispose error:", error);
        }
        setInstance(null);
      }
    }
  };

  // 계약서 선택 핸들러
  const handleSelectContract = (contract: BasicContractView) => {
    console.log("계약서 선택:", contract.id, contract.templateName);
    setSelectedContract(contract);
  };

  // 검색된 계약서 필터링
  const filteredContracts = React.useMemo(() => {
    if (!searchTerm.trim()) return contracts;

    const term = searchTerm.toLowerCase();
    return contracts.filter(contract =>
      (contract.templateName || '').toLowerCase().includes(term) ||
      (contract.requestedByName || '').toLowerCase().includes(term)
    );
  }, [contracts, searchTerm]);

  // 다이얼로그가 열릴 때 첫 번째 미완료 계약서 자동 선택
  React.useEffect(() => {
    if (open && contracts.length > 0 && !selectedContract) {
      const firstPending = getNextPendingContract();
      if (firstPending) {
        setSelectedContract(firstPending);
      } else {
        setSelectedContract(contracts[0]);
      }
    }
  }, [open, contracts, selectedContract, contractStatuses]);

  // 추가 파일 가져오기 useEffect (구매자 모드에서는 스킵)
  React.useEffect(() => {
    if (isBuyerMode) {
      setAdditionalFiles([]);
      return;
    }

    const fetchAdditionalFiles = async () => {
      if (!selectedContract) {
        setAdditionalFiles([]);
        return;
      }

      // "비밀유지 계약서"인 경우에만 추가 파일 가져오기
      if (selectedContract.templateName === "비밀유지 계약서") {
        setIsLoadingAttachments(true);
        try {
          const result = await getVendorAttachments(selectedContract.vendorId);
          if (result.success) {
            setAdditionalFiles(result.data);
            console.log("추가 파일 로드됨:", result.data);
          } else {
            console.error("Failed to fetch attachments:", result.error);
            setAdditionalFiles([]);
          }
        } catch (error) {
          console.error("Error fetching attachments:", error);
          setAdditionalFiles([]);
        } finally {
          setIsLoadingAttachments(false);
        }
      } else {
        setAdditionalFiles([]);
      }
    };

    fetchAdditionalFiles();
  }, [selectedContract, isBuyerMode]);

  // 설문조사 완료 콜백 함수
  const handleSurveyComplete = React.useCallback((contractId: number) => {
    console.log(`📋 설문조사 완료: 계약서 ${contractId}`);
    setSurveyCompletionStatus(prev => ({
      ...prev,
      [contractId]: true
    }));
  }, []);

  // 서명 완료 콜백 함수
  const handleSignatureComplete = React.useCallback((contractId: number) => {
    console.log(`✍️ 서명 완료: 계약서 ${contractId}`);
    setSignatureStatus(prev => ({
      ...prev,
      [contractId]: true
    }));
  }, []);

  // GTC 코멘트 상태 변경 콜백 함수
  const handleGtcCommentStatusChange = React.useCallback((
    contractId: number,
    hasComments: boolean,
    commentCount: number,
    reviewStatus?: string,
    isComplete?: boolean
  ) => {
    console.log(`📋 GTC 상태 변경: 계약서 ${contractId}, 코멘트 ${commentCount}개, 상태: ${reviewStatus}, 완료: ${isComplete}`);
    setGtcCommentStatus(prev => ({
      ...prev,
      [contractId]: { hasComments, commentCount, reviewStatus, isComplete }
    }));
  }, []);

  // 서명 완료 핸들러
  const completeSign = async () => {
    if (!instance || !selectedContract) return;

    // 서명 완료 가능 여부 재확인
    if (!canCompleteCurrentContract) {
      const contractId = selectedContract.id;

      if (isBuyerMode) {
        const signatureCompleted = signatureStatus[contractId] === true;

        if (!signatureCompleted) {
          toast.error("계약서에 서명을 먼저 완료해주세요.", {
            description: "문서의 서명 필드에 서명해주세요.",
            icon: <Target className="h-5 w-5 text-blue-500" />
          });
          return;
        }
      } else {
        // 협력업체 모드의 기존 검증 로직
        const isComplianceTemplate = selectedContract.templateName?.includes('준법');
        const isGTCTemplate = selectedContract.templateName?.includes('GTC');
        const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true;
        const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.isComplete !== true) : true;
        const signatureCompleted = signatureStatus[contractId] === true;

        if (!surveyCompleted) {
          toast.error("준법 설문조사를 먼저 완료해주세요.", {
            description: "설문조사 탭에서 모든 필수 항목을 완료해주세요.",
            icon: <AlertCircle className="h-5 w-5 text-red-500" />
          });
          return;
        }

        if (!gtcCompleted) {
          toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다.", {
            description: "조항 검토 탭에서 모든 코멘트를 삭제하거나 협의를 완료해주세요.",
            icon: <AlertCircle className="h-5 w-5 text-red-500" />
          });
          return;
        }

        if (!signatureCompleted) {
          toast.error("계약서에 서명을 먼저 완료해주세요.", {
            description: "문서의 서명 필드에 서명해주세요.",
            icon: <Target className="h-5 w-5 text-blue-500" />
          });
          return;
        }
      }

      return;
    }

    setIsSubmitting(true);
    try {
      const { documentViewer, annotationManager } = instance.Core;
      const doc = documentViewer.getDocument();
      const xfdfString = await annotationManager.exportAnnotations();

      // 폼 필드 데이터 수집
      const fieldManager = annotationManager.getFieldManager();
      const fields = fieldManager.getFields();
      const formData: any = {};
      fields.forEach((field: any) => {
        formData[field.name] = field.value;
      });

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

      if (isBuyerMode) {
        // 구매자 모드: 최종승인 처리
        const result = await processBuyerSignatureAction(
          selectedContract.id,
          data,
          selectedContract.signedFileName || `contract_${selectedContract.id}_buyer_signed.pdf`
        );

        if (result.success) {
          // 성공시 해당 계약서 상태를 완료로 업데이트
          setContractStatuses(prev =>
            prev.map(status =>
              status.id === selectedContract.id
                ? { ...status, status: 'completed' as const }
                : status
            )
          );

          toast.success("최종승인이 완료되었습니다!", {
            description: `${selectedContract.templateName} - ${completedCount + 1}/${totalCount}개 완료`,
            icon: <CheckCircle2 className="h-5 w-5 text-green-500" />
          });

          // 구매자 서명 완료 콜백 호출
          if (onBuyerSignComplete) {
            onBuyerSignComplete(selectedContract.id, data);
          }

          // 다음 미완료 계약서로 자동 이동
          const nextContract = getNextPendingContract();
          if (nextContract) {
            setSelectedContract(nextContract);
            toast.info(`다음 계약서로 이동합니다`, {
              description: nextContract.templateName,
              icon: <ArrowRight className="h-4 w-4 text-blue-500" />
            });
          } else {
            // 모든 계약서 완료시
            toast.success("🎉 모든 계약서 최종승인이 완료되었습니다!", {
              description: `총 ${totalCount}개 계약서 승인 완료`,
              icon: <Trophy className="h-5 w-5 text-yellow-500" />
            });
          }

          router.refresh();
        } else {
          // 실패시 에러 상태 업데이트
          setContractStatuses(prev =>
            prev.map(status =>
              status.id === selectedContract.id
                ? { ...status, status: 'error' as const, errorMessage: result.message }
                : status
            )
          );

          toast.error("최종승인 처리 중 오류가 발생했습니다", {
            description: result.message,
            icon: <AlertCircle className="h-5 w-5 text-red-500" />
          });
        }
      } else {
        // 협력업체 모드: 기존 로직
        const submitFormData = new FormData();
        submitFormData.append('file', new Blob([data], { type: 'application/pdf' }));
        submitFormData.append('tableRowId', selectedContract.id.toString());
        submitFormData.append('templateName', selectedContract.signedFileName || '');

        // 폼 필드 데이터 추가
        if (Object.keys(formData).length > 0) {
          submitFormData.append('formData', JSON.stringify(formData));
        }

        // API 호출
        const response = await fetch('/api/upload/signed-contract', {
          method: 'POST',
          body: submitFormData,
          next: { tags: ["basicContractView-vendor"] },
        });

        const result = await response.json();

        if (result.result) {
          // 성공시 해당 계약서 상태를 완료로 업데이트
          setContractStatuses(prev =>
            prev.map(status =>
              status.id === selectedContract.id
                ? { ...status, status: 'completed' as const }
                : status
            )
          );

          toast.success("계약서 서명이 완료되었습니다!", {
            description: `${selectedContract.templateName} - ${completedCount + 1}/${totalCount}개 완료`,
            icon: <CheckCircle2 className="h-5 w-5 text-green-500" />
          });

          // 다음 미완료 계약서로 자동 이동
          const nextContract = getNextPendingContract();
          if (nextContract) {
            setSelectedContract(nextContract);
            toast.info(`다음 계약서로 이동합니다`, {
              description: nextContract.templateName,
              icon: <ArrowRight className="h-4 w-4 text-blue-500" />
            });
          } else {
            // 모든 계약서 완료시
            toast.success("🎉 모든 계약서 서명이 완료되었습니다!", {
              description: `총 ${totalCount}개 계약서 서명 완료`,
              icon: <Trophy className="h-5 w-5 text-yellow-500" />
            });
          }

          router.refresh();
        } else {
          // 실패시 에러 상태 업데이트
          setContractStatuses(prev =>
            prev.map(status =>
              status.id === selectedContract.id
                ? { ...status, status: 'error' as const, errorMessage: result.error }
                : status
            )
          );

          toast.error("서명 처리 중 오류가 발생했습니다", {
            description: result.error,
            icon: <AlertCircle className="h-5 w-5 text-red-500" />
          });
        }
      }
    } catch (error) {
      console.error("서명 완료 중 오류:", error);

      // 에러 상태 업데이트
      setContractStatuses(prev =>
        prev.map(status =>
          status.id === selectedContract.id
            ? { ...status, status: 'error' as const, errorMessage: '서명 처리 중 오류가 발생했습니다' }
            : status
        )
      );

      toast.error("서명 처리 중 오류가 발생했습니다");
    } finally {
      setIsSubmitting(false);
    }
  };

  // 모든 서명 완료 핸들러
  const completeAllSigns = () => {
    handleOpenChange(false);
    if (onSuccess) {
      onSuccess();
    }
    const successMessage = isBuyerMode
      ? "모든 계약서 최종승인이 완료되었습니다!"
      : "모든 계약서 서명이 완료되었습니다!";

    toast.success(successMessage, {
      description: "계약서 관리 페이지가 새고침됩니다.",
      icon: <Trophy className="h-5 w-5 text-yellow-500" />
    });
  };

  return (
    <>
      {/* 서명 버튼 - 외부 제어가 없을 때만 표시 */}
      {!isControlledExternally && (
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleOpenChange(true)}
          disabled={isButtonDisabled}
          className={cn(
            "gap-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
            isBuyerMode
              ? "hover:bg-green-50 hover:text-green-600 hover:border-green-200"
              : "hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200"
          )}
        >
          {isBuyerMode ? (
            <Shield
              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-green-500'}`}
              aria-hidden="true"
            />
          ) : (
            <Upload
              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-blue-500'}`}
              aria-hidden="true"
            />
          )}
          <span className="hidden sm:inline flex items-center">
            {isBuyerMode ? "구매자 서명" : t("basicContracts.toolbar.sign")}
            {contracts.length > 0 && !isButtonDisabled && (
              <Badge
                variant="secondary"
                className={cn(
                  "ml-2",
                  isBuyerMode
                    ? "bg-green-100 text-green-700 hover:bg-green-200"
                    : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                )}
              >
                {contracts.length}
              </Badge>
            )}
            {isButtonDisabled && (
              <span className="ml-2 text-xs text-gray-400">
                ({getDisabledReason()})
              </span>
            )}
          </span>
        </Button>
      )}

      {/* 서명 다이얼로그 */}
      <Dialog open={open} onOpenChange={handleOpenChange}>
        <DialogContent className="max-w-7xl w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden" style={{ width: '95vw', maxWidth: '95vw' }}>
          {/* 고정 헤더 - 진행 상황 표시 */}
          <DialogHeader className={cn(
            "px-6 py-4 border-b flex-shrink-0",
            isBuyerMode
              ? "bg-gradient-to-r from-green-50 to-emerald-50"
              : "bg-gradient-to-r from-blue-50 to-purple-50"
          )}>
            <DialogTitle className="text-xl font-bold flex items-center justify-between text-gray-800">
              <div className="flex items-center">
                {isBuyerMode ? (
                  <Shield className="mr-2 h-5 w-5 text-green-500" />
                ) : (
                  <FileSignature className="mr-2 h-5 w-5 text-blue-500" />
                )}
                {dialogTitle}
                {/* 진행 상황 표시 */}
                <Badge
                  variant="outline"
                  className={cn(
                    "ml-3",
                    isBuyerMode
                      ? "bg-green-50 text-green-700 border-green-200"
                      : "bg-blue-50 text-blue-700 border-blue-200"
                  )}
                >
                  {completedCount}/{totalCount} 완료
                </Badge>
                {/* 추가 파일 로딩 표시 */}
                {isLoadingAttachments && (
                  <Loader2 className="ml-2 h-4 w-4 animate-spin text-blue-500" />
                )}
              </div>

              {allCompleted && (
                <Badge variant="default" className="bg-green-100 text-green-700 border-green-200">
                  <Trophy className="h-4 w-4 mr-1" />
                  전체 완료!
                </Badge>
              )}
            </DialogTitle>

            {/* 진행률 바 */}
            {totalCount > 1 && (
              <div className="mt-3">
                <div className="flex justify-between text-xs text-gray-600 mb-1">
                  <span>전체 진행률</span>
                  <span>{Math.round((completedCount / totalCount) * 100)}%</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div
                    className={cn(
                      "h-2 rounded-full transition-all duration-500",
                      isBuyerMode
                        ? "bg-gradient-to-r from-green-500 to-emerald-500"
                        : "bg-gradient-to-r from-blue-500 to-green-500"
                    )}
                    style={{ width: `${(completedCount / totalCount) * 100}%` }}
                  />
                </div>
              </div>
            )}
          </DialogHeader>

          {/* 메인 컨텐츠 영역 - Flexbox 사용 */}
          <div className="flex flex-1 min-h-0 overflow-hidden">
            {/* 왼쪽 영역 - 계약서 목록 (고정 너비) */}
            <div className="w-80 border-r border-gray-200 bg-gray-50 flex flex-col flex-shrink-0">
              <div className="p-3 border-b flex-shrink-0">
                <div className="relative">
                  <div className="absolute inset-y-0 left-2 flex items-center pointer-events-none">
                    <Search className="h-4 w-4 text-gray-400" />
                  </div>
                  <Input
                    placeholder={t("basicContracts.dialog.searchPlaceholder")}
                    className="bg-white pl-8 text-sm"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
              </div>

              <ScrollArea className="flex-1">
                <div className="p-2">
                  {filteredContracts.length === 0 ? (
                    <div className="flex flex-col items-center justify-center h-32 text-center">
                      <FileText className="h-8 w-8 text-gray-300 mb-2" />
                      <p className="text-gray-500 text-sm font-medium">{t("basicContracts.dialog.noDocuments")}</p>
                    </div>
                  ) : (
                    <div className="space-y-2">
                      {filteredContracts.map((contract) => {
                        const contractStatus = contractStatuses.find(status => status.id === contract.id);
                        const isCompleted = contractStatus?.status === 'completed';
                        const hasError = contractStatus?.status === 'error';

                        // 계약서별 완료 상태 확인
                        const isComplianceTemplate = contract.templateName?.includes('준법');
                        const isGTCTemplate = contract.templateName?.includes('GTC');
                        const hasSurveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contract.id] === true : true;
                        const hasGtcCompleted = isGTCTemplate ? (gtcCommentStatus[contract.id]?.hasComments !== true) : true;
                        const hasSignatureCompleted = signatureStatus[contract.id] === true;

                        return (
                          <Button
                            key={contract.id}
                            variant="outline"
                            className={cn(
                              "w-full justify-start text-left h-auto p-2 bg-white transition-colors",
                              "border border-gray-200 rounded-md",
                              selectedContract?.id === contract.id && !isCompleted && "border-blue-500 bg-blue-50 shadow-sm",
                              isCompleted && "border-green-200 bg-green-50",
                              hasError && "border-red-200 bg-red-50",
                              !isCompleted && !hasError && "hover:bg-blue-50 hover:border-blue-200"
                            )}
                            onClick={() => handleSelectContract(contract)}
                            disabled={isCompleted}
                          >
                            <div className="flex flex-col w-full space-y-1">
                              {/* 첫 번째 줄: 제목 + 상태 */}
                              <div className="flex items-center justify-between w-full">
                                <span className="font-medium text-xs truncate text-gray-800 flex items-center min-w-0">
                                  {isBuyerMode ? (
                                    <Shield className="h-3 w-3 mr-1 text-green-500 flex-shrink-0" />
                                  ) : (
                                    <FileText className="h-3 w-3 mr-1 text-blue-500 flex-shrink-0" />
                                  )}
                                  <span className="truncate">{contract.templateName || t("basicContracts.dialog.document")}</span>
                                  {/* 비밀유지 계약서인 경우 표시 */}
                                  {contract.templateName === "비밀유지 계약서" && (
                                    <Badge variant="outline" className="ml-1 bg-green-50 text-green-700 border-green-200 text-xs">
                                      NDA
                                    </Badge>
                                  )}
                                  {/* GTC 계약서인 경우 표시 */}
                                  {contract.templateName?.includes('GTC') && (
                                    <Badge variant="outline" className="ml-1 bg-purple-50 text-purple-700 border-purple-200 text-xs">
                                      GTC
                                    </Badge>
                                  )}
                                </span>

                                {/* 상태 표시 */}
                                {isCompleted ? (
                                  <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 text-xs ml-2 flex-shrink-0">
                                    <CheckCircle2 className="h-3 w-3 mr-1" />
                                    완료
                                  </Badge>
                                ) : hasError ? (
                                  <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 text-xs ml-2 flex-shrink-0">
                                    <AlertCircle className="h-3 w-3 mr-1" />
                                    오류
                                  </Badge>
                                ) : (
                                  <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 text-xs ml-2 flex-shrink-0">
                                    대기
                                  </Badge>
                                )}
                              </div>

                              {/* 완료 상태 표시 (구매자 모드에서는 간소화) */}
                              {!isCompleted && !hasError && !isBuyerMode && (
                                <div className="flex items-center space-x-2 text-xs">
                                  {isComplianceTemplate && (
                                    <span className={`flex items-center ${hasSurveyCompleted ? 'text-green-600' : 'text-gray-400'}`}>
                                      <CheckCircle2 className={`h-3 w-3 mr-1 ${hasSurveyCompleted ? 'text-green-500' : 'text-gray-300'}`} />
                                      설문
                                    </span>
                                  )}
                                  {isGTCTemplate && (
                                    <span className={`flex items-center ${hasGtcCompleted ? 'text-green-600' : 'text-red-600'}`}>
                                      <CheckCircle2 className={`h-3 w-3 mr-1 ${hasGtcCompleted ? 'text-green-500' : 'text-red-500'}`} />
                                      조항검토
                                    </span>
                                  )}
                                  <span className={`flex items-center ${hasSignatureCompleted ? 'text-green-600' : 'text-gray-400'}`}>
                                    <Target className={`h-3 w-3 mr-1 ${hasSignatureCompleted ? 'text-green-500' : 'text-gray-300'}`} />
                                    서명
                                  </span>
                                </div>
                              )}

                              {/* 구매자 모드의 간소화된 상태 표시 */}
                              {!isCompleted && !hasError && isBuyerMode && (
                                <div className="flex items-center space-x-2 text-xs">
                                  <span className={`flex items-center ${hasSignatureCompleted ? 'text-green-600' : 'text-gray-400'}`}>
                                    <Target className={`h-3 w-3 mr-1 ${hasSignatureCompleted ? 'text-green-500' : 'text-gray-300'}`} />
                                    구매자 서명
                                  </span>
                                </div>
                              )}

                              {/* 두 번째 줄: 사용자 + 날짜 */}
                              <div className="flex items-center justify-between text-xs text-gray-500">
                                <div className="flex items-center min-w-0">
                                  <User className="h-3 w-3 mr-1 flex-shrink-0" />
                                  <span className="truncate">{contract.requestedByName || t("basicContracts.dialog.unknown")}</span>
                                </div>
                                <div className="flex items-center ml-2 flex-shrink-0">
                                  <Calendar className="h-3 w-3 mr-1 flex-shrink-0" />
                                  <span>{formatDate(contract.createdAt)}</span>
                                </div>
                              </div>

                              {/* 에러 메시지 표시 */}
                              {hasError && contractStatus?.errorMessage && (
                                <div className="text-xs text-red-600 mt-1">
                                  {contractStatus.errorMessage}
                                </div>
                              )}
                            </div>
                          </Button>
                        );
                      })}
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>

            {/* 오른쪽 영역 - 문서 뷰어 (확장 가능) */}
            <div className="flex-1 bg-white flex flex-col min-w-0">
              {selectedContract ? (
                <>
                  {/* 뷰어 헤더 */}
                  <div className="p-4 border-b bg-gray-50 flex-shrink-0">
                    <h3 className="font-semibold text-gray-800 flex items-center">
                      {isBuyerMode ? (
                        <Shield className="h-4 w-4 mr-2 text-green-500" />
                      ) : (
                        <FileText className="h-4 w-4 mr-2 text-blue-500" />
                      )}
                      {selectedContract.templateName || t("basicContracts.dialog.document")}

                      {/* 현재 계약서 상태 표시 */}
                      {currentContractStatus?.status === 'completed' ? (
                        <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200">
                          <CheckCircle2 className="h-3 w-3 mr-1" />
                          {isBuyerMode ? "승인 완료" : "서명 완료"}
                        </Badge>
                      ) : currentContractStatus?.status === 'error' ? (
                        <Badge variant="outline" className="ml-2 bg-red-50 text-red-700 border-red-200">
                          <AlertCircle className="h-3 w-3 mr-1" />
                          처리 실패
                        </Badge>
                      ) : (
                        <Badge variant="outline" className="ml-2 bg-yellow-50 text-yellow-700 border-yellow-200">
                          {isBuyerMode ? "승인 대기" : "서명 대기"}
                        </Badge>
                      )}

                      {/* 구매자 모드 배지 */}
                      {isBuyerMode && (
                        <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200">
                          구매자 모드
                        </Badge>
                      )}

                      {/* 준법/GTC 템플릿 표시 (구매자 모드가 아닐 때만) */}
                      {!isBuyerMode && selectedContract.templateName?.includes('준법') && (
                        <Badge variant="outline" className="ml-2 bg-amber-50 text-amber-700 border-amber-200">
                          준법 서류
                        </Badge>
                      )}

                      {!isBuyerMode && selectedContract.templateName?.includes('GTC') && (
                        <Badge variant="outline" className="ml-2 bg-purple-50 text-purple-700 border-purple-200">
                          GTC 계약서
                        </Badge>
                      )}

                      {/* 비밀유지 계약서인 경우 추가 파일 수 표시 (구매자 모드가 아닐 때만) */}
                      {!isBuyerMode && selectedContract.templateName === "비밀유지 계약서" && additionalFiles.length > 0 && (
                        <Badge variant="outline" className="ml-2 bg-blue-50 text-blue-700 border-blue-200">
                          첨부파일 {additionalFiles.length}개
                        </Badge>
                      )}
                    </h3>
                    <div className="flex justify-between items-center mt-2 text-sm text-gray-500">
                      <span className="flex items-center">
                        <User className="h-3 w-3 mr-1" />
                        {t("basicContracts.dialog.requester")}: {selectedContract.requestedByName || t("basicContracts.dialog.unknown")}
                      </span>
                      <span className="flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        {formatDate(selectedContract.createdAt)}
                      </span>
                    </div>
                  </div>

                  {/* 뷰어 영역 - 남은 공간 모두 사용 */}
                  <div className="flex-1 min-h-0 overflow-hidden">
                    <BasicContractSignViewer
                      key={selectedContract.id}
                      contractId={selectedContract.id}
                      filePath={selectedContract.signedFilePath || undefined}
                      templateName={selectedContract.templateName || ""}
                      additionalFiles={additionalFiles}
                      instance={instance}
                      setInstance={setInstance}
                      onSurveyComplete={() => handleSurveyComplete(selectedContract.id)}
                      onSignatureComplete={() => handleSignatureComplete(selectedContract.id)}
                      onGtcCommentStatusChange={(hasComments, commentCount, reviewStatus, isComplete) =>
                        handleGtcCommentStatusChange(selectedContract.id, hasComments, commentCount, reviewStatus, isComplete)
                      }
                      mode={mode}
                      t={t}
                    />
                  </div>

                  {/* 고정 푸터 - 동적 버튼 */}
                  <div className="p-4 flex justify-between items-center bg-gray-50 border-t flex-shrink-0">
                    <div className="flex items-center space-x-4">
                      {/* 현재 계약서가 완료된 경우 */}
                      {currentContractStatus?.status === 'completed' ? (
                        <p className="text-sm text-green-600 flex items-center">
                          <CheckCircle2 className="h-4 w-4 text-green-500 mr-1" />
                          이 계약서는 이미 {isBuyerMode ? "승인이" : "서명이"} 완료되었습니다
                        </p>
                      ) : currentContractStatus?.status === 'error' ? (
                        <p className="text-sm text-red-600 flex items-center">
                          <AlertCircle className="h-4 w-4 text-red-500 mr-1" />
                          {isBuyerMode ? "승인" : "서명"} 처리 중 오류가 발생했습니다. 다시 시도해주세요.
                        </p>
                      ) : (
                        <>
                          {/* 완료 조건 안내 메시지 */}
                          <div className="flex flex-col space-y-1">
                            <p className="text-sm text-gray-600 flex items-center">
                              <AlertCircle className="h-4 w-4 text-yellow-500 mr-1" />
                              {isBuyerMode
                                ? "계약서에 구매자 서명을 완료해주세요."
                                : t("basicContracts.dialog.signWarning")
                              }
                            </p>

                            {/* 완료 상태 체크리스트 */}
                            {!isBuyerMode && (
                              <div className="flex items-center space-x-4 text-xs">
                                {selectedContract.templateName?.includes('준법') && (
                                  <span className={`flex items-center ${surveyCompletionStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}>
                                    <CheckCircle2 className={`h-3 w-3 mr-1 ${surveyCompletionStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} />
                                    설문조사 {surveyCompletionStatus[selectedContract.id] ? '완료' : '미완료'}
                                  </span>
                                )}
                                {selectedContract.templateName?.includes('GTC') && (
                                  <span className={`flex items-center ${(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? 'text-green-600' : 'text-red-600'}`}>
                                    <CheckCircle2 className={`h-3 w-3 mr-1 ${(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? 'text-green-500' : 'text-red-500'}`} />
                                    조항검토 {(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? '완료' :
                                      `미완료 (코멘트 ${gtcCommentStatus[selectedContract.id]?.commentCount || 0}개)`}
                                  </span>
                                )}
                                <span className={`flex items-center ${signatureStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}>
                                  <Target className={`h-3 w-3 mr-1 ${signatureStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} />
                                  서명 {signatureStatus[selectedContract.id] ? '완료' : '미완료'}
                                </span>
                              </div>
                            )}

                            {/* 구매자 모드의 간소화된 체크리스트 */}
                            {isBuyerMode && (
                              <div className="flex items-center space-x-4 text-xs">
                                <span className={`flex items-center ${signatureStatus[selectedContract.id] ? 'text-green-600' : 'text-red-600'}`}>
                                  <Target className={`h-3 w-3 mr-1 ${signatureStatus[selectedContract.id] ? 'text-green-500' : 'text-red-500'}`} />
                                  구매자 서명 {signatureStatus[selectedContract.id] ? '완료' : '미완료'}
                                </span>
                              </div>
                            )}
                          </div>
                        </>
                      )}
                    </div>

                    {/* 동적 버튼 영역 */}
                    <div className="flex items-center space-x-2">
                      {allCompleted ? (
                        // 모든 계약서 완료시
                        <Button
                          className={cn(
                            "gap-2 transition-colors",
                            isBuyerMode
                              ? "bg-green-600 hover:bg-green-700"
                              : "bg-green-600 hover:bg-green-700"
                          )}
                          onClick={completeAllSigns}
                        >
                          <Trophy className="h-4 w-4" />
                          모든 {isBuyerMode ? "승인" : "서명"} 완료
                        </Button>
                      ) : currentContractStatus?.status === 'completed' ? (
                        // 현재 계약서가 완료된 경우
                        <Button
                          variant="outline"
                          className="gap-2"
                          onClick={() => {
                            const nextContract = getNextPendingContract();
                            if (nextContract) {
                              setSelectedContract(nextContract);
                            }
                          }}
                          disabled={!getNextPendingContract()}
                        >
                          <ArrowRight className="h-4 w-4" />
                          다음 계약서
                        </Button>
                      ) : (
                        // 현재 계약서를 서명해야 하는 경우
                        <Button
                          className={cn(
                            "gap-2 transition-colors",
                            canCompleteCurrentContract
                              ? isBuyerMode
                                ? "bg-green-600 hover:bg-green-700"
                                : "bg-blue-600 hover:bg-blue-700"
                              : "bg-gray-400 cursor-not-allowed"
                          )}
                          onClick={completeSign}
                          disabled={!canCompleteCurrentContract || isSubmitting}
                        >
                          {isSubmitting ? (
                            <>
                              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                              </svg>
                              처리중...
                            </>
                          ) : (
                            <>
                              {isBuyerMode ? (
                                <Shield className="h-4 w-4" />
                              ) : (
                                <FileSignature className="h-4 w-4" />
                              )}
                              {signButtonText}
                              {totalCount > 1 && (
                                <span className="ml-1 text-xs">
                                  ({completedCount}/{totalCount})
                                </span>
                              )}
                            </>
                          )}
                        </Button>
                      )}
                    </div>
                  </div>
                </>
              ) : (
                <div className="flex flex-col items-center justify-center h-full text-center p-6">
                  <div className={cn(
                    "p-6 rounded-full mb-4",
                    isBuyerMode ? "bg-green-50" : "bg-blue-50"
                  )}>
                    {isBuyerMode ? (
                      <Shield className="h-12 w-12 text-green-500" />
                    ) : (
                      <FileSignature className="h-12 w-12 text-blue-500" />
                    )}
                  </div>
                  <h3 className="text-xl font-medium text-gray-800 mb-2">{t("basicContracts.dialog.selectDocument")}</h3>
                  <p className="text-gray-500 max-w-md">
                    {isBuyerMode
                      ? "승인할 계약서를 선택해주세요."
                      : t("basicContracts.dialog.selectDocumentDescription")
                    }
                  </p>
                </div>
              )}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}