path: root/components/vendor-regular-registrations/document-status-dialog.tsx

"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { FileText, Download, CheckCircle, XCircle, Clock, RefreshCw } from "lucide-react";
import { toast } from "sonner";

import type { VendorRegularRegistration } from "@/config/vendorRegularRegistrationsColumnsConfig";
import {
  documentStatusColumns,
} from "@/config/vendorRegularRegistrationsColumnsConfig";
import { downloadFile } from "@/lib/file-download";

interface DocumentStatusDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  registration: VendorRegularRegistration | null;
  onRefresh?: () => void;
}

const StatusIcon = ({ status }: { status: string | boolean }) => {
  if (typeof status === "boolean") {
    return status ? (
      <CheckCircle className="w-4 h-4 text-green-600" />
    ) : (
      <XCircle className="w-4 h-4 text-red-500" />
    );
  }

  switch (status) {
    case "completed":
      return <CheckCircle className="w-4 h-4 text-green-600" />;
    case "reviewing":
      return <Clock className="w-4 h-4 text-yellow-600" />;
    case "not_submitted":
    default:
      return <XCircle className="w-4 h-4 text-red-500" />;
  }
};

const StatusBadge = ({ status }: { status: string | boolean }) => {
  if (typeof status === "boolean") {
    return (
      <Badge variant={status ? "default" : "destructive"}>
        {status ? "제출완료" : "미제출"}
      </Badge>
    );
  }

  const statusConfig = {
    completed: { label: "완료", variant: "default" as const },
    reviewing: { label: "검토중", variant: "secondary" as const },
    not_submitted: { label: "미제출", variant: "destructive" as const },
  };

  const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.not_submitted;

  return <Badge variant={config.variant}>{config.label}</Badge>;
};

export function DocumentStatusDialog({
  open,
  onOpenChange,
  registration,
  onRefresh,
}: DocumentStatusDialogProps) {
  if (!registration) return null;

  // 디버깅: registration 데이터 확인
  console.log(`📋 DocumentStatusDialog - Partners 등록 데이터:`, {
    companyName: registration.companyName,
    businessNumber: registration.businessNumber,
    representative: registration.representative,
    safetyQualificationContent: registration.safetyQualificationContent,
    basicContractsLength: registration.basicContracts?.length || 0,
    additionalInfo: registration.additionalInfo
  });

  // 파일 다운로드 핸들러
  // const handleFileDownload = async (docKey: string, fileIndex: number = 0) => {
  //   try {
  //     const files = registration.documentFiles[docKey as keyof typeof registration.documentFiles];
  //     if (!files || files.length === 0) {
  //       toast.error("다운로드할 파일이 없습니다.");
  //       return;
  //     }

  //     const file = files[fileIndex];
  //     if (!file) {
  //       toast.error("파일을 찾을 수 없습니다.");
  //       return;
  //     }

  //     // filePath와 fileName 추출
  //     const filePath = file.filePath || file.path;
  //     const fileName = file.originalFileName || file.fileName || file.name;

  //     if (!filePath || !fileName) {
  //       toast.error("파일 정보가 올바르지 않습니다.");
  //       return;
  //     }

  //     console.log(`📥 파일 다운로드 시작:`, { filePath, fileName, docKey });

  //     // downloadFile 함수를 사용하여 파일 다운로드
  //     const result = await downloadFile(filePath, fileName, {
  //       showToast: true,
  //       onError: (error) => {
  //         console.error("파일 다운로드 오류:", error);
  //         toast.error(`파일 다운로드 실패: ${error}`);
  //       },
  //       onSuccess: (fileName, fileSize) => {
  //         console.log(`✅ 파일 다운로드 성공:`, { fileName, fileSize });
  //       }
  //     });

  //     if (!result.success) {
  //       console.error("파일 다운로드 실패:", result.error);
  //     }
  //   } catch (error) {
  //     console.error("파일 다운로드 중 오류 발생:", error);
  //     toast.error("파일 다운로드 중 오류가 발생했습니다.");
  //   }
  // };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileText className="w-5 h-5" />
              문서/자료 접수 현황 - {registration.companyName}
            </div>
            {onRefresh && (
              <Button
                variant="outline"
                size="sm"
                onClick={onRefresh}
                className="flex items-center gap-2"
              >
                <RefreshCw className="w-4 h-4" />
                새로고침
              </Button>
            )}
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-6">
          {/* 기본 정보 */}
          <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
            <div>
              <span className="text-sm font-medium text-gray-600">업체명:</span>
              <span className="ml-2">{registration.companyName}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-600">사업자번호:</span>
              <span className="ml-2">{registration.businessNumber}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-600">대표자:</span>
              <span className="ml-2">{registration.representative || "-"}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-600">현재상태:</span>
              <Badge className="ml-2">{registration.status}</Badge>
            </div>
          </div>

          {/* 문서 제출 현황 */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">문서 제출 현황</h3>
            </div>
            <div className="border rounded-lg">
              <div className="grid grid-cols-4 gap-4 p-4 bg-gray-50 font-medium text-sm">
                <div>문서유형</div>
                <div>상태</div>
                <div>제출일자</div>
                <div>액션</div>
              </div> 
              {documentStatusColumns.map((doc) => {
                const isSubmitted = registration.documentSubmissions[
                  doc.key as keyof typeof registration.documentSubmissions
                ] as boolean;

                // 내자인 경우 통장사본은 표시하지 않음
                const isForeign = registration.country !== 'KR';
                if (doc.key === 'bankCopy' && !isForeign) {
                  return null;
                }

                return (
                  <div
                    key={doc.key}
                    className="grid grid-cols-4 gap-4 p-4 border-t items-center"
                  >
                    <div className="flex items-center gap-2">
                      <StatusIcon status={isSubmitted} />
                      {doc.label}
                      {doc.key === 'bankCopy' && isForeign && (
                        <span className="text-xs text-blue-600">(외자 필수)</span>
                      )}
                    </div>
                    <div>
                      <StatusBadge status={isSubmitted} />
                    </div>
                    <div className="text-sm text-gray-600">
                      {isSubmitted ? "2024.01.01" : "-"}
                    </div>
                    <div>
                      {/* {isSubmitted && (
                        <Button 
                          size="sm" 
                          variant="outline"
                          onClick={() => handleFileDownload(doc.key)}
                        >
                          <Download className="w-4 h-4 mr-1" />
                          다운로드
                        </Button>
                      )} */}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 계약 동의 현황 */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">계약 동의 현황</h3>
            </div>
            <div className="border rounded-lg">
              <div className="grid grid-cols-4 gap-4 p-4 bg-gray-50 font-medium text-sm">
                <div>계약유형</div>
                <div>상태</div>
                <div>서약일자</div>
                <div>액션</div>
              </div>
              {!registration.basicContracts || registration.basicContracts.length === 0 ? (
                <div className="p-4 border-t text-center text-gray-500">
                  요청된 기본계약이 없습니다.
                </div>
              ) : (
                registration.basicContracts.map((contract, index) => {
                  const isCompleted = contract.status === "COMPLETED";
                  
                  return (
                    <div
                      key={`${contract.templateId}-${index}`}
                      className="grid grid-cols-4 gap-4 p-4 border-t items-center"
                    >
                      <div className="flex items-center gap-2">
                        <StatusIcon status={isCompleted} />
                        {contract.templateName || "템플릿명 없음"}
                      </div>
                      <div>
                        <StatusBadge status={isCompleted} />
                      </div>
                      <div className="text-sm text-gray-600">
                        {isCompleted && contract.createdAt 
                          ? new Intl.DateTimeFormat('ko-KR').format(new Date(contract.createdAt))
                          : "-"
                        }
                      </div>
                      <div>
                        {isCompleted && (
                          <Button size="sm" variant="outline">
                            <Download className="w-4 h-4 mr-1" />
                            다운로드
                          </Button>
                        )}
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </div>

          {/* 안전적격성 평가 */}
          <div>
            <h3 className="text-lg font-semibold mb-4">안전적격성 평가</h3>
            <div className="p-4 border rounded-lg">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <StatusIcon status={!!registration.safetyQualificationContent} />
                  <span>안전적격성 평가</span>
                </div>
                <StatusBadge status={!!registration.safetyQualificationContent} />
              </div>
              {registration.safetyQualificationContent && (
                <div className="mt-3 p-3 bg-gray-50 rounded">
                  <p className="text-sm">{registration.safetyQualificationContent}</p>
                </div>
              )}
            </div>
          </div>

          {/* 추가 정보 */}
          <div>
            <h3 className="text-lg font-semibold mb-4">추가 정보</h3>
            <div className="p-4 border rounded-lg">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <StatusIcon status={registration.additionalInfo} />
                  <span>추가 정보 등록</span>
                </div>
                <StatusBadge status={registration.additionalInfo} />
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}