"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig"
import { VendorContactsTable } from "../tbe-table/vendor-contact/vendor-contact-table"

interface VendorContactsDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  vendorId: number | null
  vendor: VendorWithCbeFields | null
}

export function VendorContactsDialog({
  isOpen,
  onOpenChange,
  vendorId,
  vendor,
}: VendorContactsDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[90wv] sm:max-h-[80vh] overflow-auto" style={{maxWidth:1000, height:480}}>
        <DialogHeader>
          <div className="flex flex-col space-y-2">
            <DialogTitle>협력업체 연락처</DialogTitle>
            {vendor && (
              <div className="flex flex-col space-y-1 mt-2">
                <div className="text-sm text-muted-foreground">
                  <span className="font-medium text-foreground">{vendor.vendorName}</span>
                  {vendor.vendorCode && (
                    <span className="ml-2 text-xs text-muted-foreground">({vendor.vendorCode})</span>
                  )}
                </div>
                <div className="flex items-center">
                  {vendor.vendorStatus && (
                    <Badge variant="outline" className="mr-2">
                      {vendor.vendorStatus}
                    </Badge>
                  )}
                  {vendor.commercialResponseStatus && (
                    <Badge 
                      variant={
                        vendor.commercialResponseStatus === "INVITED" ? "default" : 
                        vendor.commercialResponseStatus === "DECLINED" ? "destructive" : 
                        vendor.commercialResponseStatus === "ACCEPTED" ? "secondary" : "outline"
                      }
                    >
                      {vendor.commercialResponseStatus}
                    </Badge>
                  )}
                </div>
              </div>
            )}
          </div>
        </DialogHeader>
        {vendorId && (
          <div className="py-4">
            <VendorContactsTable vendorId={vendorId} />
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}