"use client"

import * as React from "react"
import { ClientDataTable } from "@/components/client-data-table/data-table"
import { DataTableRowAction, 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()
  const [rowAction, setRowAction] =
    React.useState<DataTableRowAction<VendorData> | null>(null)
  
  // Changed to array for multiple selection
  const [selectedVendorIds, setSelectedVendorIds] = React.useState<number[]>([])
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  
  const columns = React.useMemo(
    () => getColumns({ setRowAction, setSelectedVendorIds }),
    [setRowAction, setSelectedVendorIds]
  )
  
  const [vendors, setVendors] = React.useState<VendorData[]>([])
  const [isLoading, setIsLoading] = React.useState(false)
  
  React.useEffect(() => {
    async function loadAllVendors() {
      setIsLoading(true)
      try {
        const allVendors = await getAllVendors()
        setVendors(allVendors)
      } catch (error) {
        console.error("협력업체 목록 로드 오류:", error)
        toast({
          title: "Error",
          description: "Failed to load vendors",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    loadAllVendors()
  }, [toast])
  
  const advancedFilterFields: DataTableAdvancedFilterField<VendorData>[] = []
  
  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) {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }
  
  // Otherwise, show the table
  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>
  )
}