"use client"

import * as React from "react"
import { Building2, User, Phone, Mail, FileText, Calendar, ChevronRight } 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 SiteVisitRequest {
  id: number
  status: string
  inspectionDuration: number
  requestedStartDate: Date
  requestedEndDate: Date
  additionalRequests: string | null
  createdAt: Date
  updatedAt: Date
  vendorInfo: VendorInfo | null
  attachments: Attachment[]
}

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

// 상세 정보를 표시하는 내부 컴포넌트
function VendorDetailView({ 
  vendorInfo, 
  attachments, 
  siteVisitRequest 
}: { 
  vendorInfo: VendorInfo | null
  attachments: Attachment[]
  siteVisitRequest?: SiteVisitRequest
}) {
  if (!vendorInfo) {
    return (
      <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>
    )
  }

  return (
    <div className="space-y-6">
      {/* 협력업체 실사 장소 정보 */}
      <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> {vendorInfo.factoryName}</div>
                  <div><span className="font-medium">실사 지역:</span> {vendorInfo.factoryLocation}</div>
                  <div><span className="font-medium">실사 주소:</span> {vendorInfo.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>{vendorInfo.factoryPicName}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4" />
                    <span>{vendorInfo.factoryPicPhone}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    <span>{vendorInfo.factoryPicEmail}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="space-y-4">
              {vendorInfo.factoryDirections && (
                <div>
                  <h4 className="font-semibold mb-2">실사 장소 이동 방법</h4>
                  <div className="bg-muted p-3 rounded-md">
                    <p className="text-sm whitespace-pre-wrap">{vendorInfo.factoryDirections}</p>
                  </div>
                </div>
              )}

              {vendorInfo.accessProcedure && (
                <div>
                  <h4 className="font-semibold mb-2">실사 장소 출입절차</h4>
                  <div className="bg-muted p-3 rounded-md">
                    <p className="text-sm whitespace-pre-wrap">{vendorInfo.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>
      )}

      {/* 실사 정보 */}
      {siteVisitRequest && (
        <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 text-sm">
              <div>
                <span className="font-medium">실사 기간:</span> {siteVisitRequest.inspectionDuration}일
              </div>
              <div>
                <span className="font-medium">요청 시작일:</span>
                {siteVisitRequest.requestedStartDate ? formatDate(siteVisitRequest.requestedStartDate, "kr") : "미정"}
              </div>
              <div>
                <span className="font-medium">요청 종료일:</span>
                {siteVisitRequest.requestedEndDate ? formatDate(siteVisitRequest.requestedEndDate, "kr") : "미정"}
              </div>
              <div>
                <span className="font-medium">상태:</span>
                <Badge variant={siteVisitRequest.status === "VENDOR_SUBMITTED" ? "default" : "secondary"} className="ml-2">
                  {siteVisitRequest.status === "VENDOR_SUBMITTED" ? "제출완료" : siteVisitRequest.status === "SENT" ? "발송완료" : "요청됨"}
                </Badge>
              </div>
              {siteVisitRequest.additionalRequests && (
                <div className="col-span-2">
                  <span className="font-medium">추가 요청사항:</span>
                  <div className="bg-muted p-2 rounded mt-1 text-sm whitespace-pre-wrap">{siteVisitRequest.additionalRequests}</div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 기타 정보 */}
      {vendorInfo.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">{vendorInfo.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>{" "}
                  {vendorInfo.submittedAt ? formatDate(vendorInfo.submittedAt, "kr") : "-"}
                </div>
                <div><span className="font-medium">첨부파일:</span> {vendorInfo.hasAttachments ? "있음" : "없음"}</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export function VendorInfoViewDialog({
  isOpen,
  onClose,
  siteVisitRequestId,
  investigationId,
}: VendorInfoViewDialogProps) {
  const [data, setData] = React.useState<VendorInfo | null>(null)
  const [attachments, setAttachments] = React.useState<Attachment[]>([])
  const [siteVisitRequests, setSiteVisitRequests] = React.useState<SiteVisitRequest[]>([])
  const [isLoading, setIsLoading] = React.useState(false)
  const [selectedRequest, setSelectedRequest] = React.useState<SiteVisitRequest | null>(null)
  const [detailDialogOpen, setDetailDialogOpen] = React.useState(false)

  // 데이터 로드
  React.useEffect(() => {
    if (isOpen && (siteVisitRequestId || investigationId)) {
      loadData()
    } else {
      // Dialog가 닫힐 때 상태 초기화
      setData(null)
      setAttachments([])
      setSiteVisitRequests([])
      setSelectedRequest(null)
      setDetailDialogOpen(false)
    }
  }, [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 {
          setData(null)
          setAttachments([])
        }
      }

      // 여러 확정정보 조회 (investigationId 기준)
      if (investigationId) {
        const { getAllSiteVisitRequestsForInvestigationAction } = await import("./service")
        const result = await getAllSiteVisitRequestsForInvestigationAction(investigationId)
        if (result.success) {
          setSiteVisitRequests(result.requests || [])
        } else {
          setSiteVisitRequests([])
          toast.error(result.error || "방문실사 정보를 불러올 수 없습니다.")
        }
      }
    } catch (error) {
      console.error("데이터 로드 오류:", error)
      toast.error("데이터를 불러오는 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }

  const handleListItemClick = (request: SiteVisitRequest) => {
    setSelectedRequest(request)
    setDetailDialogOpen(true)
  }

  const handleCloseDetail = () => {
    setDetailDialogOpen(false)
    setSelectedRequest(null)
  }

  // investigationId가 있는 경우: 리스트 형태 표시
  if (investigationId) {
    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>
            ) : siteVisitRequests.length > 0 ? (
              <div className="space-y-3">
                {siteVisitRequests.map((request, index) => (
                  <Card 
                    key={request.id} 
                    className="cursor-pointer hover:bg-muted/50 transition-colors"
                    onClick={() => handleListItemClick(request)}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-center justify-between">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-3 mb-2">
                            <h4 className="font-semibold text-base">
                              방문실사 정보 #{index + 1}
                            </h4>
                            <Badge 
                              variant={
                                request.vendorInfo 
                                  ? (request.status === "VENDOR_SUBMITTED" ? "default" : "secondary")
                                  : "outline"
                              }
                            >
                              {request.vendorInfo 
                                ? (request.status === "VENDOR_SUBMITTED" ? "제출완료" : "발송완료")
                                : "미제출"
                              }
                            </Badge>
                          </div>
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-muted-foreground">
                            <div>
                              <span className="font-medium">실사 장소명:</span>{" "}
                              {request.vendorInfo?.factoryName || "미입력"}
                            </div>
                            <div>
                              <span className="font-medium">제출일:</span>{" "}
                              {request.vendorInfo?.submittedAt 
                                ? formatDate(request.vendorInfo.submittedAt, "kr")
                                : "-"
                              }
                            </div>
                            <div>
                              <span className="font-medium">실사기간:</span> {request.inspectionDuration}일
                            </div>
                            <div>
                              <span className="font-medium">생성일:</span> {formatDate(request.createdAt, "kr")}
                            </div>
                          </div>
                        </div>
                        <ChevronRight className="h-5 w-5 text-muted-foreground ml-4 flex-shrink-0" />
                      </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>

        {/* 상세 정보 Dialog */}
        <Dialog open={detailDialogOpen} onOpenChange={(open) => !open && handleCloseDetail()}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>협력업체 방문실사 상세 정보</DialogTitle>
              <DialogDescription>
                협력업체가 입력한 방문실사 관련 상세 정보를 확인할 수 있습니다.
              </DialogDescription>
            </DialogHeader>
            {selectedRequest && (
              <VendorDetailView
                vendorInfo={selectedRequest.vendorInfo}
                attachments={selectedRequest.attachments || []}
                siteVisitRequest={selectedRequest}
              />
            )}
          </DialogContent>
        </Dialog>
      </>
    )
  }

  // siteVisitRequestId가 있는 경우: 기존 방식 (단일 상세 정보 표시)
  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>
        ) : (
          <VendorDetailView vendorInfo={data} attachments={attachments} />
        )}
      </DialogContent>
    </Dialog>
  )
}