"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Avatar } from "@/components/ui/avatar"
import { ScrollArea } from "@/components/ui/scroll-area"
import { ContactItem } from "@/config/vendorInvestigationsColumnsConfig"

interface ContactsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  investigationId: number | null
  contacts: ContactItem[]
}

export function ContactsDialog({
  open,
  onOpenChange,
  investigationId,
  contacts,
}: ContactsDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Vendor Contacts</DialogTitle>
          <DialogDescription>
            {contacts.length > 0
              ? `Showing ${contacts.length} contacts for investigation #${investigationId}`
              : `No contacts found for investigation #${investigationId}`}
          </DialogDescription>
        </DialogHeader>
        <ScrollArea className="max-h-[60vh] pr-4">
          {contacts.length > 0 ? (
            <div className="space-y-4">
              {contacts.map((contact, index) => (
                <div
                  key={index}
                  className="flex items-start gap-4 p-3 rounded-lg border"
                >
                  <Avatar className="w-10 h-10">
                    <span>{contact.contactName?.charAt(0) || "C"}</span>
                  </Avatar>
                  <div className="flex-1 space-y-1">
                    <p className="font-medium">{contact.contactName || "Unnamed"}</p>
                    {contact.contactEmail && (
                      <p className="text-sm text-muted-foreground">
                        {contact.contactEmail}
                      </p>
                    )}
                    {contact.contactPhone && (
                      <p className="text-sm text-muted-foreground">
                        {contact.contactPhone}
                      </p>
                    )}
                    {contact.contactPosition && (
                      <p className="text-sm text-muted-foreground">
                        Position: {contact.contactPosition}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-6 text-muted-foreground">
              No contacts available
            </div>
          )}
        </ScrollArea>
        <DialogFooter>
          <Button onClick={() => onOpenChange(false)}>Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}