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

"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Send,
  Building2,
  User,
  Calendar,
  Package,
  FileText,
  Plus,
  X,
  Paperclip,
  Download,
  Mail,
  Users,
  AlertCircle,
  Info,
  File,
  CheckCircle,
  RefreshCw,
  Phone,
  Briefcase,
  Building,
  ChevronDown,
  ChevronRight,
  UserPlus
} from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { toast } from "sonner";
import { cn, formatDate } from "@/lib/utils";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Alert,
  AlertDescription, AlertTitle
} from "@/components/ui/alert";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
// 타입 정의
interface ContactDetail {
  id: number;
  name: string;
  position?: string | null;
  department?: string | null;
  email: string;
  phone?: string | null;
  isPrimary: boolean;
}

interface CustomEmail {
  id: string;
  email: string;
  name?: string;
}

interface Vendor {
  vendorId: number;
  vendorName: string;
  vendorCode?: string | null;
  vendorCountry?: string | null;
  vendorEmail?: string | null;
  representativeEmail?: string | null;
  contacts?: ContactDetail[];
  contactsByPosition?: Record<string, ContactDetail[]>;
  primaryEmail?: string | null;
  currency?: string | null;
}

interface Attachment {
  id: number;
  attachmentType: string;
  serialNo: string;
  currentRevision: string;
  description?: string;
  fileName?: string;
  fileSize?: number;
  uploadedAt?: Date;
}

interface RfqInfo {
  rfqCode: string;
  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;
}

interface VendorWithRecipients extends Vendor {
  selectedMainEmail: string;
  additionalEmails: string[];
  customEmails: CustomEmail[];
}

interface SendRfqDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedVendors: Vendor[];
  rfqInfo: RfqInfo;
  attachments?: Attachment[];
  onSend: (data: {
    vendors: VendorWithRecipients[];
    attachments: number[];
    message?: string;
  }) => Promise<void>;
}

// 이메일 유효성 검사 함수
const validateEmail = (email: string): boolean => {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
};

// 첨부파일 타입별 아이콘
const getAttachmentIcon = (type: string) => {
  switch (type.toLowerCase()) {
    case "technical":
      return <FileText className="h-4 w-4 text-blue-500" />;
    case "commercial":
      return <File className="h-4 w-4 text-green-500" />;
    case "drawing":
      return <Package className="h-4 w-4 text-purple-500" />;
    default:
      return <Paperclip className="h-4 w-4 text-gray-500" />;
  }
};

// 파일 크기 포맷
const formatFileSize = (bytes?: number) => {
  if (!bytes) return "0 KB";
  const kb = bytes / 1024;
  const mb = kb / 1024;
  if (mb >= 1) return `${mb.toFixed(2)} MB`;
  return `${kb.toFixed(2)} KB`;
};

// 포지션별 아이콘
const getPositionIcon = (position?: string | null) => {
  if (!position) return <User className="h-3 w-3" />;

  const lowerPosition = position.toLowerCase();
  if (lowerPosition.includes('대표') || lowerPosition.includes('ceo')) {
    return <Building2 className="h-3 w-3" />;
  }
  if (lowerPosition.includes('영업') || lowerPosition.includes('sales')) {
    return <Briefcase className="h-3 w-3" />;
  }
  if (lowerPosition.includes('기술') || lowerPosition.includes('tech')) {
    return <Package className="h-3 w-3" />;
  }
  return <User className="h-3 w-3" />;
};

// 포지션별 색상
const getPositionColor = (position?: string | null) => {
  if (!position) return 'default';

  const lowerPosition = position.toLowerCase();
  if (lowerPosition.includes('대표') || lowerPosition.includes('ceo')) {
    return 'destructive';
  }
  if (lowerPosition.includes('영업') || lowerPosition.includes('sales')) {
    return 'success';
  }
  if (lowerPosition.includes('기술') || lowerPosition.includes('tech')) {
    return 'secondary';
  }
  return 'default';
};

export function SendRfqDialog({
  open,
  onOpenChange,
  selectedVendors,
  rfqInfo,
  attachments = [],
  onSend,
}: SendRfqDialogProps) {
  const [isSending, setIsSending] = React.useState(false);
  const [vendorsWithRecipients, setVendorsWithRecipients] = React.useState<VendorWithRecipients[]>([]);
  const [selectedAttachments, setSelectedAttachments] = React.useState<number[]>([]);
  const [additionalMessage, setAdditionalMessage] = React.useState("");
  const [expandedVendors, setExpandedVendors] = React.useState<number[]>([]);
  const [customEmailInputs, setCustomEmailInputs] = React.useState<Record<number, { email: string; name: string }>>({});
  const [showCustomEmailForm, setShowCustomEmailForm] = React.useState<Record<number, boolean>>({});

  // 초기화
  React.useEffect(() => {
    if (open && selectedVendors.length > 0) {
      setVendorsWithRecipients(
        selectedVendors.map(v => ({
          ...v,
          selectedMainEmail: v.primaryEmail || v.vendorEmail || '',
          additionalEmails: [],
          customEmails: []
        }))
      );
      // 모든 첨부파일 선택
      setSelectedAttachments(attachments.map(a => a.id));
      // 첫 번째 벤더를 자동으로 확장
      if (selectedVendors.length > 0) {
        setExpandedVendors([selectedVendors[0].vendorId]);
      }
      // 초기화
      setCustomEmailInputs({});
      setShowCustomEmailForm({});
    }
  }, [open, selectedVendors, attachments]);

  // 커스텀 이메일 추가
  const addCustomEmail = (vendorId: number) => {
    const input = customEmailInputs[vendorId];
    if (!input || !input.email) {
      toast.error("이메일 주소를 입력해주세요.");
      return;
    }

    if (!validateEmail(input.email)) {
      toast.error("올바른 이메일 형식이 아닙니다.");
      return;
    }

    setVendorsWithRecipients(prev =>
      prev.map(v => {
        if (v.vendorId !== vendorId) return v;

        // 중복 체크
        const allEmails = [
          v.vendorEmail,
          v.representativeEmail,
          ...(v.contacts?.map(c => c.email) || []),
          ...v.customEmails.map(c => c.email)
        ].filter(Boolean);

        if (allEmails.includes(input.email)) {
          toast.error("이미 등록된 이메일 주소입니다.");
          return v;
        }

        const newCustomEmail: CustomEmail = {
          id: `custom-${Date.now()}`,
          email: input.email,
          name: input.name || input.email.split('@')[0]
        };

        return {
          ...v,
          customEmails: [...v.customEmails, newCustomEmail]
        };
      })
    );

    // 입력 필드 초기화
    setCustomEmailInputs(prev => ({
      ...prev,
      [vendorId]: { email: '', name: '' }
    }));
    setShowCustomEmailForm(prev => ({
      ...prev,
      [vendorId]: false
    }));

    toast.success("수신자가 추가되었습니다.");
  };

  // 커스텀 이메일 삭제
  const removeCustomEmail = (vendorId: number, emailId: string) => {
    setVendorsWithRecipients(prev =>
      prev.map(v => {
        if (v.vendorId !== vendorId) return v;

        const emailToRemove = v.customEmails.find(e => e.id === emailId);
        if (!emailToRemove) return v;

        return {
          ...v,
          customEmails: v.customEmails.filter(e => e.id !== emailId),
          // 만약 삭제하는 이메일이 선택된 주 수신자라면 초기화
          selectedMainEmail: v.selectedMainEmail === emailToRemove.email ? '' : v.selectedMainEmail,
          // 추가 수신자에서도 제거
          additionalEmails: v.additionalEmails.filter(e => e !== emailToRemove.email)
        };
      })
    );
  };

  // 주 수신자 이메일 변경
  const handleMainEmailChange = (vendorId: number, email: string) => {
    setVendorsWithRecipients(prev =>
      prev.map(v =>
        v.vendorId === vendorId
          ? { ...v, selectedMainEmail: email }
          : v
      )
    );
  };

  // 추가 수신자 토글
  const toggleAdditionalEmail = (vendorId: number, email: string) => {
    setVendorsWithRecipients(prev =>
      prev.map(v => {
        if (v.vendorId !== vendorId) return v;

        const additionalEmails = v.additionalEmails.includes(email)
          ? v.additionalEmails.filter(e => e !== email)
          : [...v.additionalEmails, email];

        return { ...v, additionalEmails };
      })
    );
  };

  // 벤더 확장/축소 토글
  const toggleVendorExpand = (vendorId: number) => {
    setExpandedVendors(prev =>
      prev.includes(vendorId)
        ? prev.filter(id => id !== vendorId)
        : [...prev, vendorId]
    );
  };

  // 첨부파일 선택 토글
  const toggleAttachment = (attachmentId: number) => {
    setSelectedAttachments(prev =>
      prev.includes(attachmentId)
        ? prev.filter(id => id !== attachmentId)
        : [...prev, attachmentId]
    );
  };

  // 전송 처리
  const handleSend = async () => {
    try {
      setIsSending(true);

      // 유효성 검사
      const vendorsWithoutEmail = vendorsWithRecipients.filter(v => !v.selectedMainEmail);
      if (vendorsWithoutEmail.length > 0) {
        toast.error(`${vendorsWithoutEmail.map(v => v.vendorName).join(', ')}의 주 수신자를 선택해주세요.`);
        return;
      }

      if (selectedAttachments.length === 0) {
        toast.warning("최소 하나 이상의 첨부파일을 선택해주세요.");
        return;
      }

      await onSend({
        vendors: vendorsWithRecipients.map(v => ({
          ...v,
          additionalRecipients: v.additionalEmails,
        })),
        attachments: selectedAttachments,
        message: additionalMessage,
      });

      toast.success(`${vendorsWithRecipients.length}개 업체에 RFQ를 발송했습니다.`);
      onOpenChange(false);
    } catch (error) {
      console.error("RFQ 발송 실패:", error);
      toast.error("RFQ 발송에 실패했습니다.");
    } finally {
      setIsSending(false);
    }
  };

  // 총 수신자 수 계산
  const totalRecipientCount = React.useMemo(() => {
    return vendorsWithRecipients.reduce((acc, v) =>
      acc + 1 + v.additionalEmails.length, 0
    );
  }, [vendorsWithRecipients]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Send className="h-5 w-5" />
            RFQ 일괄 발송
          </DialogTitle>
          <DialogDescription>
            선택한 {selectedVendors.length}개 업체에 RFQ를 발송합니다.
          </DialogDescription>
        </DialogHeader>

        {/* ScrollArea 대신 div 사용 */}
        <div className="flex-1 overflow-y-auto px-1" style={{ maxHeight: 'calc(90vh - 200px)' }}>
          <div className="space-y-6 pr-4">
            {/* RFQ 정보 섹션 */}
            <div className="space-y-4">
              <div className="flex items-center gap-2 text-sm font-medium">
                <Info className="h-4 w-4" />
                RFQ 정보
              </div>

              <div className="bg-muted/50 rounded-lg p-4 space-y-3">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]">RFQ 코드:</span>
                    <span className="font-medium">{rfqInfo?.rfqCode}</span>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]">견적마감일:</span>
                    <span className="font-medium text-red-600">
                      {formatDate(rfqInfo?.dueDate, "KR")}
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]">프로젝트:</span>
                    <span className="font-medium">
                      {rfqInfo?.projectCode} ({rfqInfo?.projectName})
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]"> 자재그룹:</span>
                    <span className="font-medium">
                      {rfqInfo?.packageNo} - {rfqInfo?.packageName}
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]">구매담당자:</span>
                    <span className="font-medium">
                      {rfqInfo?.picName} ({rfqInfo?.picCode}) {rfqInfo?.picTeam}
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-muted-foreground min-w-[80px]"> 설계담당자:</span>
                    <span className="font-medium">
                      {rfqInfo?.designPicName}
                    </span>
                  </div>
                  {rfqInfo?.rfqCode.startsWith("F") &&
                    <>
                      <div className="flex items-start gap-2">
                        <span className="text-muted-foreground min-w-[80px]">견적명:</span>
                        <span className="font-medium">
                          {rfqInfo?.rfqTitle}
                        </span>
                      </div>
                      <div className="flex items-start gap-2">
                        <span className="text-muted-foreground min-w-[80px]"> 견적종류:</span>
                        <span className="font-medium">
                          {rfqInfo?.rfqType}
                        </span>
                      </div>
                    </>
                  }
                </div>
              </div>
            </div>

            <Separator />

            {/* 수신 업체 섹션 - 테이블 버전 with 인라인 추가 폼 */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 text-sm font-medium">
                  <Building2 className="h-4 w-4" />
                  수신 업체 ({selectedVendors.length})
                </div>
                <Badge variant="outline" className="flex items-center gap-1">
                  <Users className="h-3 w-3" />
                  총 {totalRecipientCount}명
                </Badge>
              </div>

              <div className="border rounded-lg overflow-hidden">
                <table className="w-full">
                  <thead className="bg-muted/50 border-b">
                    <tr>
                      <th className="text-left p-2 text-xs font-medium">No.</th>
                      <th className="text-left p-2 text-xs font-medium">업체명</th>
                      <th className="text-left p-2 text-xs font-medium">주 수신자</th>
                      <th className="text-left p-2 text-xs font-medium">CC</th>
                      <th className="text-left p-2 text-xs font-medium">작업</th>
                    </tr>
                  </thead>
                  <tbody>
                    {vendorsWithRecipients.map((vendor, index) => {
                      const allContacts = vendor.contacts || [];
                      const allEmails = [
                        ...(vendor.representativeEmail ? [{
                          value: vendor.representativeEmail,
                          label: '대표자',
                          email: vendor.representativeEmail,
                          type: 'representative'
                        }] : []),
                        ...allContacts.map(c => ({
                          value: c.email,
                          label: `${c.name} ${c.position ? `(${c.position})` : ''}`,
                          email: c.email,
                          type: 'contact'
                        })),
                        ...vendor.customEmails.map(c => ({
                          value: c.email,
                          label: c.name || c.email,
                          email: c.email,
                          type: 'custom'
                        })),
                        ...(vendor.vendorEmail && vendor.vendorEmail !== vendor.representativeEmail ? [{
                          value: vendor.vendorEmail,
                          label: '업체 기본',
                          email: vendor.vendorEmail,
                          type: 'default'
                        }] : [])
                      ];

                      const ccEmails = allEmails.filter(e => e.value !== vendor.selectedMainEmail);
                      const selectedMainEmailInfo = allEmails.find(e => e.value === vendor.selectedMainEmail);
                      const isFormOpen = showCustomEmailForm[vendor.vendorId];

                      return (
                        <React.Fragment key={vendor.vendorId}>
                          <tr className="border-b hover:bg-muted/20">
                            <td className="p-2">
                              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-xs font-medium">
                                {index + 1}
                              </div>
                            </td>
                            <td className="p-2">
                              <div className="space-y-1">
                                <div className="font-medium text-sm">{vendor.vendorName}</div>
                                <div className="flex items-center gap-1">
                                  <Badge variant="outline" className="text-xs">
                                    {vendor.vendorCountry}
                                  </Badge>
                                  <span className="text-xs text-muted-foreground">
                                    {vendor.vendorCode}
                                  </span>
                                </div>
                              </div>
                            </td>
                            <td className="p-2">
                              <Select
                                value={vendor.selectedMainEmail}
                                onValueChange={(value) => handleMainEmailChange(vendor.vendorId, value)}
                              >
                                <SelectTrigger className="h-7 text-xs w-[200px]">
                                  <SelectValue placeholder="선택하세요">
                                    {selectedMainEmailInfo && (
                                      <div className="flex items-center gap-1">
                                        {selectedMainEmailInfo.type === 'representative' && <Building2 className="h-3 w-3" />}
                                        {selectedMainEmailInfo.type === 'custom' && <UserPlus className="h-3 w-3 text-green-500" />}
                                        <span className="truncate">{selectedMainEmailInfo.label}</span>
                                      </div>
                                    )}
                                  </SelectValue>
                                </SelectTrigger>
                                <SelectContent>
                                  {allEmails.map((email) => (
                                    <SelectItem key={email.value} value={email.value} className="text-xs">
                                      <div className="flex items-center gap-1">
                                        {email.type === 'representative' && <Building2 className="h-3 w-3" />}
                                        {email.type === 'custom' && <UserPlus className="h-3 w-3 text-green-500" />}
                                        <span>{email.label}</span>
                                      </div>
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              {!vendor.selectedMainEmail && (
                                <span className="text-xs text-red-500">필수</span>
                              )}
                            </td>
                            <td className="p-2">
                              <Popover>
                                <PopoverTrigger asChild>
                                  <Button variant="outline" className="h-7 text-xs">
                                    {vendor.additionalEmails.length > 0
                                      ? `${vendor.additionalEmails.length}명`
                                      : "선택"
                                    }
                                    <ChevronDown className="ml-1 h-3 w-3" />
                                  </Button>
                                </PopoverTrigger>
                                <PopoverContent className="w-48 p-2">
                                  <div className="max-h-48 overflow-y-auto space-y-1">
                                    {ccEmails.map((email) => (
                                      <div key={email.value} className="flex items-center space-x-1 p-1">
                                        <Checkbox
                                          checked={vendor.additionalEmails.includes(email.value)}
                                          onCheckedChange={() => toggleAdditionalEmail(vendor.vendorId, email.value)}
                                          className="h-3 w-3"
                                        />
                                        <label className="text-xs cursor-pointer flex-1 truncate">
                                          {email.label}
                                        </label>
                                      </div>
                                    ))}
                                  </div>
                                </PopoverContent>
                              </Popover>
                            </td>
                            <td className="p-2">
                              <div className="flex items-center gap-1">
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant={isFormOpen ? "default" : "ghost"}
                                        size="sm"
                                        className="h-6 w-6 p-0"
                                        onClick={() => {
                                          setShowCustomEmailForm(prev => ({
                                            ...prev,
                                            [vendor.vendorId]: !prev[vendor.vendorId]
                                          }));
                                        }}
                                      >
                                        {isFormOpen ? <X className="h-3 w-3" /> : <Plus className="h-3 w-3" />}
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent>{isFormOpen ? "닫기" : "수신자 추가"}</TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                                {vendor.customEmails.length > 0 && (
                                  <Badge variant="success" className="text-xs">
                                    +{vendor.customEmails.length}
                                  </Badge>
                                )}
                              </div>
                            </td>
                          </tr>

                          {/* 인라인 수신자 추가 폼 - 한 줄 레이아웃 */}
                          {isFormOpen && (
                            <tr className="bg-muted/10 border-b">
                              <td colSpan={5} className="p-4">
                                <div className="space-y-3">
                                  <div className="flex items-center justify-between mb-2">
                                    <div className="flex items-center gap-2 text-sm font-medium">
                                      <UserPlus className="h-4 w-4" />
                                      수신자 추가 - {vendor.vendorName}
                                    </div>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      className="h-6 w-6 p-0"
                                      onClick={() => setShowCustomEmailForm(prev => ({
                                        ...prev,
                                        [vendor.vendorId]: false
                                      }))}
                                    >
                                      <X className="h-3 w-3" />
                                    </Button>
                                  </div>

                                  {/* 한 줄에 모든 요소 배치 - 명확한 너비 지정 */}
                                  <div className="flex gap-2 items-end">
                                    <div className="w-[150px]">
                                      <Label className="text-xs mb-1 block">이름 (선택)</Label>
                                      <Input
                                        placeholder="홍길동"
                                        className="h-8 text-sm"
                                        value={customEmailInputs[vendor.vendorId]?.name || ''}
                                        onChange={(e) => setCustomEmailInputs(prev => ({
                                          ...prev,
                                          [vendor.vendorId]: {
                                            ...prev[vendor.vendorId],
                                            name: e.target.value
                                          }
                                        }))}
                                      />
                                    </div>
                                    <div className="flex-1">
                                      <Label className="text-xs mb-1 block">이메일 <span className="text-red-500">*</span></Label>
                                      <Input
                                        type="email"
                                        placeholder="example@company.com"
                                        className="h-8 text-sm"
                                        value={customEmailInputs[vendor.vendorId]?.email || ''}
                                        onChange={(e) => setCustomEmailInputs(prev => ({
                                          ...prev,
                                          [vendor.vendorId]: {
                                            ...prev[vendor.vendorId],
                                            email: e.target.value
                                          }
                                        }))}
                                        onKeyPress={(e) => {
                                          if (e.key === 'Enter') {
                                            e.preventDefault();
                                            addCustomEmail(vendor.vendorId);
                                          }
                                        }}
                                      />
                                    </div>
                                    <Button
                                      size="sm"
                                      className="h-8 px-4"
                                      onClick={() => addCustomEmail(vendor.vendorId)}
                                      disabled={!customEmailInputs[vendor.vendorId]?.email}
                                    >
                                      <Plus className="h-3 w-3 mr-1" />
                                      추가
                                    </Button>
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      className="h-8 px-4"
                                      onClick={() => {
                                        setCustomEmailInputs(prev => ({
                                          ...prev,
                                          [vendor.vendorId]: { email: '', name: '' }
                                        }));
                                        setShowCustomEmailForm(prev => ({
                                          ...prev,
                                          [vendor.vendorId]: false
                                        }));
                                      }}
                                    >
                                      취소
                                    </Button>
                                  </div>

                                  {/* 추가된 커스텀 이메일 목록 */}
                                  {vendor.customEmails.length > 0 && (
                                    <div className="mt-3 pt-3 border-t">
                                      <div className="text-xs text-muted-foreground mb-2">추가된 수신자 목록</div>
                                      <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
                                        {vendor.customEmails.map((custom) => (
                                          <div key={custom.id} className="flex items-center justify-between bg-background rounded-md p-2">
                                            <div className="flex items-center gap-2 min-w-0">
                                              <UserPlus className="h-3 w-3 text-green-500 flex-shrink-0" />
                                              <div className="min-w-0">
                                                <div className="text-sm font-medium truncate">{custom.name}</div>
                                                <div className="text-xs text-muted-foreground truncate">{custom.email}</div>
                                              </div>
                                            </div>
                                            <Button
                                              variant="ghost"
                                              size="sm"
                                              className="h-6 w-6 p-0 flex-shrink-0"
                                              onClick={() => removeCustomEmail(vendor.vendorId, custom.id)}
                                            >
                                              <X className="h-3 w-3" />
                                            </Button>
                                          </div>
                                        ))}
                                      </div>
                                    </div>
                                  )}
                                </div>
                              </td>
                            </tr>
                          )}
                        </React.Fragment>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>


            <Separator />
            {/* 첨부파일 섹션 */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 text-sm font-medium">
                  <Paperclip className="h-4 w-4" />
                  첨부파일 ({selectedAttachments.length}/{attachments.length})
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    if (selectedAttachments.length === attachments.length) {
                      setSelectedAttachments([]);
                    } else {
                      setSelectedAttachments(attachments.map(a => a.id));
                    }
                  }}
                >
                  {selectedAttachments.length === attachments.length ? "전체 해제" : "전체 선택"}
                </Button>
              </div>

              <div className="border rounded-lg divide-y max-h-40 overflow-y-auto">
                {attachments.length > 0 ? (
                  attachments.map((attachment) => (
                    <div
                      key={attachment.id}
                      className="flex items-center justify-between p-2 hover:bg-muted/50 transition-colors"
                    >
                      <div className="flex items-center gap-2">
                        <Checkbox
                          checked={selectedAttachments.includes(attachment.id)}
                          onCheckedChange={() => toggleAttachment(attachment.id)}
                        />
                        {getAttachmentIcon(attachment.attachmentType)}
                        <span className="text-sm">
                          {attachment.fileName || `${attachment.attachmentType}_${attachment.serialNo}`}
                        </span>
                        <Badge variant="outline" className="text-xs">
                          {attachment.currentRevision}
                        </Badge>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="p-4 text-center text-muted-foreground">
                    <p className="text-sm">첨부파일이 없습니다.</p>
                  </div>
                )}
              </div>
            </div>

            <Separator />

            {/* 추가 메시지 */}
            <div className="space-y-2">
              <Label htmlFor="message" className="text-sm font-medium">
                추가 메시지 (선택사항)
              </Label>
              <textarea
                id="message"
                className="w-full min-h-[80px] p-3 text-sm border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="업체에 전달할 추가 메시지를 입력하세요..."
                value={additionalMessage}
                onChange={(e) => setAdditionalMessage(e.target.value)}
              />
            </div>
          </div>
        </div>

        <DialogFooter className="flex-shrink-0">
          <Alert className="max-w-md">
            <div className="flex items-center gap-2">
              <AlertCircle className="h-4 w-4 flex-shrink-0" />
              <AlertDescription className="text-xs">
                발송 후에는 취소할 수 없습니다. 발송 내용을 다시 한번 확인해주세요.
              </AlertDescription>
            </div>
          </Alert>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isSending}
          >
            취소
          </Button>
          <Button
            onClick={handleSend}
            disabled={isSending || selectedAttachments.length === 0}
          >
            {isSending ? (
              <>
                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                발송중...
              </>
            ) : (
              <>
                <Send className="h-4 w-4 mr-2" />
                RFQ 발송
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}