"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 } from "lucide-react";
import { toast } from "sonner";

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

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

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,
}: DocumentStatusDialogProps) {
  if (!registration) return null;

  // 파일 다운로드 핸들러
  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 gap-2">
            <FileText className="w-5 h-5" />
            문서/자료 접수 현황 - {registration.companyName}
          </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;

                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}
                    </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>
              {contractAgreementColumns.map((agreement) => {
                const status = registration.contractAgreements[
                  agreement.key as keyof typeof registration.contractAgreements
                ] as string;

                return (
                  <div
                    key={agreement.key}
                    className="grid grid-cols-4 gap-4 p-4 border-t items-center"
                  >
                    <div className="flex items-center gap-2">
                      <StatusIcon status={status} />
                      {agreement.label}
                    </div>
                    <div>
                      <StatusBadge status={status} />
                    </div>
                    <div className="text-sm text-gray-600">
                      {status === "completed" ? "2024.01.01" : "-"}
                    </div>
                    <div>
                      {status === "completed" && (
                        <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.additionalInfo} />
                  <span>추가 정보 등록</span>
                </div>
                <StatusBadge status={registration.additionalInfo} />
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}