path: root/lib/rfq-last/vendor/vendor-detail-dialog.tsx

"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import {
  Building2,
  Calendar,
  DollarSign,
  FileText,
  Package,
  Globe,
  MapPin,
  Clock,
  CheckCircle,
  XCircle,
  AlertCircle,
  Download,
  Eye,
  User,
  Mail,
  Phone,
  CreditCard,
  Truck,
  Shield,
  Paperclip,
  Info,
  Edit,
} from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

// Props 타입 정의
interface VendorResponseDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  data: any; // mergedData의 row
  rfqId: number;
}

// 상태별 설정
const getStatusConfig = (status: string) => {
  switch (status) {
    case "초대됨":
      return {
        icon: <Mail className="h-4 w-4" />,
        color: "text-blue-600",
        bgColor: "bg-blue-50",
        variant: "secondary" as const,
      };
    case "작성중":
      return {
        icon: <Clock className="h-4 w-4" />,
        color: "text-yellow-600",
        bgColor: "bg-yellow-50",
        variant: "outline" as const,
      };
    case "제출완료":
      return {
        icon: <CheckCircle className="h-4 w-4" />,
        color: "text-green-600",
        bgColor: "bg-green-50",
        variant: "default" as const,
      };
    case "수정요청":
      return {
        icon: <AlertCircle className="h-4 w-4" />,
        color: "text-orange-600",
        bgColor: "bg-orange-50",
        variant: "warning" as const,
      };
    case "최종확정":
      return {
        icon: <Shield className="h-4 w-4" />,
        color: "text-indigo-600",
        bgColor: "bg-indigo-50",
        variant: "success" as const,
      };
    case "취소":
      return {
        icon: <XCircle className="h-4 w-4" />,
        color: "text-red-600",
        bgColor: "bg-red-50",
        variant: "destructive" as const,
      };
    default:
      return {
        icon: <Info className="h-4 w-4" />,
        color: "text-gray-600",
        bgColor: "bg-gray-50",
        variant: "outline" as const,
      };
  }
};

export function VendorResponseDetailDialog({
  open,
  onOpenChange,
  data,
  rfqId,
}: VendorResponseDetailDialogProps) {
  if (!data) return null;

  const response = data.response;
  const statusConfig = getStatusConfig(response?.status || "초대됨");
  const hasSubmitted = !!response?.submission?.submittedAt;

  // 이메일 발송 정보 파싱
  let emailRecipients = { to: [], cc: [], sentBy: "" };
  try {
    if (data.emailSentTo) {
      emailRecipients = JSON.parse(data.emailSentTo);
    }
  } catch (e) {
    console.error("Failed to parse emailSentTo");
  }

  // 견적 아이템 (실제로는 response.quotationItems에서 가져옴)
  const quotationItems = response?.quotationItems || [];
  
  // 첨부파일 (실제로는 response.attachments에서 가져옴)
  const attachments = response?.attachments || [];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex items-center justify-between">
            <div>
              <DialogTitle className="text-xl font-bold">
                벤더 응답 상세
              </DialogTitle>
              <DialogDescription className="mt-1">
                {data.vendorName} ({data.vendorCode || "코드없음"}) - {data.rfqCode}
              </DialogDescription>
            </div>
            <div className="flex items-center gap-2">
              {/* {onEdit && (
                <Button variant="outline" size="sm" onClick={onEdit}>
                  <Edit className="h-4 w-4 mr-2" />
                  수정
                </Button>
              )} */}
            </div>
          </div>
        </DialogHeader>

        <Tabs defaultValue="overview" className="mt-4">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="overview">개요</TabsTrigger>
            <TabsTrigger value="quotation">견적정보</TabsTrigger>
            <TabsTrigger value="items">품목상세</TabsTrigger>
            <TabsTrigger value="attachments">첨부파일</TabsTrigger>
          </TabsList>

          {/* 개요 탭 */}
          <TabsContent value="overview" className="space-y-4">
            {/* 상태 정보 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">응답 상태</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">현재 상태</span>
                      <Badge variant={statusConfig.variant}>
                        {statusConfig.icon}
                        <span className="ml-1">{response?.status || "초대됨"}</span>
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">응답 버전</span>
                      <span className="font-medium">v{response?.responseVersion || 1}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Short List</span>
                      <Badge variant={data.shortList ? "default" : "outline"}>
                        {data.shortList ? "선정" : "대기"}
                      </Badge>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">제출일시</span>
                      <span className="text-sm">
                        {response?.submission?.submittedAt
                          ? format(new Date(response.submission.submittedAt), "yyyy-MM-dd HH:mm", { locale: ko })
                          : "-"}
                      </span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">제출자</span>
                      <span className="text-sm">{response?.submission?.submittedByName || "-"}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">최종 수정일</span>
                      <span className="text-sm">
                        {data.updatedAt
                          ? format(new Date(data.updatedAt), "yyyy-MM-dd HH:mm", { locale: ko })
                          : "-"}
                      </span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 벤더 정보 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">벤더 정보</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <Building2 className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">업체명</span>
                      <span className="font-medium ml-auto">{data.vendorName}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Package className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">업체코드</span>
                      <span className="font-medium ml-auto">{data.vendorCode || "-"}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Globe className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">국가</span>
                      <Badge variant={data.vendorCountry === "KR" ? "default" : "secondary"} className="ml-auto">
                        {data.vendorCountry}
                      </Badge>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <Mail className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">이메일</span>
                      <span className="text-sm ml-auto">{response?.vendor?.email || "-"}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Shield className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">업체분류</span>
                      <span className="font-medium ml-auto">{data.vendorCategory || "-"}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Info className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">AVL 등급</span>
                      <span className="font-medium ml-auto">{data.vendorGrade || "-"}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 이메일 발송 정보 */}
            {data.emailSentAt && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">이메일 발송 정보</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">최초 발송일시</span>
                      <span className="text-sm">
                        {format(new Date(data.emailSentAt), "yyyy-MM-dd HH:mm", { locale: ko })}
                      </span>
                    </div>
                    {data.lastEmailSentAt && data.emailResentCount > 1 && (
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">최근 재발송일시</span>
                        <span className="text-sm">
                          {format(new Date(data.lastEmailSentAt), "yyyy-MM-dd HH:mm", { locale: ko })}
                          <Badge variant="secondary" className="ml-2">
                            재발송 {data.emailResentCount - 1}회
                          </Badge>
                        </span>
                      </div>
                    )}
                    {emailRecipients.to.length > 0 && (
                      <div className="flex items-start justify-between">
                        <span className="text-sm text-muted-foreground">수신자</span>
                        <span className="text-sm text-right">{emailRecipients.to.join(", ")}</span>
                      </div>
                    )}
                    {emailRecipients.cc.length > 0 && (
                      <div className="flex items-start justify-between">
                        <span className="text-sm text-muted-foreground">참조</span>
                        <span className="text-sm text-right">{emailRecipients.cc.join(", ")}</span>
                      </div>
                    )}
                    {emailRecipients.sentBy && (
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">발신자</span>
                        <span className="text-sm">{emailRecipients.sentBy}</span>
                      </div>
                    )}
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">발송 상태</span>
                      <Badge variant={data.emailStatus === "failed" ? "destructive" : "default"}>
                        {data.emailStatus === "failed" ? "발송 실패" : "발송 완료"}
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* 견적정보 탭 */}
          <TabsContent value="quotation" className="space-y-4">
            {/* 요청 조건 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">요청 조건</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">통화</span>
                      <Badge variant="outline">{data.currency}</Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">지급조건</span>
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger>
                            <span className="font-medium">{data.paymentTermsCode}</span>
                          </TooltipTrigger>
                          {data.paymentTermsDescription && (
                            <TooltipContent>
                              <p>{data.paymentTermsDescription}</p>
                            </TooltipContent>
                          )}
                        </Tooltip>
                      </TooltipProvider>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">인코텀즈</span>
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger>
                            <span className="font-medium">{data.incotermsCode}</span>
                          </TooltipTrigger>
                          {data.incotermsDescription && (
                            <TooltipContent>
                              <p>{data.incotermsDescription}</p>
                              {data.incotermsDetail && <p className="text-xs">{data.incotermsDetail}</p>}
                            </TooltipContent>
                          )}
                        </Tooltip>
                      </TooltipProvider>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Tax</span>
                      <span className="font-medium">{data.taxCode || "-"}</span>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">납기일</span>
                      <span className="text-sm">
                        {data.deliveryDate
                          ? format(new Date(data.deliveryDate), "yyyy-MM-dd")
                          : "-"}
                      </span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">계약기간</span>
                      <span className="text-sm">{data.contractDuration || "-"}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">선적지</span>
                      <span className="text-sm">{data.placeOfShipping || "-"}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">도착지</span>
                      <span className="text-sm">{data.placeOfDestination || "-"}</span>
                    </div>
                  </div>
                </div>

                {/* 추가 조건 */}
                <Separator className="my-4" />
                <div className="space-y-3">
                  {data.firstYn && (
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">초도품</Badge>
                        <span className="text-sm text-muted-foreground">요구사항</span>
                      </div>
                      <span className="text-sm text-right max-w-xs">{data.firstDescription || "초도품 제출 필요"}</span>
                    </div>
                  )}
                  {data.sparepartYn && (
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">스페어파트</Badge>
                        <span className="text-sm text-muted-foreground">요구사항</span>
                      </div>
                      <span className="text-sm text-right max-w-xs">{data.sparepartDescription || "스페어파트 제공 필요"}</span>
                    </div>
                  )}
                  {data.materialPriceRelatedYn && (
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">연동제</Badge>
                        <span className="text-sm text-muted-foreground">적용</span>
                      </div>
                      <span className="text-sm">적용</span>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            {/* 벤더 제안 조건 (제출된 경우) */}
            {hasSubmitted && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">벤더 제안 조건</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">제안 통화</span>
                        <Badge variant={response?.pricing?.vendorCurrency === data.currency ? "outline" : "default"}>
                          {response?.pricing?.vendorCurrency || data.currency}
                        </Badge>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">제안 지급조건</span>
                        <span className="font-medium">
                          {response?.vendorTerms?.paymentTermsCode || data.paymentTermsCode}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">제안 인코텀즈</span>
                        <span className="font-medium">
                          {response?.vendorTerms?.incotermsCode || data.incotermsCode}
                        </span>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">제안 납기일</span>
                        <span className="text-sm">
                          {response?.vendorTerms?.deliveryDate
                            ? format(new Date(response.vendorTerms.deliveryDate), "yyyy-MM-dd")
                            : data.deliveryDate
                            ? format(new Date(data.deliveryDate), "yyyy-MM-dd")
                            : "-"}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-muted-foreground">총 견적금액</span>
                        <span className="font-bold text-lg">
                          {response?.pricing?.totalAmount
                            ? new Intl.NumberFormat("ko-KR", {
                                style: "currency",
                                currency: response.pricing.vendorCurrency || data.currency,
                              }).format(response.pricing.totalAmount)
                            : "-"}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 벤더 추가 응답 */}
                  {(response?.additionalRequirements?.firstArticle?.acceptance ||
                    response?.additionalRequirements?.sparePart?.acceptance) && (
                    <>
                      <Separator className="my-4" />
                      <div className="space-y-3">
                        {response?.additionalRequirements?.firstArticle?.acceptance && (
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-muted-foreground">초도품 수용여부</span>
                            <Badge
                              variant={
                                response.additionalRequirements.firstArticle.acceptance === "수용"
                                  ? "default"
                                  : response.additionalRequirements.firstArticle.acceptance === "부분수용"
                                  ? "secondary"
                                  : "destructive"
                              }
                            >
                              {response.additionalRequirements.firstArticle.acceptance}
                            </Badge>
                          </div>
                        )}
                        {response?.additionalRequirements?.sparePart?.acceptance && (
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-muted-foreground">스페어파트 수용여부</span>
                            <Badge
                              variant={
                                response.additionalRequirements.sparePart.acceptance === "수용"
                                  ? "default"
                                  : response.additionalRequirements.sparePart.acceptance === "부분수용"
                                  ? "secondary"
                                  : "destructive"
                              }
                            >
                              {response.additionalRequirements.sparePart.acceptance}
                            </Badge>
                          </div>
                        )}
                      </div>
                    </>
                  )}

                  {/* 벤더 비고 */}
                  {(response?.remarks?.general || response?.remarks?.technical) && (
                    <>
                      <Separator className="my-4" />
                      <div className="space-y-3">
                        {response?.remarks?.general && (
                          <div>
                            <span className="text-sm text-muted-foreground">일반 비고</span>
                            <p className="mt-1 text-sm">{response.remarks.general}</p>
                          </div>
                        )}
                        {response?.remarks?.technical && (
                          <div>
                            <span className="text-sm text-muted-foreground">기술 제안</span>
                            <p className="mt-1 text-sm">{response.remarks.technical}</p>
                          </div>
                        )}
                      </div>
                    </>
                  )}
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* 품목상세 탭 */}
          <TabsContent value="items" className="space-y-4">
            {quotationItems.length > 0 ? (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">견적 품목 상세</CardTitle>
                  <CardDescription>
                    총 {quotationItems.length}개 품목
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>PR No.</TableHead>
                        <TableHead>자재코드</TableHead>
                        <TableHead>자재명</TableHead>
                        <TableHead className="text-right">수량</TableHead>
                        <TableHead>단위</TableHead>
                        <TableHead className="text-right">단가</TableHead>
                        <TableHead className="text-right">금액</TableHead>
                        <TableHead>납기일</TableHead>
                        <TableHead>제조사</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {quotationItems.map((item: any) => (
                        <TableRow key={item.id}>
                          <TableCell className="font-mono text-xs">{item.prNo}</TableCell>
                          <TableCell className="font-mono text-xs">{item.materialCode}</TableCell>
                          <TableCell className="text-xs">{item.materialDescription}</TableCell>
                          <TableCell className="text-right">{item.quantity}</TableCell>
                          <TableCell>{item.uom}</TableCell>
                          <TableCell className="text-right">
                            {new Intl.NumberFormat("ko-KR").format(item.unitPrice)}
                          </TableCell>
                          <TableCell className="text-right font-medium">
                            {new Intl.NumberFormat("ko-KR").format(item.totalPrice)}
                          </TableCell>
                          <TableCell>
                            {item.vendorDeliveryDate
                              ? format(new Date(item.vendorDeliveryDate), "MM-dd")
                              : "-"}
                          </TableCell>
                          <TableCell>{item.manufacturer || "-"}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center text-muted-foreground">
                    아직 제출된 견적 품목이 없습니다.
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* 첨부파일 탭 */}
          <TabsContent value="attachments" className="space-y-4">
            {attachments.length > 0 ? (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">첨부파일</CardTitle>
                  <CardDescription>
                    총 {attachments.length}개 파일
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {attachments.map((file: any) => (
                      <div
                        key={file.id}
                        className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent"
                      >
                        <div className="flex items-center gap-3">
                          <Paperclip className="h-4 w-4 text-muted-foreground" />
                          <div>
                            <p className="text-sm font-medium">{file.originalFileName}</p>
                            <p className="text-xs text-muted-foreground">
                              {file.attachmentType} • {file.fileSize ? `${(file.fileSize / 1024).toFixed(2)} KB` : "크기 미상"}
                              {file.description && ` • ${file.description}`}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              // 파일 미리보기 로직
                              console.log("Preview file:", file.filePath);
                            }}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              // 파일 다운로드 로직
                              window.open(file.filePath, "_blank");
                            }}
                          >
                            <Download className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center text-muted-foreground">
                    아직 제출된 첨부파일이 없습니다.
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}