"use client"

import * as React from "react"
import { ClientDataTable } from "@/components/client-data-table/data-table"
import { getColumns } from "./vendor-list-table-column"
import { DataTableAdvancedFilterField } from "@/types/table"
import { addItemToVendors, getAllVendors } from "../../service"
import { Loader2, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"

export interface VendorData {
  id: number
  vendorName: string
  vendorCode: string | null
  taxId: string
  address: string | null
  country: string | null
  phone: string | null
  email: string | null
  website: string | null
  status: string
  createdAt: Date
  updatedAt: Date
}

interface VendorsListTableProps {
  rfqId: number
}

export function VendorsListTable({ rfqId }: VendorsListTableProps) {
  const { toast } = useToast()
  
  // Changed to array for multiple selection
  const [selectedVendorIds, setSelectedVendorIds] = React.useState<number[]>([])
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  
  const [vendors, setVendors] = React.useState<VendorData[]>([])
  const [isLoading, setIsLoading] = React.useState(false)
  
  const columns = React.useMemo(
    () => getColumns({ setSelectedVendorIds }),
    [setSelectedVendorIds]
  )
  
  // 고급 필터 필드 정의
  const advancedFilterFields: DataTableAdvancedFilterField<VendorData>[] = [
    {
      id: "vendorName",
      label: "Vendor Name",
      type: "text",
    },
    {
      id: "vendorCode", 
      label: "Vendor Code",
      type: "text",
    },
    {
      id: "status",
      label: "Status",
      type: "select",
      options: [
        { label: "Active", value: "ACTIVE" },
        { label: "Inactive", value: "INACTIVE" },
        { label: "Pending", value: "PENDING" },
      ],
    },
    {
      id: "country",
      label: "Country",
      type: "text",
    },
    {
      id: "email",
      label: "Email",
      type: "text",
    },
  ]

  // 초기 데이터 로드
  React.useEffect(() => {
    async function loadVendors() {
      setIsLoading(true)
      try {
        const result = await getAllVendors()
        
        if (result.data) {
          setVendors(result.data)
        }
      } catch (error) {
        console.error("협력업체 목록 로드 오류:", error)
        toast({
          title: "Error",
          description: "Failed to load vendors",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    
    loadVendors()
  }, [toast])
  
  async function handleAddVendors() {
    if (selectedVendorIds.length === 0) return // Safety check
    
    setIsSubmitting(true)
    try {
      // Update to use the multiple vendor service
      const result = await addItemToVendors(rfqId, selectedVendorIds)
      
      if (result.success) {
        toast({
          title: "Success",
          description: `Added items to ${selectedVendorIds.length} vendors`,
        })
        // Reset selection after successful addition
        setSelectedVendorIds([])
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to add items to vendors",
          variant: "destructive",
        })
      }
    } catch (err) {
      console.error("Failed to add vendors:", err)
      toast({
        title: "Error",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  // If loading, show a flex container that fills the parent and centers the spinner
  if (isLoading && vendors.length === 0) {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }
  
  return (
    <ClientDataTable
      data={vendors}
      columns={columns}
      advancedFilterFields={advancedFilterFields}
    >
      <div className="flex items-center gap-2">
        <Button 
          variant="default" 
          size="sm"
          onClick={handleAddVendors}
          disabled={selectedVendorIds.length === 0 || isSubmitting}
        >
          {isSubmitting ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Adding...
            </>
          ) : (
            <>
              <Plus className="mr-2 h-4 w-4" />
              Add Vendors ({selectedVendorIds.length})
            </>
          )}
        </Button>
      </div>
    </ClientDataTable>
  )
}