'use client'

import * as React from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { DataTable } from '@/components/data-table/data-table'
import { ColumnDef } from '@tanstack/react-table'
import { Building2, User, Mail, Phone, Calendar, BadgeCheck } from 'lucide-react'
import { formatDate } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'

interface ParticipantCompany {
  id: number
  biddingId: number
  companyId: number | null
  vendorName: string
  vendorCode: string
  contactPerson: string | null
  contactEmail: string | null
  contactPhone: string | null
  invitationStatus: string
  updatedAt: Date | null
}

interface BiddingParticipantsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  biddingId: number | null
  participantType: 'expected' | 'participated' | 'declined' | 'pending' | null
  companies: ParticipantCompany[]
}

const invitationStatusLabels: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
  invited: { label: '초대됨', variant: 'outline' },
  accepted: { label: '참여확정', variant: 'default' },
  declined: { label: '포기', variant: 'destructive' },
  pending: { label: '미제출', variant: 'secondary' },
  submitted: { label: '제출완료', variant: 'default' },
}

const participantTypeLabels: Record<string, string> = {
  expected: '참여예정협력사',
  participated: '참여협력사',
  declined: '포기협력사',
  pending: '미제출협력사',
}

export function BiddingParticipantsDialog({
  open,
  onOpenChange,
  biddingId,
  participantType,
  companies,
}: BiddingParticipantsDialogProps) {
  const columns = React.useMemo<ColumnDef<ParticipantCompany>[]>(
    () => [
      {
        id: 'vendorCode',
        accessorKey: 'vendorCode',
        header: '협력사코드',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <BadgeCheck className="h-4 w-4 text-muted-foreground" />
            <span className="font-mono text-sm">{row.original.vendorCode}</span>
          </div>
        ),
        size: 120,
      },
      {
        id: 'vendorName',
        accessorKey: 'vendorName',
        header: '협력사명',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <Building2 className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{row.original.vendorName}</span>
          </div>
        ),
        size: 200,
      },
      {
        id: 'invitationStatus',
        accessorKey: 'invitationStatus',
        header: '구분',
        cell: ({ row }) => {
          const status = row.original.invitationStatus
          const statusInfo = invitationStatusLabels[status] || { label: status, variant: 'outline' as const }
          return (
            <Badge variant={statusInfo.variant}>
              {statusInfo.label}
            </Badge>
          )
        },
        size: 100,
      },
      {
        id: 'updatedAt',
        accessorKey: 'updatedAt',
        header: '응찰/포기일시',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm">
              {row.original.updatedAt ? formatDate(row.original.updatedAt) : '-'}
            </span>
          </div>
        ),
        size: 150,
      },
      {
        id: 'contactPerson',
        accessorKey: 'contactPerson',
        header: '협력사 담당자',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <User className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm">{row.original.contactPerson || '-'}</span>
          </div>
        ),
        size: 120,
      },
      {
        id: 'contactEmail',
        accessorKey: 'contactEmail',
        header: '담당자 이메일',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <Mail className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">{row.original.contactEmail || '-'}</span>
          </div>
        ),
        size: 200,
      },
      {
        id: 'contactPhone',
        accessorKey: 'contactPhone',
        header: '담당자 전화번호',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <Phone className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">{row.original.contactPhone || '-'}</span>
          </div>
        ),
        size: 150,
      },
    ],
    []
  )

  const table = React.useMemo(
    () => ({
      data: companies,
      columns,
      pageCount: 1,
    }),
    [companies, columns]
  )

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>
            {'협력사 목록'}
            {' '}
            <span className="text-muted-foreground">({companies.length}개)</span>
          </DialogTitle>
        </DialogHeader>
        <div className="flex-1 overflow-auto">
          <div className="border rounded-lg">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-muted/50">
                  <tr>
                    {columns.map((column) => (
                      <th
                        key={column.id}
                        className="px-4 py-3 text-left text-sm font-medium"
                        style={{ width: column.size }}
                      >
                        {typeof column.header === 'function'
                          ? column.header({} as any)
                          : column.header}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {companies.length === 0 ? (
                    <tr>
                      <td colSpan={columns.length} className="px-4 py-8 text-center text-muted-foreground">
                        협력사가 없습니다.
                      </td>
                    </tr>
                  ) : (
                    companies.map((company) => (
                      <tr key={company.id} className="border-t hover:bg-muted/50">
                        {columns.map((column) => (
                          <td key={column.id} className="px-4 py-3">
                            {column.cell
                              ? column.cell({ row: { original: company } } as any)
                              : (company as any)[column.accessorKey as string]}
                          </td>
                        ))}
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}