"use client"

import * as React from "react"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface SiteVisitRequest {
  id: number
  investigationId: number
  requesterId: number | null
  inspectionDuration: string | null
  requestedStartDate: Date | null
  requestedEndDate: Date | null
  shiAttendees: Record<string, unknown> | null
  shiAttendeeDetails?: string | null
  vendorRequests: Record<string, unknown> | null
  additionalRequests: string | null
  status: string
  sentAt: Date | null
  createdAt: Date
  updatedAt: Date
  
  // 실사 정보
  investigationMethod: string | null // QM담당자가 작성한 실사방법
  investigationAddress: string | null
  investigationNotes: string | null
  forecastedAt: Date | null
  actualAt: Date | null
  result: string | null
  resultNotes: string | null
  
  // PQ 정보
  pqItems: string | null | Array<{itemCode: string, itemName: string}>
  
  // 요청자 정보
  requesterName: string | null
  requesterEmail: string | null
  requesterTitle: string | null
  
  // QM 매니저 정보
  qmManagerName: string | null
  qmManagerEmail: string | null
  qmManagerTitle: string | null
  
  // 협력업체 정보
  vendorInfo?: {
    id: number
    siteVisitRequestId: number
    factoryName: string
    factoryLocation: string
    factoryAddress: string
    factoryPicName: string
    factoryPicPhone: string
    factoryPicEmail: string
    factoryDirections: string | null
    accessProcedure: string | null
    hasAttachments: boolean
    otherInfo: string | null
    submittedAt: Date
    submittedBy: number
    createdAt: Date
    updatedAt: Date
  } | null

  // SHI 첨부파일
  shiAttachments?: Array<{
    id: number
    siteVisitRequestId: number
    vendorSiteVisitInfoId: number | null
    fileName: string
    originalFileName: string
    filePath: string
    fileSize: number
    mimeType: string
    createdAt: Date
    updatedAt: Date
  }> | null
}

interface ShiAttendeesDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  selectedRequest: SiteVisitRequest | null
}

export function ShiAttendeesDialog({
  isOpen,
  onOpenChange,
  selectedRequest,
}: ShiAttendeesDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>SHI 참석자 정보</DialogTitle>
          <DialogDescription>
            방문실사에 참석 예정인 SHI 인력 정보입니다.
          </DialogDescription>
        </DialogHeader>
        
        {selectedRequest && selectedRequest.shiAttendees && (
          <div className="space-y-4">
            {Object.entries(selectedRequest.shiAttendees as Record<string, unknown>).map(([key, value]) => {
              if (value && typeof value === 'object' && 'checked' in value && value.checked) {
                const attendee = value as { checked: boolean; count: number; details?: string }
                const departmentLabels: Record<string, string> = {
                  technicalSales: "기술영업",
                  design: "설계",
                  procurement: "구매",
                  quality: "품질",
                  production: "생산",
                  commissioning: "시운전",
                  other: "기타"
                }
                
                return (
                  <div key={key} className="border rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h4 className="font-semibold">{departmentLabels[key] || key}</h4>
                      <Badge variant="outline">{attendee.count}명</Badge>
                    </div>
                    {attendee.details && (
                      <div className="text-sm text-muted-foreground">
                        <span className="font-medium">참석자 정보:</span> {attendee.details}
                      </div>
                    )}
                  </div>
                )
              }
              return null
            })}
            
            {/* 전체 참석자 상세정보 */}
            {selectedRequest.shiAttendeeDetails && (
              <div className="border rounded-lg p-4">
                <h4 className="font-semibold mb-2">전체 참석자 상세정보</h4>
                <p className="text-sm whitespace-pre-wrap">{selectedRequest.shiAttendeeDetails}</p>
              </div>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}