path: root/lib/rfq-last/vendor/rfq-vendor-table.tsx

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Plus,
  Send,
  Eye,
  Edit,
  Trash2,
  Building2,
  Calendar,
  DollarSign,
  FileText,
  RefreshCw,
  Mail,
  CheckCircle,
  Clock,
  XCircle,
  AlertCircle,
  Settings2,
  ClipboardList,
  Globe,
  Package,
  MapPin,
  Info,
  Loader2,
  Router,
  Shield
} from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { type ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header";
import { ClientDataTable } from "@/components/client-data-table/data-table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { DataTableAdvancedFilterField } from "@/types/table";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { AddVendorDialog } from "./add-vendor-dialog";
import { BatchUpdateConditionsDialog } from "./batch-update-conditions-dialog";
import { SendRfqDialog } from "./send-rfq-dialog";

import {
  getRfqSendData,
  getSelectedVendorsWithEmails,
  sendRfqToVendors,
  type RfqSendData,
  type VendorEmailInfo
} from "../service"
import { VendorResponseDetailDialog } from "./vendor-detail-dialog";
import { DeleteVendorDialog } from "./delete-vendor-dialog";
import { useRouter } from "next/navigation"
import { EditContractDialog } from "./edit-contract-dialog";

// 타입 정의
interface RfqDetail {
  detailId: number;
  vendorId: number | null;
  vendorName: string | null;
  vendorCode: string | null;
  vendorCountry: string | null;
  vendorEmail?: string | null;
  vendorCategory?: string | null;
  vendorGrade?: string | null;
  basicContract?: string | null;
  shortList: boolean;
  currency: string | null;
  paymentTermsCode: string | null;
  paymentTermsDescription: string | null;
  incotermsCode: string | null;
  incotermsDescription: string | null;
  incotermsDetail?: string | null;
  deliveryDate: Date | null;
  contractDuration: string | null;
  taxCode: string | null;
  placeOfShipping?: string | null;
  placeOfDestination?: string | null;
  materialPriceRelatedYn?: boolean | null;
  sparepartYn?: boolean | null;
  firstYn?: boolean | null;
  firstDescription?: string | null;
  sparepartDescription?: string | null;
  updatedAt?: Date | null;
  updatedByUserName?: string | null;
  emailSentAt: string | null;
  emailSentTo: string | null; // JSON string
  emailResentCount: number;
  lastEmailSentAt: string | null;
  emailStatus: string | null;
}

interface VendorResponse {
  id: number;
  rfqsLastId: number;
  rfqLastDetailsId: number;
  responseVersion: number;
  isLatest: boolean;
  status: "초대됨" | "작성중" | "제출완료" | "수정요청" | "최종확정" | "취소";
  vendor: {
    id: number;
    code: string | null;
    name: string;
    email: string;
  };
  submission: {
    submittedAt: Date | null;
    submittedBy: string | null;
    submittedByName: string | null;
  };
  pricing: {
    totalAmount: number | null;
    currency: string | null;
    vendorCurrency: string | null;
  };
  vendorTerms: {
    paymentTermsCode: string | null;
    incotermsCode: string | null;
    deliveryDate: Date | null;
    contractDuration: string | null;
  };
  additionalRequirements: {
    firstArticle: {
      required: boolean | null;
      acceptance: boolean | null;
    };
    sparePart: {
      required: boolean | null;
      acceptance: boolean | null;
    };
  };
  counts: {
    quotedItems: number;
    attachments: number;
  };
  remarks: {
    general: string | null;
    technical: string | null;
  };
  timestamps: {
    createdAt: string;
    updatedAt: string;
  };
}

// Props 타입 정의
interface RfqVendorTableProps {
  rfqId: number;
  rfqCode?: string;
  rfqDetails: RfqDetail[];
  vendorResponses: VendorResponse[];
  rfqInfo?: {
    rfqTitle: string;
    rfqType: string;
    projectCode?: string;
    projectName?: string;
    picName?: string;
    picCode?: string;
    picTeam?: string;
    packageNo?: string;
    packageName?: string;
    designPicName?: string;
    designTeam?: string;
    materialGroup?: string;
    materialGroupDesc?: string;
    dueDate: Date;
    quotationType?: string;
    evaluationApply?: boolean;
    contractType?: string;
  };
  attachments?: Array<{
    id: number;
    attachmentType: string;
    serialNo: string;
    currentRevision: string;
    description?: string;
    fileName?: string;
    fileSize?: number;
    uploadedAt?: Date;
  }>;
}

// 상태별 아이콘 반환
const getStatusIcon = (status: string) => {
  switch (status) {
    case "초대됨": return <Mail className="h-4 w-4" />;
    case "작성중": return <Clock className="h-4 w-4" />;
    case "제출완료": return <CheckCircle className="h-4 w-4" />;
    case "수정요청": return <AlertCircle className="h-4 w-4" />;
    case "최종확정": return <FileText className="h-4 w-4" />;
    case "취소": return <XCircle className="h-4 w-4" />;
    default: return <Clock className="h-4 w-4" />;
  }
};

// 상태별 색상
const getStatusVariant = (status: string) => {
  switch (status) {
    case "초대됨": return "secondary";
    case "작성중": return "outline";
    case "제출완료": return "default";
    case "수정요청": return "warning";
    case "최종확정": return "success";
    case "취소": return "destructive";
    default: return "outline";
  }
};

// 데이터 병합 (rfqDetails + vendorResponses)
const mergeVendorData = (
  rfqDetails: RfqDetail[],
  vendorResponses: VendorResponse[],
  rfqCode?: string
): (RfqDetail & { response?: VendorResponse; rfqCode?: string })[] => {
  return rfqDetails.map(detail => {
    const response = vendorResponses.find(
      r => r.vendor.id === detail.vendorId && r.isLatest
    );
    return { ...detail, response, rfqCode };
  });
};

// 추가 조건 포맷팅
const formatAdditionalConditions = (data: any) => {
  const conditions = [];
  if (data.firstYn) conditions.push("초도품");
  if (data.materialPriceRelatedYn) conditions.push("연동제");
  if (data.sparepartYn) conditions.push("스페어");
  return conditions.length > 0 ? conditions.join(", ") : "-";
};

export function RfqVendorTable({
  rfqId,
  rfqCode,
  rfqDetails,
  vendorResponses,
  rfqInfo,
  attachments,
}: RfqVendorTableProps) {
  const [isRefreshing, setIsRefreshing] = React.useState(false);
  const [selectedRows, setSelectedRows] = React.useState<any[]>([]);
  const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false);
  const [isBatchUpdateOpen, setIsBatchUpdateOpen] = React.useState(false);
  const [selectedVendor, setSelectedVendor] = React.useState<any | null>(null);
  const [isSendDialogOpen, setIsSendDialogOpen] = React.useState(false);
  const [isLoadingSendData, setIsLoadingSendData] = React.useState(false);
  const [deleteVendorData, setDeleteVendorData] = React.useState<{
    detailId: number;
    vendorId: number;
    vendorName: string;
    vendorCode?: string | null;
    hasResponse?: boolean;
    responseStatus?: string | null;
  } | null>(null);

  const [sendDialogData, setSendDialogData] = React.useState<{
    rfqInfo: RfqSendData['rfqInfo'] | null;
    attachments: RfqSendData['attachments'];
    selectedVendors: VendorEmailInfo[];
  }>({
    rfqInfo: null,
    attachments: [],
    selectedVendors: [],
  });

  const [editContractVendor, setEditContractVendor] = React.useState<any | null>(null);


  const router = useRouter()

  // 데이터 병합
  const mergedData = React.useMemo(
    () => mergeVendorData(rfqDetails, vendorResponses, rfqCode),
    [rfqDetails, vendorResponses, rfqCode]
  );

  console.log(mergedData, "mergedData")

  // 일괄 발송 핸들러
  const handleBulkSend = React.useCallback(async () => {
    if (selectedRows.length === 0) {
      toast.warning("발송할 벤더를 선택해주세요.");
      return;
    }

    try {
      setIsLoadingSendData(true);

      // 선택된 벤더 ID들 추출
      const selectedVendorIds = selectedRows
        .map(row => row.vendorId)
        .filter(id => id != null);

      if (selectedVendorIds.length === 0) {
        toast.error("유효한 벤더가 선택되지 않았습니다.");
        return;
      }

      // 병렬로 데이터 가져오기 (에러 처리 포함)
      const [rfqSendData, vendorEmailInfos] = await Promise.all([
        getRfqSendData(rfqId),
        getSelectedVendorsWithEmails(rfqId, selectedVendorIds)
      ]);

      // 데이터 검증
      if (!rfqSendData?.rfqInfo) {
        toast.error("RFQ 정보를 불러올 수 없습니다.");
        return;
      }

      if (!vendorEmailInfos || vendorEmailInfos.length === 0) {
        toast.error("선택된 벤더의 이메일 정보를 찾을 수 없습니다.");
        return;
      }

      // 다이얼로그 데이터 설정
      setSendDialogData({
        rfqInfo: rfqSendData.rfqInfo,
        attachments: rfqSendData.attachments || [],
        selectedVendors: vendorEmailInfos.map(v => ({
          vendorId: v.vendorId,
          vendorName: v.vendorName,
          vendorCode: v.vendorCode,
          vendorCountry: v.vendorCountry,
          vendorEmail: v.vendorEmail,
          representativeEmail: v.representativeEmail,
          contacts: v.contacts || [],
          contactsByPosition: v.contactsByPosition || {},
          primaryEmail: v.primaryEmail,
          currency: v.currency,
          ndaYn: v.ndaYn,
          generalGtcYn: v.generalGtcYn,
          projectGtcYn: v.projectGtcYn,
          agreementYn: v.agreementYn,
          sendVersion: v.sendVersion
        })),
      });

      // 다이얼로그 열기
      setIsSendDialogOpen(true);
    } catch (error) {
      console.error("RFQ 발송 데이터 로드 실패:", error);
      toast.error("데이터를 불러오는데 실패했습니다. 다시 시도해주세요.");
    } finally {
      setIsLoadingSendData(false);
    }
  }, [selectedRows, rfqId]);

  // RFQ 발송 핸들러
  const handleSendRfq = React.useCallback(async (data: {
    vendors: Array<{
      vendorId: number;
      vendorName: string;
      vendorCode?: string | null;
      vendorCountry?: string | null;
      selectedMainEmail: string;
      additionalEmails: string[];
      customEmails?: Array<{ email: string; name?: string }>;
      currency?: string | null;
      contractRequirements?: {
        ndaYn: boolean;
        generalGtcYn: boolean;
        projectGtcYn: boolean;
        agreementYn: boolean;
        projectCode?: string;
      };
      isResend: boolean;
      sendVersion?: number;
    }>;
    attachments: number[];
    message?: string;
    generatedPdfs?: Array<{  // 타입 추가
      key: string;
      buffer: number[];
      fileName: string;
    }>;
  }) => {
    try {
      // 서버 액션 호출
      const result = await sendRfqToVendors({
        rfqId,
        rfqCode,
        vendors: data.vendors,
        attachmentIds: data.attachments,
        message: data.message,
        generatedPdfs: data.generatedPdfs,
      });

      // 성공 후 처리
      setSelectedRows([]);
      setSendDialogData({
        rfqInfo: null,
        attachments: [],
        selectedVendors: [],
      });

      // 기본계약 생성 결과 표시
      if (result.contractResults && result.contractResults.length > 0) {
        const totalContracts = result.contractResults.reduce((acc, r) => acc + r.totalCreated, 0);
        toast.success(`${data.vendors.length}개 업체에 RFQ를 발송하고 ${totalContracts}개의 기본계약을 생성했습니다.`);
      } else {
        toast.success(`${data.vendors.length}개 업체에 RFQ를 발송했습니다.`);
      }
      
      // 페이지 새로고침
      router.refresh();
    } catch (error) {
      console.error("RFQ 발송 실패:", error);
      toast.error("RFQ 발송에 실패했습니다.");
      throw error;
    }
  }, [rfqId, rfqCode, router]);

  // 액션 처리
  const handleAction = React.useCallback(async (action: string, vendor: any) => {
    switch (action) {
      case "view":
        setSelectedVendor(vendor);
        break;

      case "send":
        // 개별 RFQ 발송
        try {
          setIsLoadingSendData(true);

          const [rfqSendData, vendorEmailInfos] = await Promise.all([
            getRfqSendData(rfqId),
            getSelectedVendorsWithEmails(rfqId, [vendor.vendorId])
          ]);

          if (!rfqSendData?.rfqInfo || !vendorEmailInfos || vendorEmailInfos.length === 0) {
            toast.error("벤더 정보를 불러올 수 없습니다.");
            return;
          }

          setSendDialogData({
            rfqInfo: rfqSendData.rfqInfo,
            attachments: rfqSendData.attachments || [],
            selectedVendors: vendorEmailInfos.map(v => ({
              vendorId: v.vendorId,
              vendorName: v.vendorName,
              vendorCode: v.vendorCode,
              vendorCountry: v.vendorCountry,
              vendorEmail: v.vendorEmail,
              representativeEmail: v.representativeEmail,
              contacts: v.contacts || [],
              contactsByPosition: v.contactsByPosition || {},
              primaryEmail: v.primaryEmail,
              currency: v.currency,
              ndaYn: v.ndaYn,
              generalGtcYn: v.generalGtcYn,
              projectGtcYn: v.projectGtcYn,
              agreementYn: v.agreementYn,
              sendVersion: v.sendVersion,
            })),
          });

          setIsSendDialogOpen(true);
        } catch (error) {
          console.error("개별 발송 데이터 로드 실패:", error);
          toast.error("데이터를 불러오는데 실패했습니다.");
        } finally {
          setIsLoadingSendData(false);
        }
        break;

      case "edit":
        toast.info("수정 기능은 준비중입니다.");
        break;

      case "edit-contract":
        // 기본계약 수정
        setEditContractVendor(vendor);
        break;

      case "delete":
        // quotationStatus 체크
        const hasQuotation = !!vendor.quotationStatus;

        if (hasQuotation) {
          // 견적서가 있으면 즉시 에러 토스트 표시
          toast.error("이미 발송된 벤더는 삭제할 수 없습니다.");
          return;
        }

        // 삭제 다이얼로그 열기
        setDeleteVendorData({
          detailId: vendor.detailId,
          vendorId: vendor.vendorId,
          vendorName: vendor.vendorName,
          vendorCode: vendor.vendorCode,
          hasQuotation: hasQuotation,
        });
        break;

      case "response-detail":
        toast.info(`${vendor.vendorName}의 회신 상세를 확인합니다.`);
        break;
    }
  }, [rfqId]);

  // 컬럼 정의
  const columns: ColumnDef<any>[] = React.useMemo(() => [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
          onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
          aria-label="select all"
          className="translate-y-0.5"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(v) => row.toggleSelected(!!v)}
          aria-label="select row"
          className="translate-y-0.5"
        />
      ),
      size: 40,
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "rfqCode",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="ITB/RFQ/견적 No." />,
      cell: ({ row }) => {
        return (
          <span className="font-mono text-xs">{row.original.rfqCode || "-"}</span>
        );
      },
      size: 120,
    },
    {
      accessorKey: "vendorName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="협력업체정보" />,
      cell: ({ row }) => {
        const vendor = row.original;
        return (
          <div className="flex items-center gap-2">
            <Building2 className="h-4 w-4 text-muted-foreground" />
            <div className="flex flex-col">
              <span className="text-sm font-medium">{vendor.vendorName || "-"}</span>
              <span className="text-xs text-muted-foreground">{vendor.vendorCode}</span>
            </div>
          </div>
        );
      },
      size: 180,
    },
    {
      accessorKey: "vendorCategory",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="업체분류" />,
      cell: ({ row }) => row.original.vendorCategory || "-",
      size: 100,
    },
    {
      accessorKey: "vendorCountry",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="내외자 (위치)" />,
      cell: ({ row }) => {
        const country = row.original.vendorCountry;
        const isLocal = country === "KR" || country === "한국";
        return (
          <Badge variant={isLocal ? "default" : "secondary"}>
            {country || "-"}
          </Badge>
        );
      },
      size: 100,
    },
    {
      accessorKey: "vendorGrade",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="AVL 정보 (등급)" />,
      cell: ({ row }) => {
        const grade = row.original.vendorGrade;
        if (!grade) return <span className="text-muted-foreground">-</span>;

        const gradeColor = {
          "A": "text-green-600",
          "B": "text-blue-600",
          "C": "text-yellow-600",
          "D": "text-red-600",
        }[grade] || "text-gray-600";

        return <span className={cn("font-semibold", gradeColor)}>{grade}</span>;
      },
      size: 100,
    },

    {
      accessorKey: "contractRequirements",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="기본계약 요청" />,
      cell: ({ row }) => {
        const vendor = row.original;
        const isKorean = vendor.vendorCountry === "KR" || vendor.vendorCountry === "한국";

        // 기본계약 상태 확인
        const requirements = [];

        // 필수 계약들
        if (vendor.agreementYn) {
          requirements.push({
            name: "기술자료",
            icon: <FileText className="h-3 w-3" />,
            color: "text-blue-500"
          });
        }

        if (vendor.ndaYn) {
          requirements.push({
            name: "NDA",
            icon: <Shield className="h-3 w-3" />,
            color: "text-green-500"
          });
        }

        // GTC (국외 업체만)
        if (!isKorean) {
          if (vendor.generalGtcYn || vendor.gtcType === "general") {
            requirements.push({
              name: "General GTC",
              icon: <Globe className="h-3 w-3" />,
              color: "text-purple-500"
            });
          } else if (vendor.projectGtcYn || vendor.gtcType === "project") {
            requirements.push({
              name: "Project GTC",
              icon: <Globe className="h-3 w-3" />,
              color: "text-indigo-500"
            });
          }
        }

        if (requirements.length === 0) {
          return <span className="text-xs text-muted-foreground">없음</span>;
        }

        return (
          <div className="flex flex-wrap gap-1">
            {requirements.map((req, idx) => (
              <TooltipProvider key={idx}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Badge variant="outline" className="text-xs px-1.5 py-0">
                      <span className={cn("mr-1", req.color)}>
                        {req.icon}
                      </span>
                      {req.name}
                    </Badge>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p className="text-xs">
                      {req.name === "기술자료" && "기술자료 제공 동의서"}
                      {req.name === "NDA" && "비밀유지 계약서"}
                      {req.name === "General GTC" && "일반 거래 약관"}
                      {req.name === "Project GTC" && "프로젝트별 거래 약관"}
                    </p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            ))}
          </div>
        );
      },
      size: 150,
    },

    {
      accessorKey: "sendVersion",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="발송 회차" />,
      cell: ({ row }) => {
        const version = row.original.sendVersion;


        return <span>{version}</span>;
      },
      size: 80,
    },
    {
      accessorKey: "emailStatus",
      header: "이메일 상태",
      cell: ({ row }) => {
        const response = row.original;
        const emailSentAt = response?.emailSentAt;
        const emailResentCount = response?.emailResentCount || 0;
        const emailStatus = response?.emailStatus;
        const status = response?.status;

        if (!emailSentAt) {
          return (
            <Badge variant="outline" className="bg-gray-50">
              <Mail className="h-3 w-3 mr-1" />
              미발송
            </Badge>
          );
        }

        // 이메일 상태 표시 (failed인 경우 특별 처리)
        const getEmailStatusBadge = () => {
          if (emailStatus === "failed") {
            return (
              <Badge variant="destructive">
                <XCircle className="h-3 w-3 mr-1" />
                발송 실패
              </Badge>
            );
          }
          return (
            <Badge variant={status === "제출완료" ? "success" : "default"}>
              {getStatusIcon(status || "")}
              {status}
            </Badge>
          );
        };

        // emailSentTo JSON 파싱
        let recipients = { to: [], cc: [], sentBy: "" };
        try {
          if (response?.email?.emailSentTo) {
            recipients = JSON.parse(response.email.emailSentTo);
          }
        } catch (e) {
          console.error("Failed to parse emailSentTo", e);
        }

        return (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger>
                <div className="flex flex-col gap-1">
                  {getEmailStatusBadge()}
                  {emailResentCount > 1 && (
                    <Badge variant="secondary" className="text-xs">
                      재발송 {emailResentCount - 1}회
                    </Badge>
                  )}
                </div>
              </TooltipTrigger>
              <TooltipContent>
                <div className="space-y-1">
                  <p>최초 발송: {format(new Date(emailSentAt), "yyyy-MM-dd HH:mm")}</p>
                  {response?.email?.lastEmailSentAt && (
                    <p>최근 발송: {format(new Date(response.email.lastEmailSentAt), "yyyy-MM-dd HH:mm")}</p>
                  )}
                  {recipients.to.length > 0 && (
                    <p>수신자: {recipients.to.join(", ")}</p>
                  )}
                  {recipients.cc.length > 0 && (
                    <p>참조: {recipients.cc.join(", ")}</p>
                  )}
                  {recipients.sentBy && (
                    <p>발신자: {recipients.sentBy}</p>
                  )}
                  {emailStatus === "failed" && (
                    <p className="text-red-500 font-semibold">⚠️ 이메일 발송 실패</p>
                  )}
                </div>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        );
      },
      size: 120,
    },
    // {
    //   accessorKey: "basicContract",
    //   header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="기본계약" />,
    //   cell: ({ row }) => row.original.basicContract || "-",
    //   size: 100,
    // },
    {
      accessorKey: "currency",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="요청 통화" />,
      cell: ({ row }) => {
        const currency = row.original.currency;
        return currency ? (
          <Badge variant="outline">{currency}</Badge>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 80,
    },
    {
      accessorKey: "paymentTermsCode",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="지급조건" />,
      cell: ({ row }) => {
        const code = row.original.paymentTermsCode;
        const desc = row.original.paymentTermsDescription;
        return (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <span className="text-sm">{code || "-"}</span>
              </TooltipTrigger>
              {desc && (
                <TooltipContent>
                  <p>{desc}</p>
                </TooltipContent>
              )}
            </Tooltip>
          </TooltipProvider>
        );
      },
      size: 100,
    },
    {
      accessorKey: "taxCode",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="Tax" />,
      cell: ({ row }) => row.original.taxCode || "-",
      size: 60,
    },
    {
      accessorKey: "deliveryDate",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="계약납기일/기간" />,
      cell: ({ row }) => {
        const deliveryDate = row.original.deliveryDate;
        const contractDuration = row.original.contractDuration;

        return (
          <div className="flex flex-col gap-0.5">
            {deliveryDate && !rfqCode?.startsWith("F") && (
              <span className="text-xs">
                {format(new Date(deliveryDate), "yyyy-MM-dd")}
              </span>
            )}
            {contractDuration && rfqCode?.startsWith("F") && (
              <span className="text-xs text-muted-foreground">{contractDuration}</span>
            )}
            {!deliveryDate && !contractDuration && (
              <span className="text-muted-foreground">-</span>
            )}
          </div>
        );
      },
      size: 120,
    },
    {
      accessorKey: "incotermsCode",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="Incoterms" />,
      cell: ({ row }) => {
        const code = row.original.incotermsCode;
        const detail = row.original.incotermsDetail;

        return (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="flex items-center gap-1">
                  <Globe className="h-3 w-3 text-muted-foreground" />
                  <span className="text-sm">{code || "-"}</span>
                </div>
              </TooltipTrigger>
              {detail && (
                <TooltipContent>
                  <p>{detail}</p>
                </TooltipContent>
              )}
            </Tooltip>
          </TooltipProvider>
        );
      },
      size: 100,
    },
    {
      accessorKey: "placeOfShipping",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="선적지" />,
      cell: ({ row }) => {
        const place = row.original.placeOfShipping;
        return place ? (
          <div className="flex items-center gap-1">
            <MapPin className="h-3 w-3 text-muted-foreground" />
            <span className="text-xs">{place}</span>
          </div>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      accessorKey: "placeOfDestination",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="도착지" />,
      cell: ({ row }) => {
        const place = row.original.placeOfDestination;
        return place ? (
          <div className="flex items-center gap-1">
            <Package className="h-3 w-3 text-muted-foreground" />
            <span className="text-xs">{place}</span>
          </div>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      id: "additionalConditions",
      header: "추가조건",
      cell: ({ row }) => {
        const conditions = formatAdditionalConditions(row.original);
        if (conditions === "-") {
          return <span className="text-muted-foreground">-</span>;
        }

        const items = conditions.split(", ");
        return (
          <div className="flex flex-wrap gap-1">
            {items.map((item, idx) => (
              <Badge key={idx} variant="outline" className="text-xs">
                {item}
              </Badge>
            ))}
          </div>
        );
      },
      size: 120,
    },
    {
      accessorKey: "response.submission.submittedAt",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="참여여부 (회신일)" />,
      cell: ({ row }) => {
        const participationRepliedAt = row.original.response?.attend?.participationRepliedAt;

        if (!participationRepliedAt) {
          return <Badge variant="outline">미응답</Badge>;
        }


        const participationStatus = row.original.response?.attend?.participationStatus;

        return (
          <div className="flex flex-col gap-0.5">
            <Badge variant="default" className="text-xs">{participationStatus}</Badge>
            <span className="text-xs text-muted-foreground">
              {format(new Date(participationRepliedAt), "yyyy-MM-dd")}
            </span>
          </div>
        );
      },
      size: 100,
    },
    {
      id: "responseDetail",
      header: "회신상세",
      cell: ({ row }) => {
        const hasResponse = !!row.original.response?.submission?.submittedAt;

        if (!hasResponse) {
          return <span className="text-muted-foreground text-xs">-</span>;
        }

        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => handleAction("response-detail", row.original)}
            className="h-7 px-2"
          >
            <Eye className="h-3 w-3 mr-1" />
            상세
          </Button>
        );
      },
      size: 80,
    },
    {
      accessorKey: "shortList",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="Short List" />,
      cell: ({ row }) => (
        row.original.shortList ? (
          <Badge variant="default">선정</Badge>
        ) : (
          <Badge variant="outline">대기</Badge>
        )
      ),
      size: 80,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="최신수정일" />,
      cell: ({ row }) => {
        const date = row.original.updatedAt;
        return date ? (
          <span className="text-xs text-muted-foreground">
            {format(new Date(date), "MM-dd HH:mm")}
          </span>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      accessorKey: "updatedByUserName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="최신수정자" />,
      cell: ({ row }) => {
        const name = row.original.updatedByUserName;
        return name ? (
          <span className="text-xs">{name}</span>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      id: "actions",
      header: "작업",
      cell: ({ row }) => {
        const vendor = row.original;
        const hasResponse = !!vendor.response;
        const emailSentAt = vendor.response?.email?.emailSentAt;
        const emailResentCount = vendor.response?.email?.emailResentCount || 0;
        const hasQuotation = !!vendor.quotationStatus;
        const isKorean = vendor.vendorCountry === "KR" || vendor.vendorCountry === "한국";

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">메뉴 열기</span>
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
                </svg>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => handleAction("view", vendor)}>
                <Eye className="mr-2 h-4 w-4" />
                상세보기
              </DropdownMenuItem>

              {/* 기본계약 수정 메뉴 추가 */}
              <DropdownMenuItem onClick={() => handleAction("edit-contract", vendor)}>
                <FileText className="mr-2 h-4 w-4" />
                기본계약 수정
              </DropdownMenuItem>

              {emailSentAt && (
                <>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    onClick={() => handleAction("resend", vendor)}
                    disabled={isLoadingSendData}
                  >
                    <RefreshCw className="mr-2 h-4 w-4" />
                    이메일 재발송
                    {emailResentCount > 0 && (
                      <Badge variant="outline" className="ml-2 text-xs">
                        {emailResentCount}
                      </Badge>
                    )}
                  </DropdownMenuItem>
                </>
              )}

              {!emailSentAt && (
                <DropdownMenuItem
                  onClick={() => handleAction("send", vendor)}
                  disabled={isLoadingSendData}
                >
                  <Send className="mr-2 h-4 w-4" />
                  RFQ 발송
                </DropdownMenuItem>
              )}

              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => handleAction("delete", vendor)}
                className={cn(
                  "text-red-600",
                  hasQuotation && "opacity-50 cursor-not-allowed"
                )}
                disabled={hasQuotation}
              >
                <Trash2 className="mr-2 h-4 w-4" />
                삭제
                {hasQuotation && (
                  <span className="ml-2 text-xs">(불가)</span>
                )}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
      size: 60,
    }
  ], [handleAction, rfqCode, isLoadingSendData]);

  const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [
    { id: "vendorName", label: "벤더명", type: "text" },
    { id: "vendorCode", label: "벤더코드", type: "text" },
    { id: "vendorCountry", label: "국가", type: "text" },
    {
      id: "response.status",
      label: "응답 상태",
      type: "select",
      options: [
        { label: "초대됨", value: "초대됨" },
        { label: "작성중", value: "작성중" },
        { label: "제출완료", value: "제출완료" },
        { label: "수정요청", value: "수정요청" },
        { label: "최종확정", value: "최종확정" },
        { label: "취소", value: "취소" },
      ]
    },
    {
      id: "shortList",
      label: "Short List",
      type: "select",
      options: [
        { label: "선정", value: "true" },
        { label: "대기", value: "false" },
      ]
    },
  ];

  // 선택된 벤더 정보 (BatchUpdate용)
  const selectedVendorsForBatch = React.useMemo(() => {
    return selectedRows.map(row => ({
      id: row.vendorId,
      vendorName: row.vendorName,
      vendorCode: row.vendorCode,
    }));
  }, [selectedRows]);

  // 추가 액션 버튼들
  const additionalActions = React.useMemo(() => (
    <div className="flex items-center gap-2">
      <Button
        variant="outline"
        size="sm"
        onClick={() => setIsAddDialogOpen(true)}
        disabled={isLoadingSendData}
      >
        <Plus className="h-4 w-4 mr-2" />
        벤더 추가
      </Button>
      {selectedRows.length > 0 && (
        <>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setIsBatchUpdateOpen(true)}
            disabled={isLoadingSendData}
          >
            <Settings2 className="h-4 w-4 mr-2" />
            정보 일괄 입력 ({selectedRows.length})
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={handleBulkSend}
            disabled={isLoadingSendData || selectedRows.length === 0}
          >
            {isLoadingSendData ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                데이터 준비중...
              </>
            ) : (
              <>
                <Send className="h-4 w-4 mr-2" />
                RFQ 발송 ({selectedRows.length})
              </>
            )}
          </Button>
        </>
      )}
      <Button
        variant="outline"
        size="sm"
        onClick={() => {
          setIsRefreshing(true);
          setTimeout(() => {
            setIsRefreshing(false);
            toast.success("데이터를 새로고침했습니다.");
          }, 1000);
        }}
        disabled={isRefreshing || isLoadingSendData}
      >
        <RefreshCw className={cn("h-4 w-4 mr-2", isRefreshing && "animate-spin")} />
        새로고침
      </Button>
    </div>
  ), [selectedRows, isRefreshing, isLoadingSendData, handleBulkSend]);

  return (
    <>
      <ClientDataTable
        columns={columns}
        data={mergedData}
        advancedFilterFields={advancedFilterFields}
        autoSizeColumns={false}
        compact={true}
        maxHeight="34rem"
        onSelectedRowsChange={setSelectedRows}
      >
        {additionalActions}
      </ClientDataTable>

      {/* 벤더 추가 다이얼로그 */}
      <AddVendorDialog
        open={isAddDialogOpen}
        onOpenChange={setIsAddDialogOpen}
        rfqId={rfqId}
        onSuccess={() => {
          toast.success("벤더가 추가되었습니다.");
          setIsAddDialogOpen(false);
        }}
      />

      {/* 조건 일괄 설정 다이얼로그 */}
      <BatchUpdateConditionsDialog
        open={isBatchUpdateOpen}
        onOpenChange={setIsBatchUpdateOpen}
        rfqId={rfqId}
        rfqCode={rfqCode}
        selectedVendors={selectedVendorsForBatch}
        onSuccess={() => {
          toast.success("조건이 업데이트되었습니다.");
          setIsBatchUpdateOpen(false);
          setSelectedRows([]);
        }}
      />

      {/* RFQ 발송 다이얼로그 */}
      <SendRfqDialog
        open={isSendDialogOpen}
        onOpenChange={setIsSendDialogOpen}
        selectedVendors={sendDialogData.selectedVendors}
        rfqInfo={sendDialogData.rfqInfo}
        attachments={sendDialogData.attachments || []}
        onSend={handleSendRfq}
      />

      {/* 벤더 상세 다이얼로그 */}
      {selectedVendor && (
        <VendorResponseDetailDialog
          open={!!selectedVendor}
          onOpenChange={(open) => !open && setSelectedVendor(null)}
          data={selectedVendor}
          rfqId={rfqId}
        />
      )}

      {/* 삭제 다이얼로그 추가 */}
      {deleteVendorData && (
        <DeleteVendorDialog
          open={!!deleteVendorData}
          onOpenChange={(open) => !open && setDeleteVendorData(null)}
          rfqId={rfqId}
          vendorData={deleteVendorData}
          onSuccess={() => {
            setDeleteVendorData(null);
            router.refresh();
            // 데이터 새로고침
          }}
        />
      )}

          {/* 기본계약 수정 다이얼로그 - 새로 추가 */}
    {editContractVendor && (
      <EditContractDialog
        open={!!editContractVendor}
        onOpenChange={(open) => !open && setEditContractVendor(null)}
        rfqId={rfqId}
        vendor={editContractVendor}
        onSuccess={() => {
          setEditContractVendor(null);
          router.refresh();
        }}
      />
    )}
    </>
  );
}