"use client"

import * as React from "react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { Building2, Calendar, Users, MessageSquare, Ellipsis, Eye, Edit, Download, Paperclip } from "lucide-react"
import { toast } from "sonner"
import { downloadFile } from "@/lib/file-download"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { VendorInfoSheet } from "./vendor-info-sheet"
import type { VendorInfoFormValues } from "./vendor-info-sheet"
import { submitVendorInfoAction } from "./service"
import { SiteVisitDetailDialog } from "./site-visit-detail-dialog"
import { ShiAttendeesDialog } from "./shi-attendees-dialog"
import { formatDate } from "../utils"
// SHI 참석자 총 인원수 계산 함수
function getTotalShiAttendees(shiAttendees: Record<string, unknown> | null): number {
  if (!shiAttendees) return 0
  
  let total = 0
  Object.entries(shiAttendees).forEach(([, value]) => {
    if (value && typeof value === 'object' && 'checked' in value && 'count' in value) {
      const attendee = value as { checked: boolean; count: number }
      if (attendee.checked) {
        total += attendee.count
      }
    }
  })
  return total
}

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 ClientSiteVisitWrapperProps {
  siteVisitRequests: SiteVisitRequest[]
  vendorId: number
}

export function ClientSiteVisitWrapper({
  siteVisitRequests,
  vendorId,
}: ClientSiteVisitWrapperProps) {
  const [selectedRequest, setSelectedRequest] = React.useState<SiteVisitRequest | null>(null)
  const [isDetailDialogOpen, setIsDetailDialogOpen] = React.useState(false)
  const [isVendorInfoSheetOpen, setIsVendorInfoSheetOpen] = React.useState(false)
  const [selectedSiteVisitRequestId, setSelectedSiteVisitRequestId] = React.useState<number | null>(null)
  const [isShiAttendeesDialogOpen, setIsShiAttendeesDialogOpen] = React.useState(false)

  const getInvestigationMethodLabel = (method: string | null) => {
    switch (method) {
      case "PURCHASE_SELF_EVAL":
        return "구매자체평가"
      case "DOCUMENT_EVAL":
        return "서류평가"
      case "PRODUCT_INSPECTION":
        return "제품검사평가"
      case "SITE_VISIT_EVAL":
        return "방문실사평가"
      default:
        return method || "-"
    }
  }

  const getStatusLabel = (status: string) => {
    switch (status) {
      case "REQUESTED":
        return "요청됨"
      case "SENT":
        return "발송됨"
      case "COMPLETED":
        return "완료"
      case "VENDOR_SUBMITTED":
        return "협력업체 제출"
      default:
        return status
    }
  }

  const getStatusVariant = (status: string) => {
    switch (status) {
      case "REQUESTED":
        return "secondary"
      case "SENT":
        return "default"
      case "COMPLETED":
        return "outline"
      case "VENDOR_SUBMITTED":
        return "default"
      default:
        return "secondary"
    }
  }

  const formatDateRange = (startDate: Date | null, endDate: Date | null) => {
    if (!startDate) return "-"
    if (!endDate || startDate.getTime() === endDate.getTime()) {
      return formatDate(startDate)
    }
    return `${formatDate(startDate)} ~ ${formatDate(endDate)}`
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">실사정보 관리</h1>
          <p className="text-muted-foreground mt-2">
            방문실사 요청 정보를 조회하고 회신할 수 있습니다.
          </p>
        </div>
        {/* <div className="flex items-center gap-2">
          <Badge variant="outline">Vendor ID: {vendorId}</Badge>
        </div> */}
      </div>

      {/* 통계 카드 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">전체 요청</CardTitle>
            <Building2 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{siteVisitRequests.length}</div>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">발송됨</CardTitle>
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {siteVisitRequests.filter(r => r.status === "SENT").length}
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">완료</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {siteVisitRequests.filter(r => r.status === "COMPLETED").length}
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">대기중</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {siteVisitRequests.filter(r => r.status === "REQUESTED").length}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 테이블 */}
      <Card>
        <CardHeader>
          <CardTitle>방문실사 요청 목록</CardTitle>
          <CardDescription>
            SHI에서 요청한 방문실사 정보를 확인하고 회신할 수 있습니다.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">No.</TableHead>
                <TableHead>상태</TableHead>
                <TableHead>실사품목</TableHead>
                <TableHead>실사방법</TableHead>
                <TableHead>실사기간</TableHead>
                <TableHead>SHI 자료</TableHead>
                <TableHead>실사요청일</TableHead>
                <TableHead>실제 실사일</TableHead>
                <TableHead>실사결과</TableHead>
                <TableHead>SHI참석자</TableHead>

                <TableHead className="w-20">작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {siteVisitRequests.map((request, index) => (
                <TableRow key={request.id}>
                  <TableCell className="font-medium">{index + 1}</TableCell>
                  <TableCell>
                    <Badge variant={getStatusVariant(request.status)}>
                      {getStatusLabel(request.status)}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {/* 실사품목 - PQ에서 가져온 정보 표시 */}
                    {request.pqItems ? (
                      typeof request.pqItems === 'string' ? (
                        request.pqItems
                      ) : Array.isArray(request.pqItems) && request.pqItems.length > 0 ? (
                        <div className="space-y-1">
                          {request.pqItems.map((item, index) => (
                            <div key={index} className="flex items-center gap-2">
                              <span className="text-xs px-2 py-1 bg-primary/10 rounded">
                                {item.itemCode}
                              </span>
                              <span className="text-sm">{item.itemName}</span>
                            </div>
                          ))}
                        </div>
                      ) : "-"
                    ) : "-"}
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">
                      {getInvestigationMethodLabel(request.investigationMethod)}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {request.inspectionDuration ? `${request.inspectionDuration}일` : "-"}
                  </TableCell>
                  <TableCell>
                    {request.shiAttachments && request.shiAttachments.length > 0 ? (
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-auto p-1 text-xs hover:bg-blue-50"
                          >
                            <Paperclip className="h-4 w-4 text-blue-600 mr-1" />
                            {request.shiAttachments.length}개
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-64">
                          {request.shiAttachments.map((attachment) => (
                            <DropdownMenuItem
                              key={attachment.id}
                              onSelect={() => {
                                downloadFile(
                                  attachment.filePath,
                                  attachment.originalFileName,
                                  {
                                    showToast: true,
                                    onSuccess: (fileName) => {
                                      toast.success(`파일 다운로드 완료: ${fileName}`);
                                    },
                                    onError: (error) => {
                                      toast.error(`다운로드 실패: ${error}`);
                                    }
                                  }
                                );
                              }}
                            >
                              <Download className="mr-2 h-4 w-4" />
                              {attachment.originalFileName}
                            </DropdownMenuItem>
                          ))}
                        </DropdownMenuContent>
                      </DropdownMenu>
                    ) : "-"}
                  </TableCell>
                  <TableCell>
                    {formatDateRange(request.requestedStartDate, request.requestedEndDate)}
                  </TableCell>
                  <TableCell>
                    {formatDate(request.actualAt, "kr")}
                  </TableCell>
                  <TableCell>
                    {request.result ? (
                      <Badge
                        variant={
                          request.result === "APPROVED"
                            ? "default"
                            : request.result === "SUPPLEMENT"
                            ? "secondary"
                            : "destructive"
                        }
                      >
                        {request.result === "APPROVED"
                          ? "통과"
                          : request.result === "SUPPLEMENT"
                          ? "보완"
                          : "불가"}
                      </Badge>
                    ) : "-"}
                  </TableCell>
                  <TableCell>
                     {getTotalShiAttendees(request.shiAttendees) > 0 ? (
                       <Button
                         variant="ghost"
                         size="sm"
                         className="h-auto p-1 text-xs"
                         onClick={() => {
                           setSelectedRequest(request)
                           setIsShiAttendeesDialogOpen(true)
                         }}
                       >
                         {getTotalShiAttendees(request.shiAttendees)}명
                       </Button>
                     ) : "-"}
                   </TableCell>

                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          aria-label="Open menu"
                          variant="ghost"
                          className="flex size-8 p-0 data-[state=open]:bg-muted"
                        >
                          <Ellipsis className="size-4" aria-hidden="true" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="w-40">
                        <DropdownMenuItem
                          onSelect={() => {
                            setSelectedRequest(request)
                            setIsDetailDialogOpen(true)
                          }}
                        >
                          <Eye className="mr-2 h-4 w-4" />
                          상세보기
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          onSelect={() => {
                            setSelectedSiteVisitRequestId(request.id)
                            setIsVendorInfoSheetOpen(true)
                          }}
                        >
                          <Edit className="mr-2 h-4 w-4" />
                          정보입력
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* 상세 정보 다이얼로그 */}
      <SiteVisitDetailDialog
        isOpen={isDetailDialogOpen}
        onOpenChange={setIsDetailDialogOpen}
        selectedRequest={selectedRequest}
      />

      {/* 협력업체 정보 입력 Sheet */}
      {selectedSiteVisitRequestId && (
        <VendorInfoSheet
          isOpen={isVendorInfoSheetOpen}
          onClose={() => {
            setIsVendorInfoSheetOpen(false)
            setSelectedSiteVisitRequestId(null)
          }}
          onSubmit={async (data: VendorInfoFormValues & { attachments?: File[] }) => {
            try {
              const result = await submitVendorInfoAction({
                siteVisitRequestId: selectedSiteVisitRequestId,
                ...data
              })
              if (result.success) {
                toast.success(result.message || "협력업체 정보가 성공적으로 제출되었습니다.")
                // 페이지 새로고침으로 데이터 업데이트
                window.location.reload()
              } else {
                toast.error(result.error || "협력업체 정보 제출 중 오류가 발생했습니다.")
              }
            } catch (error) {
              console.error("협력업체 정보 제출 오류:", error)
              toast.error("협력업체 정보 제출 중 오류가 발생했습니다.")
            }
          }}
          siteVisitRequestId={selectedSiteVisitRequestId}
          initialData={siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo ? {
            factoryName: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryName || "",
            factoryLocation: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryLocation || "",
            factoryAddress: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryAddress || "",
            factoryPicName: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryPicName || "",
            factoryPicPhone: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryPicPhone || "",
            factoryPicEmail: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryPicEmail || "",
            factoryDirections: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.factoryDirections || "",
            accessProcedure: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.accessProcedure || "",

            hasAttachments: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.hasAttachments || false,
            otherInfo: siteVisitRequests.find(r => r.id === selectedSiteVisitRequestId)?.vendorInfo?.otherInfo || "",
          } : null}
                 />
       )}

       {/* SHI 참석자 정보 다이얼로그 */}
       <ShiAttendeesDialog
         isOpen={isShiAttendeesDialogOpen}
         onOpenChange={setIsShiAttendeesDialogOpen}
         selectedRequest={selectedRequest}
       />
     </div>
   )
}