'use client'

import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import {
  Mail,
  Building2,
  FileText,
  CheckCircle,
  Info,
  RefreshCw,
  X,
  ChevronDown,
  Plus,
  UserPlus,
  Users
} from 'lucide-react'
import { getExistingBasicContractsForBidding } from '../../pre-quote/service'
import { getActiveContractTemplates } from '../../service'
import { getVendorContacts } from '@/lib/vendors/service'
import { useToast } from '@/hooks/use-toast'
import { useTransition } from 'react'
import { SelectTrigger } from '@/components/ui/select'
import { SelectValue } from '@/components/ui/select'
import { SelectContent } from '@/components/ui/select'
import { SelectItem } from '@/components/ui/select'
import { Select } from '@/components/ui/select'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Separator } from '@/components/ui/separator'


interface VendorContact {
  id: number
  contactName: string
  contactEmail: string
  contactPhone?: string | null
  contactPosition?: string | null
  contactDepartment?: string | null
}

interface VendorContractRequirement {
  vendorId: number
  vendorName: string
  vendorCode?: string
  vendorCountry?: string
  vendorEmail?: string // 벤더의 기본 이메일 (vendors.email)
  contactPerson?: string
  contactEmail?: string
  ndaYn?: boolean
  generalGtcYn?: boolean
  projectGtcYn?: boolean
  agreementYn?: boolean
  biddingCompanyId: number
  biddingId: number
}

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

interface VendorWithContactInfo extends VendorContractRequirement {
  contacts: VendorContact[]
  selectedMainEmail: string
  additionalEmails: string[]
  customEmails: CustomEmail[]
  hasExistingContracts: boolean
}

interface BasicContractTemplate {
  id: number
  templateName: string
  revision: number
  status: string
  filePath: string | null
  validityPeriod: number | null
  legalReviewRequired: boolean
  createdAt: Date | null
}

interface SelectedContract {
  templateId: number
  templateName: string
  contractType: string
  checked: boolean
}

interface BiddingInvitationDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  vendors: VendorContractRequirement[]
  biddingId: number
  biddingTitle: string
  onSend: (data: {
    vendors: VendorWithContactInfo[]
    generatedPdfs: Array<{
      key: string
      buffer: number[]
      fileName: string
    }>
    message?: string
  }) => Promise<void>
}

export function BiddingInvitationDialog({
  open,
  onOpenChange,
  vendors,
  biddingId,
  biddingTitle,
  onSend,
}: BiddingInvitationDialogProps) {
  const { toast } = useToast()
  const [isPending, startTransition] = useTransition()

  // 기본계약 관련 상태
  const [, setExistingContractsList] = React.useState<Array<{ vendorId: number; biddingCompanyId: number }>>([])
  const [isGeneratingPdfs, setIsGeneratingPdfs] = React.useState(false)
  const [pdfGenerationProgress, setPdfGenerationProgress] = React.useState(0)
  const [currentGeneratingContract, setCurrentGeneratingContract] = React.useState('')

  // 벤더 정보 상태 (담당자 선택 기능 포함)
  const [vendorData, setVendorData] = React.useState<VendorWithContactInfo[]>([])

  // 기본계약서 템플릿 관련 상태
  const [availableTemplates, setAvailableTemplates] = React.useState<BasicContractTemplate[]>([])
  const [selectedContracts, setSelectedContracts] = React.useState<SelectedContract[]>([])
  const [isLoadingTemplates, setIsLoadingTemplates] = React.useState(false)
  const [additionalMessage, setAdditionalMessage] = React.useState('')

  // 커스텀 이메일 관련 상태
  const [showCustomEmailForm, setShowCustomEmailForm] = React.useState<Record<number, boolean>>({})
  const [customEmailInputs, setCustomEmailInputs] = React.useState<Record<number, { email: string; name: string }>>({})
  const [customEmailCounter, setCustomEmailCounter] = React.useState(0)

  // 벤더 정보 업데이트 함수
  const updateVendor = React.useCallback((vendorId: number, updates: Partial<VendorWithContactInfo>) => {
    setVendorData(prev => prev.map(vendor =>
      vendor.vendorId === vendorId ? { ...vendor, ...updates } : vendor
    ))
  }, [])

  // CC 이메일 토글
  const toggleAdditionalEmail = React.useCallback((vendorId: number, email: string) => {
    setVendorData(prev => prev.map(vendor => {
      if (vendor.vendorId === vendorId) {
        const additionalEmails = vendor.additionalEmails.includes(email)
          ? vendor.additionalEmails.filter(e => e !== email)
          : [...vendor.additionalEmails, email]
        return { ...vendor, additionalEmails }
      }
      return vendor
    }))
  }, [])

  // 커스텀 이메일 추가
  const addCustomEmail = React.useCallback((vendorId: number) => {
    const input = customEmailInputs[vendorId]
    if (!input?.email) return

    setVendorData(prev => prev.map(vendor => {
      if (vendor.vendorId === vendorId) {
        const newCustomEmail: CustomEmail = {
          id: `custom-${customEmailCounter}`,
          email: input.email,
          name: input.name || input.email
        }
        return {
          ...vendor,
          customEmails: [...vendor.customEmails, newCustomEmail]
        }
      }
      return vendor
    }))

    setCustomEmailInputs(prev => ({
      ...prev,
      [vendorId]: { email: '', name: '' }
    }))
    setCustomEmailCounter(prev => prev + 1)
  }, [customEmailInputs, customEmailCounter])

  // 커스텀 이메일 제거
  const removeCustomEmail = React.useCallback((vendorId: number, customEmailId: string) => {
    setVendorData(prev => prev.map(vendor => {
      if (vendor.vendorId === vendorId) {
        return {
          ...vendor,
          customEmails: vendor.customEmails.filter(ce => ce.id !== customEmailId),
          additionalEmails: vendor.additionalEmails.filter(email =>
            !vendor.customEmails.find(ce => ce.id === customEmailId)?.email || email !== vendor.customEmails.find(ce => ce.id === customEmailId)?.email
          )
        }
      }
      return vendor
    }))
  }, [])

  // 총 수신자 수 계산
  const totalRecipientCount = React.useMemo(() => {
    return vendorData.reduce((sum, vendor) => {
      return sum + 1 + vendor.additionalEmails.length // 주 수신자 1명 + CC
    }, 0)
  }, [vendorData])

  // 선택된 업체들 (사전견적에서 선정된 업체들만)
  const selectedVendors = React.useMemo(() =>
    vendors.filter(vendor => vendor.ndaYn || vendor.generalGtcYn || vendor.projectGtcYn || vendor.agreementYn),
    [vendors]
  )

  // 기존 계약이 있는 업체들 분리
  const vendorsWithExistingContracts = React.useMemo(() =>
    vendorData.filter(vendor => vendor.hasExistingContracts),
    [vendorData]
  )

  // 다이얼로그가 열릴 때 기존 계약 조회, 템플릿 로드, 벤더 담당자 로드
  React.useEffect(() => {
    if (open && selectedVendors.length > 0) {
      const fetchInitialData = async () => {
        setIsLoadingTemplates(true);
        try {
          const [existingContractsResult, templatesData] = await Promise.all([
            getExistingBasicContractsForBidding(biddingId),
            getActiveContractTemplates(),
          ]);

          // 기존 계약 조회
          const contracts = existingContractsResult.success ? existingContractsResult.contracts || [] : [];
          const typedContracts = contracts.map(c => ({
            vendorId: c.vendorId || 0,
            biddingCompanyId: c.biddingCompanyId || 0
          }));
          setExistingContractsList(typedContracts);

          // 템플릿 로드 (4개 타입만 필터링)
          const allowedTemplateNames = ['비밀', 'General GTC', '기술', '기술자료'];
          const rawTemplates = templatesData.templates || [];
          const filteredTemplates = rawTemplates.filter((template: BasicContractTemplate) =>
            allowedTemplateNames.some(allowedName =>
              template.templateName.includes(allowedName) ||
              allowedName.includes(template.templateName)
            )
          );
          setAvailableTemplates(filteredTemplates);
          const initialSelected = filteredTemplates.map((template: BasicContractTemplate) => ({
            templateId: template.id,
            templateName: template.templateName,
            contractType: template.templateName,
            checked: false
          }));
          setSelectedContracts(initialSelected);

          // 벤더 담당자 정보 병렬로 가져오기
          const vendorContactsPromises = selectedVendors.map(vendor =>
            getVendorContacts({
              page: 1,
              perPage: 100,
              flags: [],
              sort: [],
              filters: [],
              joinOperator: 'and',
              search: '',
              contactName: '',
              contactPosition: '',
              contactEmail: '',
              contactPhone: ''
            }, vendor.vendorId)
              .then(result => ({
                vendorId: vendor.vendorId,
                contacts: (result.data || []).map(contact => ({
                  id: contact.id,
                  contactName: contact.contactName,
                  contactEmail: contact.contactEmail,
                  contactPhone: contact.contactPhone,
                  contactPosition: contact.contactPosition,
                  contactDepartment: contact.contactDepartment
                }))
              }))
              .catch(() => ({
                vendorId: vendor.vendorId,
                contacts: []
              }))
          );

          const vendorContactsResults = await Promise.all(vendorContactsPromises);
          const vendorContactsMap = new Map(vendorContactsResults.map(result => [result.vendorId, result.contacts]));

          // vendorData 초기화 (담당자 정보 포함)
          const initialVendorData: VendorWithContactInfo[] = selectedVendors.map(vendor => {
            const hasExistingContract = typedContracts.some((ec) =>
              ec.vendorId === vendor.vendorId && ec.biddingCompanyId === vendor.biddingCompanyId
            );
            const vendorContacts = vendorContactsMap.get(vendor.vendorId) || [];

            // 주 수신자 기본값: 벤더의 기본 이메일 (vendorEmail)
            const defaultEmail = vendor.vendorEmail || (vendorContacts.length > 0 ? vendorContacts[0].contactEmail : '');
            console.log(defaultEmail, "defaultEmail");
            return {
              ...vendor,
              contacts: vendorContacts,
              selectedMainEmail: defaultEmail,
              additionalEmails: [],
              customEmails: [],
              hasExistingContracts: hasExistingContract
            };
          });

          setVendorData(initialVendorData);
        } catch (error) {
          console.error('초기 데이터 로드 실패:', error);
          toast({
            title: '오류',
            description: '기본 정보를 불러오는 데 실패했습니다.',
            variant: 'destructive',
          });
          setAvailableTemplates([]);
          setSelectedContracts([]);
          setVendorData([]);
        } finally {
          setIsLoadingTemplates(false);
        }
      }
      fetchInitialData();
    }
  }, [open, biddingId, selectedVendors, toast]);

  const handleOpenChange = (open: boolean) => {
    onOpenChange(open)
    if (!open) {
      setSelectedContracts([])
      setAdditionalMessage('')
      setIsGeneratingPdfs(false)
      setPdfGenerationProgress(0)
      setCurrentGeneratingContract('')
      setVendorData([])
    }
  }

  // 기본계약서 선택 토글
  const toggleContractSelection = (templateId: number) => {
    setSelectedContracts(prev =>
      prev.map(contract =>
        contract.templateId === templateId
          ? { ...contract, checked: !contract.checked }
          : contract
      )
    )
  }

  // 모든 기본계약서 선택/해제
  const toggleAllContractSelection = (checked: boolean | 'indeterminate') => {
    setSelectedContracts(prev =>
      prev.map(contract => ({ ...contract, checked: !!checked }))
    )
  }

  // PDF 생성 유틸리티 함수
  const generateBasicContractPdf = async (
    template: BasicContractTemplate,
    vendorId: number
  ): Promise<{ buffer: number[]; fileName: string }> => {
    try {
      // 1. 템플릿 데이터 준비 (서버 API 호출)
      const prepareResponse = await fetch("/api/contracts/prepare-template", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          templateName: template.templateName,
          vendorId,
        }),
      });

      if (!prepareResponse.ok) {
        throw new Error("템플릿 준비 실패");
      }

      const { template: preparedTemplate, templateData } = await prepareResponse.json();

      // 2. 템플릿 파일 다운로드
      const templateResponse = await fetch("/api/contracts/get-template", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ templatePath: preparedTemplate.filePath }),
      });

      const templateBlob = await templateResponse.blob();
      const templateFile = new window.File([templateBlob], "template.docx", {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });

      // 3. PDFTron WebViewer로 PDF 변환
      const { default: WebViewer } = await import("@pdftron/webviewer");

      const tempDiv = document.createElement('div');
      tempDiv.style.display = 'none';
      document.body.appendChild(tempDiv);

      try {
        const instance = await WebViewer(
          {
            path: "/pdftronWeb",
            licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
            fullAPI: true,
          },
          tempDiv
        );

        const { Core } = instance;
        const { createDocument } = Core;

        const templateDoc = await createDocument(templateFile, {
          filename: templateFile.name,
          extension: 'docx',
        });

        // 변수 치환 적용
        await templateDoc.applyTemplateValues(templateData);

        // PDF 변환
        const fileData = await templateDoc.getFileData();
        const pdfBuffer = await Core.officeToPDFBuffer(fileData, { extension: 'docx' });

        const fileName = `${template.templateName}_${Date.now()}.pdf`;

        return {
          buffer: Array.from(pdfBuffer), // Uint8Array를 일반 배열로 변환
          fileName
        };

      } finally {
        if (tempDiv.parentNode) {
          document.body.removeChild(tempDiv);
        }
      }
    } catch (error) {
      console.error(`기본계약 PDF 생성 실패 (${template.templateName}):`, error);
      throw error;
    }
  };

  const handleSendInvitation = () => {
    const selectedContractTemplates = selectedContracts.filter(c => c.checked);

    startTransition(async () => {
      try {
        let generatedPdfs: Array<{
          key: string
          buffer: number[]
          fileName: string
        }> = []

        const generatedPdfsMap = new Map<string, { buffer: number[], fileName: string }>()

        // 선택된 템플릿이 있는 경우에만 PDF 생성
        if (selectedContractTemplates.length > 0) {
          setIsGeneratingPdfs(true)
          setPdfGenerationProgress(0)

          let generatedCount = 0;
          for (const vendorWithContact of vendorData) {
            // 기존 계약이 있는 경우 건너뛰기
            if (vendorWithContact.hasExistingContracts) {
              console.log(`벤더 ${vendorWithContact.vendorName}는 사전견적에서 이미 기본계약을 받았으므로 건너뜁니다.`);
              generatedCount++;
              setPdfGenerationProgress((generatedCount / vendorData.length) * 100);
              continue;
            }

            for (const contract of selectedContractTemplates) {
              setCurrentGeneratingContract(`${vendorWithContact.vendorName} - ${contract.templateName}`);
              const templateDetails = availableTemplates.find(t => t.id === contract.templateId);

              if (templateDetails) {
                const pdfData = await generateBasicContractPdf(templateDetails, vendorWithContact.vendorId);
                // sendBiddingBasicContracts와 동일한 키 형식 사용
                let contractType = '';
                if (contract.templateName.includes('비밀')) {
                  contractType = 'NDA';
                } else if (contract.templateName.includes('General GTC')) {
                  contractType = 'General_GTC';
                } else if (contract.templateName.includes('기술') && !contract.templateName.includes('기술자료')) {
                  contractType = 'Project_GTC';
                } else if (contract.templateName.includes('기술자료')) {
                  contractType = '기술자료';
                }
                const key = `${vendorWithContact.vendorId}_${contractType}_${contract.templateName}`;
                generatedPdfsMap.set(key, pdfData);
              }
            }
            generatedCount++;
            setPdfGenerationProgress((generatedCount / vendorData.length) * 100);
          }

          setIsGeneratingPdfs(false);

          const pdfsArray = Array.from(generatedPdfsMap.entries()).map(([key, data]) => ({
            key,
            buffer: data.buffer,
            fileName: data.fileName,
          }));

          generatedPdfs = pdfsArray;
        }

        await onSend({
          vendors: vendorData,
          generatedPdfs: generatedPdfs,
          message: additionalMessage
        });

      } catch (error) {
        console.error('본입찰 초대 실패:', error);
        toast({
          title: '오류',
          description: '본입찰 초대 중 오류가 발생했습니다.',
          variant: 'destructive',
        });
        setIsGeneratingPdfs(false);
      }
    })
  }

  const selectedContractCount = selectedContracts.filter(c => c.checked).length;

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col" style={{ width: 900, maxWidth: 900 }}>
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Mail className="w-5 h-5" />
            본입찰 초대
          </DialogTitle>
          <DialogDescription>
            {biddingTitle} - 선정된 {selectedVendors.length}개 업체에 본입찰 초대와 기본계약서를 발송합니다.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto px-1" style={{ maxHeight: 'calc(70vh - 200px)' }}>
          <div className="space-y-6 pr-4">
            {/* 기존 계약 정보 */}
            {vendorsWithExistingContracts.length > 0 && (
              <Alert className="border-orange-500 bg-orange-50">
                <Info className="h-4 w-4 text-orange-600" />
                <AlertTitle className="text-orange-800">기존 계약 정보</AlertTitle>
                <AlertDescription className="text-orange-700">
                  사전견적에서 이미 기본계약을 받은 업체가 있습니다.
                  해당 업체들은 계약서 재생성을 건너뜁니다. (본입찰 초대는 정상 진행됩니다)
                </AlertDescription>
              </Alert>
            )}

            {/* 대상 업체 정보 - 테이블 형식 */}
            <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" />
                  초대 대상 업체 ({vendorData.length})
                </div>
                <Badge variant="outline" className="flex items-center gap-1">
                  <Users className="h-3 w-3" />
                  총 {totalRecipientCount}명
                </Badge>
              </div>

              {vendorData.length === 0 ? (
                <div className="text-center py-6 text-muted-foreground border rounded-lg">
                  초대 가능한 업체가 없습니다.
                </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>
                      {vendorData.map((vendor, index) => {
                        const allContacts = vendor.contacts || [];
                        const allEmails = [
                          // 벤더의 기본 이메일을 첫 번째로 표시
                          ...(vendor.vendorEmail ? [{
                            value: vendor.vendorEmail,
                            label: `${vendor.vendorEmail}`,
                            email: vendor.vendorEmail,
                            type: 'vendor' as const
                          }] : []),
                          // 담당자 이메일들
                          ...allContacts.map(c => ({
                            value: c.contactEmail,
                            label: `${c.contactName} ${c.contactPosition ? `(${c.contactPosition})` : ''}`,
                            email: c.contactEmail,
                            type: 'contact' as const
                          })),
                          // 커스텀 이메일들
                          ...vendor.customEmails.map(c => ({
                            value: c.email,
                            label: c.name || c.email,
                            email: c.email,
                            type: 'custom' as const
                          }))
                        ];

                        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 gap-1">
                                  <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>
                                </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 || vendor.vendorCode}
                                    </Badge>
                                  </div>
                                </div>
                              </td>
                              <td className="p-2">
                                <Select
                                  value={vendor.selectedMainEmail}
                                  onValueChange={(value) => updateVendor(vendor.vendorId, { selectedMainEmail: value })}
                                >
                                  <SelectTrigger className="h-7 text-xs w-[200px]">
                                    <SelectValue placeholder="선택하세요">
                                      {selectedMainEmailInfo && (
                                        <div className="flex items-center gap-1">
                                          {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 === '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">
                                  <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>
                                  {vendor.customEmails.length > 0 && (
                                    <Badge variant="secondary" 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 />

            {/* 기본계약서 선택 */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="flex items-center gap-2 text-base">
                  <FileText className="h-5 w-5 text-blue-600" />
                  기본계약 선택 (선택사항)
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* 템플릿 로딩 */}
                {isLoadingTemplates ? (
                  <div className="text-center py-6">
                    <RefreshCw className="h-6 w-6 animate-spin mx-auto mb-2 text-blue-600" />
                    <p className="text-sm text-muted-foreground">기본계약서 템플릿을 불러오는 중...</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {availableTemplates.length === 0 ? (
                      <div className="text-center py-8 text-muted-foreground">
                        <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
                        <p>사용 가능한 기본계약서 템플릿이 없습니다.</p>
                      </div>
                    ) : (
                      <>
                        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="select-all-contracts"
                              checked={selectedContracts.length > 0 && selectedContracts.every(c => c.checked)}
                              onCheckedChange={toggleAllContractSelection}
                            />
                            <Label htmlFor="select-all-contracts" className="font-medium">
                              전체 선택 ({availableTemplates.length}개 템플릿)
                            </Label>
                          </div>
                          <Badge variant="outline">
                            {selectedContractCount}개 선택됨
                          </Badge>
                        </div>
                        <div className="grid gap-3 max-h-60 overflow-y-auto">
                          {selectedContracts.map((contract) => (
                            <div
                              key={contract.templateId}
                              className={cn(
                                "flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer",
                                contract.checked && "border-blue-500 bg-blue-50"
                              )}
                              onClick={() => toggleContractSelection(contract.templateId)}
                            >
                              <div className="flex items-center gap-3">
                                <Checkbox
                                  id={`contract-${contract.templateId}`}
                                  checked={contract.checked}
                                  onCheckedChange={() => toggleContractSelection(contract.templateId)}
                                />
                                <div className="flex-1">
                                  <Label
                                    htmlFor={`contract-${contract.templateId}`}
                                    className="font-medium cursor-pointer"
                                  >
                                    {contract.templateName}
                                  </Label>
                                  <p className="text-xs text-muted-foreground mt-1">
                                    {contract.contractType}
                                  </p>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </>
                    )}

                    {/* 선택된 템플릿 요약 */}
                    {selectedContractCount > 0 && (
                      <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex items-center gap-2 mb-2">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <span className="font-medium text-green-900 text-sm">
                            선택된 기본계약서 ({selectedContractCount}개)
                          </span>
                        </div>
                        <ul className="space-y-1 text-xs text-green-800 list-disc list-inside">
                          {selectedContracts.filter(c => c.checked).map((contract) => (
                            <li key={contract.templateId}>
                              {contract.templateName}
                            </li>
                          ))}
                        </ul>
                      </div>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* 추가 메시지 */}
            <div className="space-y-2">
              <Label htmlFor="invitationMessage" className="text-sm font-medium">
                초대 메시지 (선택사항)
              </Label>
              <textarea
                id="invitationMessage"
                className="w-full min-h-[60px] 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>

            {/* PDF 생성 진행 상황 */}
            {isGeneratingPdfs && (
              <Alert className="border-blue-500 bg-blue-50">
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <RefreshCw className="h-4 w-4 animate-spin text-blue-600" />
                    <AlertTitle className="text-blue-800">기본계약서 생성 중</AlertTitle>
                  </div>
                  <AlertDescription>
                    <div className="space-y-2">
                      <p className="text-sm text-blue-700">{currentGeneratingContract}</p>
                      <Progress value={pdfGenerationProgress} className="h-2" />
                      <p className="text-xs text-blue-600">
                        {Math.round(pdfGenerationProgress)}% 완료
                      </p>
                    </div>
                  </AlertDescription>
                </div>
              </Alert>
            )}
          </div>
        </div>

        <DialogFooter className="flex-col sm:flex-row-reverse sm:justify-between items-center px-4 pt-4">
          <div className="flex gap-2 w-full sm:w-auto">
            <Button variant="outline" onClick={() => handleOpenChange(false)} className="w-full sm:w-auto">
              취소
            </Button>
            <Button
              onClick={handleSendInvitation}
              disabled={isPending || selectedVendors.length === 0 || isGeneratingPdfs}
              className="w-full sm:w-auto"
            >
              {isGeneratingPdfs ? (
                <>
                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                  입찰 초대중... ({Math.round(pdfGenerationProgress)}%)
                </>
              ) : isPending ? (
                <>
                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                  발송 중...
                </>
              ) : (
                <>
                  <Mail className="w-4 h-4 mr-2" />
                  본입찰 초대 발송
                </>
              )}
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}