"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) {
  // 기존 구조 감지 및 alert 표시
  // React.useEffect(() => {
  //   if (isOpen && selectedRequest?.shiAttendees) {
  //     const hasOldStructure = Object.values(selectedRequest.shiAttendees as Record<string, unknown>).some(
  //       (value) => {
  //         if (value && typeof value === 'object' && 'checked' in value && value.checked) {
  //           const attendeeData = value as any;
  //           // 기존 구조 확인: count가 있고 attendees가 없는 경우
  //           return attendeeData.count !== undefined && (!attendeeData.attendees || !Array.isArray(attendeeData.attendees));
  //         }
  //         return false;
  //       }
  //     );

  //     if (hasOldStructure) {
  //       alert('이 데이터는 이전 히스토리로, 참석자 정보가 부정확할 수 있습니다.');
  //     }
  //   }
  // }, [isOpen, selectedRequest]);

  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) {
                // 새로운 구조 확인: { checked, attendees: [{ name, department, email }] }
                const attendeeData = value as { 
                  checked: boolean; 
                  attendees?: Array<{ name: string; department?: string; email?: string }>;
                  // 호환성을 위한 기존 구조도 확인
                  count?: number;
                  details?: string;
                }
                
                const departmentLabels: Record<string, string> = {
                  technicalSales: "기술영업",
                  design: "설계",
                  procurement: "구매",
                  quality: "품질",
                  production: "생산",
                  commissioning: "시운전",
                  other: "기타"
                }
                
                // 새로운 구조인 경우 (attendees 배열)
                if (attendeeData.attendees && Array.isArray(attendeeData.attendees) && attendeeData.attendees.length > 0) {
                  return (
                    <div key={key} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between mb-3">
                        <h4 className="font-semibold">{departmentLabels[key] || key}</h4>
                        <Badge variant="outline">{attendeeData.attendees.length}명</Badge>
                      </div>
                      <div className="space-y-2">
                        {attendeeData.attendees.map((attendee, index) => (
                          <div key={index} className="text-sm bg-muted/50 p-2 rounded-md">
                            <div className="font-medium">{attendee.name}</div>
                            {attendee.department && (
                              <div className="text-muted-foreground">부서: {attendee.department}</div>
                            )}
                            {attendee.email && (
                              <div className="text-muted-foreground">이메일: {attendee.email}</div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )
                }
                // 기존 구조인 경우 (호환성 유지)
                else if (attendeeData.count !== undefined) {
                  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">{attendeeData.count}명</Badge>
                      </div>
                      {attendeeData.details && (
                        <div className="text-sm text-muted-foreground">
                          <span className="font-medium">참석자 정보:</span> {attendeeData.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>
  )
}