path: root/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx

"use client"

import * as React from "react"
import { useState, useEffect, useCallback } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { toast } from "sonner"
import { Check, X, Search, Loader2, Star } from "lucide-react"
import { useSession } from "next-auth/react"

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { addTechVendorsToTechSalesRfq, getTechSalesRfqCandidateVendors, searchTechVendors } from "@/lib/techsales-rfq/service"

// 폼 유효성 검증 스키마 - 간단화
const vendorFormSchema = z.object({
  vendorIds: z.array(z.number()).min(1, "최소 하나의 벤더를 선택해주세요"),
})

type VendorFormValues = z.infer<typeof vendorFormSchema>

// 기술영업 RFQ 타입 정의
type TechSalesRfq = {
  id: number
  rfqCode: string | null
  rfqType: "SHIP" | "TOP" | "HULL" | null
  ptypeNm: string | null // 프로젝트 타입명 추가
  status: string
  [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
}

// 벤더 검색 결과 타입 (techVendor 기반)
type VendorSearchResult = {
  id: number
  vendorName: string
  vendorCode: string | null
  status: string
  country: string | null
  techVendorType?: string | null
  matchedItemCount?: number // 후보 벤더 정보
}

interface AddVendorDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedRfq: TechSalesRfq | null
  onSuccess?: () => void
  existingVendorIds?: number[]
}

export function AddVendorDialog({
  open,
  onOpenChange,
  selectedRfq,
  onSuccess,
  existingVendorIds = [],
}: AddVendorDialogProps) {
  const { data: session } = useSession()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [searchResults, setSearchResults] = useState<VendorSearchResult[]>([])
  const [candidateVendors, setCandidateVendors] = useState<VendorSearchResult[]>([])
  const [isSearching, setIsSearching] = useState(false)
  const [isLoadingCandidates, setIsLoadingCandidates] = useState(false)
  const [hasSearched, setHasSearched] = useState(false)
  const [hasCandidatesLoaded, setHasCandidatesLoaded] = useState(false)
  // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지
  const [selectedVendorData, setSelectedVendorData] = useState<VendorSearchResult[]>([])
  const [activeTab, setActiveTab] = useState("candidates")

  const form = useForm<VendorFormValues>({
    resolver: zodResolver(vendorFormSchema),
    defaultValues: {
      vendorIds: [],
    },
  })

  const selectedVendorIds = form.watch("vendorIds")

  // 후보 벤더 로드 함수
  const loadCandidateVendors = useCallback(async () => {
    if (!selectedRfq?.id) return

    setIsLoadingCandidates(true)
    try {
      const result = await getTechSalesRfqCandidateVendors(selectedRfq.id)
      if (result.error) {
        toast.error(result.error)
        setCandidateVendors([])
      } else {
        // 이미 추가된 벤더 제외
        const filteredCandidates = result.data?.filter(vendor => !existingVendorIds.includes(vendor.id)) || []
        setCandidateVendors(filteredCandidates)
      }
      setHasCandidatesLoaded(true)
    } catch (error) {
      console.error("후보 벤더 로드 오류:", error)
      toast.error("후보 벤더를 불러오는 중 오류가 발생했습니다")
      setCandidateVendors([])
    } finally {
      setIsLoadingCandidates(false)
    }
  }, [selectedRfq?.id, existingVendorIds])

  // 벤더 검색 함수 (techVendor 기반)
  const searchVendorsDebounced = useCallback(
    async (term: string) => {
      if (!term.trim()) {
        setSearchResults([])
        setHasSearched(false)
        return
      }

      setIsSearching(true)
      try {
        // 선택된 RFQ의 타입을 기반으로 벤더 검색
        const rfqType = selectedRfq?.rfqType || undefined;
        console.log("rfqType", rfqType) // 디버깅용
        const results = await searchTechVendors(term, 100, rfqType)
        
        // 이미 추가된 벤더 제외
        const filteredResults = results.filter((vendor: VendorSearchResult) => !existingVendorIds.includes(vendor.id))
        setSearchResults(filteredResults)
        setHasSearched(true)
      } catch (error) {
        console.error("벤더 검색 오류:", error)
        toast.error("벤더 검색 중 오류가 발생했습니다")
        setSearchResults([])
      } finally {
        setIsSearching(false)
      }
    },
    [existingVendorIds, selectedRfq?.rfqType]
  )

  // 검색어 변경 시 디바운스 적용
  useEffect(() => {
    const timer = setTimeout(() => {
      searchVendorsDebounced(searchTerm)
    }, 300)

    return () => clearTimeout(timer)
  }, [searchTerm, searchVendorsDebounced])

  // 다이얼로그 열릴 때 후보 벤더 로드
  useEffect(() => {
    if (open && selectedRfq?.id && !hasCandidatesLoaded) {
      loadCandidateVendors()
    }
  }, [open, selectedRfq?.id, hasCandidatesLoaded, loadCandidateVendors])

  // 벤더 선택/해제 핸들러
  const handleVendorToggle = (vendor: VendorSearchResult) => {
    const currentIds = form.getValues("vendorIds")
    const isSelected = currentIds.includes(vendor.id)
    
    if (isSelected) {
      // 선택 해제
      const newIds = currentIds.filter(id => id !== vendor.id)
      const newSelectedData = selectedVendorData.filter(v => v.id !== vendor.id)
      form.setValue("vendorIds", newIds, { shouldValidate: true })
      setSelectedVendorData(newSelectedData)
    } else {
      // 선택 추가
      const newIds = [...currentIds, vendor.id]
      const newSelectedData = [...selectedVendorData, vendor]
      form.setValue("vendorIds", newIds, { shouldValidate: true })
      setSelectedVendorData(newSelectedData)
    }
  }

  // 선택된 벤더 제거 핸들러
  const handleRemoveVendor = (vendorId: number) => {
    const currentIds = form.getValues("vendorIds")
    const newIds = currentIds.filter(id => id !== vendorId)
    const newSelectedData = selectedVendorData.filter(v => v.id !== vendorId)
    form.setValue("vendorIds", newIds, { shouldValidate: true })
    setSelectedVendorData(newSelectedData)
  }

  // 폼 제출 핸들러
  async function onSubmit(values: VendorFormValues) {
    if (!selectedRfq) {
      toast.error("선택된 RFQ가 없습니다")
      return
    }

    if (!session?.user?.id) {
      toast.error("로그인이 필요합니다")
      return
    }

    try {
      setIsSubmitting(true)

      // 새로운 서비스 함수 호출
      const result = await addTechVendorsToTechSalesRfq({
        rfqId: selectedRfq.id,
        vendorIds: values.vendorIds,
        createdBy: Number(session.user.id),
      })

      if (result.error) {
        toast.error(result.error)
      } else {
        const successCount = result.data?.length || 0
        toast.success(`${successCount}개의 벤더가 성공적으로 추가되었습니다`)
        
        onOpenChange(false)
        form.reset()
        setSearchTerm("")
        setSearchResults([])
        setCandidateVendors([])
        setHasSearched(false)
        setHasCandidatesLoaded(false)
        setSelectedVendorData([])
        onSuccess?.()
      }
    } catch (error) {
      console.error("벤더 추가 오류:", error)
      toast.error("벤더 추가 중 오류가 발생했습니다")
    } finally {
      setIsSubmitting(false)
    }
  }

  // 다이얼로그 닫기 시 폼 리셋
  React.useEffect(() => {
    if (!open) {
      form.reset()
      setSearchTerm("")
      setSearchResults([])
      setCandidateVendors([])
      setHasSearched(false)
      setHasCandidatesLoaded(false)
      setSelectedVendorData([])
      setActiveTab("candidates")
    }
  }, [open, form])

  // 벤더 목록 렌더링 함수
  const renderVendorList = (vendors: VendorSearchResult[], showMatchCount = false) => (
    <ScrollArea className="h-60 border rounded-md">
      <div className="p-2 space-y-1">
        {vendors.length > 0 ? (
          vendors.map((vendor, index) => (
            <div
              key={`${vendor.id}-${index}`} // 고유한 키 생성
              className={`flex items-center space-x-2 p-2 rounded-md cursor-pointer hover:bg-muted ${
                selectedVendorIds.includes(vendor.id) ? "bg-muted" : ""
              }`}
              onClick={() => handleVendorToggle(vendor)}
            >
              <div className="flex items-center space-x-2 flex-1">
                <Check
                  className={`h-4 w-4 ${
                    selectedVendorIds.includes(vendor.id)
                      ? "opacity-100"
                      : "opacity-0"
                  }`}
                />
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{vendor.vendorName}</span>
                    {showMatchCount && vendor.matchedItemCount && vendor.matchedItemCount > 0 && (
                      <Badge variant="secondary" className="text-xs flex items-center gap-1">
                        <Star className="h-3 w-3" />
                        {vendor.matchedItemCount}개 매칭
                      </Badge>
                    )}
                    {vendor.techVendorType && (
                      <Badge variant="outline" className="text-xs">
                        {vendor.techVendorType}
                      </Badge>
                    )}
                  </div>
                  <div className="text-sm text-muted-foreground">
                    {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`}
                  </div>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-8 text-muted-foreground">
            {showMatchCount ? "매칭되는 후보 벤더가 없습니다" : "검색 결과가 없습니다"}
          </div>
        )}
      </div>
    </ScrollArea>
  )

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[800px] max-h-[80vh] flex flex-col">
        {/* 헤더 */}
        <DialogHeader>
          <DialogTitle>벤더 추가</DialogTitle>
          <DialogDescription>
            {selectedRfq ? (
              <>
                <span className="font-medium">{selectedRfq.rfqCode}</span> RFQ에 벤더를 추가합니다.
              </>
            ) : (
              "RFQ에 벤더를 추가합니다."
            )}
          </DialogDescription>
        </DialogHeader>

        {/* 콘텐츠 */}
        <div className="flex-1 overflow-y-auto">
          <Form {...form}>
            <form id="vendor-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              {/* 탭 메뉴 */}
              <Tabs value={activeTab} onValueChange={setActiveTab}>
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="candidates">
                    후보 벤더 ({candidateVendors.length})
                  </TabsTrigger>
                  <TabsTrigger value="search">
                    벤더 검색
                  </TabsTrigger>
                </TabsList>

                {/* 후보 벤더 탭 */}
                <TabsContent value="candidates" className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <label className="text-sm font-medium">추천 후보 벤더</label>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          setHasCandidatesLoaded(false)
                          loadCandidateVendors()
                        }}
                        disabled={isLoadingCandidates}
                      >
                        {isLoadingCandidates ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          "새로고침"
                        )}
                      </Button>
                    </div>
                    
                    {isLoadingCandidates ? (
                      <div className="h-60 border rounded-md flex items-center justify-center">
                        <div className="flex items-center gap-2">
                          <Loader2 className="h-4 w-4 animate-spin" />
                          <span>후보 벤더를 불러오는 중...</span>
                        </div>
                      </div>
                    ) : (
                      renderVendorList(candidateVendors, true)
                    )}
                    
                    <div className="text-xs text-muted-foreground bg-blue-50 p-2 rounded">
                      💡 RFQ 아이템과 매칭되는 벤더들이 매칭 아이템 수가 많은 순으로 표시됩니다.
                    </div>
                  </div>
                </TabsContent>

                {/* 벤더 검색 탭 */}
                <TabsContent value="search" className="space-y-4">
                  {/* 벤더 검색 필드 */}
                  <div className="space-y-2">
                    <label className="text-sm font-medium">벤더 검색</label>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                      <Input
                        placeholder="벤더명 또는 벤더코드로 검색..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="pl-10"
                      />
                      {isSearching && (
                        <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
                      )}
                    </div>
                  </div>

                  {/* 검색 결과 */}
                  {hasSearched ? (
                    <div className="space-y-2">
                      <div className="text-sm font-medium">
                        검색 결과 ({searchResults.length}개)
                      </div>
                      {renderVendorList(searchResults)}
                    </div>
                  ) : (
                    <div className="text-center py-8 text-muted-foreground border rounded-md">
                      벤더명 또는 벤더코드를 입력하여 검색해주세요
                    </div>
                  )}
                </TabsContent>
              </Tabs>

              {/* 선택된 벤더 목록 - 하단에 항상 표시 */}
              <FormField
                control={form.control}
                name="vendorIds"
                render={() => (
                  <FormItem>
                    <div className="space-y-2">
                      <FormLabel>선택된 벤더 ({selectedVendorData.length}개)</FormLabel>
                      <div className="min-h-[60px] p-3 border rounded-md bg-muted/50">
                        {selectedVendorData.length > 0 ? (
                          <div className="flex flex-wrap gap-2">
                            {selectedVendorData.map((vendor) => (
                              <Badge
                                key={vendor.id}
                                variant="secondary"
                                className="flex items-center gap-1"
                              >
                                {vendor.vendorName} ({vendor.vendorCode || 'N/A'})
                                <X
                                  className="h-3 w-3 cursor-pointer hover:text-destructive"
                                  onClick={() => handleRemoveVendor(vendor.id)}
                                />
                              </Badge>
                            ))}
                          </div>
                        ) : (
                          <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
                            선택된 벤더가 없습니다
                          </div>
                        )}
                      </div>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 안내 메시지
              <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md">
                <p>• 후보 벤더는 RFQ 아이템 코드와 매칭되는 기술영업 벤더들입니다.</p>
                <p>• 선택된 벤더들은 Draft 상태로 추가됩니다.</p>
                <p>• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.</p>
              </div> */}
            </form>
          </Form>
        </div>

        {/* 푸터 */}
        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isSubmitting}
          >
            취소
          </Button>
          <Button
            type="submit"
            form="vendor-form"
            disabled={isSubmitting || selectedVendorIds.length === 0}
          >
            {isSubmitting ? "처리 중..." : `${selectedVendorIds.length}개 벤더 추가`}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}