"use client"

import * as React from "react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { Building2, User, Phone, Mail, FileText, Calendar } from "lucide-react"
import { formatDate } from "../utils"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { toast } from "sonner"

interface 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
}

interface Attachment {
  id: number
  siteVisitRequestId: number
  vendorSiteVisitInfoId: number | null
  fileName: string
  originalFileName: string | null
  filePath: string
  fileSize: number | null
  mimeType: string | null
  createdAt: Date
  updatedAt: Date
}

interface VendorInfoViewDialogProps {
  isOpen: boolean
  onClose: () => void
  siteVisitRequestId: number | null
  investigationId?: number | null // 실사 ID 추가 - 여러 확정정보 조회용
  isReinspection?: boolean // 재실사 모드 플래그
}

export function VendorInfoViewDialog({
  isOpen,
  onClose,
  siteVisitRequestId,
  investigationId,
}: VendorInfoViewDialogProps) {
  const [data, setData] = React.useState<VendorInfo | null>(null)
  const [attachments, setAttachments] = React.useState<Attachment[]>([])
  const [allConfirmations, setAllConfirmations] = React.useState<any[]>([]) // 여러 확정정보
  const [isLoading, setIsLoading] = React.useState(false)

  // 데이터 로드
  React.useEffect(() => {
    if (isOpen && (siteVisitRequestId || investigationId)) {
      loadData()
    }
  }, [isOpen, siteVisitRequestId, investigationId])

  const loadData = async () => {
    if (!siteVisitRequestId && !investigationId) return

    setIsLoading(true)
    try {
      // 단일 확정정보 조회 (기존)
      if (siteVisitRequestId) {
        const { getVendorSiteVisitInfoAction } = await import("./service")
        const result = await getVendorSiteVisitInfoAction(siteVisitRequestId)

        if (result.success && result.data) {
          setData(result.data.vendorInfo)
          setAttachments(result.data.attachments || [])
        } else {
          toast.error("협력업체 정보를 불러올 수 없습니다.")
        }
      }

      // 여러 확정정보 조회 (신규 - 실사 ID로 모든 siteVisitRequests 조회)
      if (investigationId) {
        const { getAllSiteVisitRequestsForInvestigationAction } = await import("./service")
        const result = await getAllSiteVisitRequestsForInvestigationAction(investigationId)
        if (result.success) {
          setAllConfirmations(result.confirmations || [])
        }
      }
    } catch (error) {
      console.error("데이터 로드 오류:", error)
      toast.error("데이터를 불러오는 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }


  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>협력업체 방문실사 정보</DialogTitle>
          <DialogDescription>
            협력업체가 입력한 방문실사 관련 정보를 확인할 수 있습니다.
          </DialogDescription>
        </DialogHeader>
        
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
              <p className="text-muted-foreground">협력업체 정보를 불러오는 중...</p>
            </div>
          </div>
        ) : (data || allConfirmations.length > 0) ? (
          <div className="space-y-6">
            {/* 협력업체 정보 - 단일 확정정보 조회 시에만 표시 */}
            {data && (
              <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Building2 className="h-5 w-5" />
                  협력업체 공장 정보
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold mb-2">공장 기본 정보</h4>
                      <div className="space-y-2 text-sm">
                        <div><span className="font-medium">공장명:</span> {data.factoryName}</div>
                        <div><span className="font-medium">공장위치:</span> {data.factoryLocation}</div>
                        <div><span className="font-medium">공장주소:</span> {data.factoryAddress}</div>
                      </div>
                    </div>
                    
                    <div>
                      <h4 className="font-semibold mb-2">공장 담당자 정보</h4>
                      <div className="space-y-2 text-sm">
                        <div className="flex items-center gap-2">
                          <User className="h-4 w-4" />
                          <span>{data.factoryPicName}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Phone className="h-4 w-4" />
                          <span>{data.factoryPicPhone}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Mail className="h-4 w-4" />
                          <span>{data.factoryPicEmail}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="space-y-4">
                    {data.factoryDirections && (
                      <div>
                        <h4 className="font-semibold mb-2">공장 가는 법</h4>
                        <div className="bg-muted p-3 rounded-md">
                          <p className="text-sm whitespace-pre-wrap">{data.factoryDirections}</p>
                        </div>
                      </div>
                    )}
                    
                    {data.accessProcedure && (
                      <div>
                        <h4 className="font-semibold mb-2">공장 출입절차</h4>
                        <div className="bg-muted p-3 rounded-md">
                          <p className="text-sm whitespace-pre-wrap">{data.accessProcedure}</p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          )}     

            {/* 첨부파일 */}
            {attachments.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    협력업체 첨부파일 ({attachments.length}개)
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {attachments.map((attachment) => (
                      <div key={attachment.id} className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center space-x-2 flex-1 min-w-0">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <span className="text-sm truncate">{attachment.originalFileName}</span>
                          <span className="text-xs text-muted-foreground">
                            ({Math.round((attachment.fileSize || 0) / 1024)}KB)
                          </span>
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={async () => {
                            try {
                              const { downloadFile } = await import('@/lib/file-download')
                              await downloadFile(attachment.filePath, attachment.originalFileName || '', {
                                showToast: true,
                                onError: (error) => {
                                  console.error('다운로드 오류:', error)
                                  toast.error(error)
                                },
                                onSuccess: (fileName, fileSize) => {
                                  console.log(`다운로드 성공: ${fileName} (${fileSize} bytes)`)
                                }
                              })
                            } catch (error) {
                              console.error('다운로드 오류:', error)
                              toast.error('파일 다운로드 중 오류가 발생했습니다.')
                            }
                          }}
                        >
                          다운로드
                        </Button>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* 실사 실시 확정정보 (복수 지원) */}
            {allConfirmations.length > 0 && (
              <div className="space-y-4">
                <h3 className="text-lg font-semibold">실사 실시 확정정보</h3>
                {allConfirmations.map((confirmation, index) => (
                  <Card key={confirmation.id}>
                    <CardHeader>
                      <CardTitle className="flex items-center justify-between">
                        <span className="flex items-center gap-2">
                          <Calendar className="h-5 w-5" />
                          실사 확정정보 #{index + 1}
                        </span>
                        <Badge variant={confirmation.status === "COMPLETED" ? "default" : "secondary"}>
                          {confirmation.status === "COMPLETED" ? "완료" : "진행중"}
                        </Badge>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <span className="font-medium">실사 기간:</span> {confirmation.inspectionDuration}일
                        </div>
                        <div>
                          <span className="font-medium">요청 시작일:</span>
                          {confirmation.requestedStartDate ? formatDate(confirmation.requestedStartDate, "kr") : "미정"}
                        </div>
                        <div>
                          <span className="font-medium">요청 종료일:</span>
                          {confirmation.requestedEndDate ? formatDate(confirmation.requestedEndDate, "kr") : "미정"}
                        </div>
                        <div>
                          <span className="font-medium">생성일:</span> {formatDate(confirmation.createdAt, "kr")}
                        </div>
                        {confirmation.additionalRequests && (
                          <div className="col-span-2">
                            <span className="font-medium">추가 요청사항:</span>
                            <div className="bg-muted p-2 rounded mt-1">{confirmation.additionalRequests}</div>
                          </div>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}

            {/* 기타 정보 */}
            {data?.otherInfo && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    기타 정보
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm whitespace-pre-wrap">{data?.otherInfo}</p>
                </CardContent>
              </Card>
            )}

            {/* 제출 정보 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calendar className="h-5 w-5" />
                  제출 정보
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <div className="space-y-2 text-sm">
                      <div><span className="font-medium">제출일:</span> {formatDate(data?.submittedAt, "kr")}</div>
                      <div><span className="font-medium">첨부파일:</span> {data?.hasAttachments ? "있음" : "없음"}</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="text-center py-8">
            <div className="text-muted-foreground">
              <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
              <p>협력업체가 아직 정보를 입력하지 않았습니다.</p>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}