"use client"

import * as React from "react"
import { type Row } from "@tanstack/react-table"
import { Loader, SendHorizonal, Search, X, Plus, Router } from "lucide-react"
import { toast } from "sonner"
import { useMediaQuery } from "@/hooks/use-media-query"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Vendor } from "@/db/schema/vendors"
import { requestBasicContractInfo, requestPQVendors } from "../service"
import { getProjectsWithPQList } from "@/lib/pq/service"
import type { Project } from "@/lib/pq/service"
import { useSession } from "next-auth/react"
import { DatePicker } from "@/components/ui/date-picker"
import { getALLBasicContractTemplates } from "@/lib/basic-contract/service"
import type { BasicContractTemplate } from "@/db/schema"
import { searchItemsForPQ } from "@/lib/items/service"
import { saveNdaAttachments } from "../service"
import { useRouter } from "next/navigation"
// import { PQContractViewer } from "../pq-contract-viewer" // 더 이상 사용하지 않음

interface RequestPQDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {
  vendors: Row<Vendor>["original"][]
  showTrigger?: boolean
  onSuccess?: () => void
}

// const AGREEMENT_LIST = [
//   "준법서약",
//   "표준하도급계약",
//   "안전보건관리계약",
//   "윤리규범 준수 서약",
//   "동반성장협약",
//   "내국신용장 미개설 합의",
//   "기술자료 제출 기본 동의",
//   "GTC 합의",
// ]

// PQ 대상 품목 타입 정의
interface PQItem {
  itemCode: string
  itemName: string
}

export function RequestPQDialog({ vendors, showTrigger = true, onSuccess, ...props }: RequestPQDialogProps) {
  const [isApprovePending, startApproveTransition] = React.useTransition()
  const isDesktop = useMediaQuery("(min-width: 640px)")
  const { data: session } = useSession()
  const router = useRouter()
  const [type, setType] = React.useState<"GENERAL" | "PROJECT" | "NON_INSPECTION" | null>(null)
  const [dueDate, setDueDate] = React.useState<string | null>(null)
  const [projects, setProjects] = React.useState<Project[]>([])
  const [selectedProjectId, setSelectedProjectId] = React.useState<number | null>(null)
  const [agreements, setAgreements] = React.useState<Record<string, boolean>>({})
  const [extraNote, setExtraNote] = React.useState<string>("")
  const [pqItems, setPqItems] = React.useState<PQItem[]>([])
  
  // 아이템 검색 관련 상태
  const [itemSearchQuery, setItemSearchQuery] = React.useState<string>("")
  const [filteredItems, setFilteredItems] = React.useState<PQItem[]>([])
  const [showItemDropdown, setShowItemDropdown] = React.useState<boolean>(false)
  const [isLoadingProjects, setIsLoadingProjects] = React.useState(false)
  const [basicContractTemplates, setBasicContractTemplates] = React.useState<BasicContractTemplate[]>([])
  const [selectedTemplateIds, setSelectedTemplateIds] = React.useState<number[]>([])
  const [isLoadingTemplates, setIsLoadingTemplates] = React.useState(false)
  
  // 비밀유지 계약서 첨부파일 관련 상태
  const [ndaAttachments, setNdaAttachments] = React.useState<File[]>([])
  const [isUploadingNdaFiles, setIsUploadingNdaFiles] = React.useState(false)

  // 아이템 검색 필터링
  React.useEffect(() => {
    if (itemSearchQuery.trim() === "") {
      setFilteredItems([])
      setShowItemDropdown(false)
      return
    }

    const searchItems = async () => {
      try {
        const results = await searchItemsForPQ(itemSearchQuery)
        setFilteredItems(results)
        setShowItemDropdown(true)
      } catch (error) {
        console.error("아이템 검색 오류:", error)
        toast.error("아이템 검색 중 오류가 발생했습니다.")
        setFilteredItems([])
        setShowItemDropdown(false)
      }
    }

    // 디바운싱: 300ms 후에 검색 실행
    const timeoutId = setTimeout(searchItems, 300)
    return () => clearTimeout(timeoutId)
  }, [itemSearchQuery])

  React.useEffect(() => {
    if (type === "PROJECT") {
      setIsLoadingProjects(true)
      getProjectsWithPQList().then(setProjects).catch(() => toast.error("프로젝트 로딩 실패"))
        .finally(() => setIsLoadingProjects(false))
    }
  }, [type])

  // 기본계약서 템플릿 로딩 및 자동 선택
  React.useEffect(() => {
    setIsLoadingTemplates(true)
    getALLBasicContractTemplates()
      .then((templates) => {
        setBasicContractTemplates(templates)
        
        // 벤더 국가별 자동 선택 로직
        if (vendors.length > 0) {
          const isAllForeign = vendors.every(vendor => vendor.country !== 'KR')
          const isAllDomestic = vendors.every(vendor => vendor.country === 'KR')
          
          if (isAllForeign) {
            // 외자: 준법서약 (영문), GTC만 선택
            const foreignTemplates = templates.filter(template => 
              template.templateName?.includes('준법서약') && template.templateName?.includes('영문') ||
              template.templateName?.includes('GTC')
            )
            setSelectedTemplateIds(foreignTemplates.map(t => t.id))
          } else if (isAllDomestic) {
            // 내자: 준법서약 (영문), GTC 제외한 모든 템플릿 선택
            const domesticTemplates = templates.filter(template => {
              const name = template.templateName?.toLowerCase() || ''
              return !(name.includes('준법서약') && name.includes('영문')) && !name.includes('gtc')
            })
            setSelectedTemplateIds(domesticTemplates.map(t => t.id))
          }
        }
      })
      .catch(() => toast.error("기본계약서 템플릿 로딩 실패"))
      .finally(() => setIsLoadingTemplates(false))
  }, [vendors])

  React.useEffect(() => {
    if (!props.open) {
      setType(null)
      setSelectedProjectId(null)
      setAgreements({})
      setDueDate(null)
      setPqItems([])
      setExtraNote("")
      setSelectedTemplateIds([])
      setItemSearchQuery("")
      setFilteredItems([])
      setShowItemDropdown(false)
      setNdaAttachments([])
      setIsUploadingNdaFiles(false)
    }
  }, [props.open])

  // 아이템 선택 함수
  const handleSelectItem = (item: PQItem) => {
    // 이미 선택된 아이템인지 확인
    const isAlreadySelected = pqItems.some(selectedItem => 
      selectedItem.itemCode === item.itemCode
    )
    
    if (!isAlreadySelected) {
      setPqItems(prev => [...prev, item])
    }
    
    // 검색 초기화
    setItemSearchQuery("")
    setFilteredItems([])
    setShowItemDropdown(false)
  }

  // 아이템 제거 함수
  const handleRemoveItem = (itemCode: string) => {
    setPqItems(prev => prev.filter(item => item.itemCode !== itemCode))
  }

  // 비밀유지 계약서 첨부파일 추가 함수
  const handleAddNdaAttachment = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files
    if (files) {
      const newFiles = Array.from(files)
      setNdaAttachments(prev => [...prev, ...newFiles])
    }
    // input 초기화
    event.target.value = ''
  }

  // 비밀유지 계약서 첨부파일 제거 함수
  const handleRemoveNdaAttachment = (fileIndex: number) => {
    setNdaAttachments(prev => prev.filter((_, index) => index !== fileIndex))
  }

  // 비밀유지 계약서가 선택되었는지 확인하는 함수
  const isNdaTemplateSelected = () => {
    return basicContractTemplates.some(template => 
      selectedTemplateIds.includes(template.id) && 
      template.templateName?.includes("비밀유지")
    )
  }

  const onApprove = () => {
    if (!type) return toast.error("PQ 유형을 선택하세요.")
    if (type === "PROJECT" && !selectedProjectId) return toast.error("프로젝트를 선택하세요.")
    if (!dueDate) return toast.error("마감일을 선택하세요.")
    if (!session?.user?.id) return toast.error("인증 실패")
  
    startApproveTransition(async () => {
      try {
        // 1단계: PQ 생성
        console.log("🚀 PQ 생성 시작")
        const { error: pqError } = await requestPQVendors({
          ids: vendors.map((v) => v.id),
          userId: Number(session.user.id),
          agreements,
          dueDate,
          projectId: type === "PROJECT" ? selectedProjectId : null,
          type: type || "GENERAL",
          extraNote,
          pqItems: JSON.stringify(pqItems),
          templateId: selectedTemplateIds.length > 0 ? selectedTemplateIds[0] : null,
        })

        if (pqError) {
          toast.error(`PQ 생성 실패: ${pqError}`)
          return
        }
        console.log("✅ PQ 생성 완료")
        toast.success("PQ가 성공적으로 요청되었습니다")

        // 2단계: 기본계약서 템플릿이 선택된 경우 백그라운드에서 처리
        if (selectedTemplateIds.length > 0) {
          const templates = basicContractTemplates.filter(t => 
            selectedTemplateIds.includes(t.id)
          )
          
          console.log("📋 기본계약서 백그라운드 처리 시작", templates.length, "개 템플릿")
          await processBasicContractsInBackground(templates, vendors)
        }

        // 3단계: 비밀유지 계약서 첨부파일이 있는 경우 저장
        if (isNdaTemplateSelected() && ndaAttachments.length > 0) {
          console.log("📎 비밀유지 계약서 첨부파일 처리 시작", ndaAttachments.length, "개 파일")
          
          const ndaResult = await saveNdaAttachments({
            vendorIds: vendors.map((v) => v.id),
            files: ndaAttachments,
            userId: session.user.id.toString()
          })

          if (ndaResult.success) {
            toast.success(`비밀유지 계약서 첨부파일이 모두 저장되었습니다 (${ndaResult.summary?.success}/${ndaResult.summary?.total})`)
          } else {
            toast.error(`첨부파일 처리 중 일부 오류가 발생했습니다: ${ndaResult.error}`)
          }
        }
        
        // 완료 후 다이얼로그 닫기
        props.onOpenChange?.(false)
        onSuccess?.()

      } catch (error) {
        console.error('PQ 생성 오류:', error)
        toast.error(`처리 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`)
      }
    })
  }

  // 백그라운드에서 기본계약서 처리
  const processBasicContractsInBackground = async (templates: BasicContractTemplate[], vendors: any[]) => {
    if (!session?.user?.id) {
      toast.error("인증 정보가 없습니다")
      return
    }

    try {
      const totalContracts = templates.length * vendors.length
      let processedCount = 0

      // 각 벤더별로, 각 템플릿을 처리
      for (let vendorIndex = 0; vendorIndex < vendors.length; vendorIndex++) {
        const vendor = vendors[vendorIndex]
        
        // 벤더별 템플릿 데이터 생성 (한글 변수명 사용)
        const templateData = {
          company_name: vendor.vendorName || '협력업체명',
          company_address: vendor.address || '주소',
          representative_name: vendor.representativeName || '대표자명',
          signature_date: new Date().toLocaleDateString('ko-KR'),
          tax_id: vendor.taxId || '사업자번호',
          phone_number: vendor.phone || '전화번호',
        }

        console.log(`🔄 벤더 ${vendorIndex + 1}/${vendors.length} 템플릿 데이터:`, templateData)

        // 해당 벤더에 대해 각 템플릿을 순차적으로 처리
        for (let templateIndex = 0; templateIndex < templates.length; templateIndex++) {
          const template = templates[templateIndex]
          processedCount++
          
          console.log(`📄 처리 중: ${vendor.vendorName} - ${template.templateName} (${processedCount}/${totalContracts})`)
          
          // 개별 벤더에 대한 기본계약 생성
          await processTemplate(template, templateData, [vendor])
          
          console.log(`✅ 완료: ${vendor.vendorName} - ${template.templateName}`)
        }
      }

      toast.success(`총 ${totalContracts}개 기본계약이 모두 생성되었습니다`)
      router.refresh();

    } catch (error) {
      console.error('기본계약 처리 중 오류:', error)
      toast.error(`기본계약 처리 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`)
    }
  }

  const processTemplate = async (template: BasicContractTemplate, templateData: any, vendors: any[]) => {
    try {
      // 1. 템플릿 파일 가져오기
      const templateResponse = await fetch('/api/basic-contract/get-template', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ templateId: template.id })
      })

      if (!templateResponse.ok) {
        throw new Error(`템플릿 파일을 가져올 수 없습니다: ${template.templateName}`)
      }

      const templateBlob = await templateResponse.blob()

      // 2. PDFTron을 사용해서 변수 치환 및 PDF 변환
      // @ts-ignore
      const WebViewer = await import("@pdftron/webviewer").then(({ default: WebViewer }) => WebViewer)
      
      // 임시 WebViewer 인스턴스 생성 (DOM에 추가하지 않음)
      const tempDiv = document.createElement('div')
      tempDiv.style.display = 'none'
      document.body.appendChild(tempDiv)

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

      try {
        const { Core } = instance
        const { createDocument } = Core

        // 3. 템플릿 문서 생성 및 변수 치환
        const templateDoc = await createDocument(templateBlob, {
          filename: template.fileName || 'template.docx',
          extension: 'docx',
        })

        console.log("🔄 변수 치환 시작:", templateData)
        await templateDoc.applyTemplateValues(templateData)
        console.log("✅ 변수 치환 완료")

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

        console.log(`✅ PDF 변환 완료: ${template.templateName}`, `크기: ${pdfBuffer.byteLength} bytes`)

        // 5. 기본계약 생성 요청
        const { error: contractError } = await requestBasicContractInfo({
          vendorIds: vendors.map((v) => v.id),
          requestedBy: Number(session!.user.id),
          templateId: template.id,
          pdfBuffer: new Uint8Array(pdfBuffer),
        })

        if (contractError) {
          throw new Error(contractError)
        }

        console.log(`✅ 기본계약 생성 완료: ${template.templateName}`)

      } finally {
        // 임시 WebViewer 정리
        instance.UI.dispose()
        document.body.removeChild(tempDiv)
      }

    } catch (error) {
      console.error(`❌ 템플릿 처리 실패: ${template.templateName}`, error)
      throw error
    }
  }

  const dialogContent = (
    <div className="space-y-4 py-2">
      {/* 선택된 협력업체 정보 */}
      <div className="space-y-2">
        <Label>선택된 협력업체 ({vendors.length}개)</Label>
        <div className="max-h-40 overflow-y-auto border rounded-md p-3 space-y-2">
          {vendors.map((vendor) => (
            <div key={vendor.id} className="flex items-center justify-between text-sm">
              <div className="flex-1">
                <div className="font-medium">{vendor.vendorName}</div>
                <div className="text-muted-foreground">
                  {vendor.vendorCode} • {vendor.email || "이메일 없음"}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="type">PQ 종류 선택</Label>
        <Select onValueChange={(val: "GENERAL" | "PROJECT" | "NON_INSPECTION") => setType(val)} value={type ?? undefined}>
          <SelectTrigger id="type"><SelectValue placeholder="PQ 종류를 선택하세요" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="GENERAL">일반 PQ</SelectItem>
            <SelectItem value="PROJECT">프로젝트 PQ</SelectItem>
            <SelectItem value="NON_INSPECTION">미실사 PQ</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {type === "PROJECT" && (
        <div className="space-y-2">
          <Label htmlFor="project">프로젝트 선택</Label>
          <Select onValueChange={(val) => setSelectedProjectId(Number(val))}>
            <SelectTrigger id="project">
              <SelectValue placeholder="프로젝트 선택" />
            </SelectTrigger>
            <SelectContent>
              {isLoadingProjects ? (
                <SelectItem value="loading" disabled>로딩 중...</SelectItem>
              ) : projects.map((p) => (
                <SelectItem key={p.id} value={p.id.toString()}>{p.projectCode} - {p.projectName}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

      {/* 마감일 입력 */}
      <div className="space-y-2">
        <Label htmlFor="dueDate">PQ 제출 마감일</Label>
        <DatePicker
          date={dueDate ? new Date(dueDate) : undefined}
          onSelect={(date?: Date) => {
            if (date) {
              // 한국 시간대로 날짜 변환 (UTC 변환으로 인한 날짜 변경 방지)
              const kstDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
              setDueDate(kstDate.toISOString().slice(0, 10))
            } else {
              setDueDate("")
            }
          }}
          placeholder="마감일 선택"
        />
      </div>

      {/* PQ 대상품목 */}
      <div className="space-y-2">
        <Label>PQ 대상품목</Label>
        
        {/* 선택된 아이템들 표시 */}
        {pqItems.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-2">
            {pqItems.map((item) => (
              <Badge key={item.itemCode} variant="secondary" className="flex items-center gap-1">
                <span className="text-xs">
                  {item.itemCode} - {item.itemName}
                </span>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-4 w-4 p-0 hover:bg-destructive hover:text-destructive-foreground"
                  onClick={() => handleRemoveItem(item.itemCode)}
                >
                  <X className="h-3 w-3" />
                </Button>
              </Badge>
            ))}
          </div>
        )}
        
        {/* 검색 입력 */}
        <div className="relative">
          <div className="relative">
            <Input
              placeholder="아이템 코드 또는 이름으로 검색하세요"
              value={itemSearchQuery}
              onChange={(e) => setItemSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          
          {/* 검색 결과 드롭다운 */}
          {showItemDropdown && (
            <div className="absolute top-full left-0 right-0 z-50 mt-1 max-h-48 overflow-y-auto bg-background border rounded-md shadow-lg">
              {filteredItems.length > 0 ? (
                filteredItems.map((item) => (
                  <button
                    key={item.itemCode}
                    type="button"
                    className="w-full px-3 py-2 text-left text-sm hover:bg-muted focus:bg-muted focus:outline-none"
                    onClick={() => handleSelectItem(item)}
                  >
                    <div className="font-medium">{item.itemCode}</div>
                    <div className="text-muted-foreground text-xs">{item.itemName}</div>
                  </button>
                ))
              ) : (
                <div className="px-3 py-2 text-sm text-muted-foreground">
                  검색 결과가 없습니다.
                </div>
              )}
            </div>
          )}
        </div>
        
        <div className="text-xs text-muted-foreground">
          아이템 코드나 이름을 입력하여 검색하고 선택하세요. (선택사항)
        </div>
      </div>

      {/* 추가 안내사항 */}
      <div className="space-y-2">
        <Label htmlFor="extraNote">추가 안내사항</Label>
        <textarea
          id="extraNote"
          value={extraNote}
          onChange={(e) => setExtraNote(e.target.value)}
          placeholder="추가 안내사항을 입력하세요 (선택사항)"
          className="w-full rounded-md border px-3 py-2 text-sm min-h-20 resize-none"
        />
      </div>

      {/* 기본계약서 템플릿 선택 (다중 선택) */}
      <div className="space-y-2">
        <Label>기본계약서 템플릿 (선택사항, 복수 선택 가능)</Label>
        {isLoadingTemplates ? (
          <div className="text-sm text-muted-foreground">템플릿 로딩 중...</div>
        ) : (
          <div className="space-y-2 max-h-40 overflow-y-auto border rounded-md p-3">
            {basicContractTemplates.map((template) => (
              <div key={template.id} className="flex items-center gap-2">
                <Checkbox
                  id={`template-${template.id}`}
                  checked={selectedTemplateIds.includes(template.id)}
                  onCheckedChange={(checked) => {
                    if (checked) {
                      setSelectedTemplateIds(prev => [...prev, template.id])
                    } else {
                      setSelectedTemplateIds(prev => prev.filter(id => id !== template.id))
                    }
                  }}
                />
                <Label htmlFor={`template-${template.id}`} className="text-sm">
                  {template.templateName}
                </Label>
              </div>
            ))}
            {basicContractTemplates.length === 0 && (
              <div className="text-sm text-muted-foreground">사용 가능한 템플릿이 없습니다.</div>
            )}
          </div>
        )}
        {selectedTemplateIds.length > 0 && (
          <div className="text-xs text-muted-foreground">
            {selectedTemplateIds.length}개 템플릿이 선택되었습니다.
            {vendors.length > 0 && vendors.every(v => v.country !== 'KR') && 
              " (외자 벤더 - 자동 선택됨)"}
            {vendors.length > 0 && vendors.every(v => v.country === 'KR') && 
              " (내자 벤더 - 자동 선택됨)"}
          </div>
        )}
      </div>

      {/* 비밀유지 계약서 첨부파일 */}
      {isNdaTemplateSelected() && (
        <div className="space-y-2">
          <Label>비밀유지 계약서 첨부파일</Label>
          
          {/* 선택된 파일들 표시 */}
          {ndaAttachments.length > 0 && (
            <div className="space-y-2">
              <div className="text-sm text-muted-foreground">
                선택된 파일 ({ndaAttachments.length}개)
              </div>
              <div className="space-y-1 max-h-32 overflow-y-auto border rounded-md p-2">
                {ndaAttachments.map((file, index) => (
                  <div key={index} className="flex items-center justify-between text-sm bg-muted/50 rounded px-2 py-1">
                    <div className="flex-1 truncate">
                      <span className="font-medium">{file.name}</span>
                      <span className="text-muted-foreground ml-2">
                        ({(file.size / 1024 / 1024).toFixed(2)} MB)
                      </span>
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="h-6 w-6 p-0 hover:bg-destructive hover:text-destructive-foreground"
                      onClick={() => handleRemoveNdaAttachment(index)}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          )}
          
          {/* 파일 선택 버튼 */}
          <div className="flex items-center gap-2">
            <input
              type="file"
              multiple
              accept=".pdf,.doc,.docx,.xlsx,.xls,.png,.jpg,.jpeg"
              onChange={handleAddNdaAttachment}
              className="hidden"
              id="nda-file-input"
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="gap-2"
              onClick={() => document.getElementById('nda-file-input')?.click()}
              disabled={isUploadingNdaFiles}
            >
              <Plus className="h-4 w-4" />
              파일 추가
            </Button>
            {isUploadingNdaFiles && (
              <div className="text-sm text-muted-foreground">
                파일 업로드 중...
              </div>
            )}
          </div>
          
          <div className="text-xs text-muted-foreground">
            비밀유지 계약서와 관련된 첨부파일을 업로드하세요. 
            각 벤더별로 동일한 파일이 저장됩니다.
          </div>
        </div>
      )}

      {/* <div className="space-y-2">
        <Label>계약 항목 선택</Label>
        {AGREEMENT_LIST.map((label) => (
          <div key={label} className="flex items-center gap-2">
            <Checkbox
              id={label}
              checked={agreements[label] || false}
              onCheckedChange={(val) =>
                setAgreements((prev) => ({ ...prev, [label]: Boolean(val) }))
              }
            />
            <Label htmlFor={label}>{label}</Label>
          </div>
        ))}
      </div> */}
    </div>
  )

  if (isDesktop) {
    return (
      <Dialog {...props}>
        {showTrigger && (
          <DialogTrigger asChild>
            <Button variant="outline" size="sm" className="gap-2">
              <SendHorizonal className="size-4" /> PQ 요청 ({vendors.length})
            </Button>
          </DialogTrigger>
        )}
        <DialogContent className="max-h-[80vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>PQ 요청</DialogTitle>
            <DialogDescription>
              <span className="font-medium">{vendors.length}</span>
              {vendors.length === 1 ? "개 협력업체" : "개 협력업체들"}에게 PQ를 요청합니다.
            </DialogDescription>
          </DialogHeader>
          <div className="flex-1 overflow-y-auto">
            {dialogContent}
          </div>
          <DialogFooter>
            <DialogClose asChild><Button variant="outline">취소</Button></DialogClose>
            <Button onClick={onApprove} disabled={isApprovePending || !type || (type === "PROJECT" && !selectedProjectId)}>
              {isApprovePending && <Loader className="mr-2 size-4 animate-spin" />}요청하기
            </Button>
          </DialogFooter>
        </DialogContent>


      </Dialog>
    )
  }

  return (
    <Drawer {...props}>
      {showTrigger && (
        <DrawerTrigger asChild>
          <Button variant="outline" size="sm" className="gap-2">
            <SendHorizonal className="size-4" /> PQ 요청 ({vendors.length})
          </Button>
        </DrawerTrigger>
      )}
      <DrawerContent className="max-h-[80vh] flex flex-col">
        <DrawerHeader>
          <DrawerTitle>PQ 요청</DrawerTitle>
          <DrawerDescription>
            <span className="font-medium">{vendors.length}</span>
            {vendors.length === 1 ? "개 협력업체" : "개 협력업체들"}에게 PQ를 요청합니다.
          </DrawerDescription>
        </DrawerHeader>
        <div className="flex-1 overflow-y-auto px-4">
          {dialogContent}
        </div>
        <DrawerFooter>
          <DrawerClose asChild><Button variant="outline">취소</Button></DrawerClose>
          <Button onClick={onApprove} disabled={isApprovePending || !type || (type === "PROJECT" && !selectedProjectId)}>
            {isApprovePending && <Loader className="mr-2 size-4 animate-spin" />}요청하기
          </Button>
        </DrawerFooter>
      </DrawerContent>


    </Drawer>
  )
}