"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { Download, FileText } from "lucide-react"
import { toast } from "sonner"
import { VendorPO, VendorPOItem } from "./types"
import { getVendorPOItemsByContractNo } from "./service"
import { formatNumber } from "@/lib/utils"
import { getDownloadUrlByMaterialCode, checkPosFileExists } from "@/lib/pos"
import { PosFileSelectionDialog } from "@/lib/pos/components/pos-file-selection-dialog"

interface VendorPOItemsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  po: VendorPO | null
  /**
   * 뷰어 타입
   * - 'evcp': EVCP 사용자 (암호화된 파일 직접 다운로드)
   * - 'partners': 협력사 사용자 (복호화된 파일 다운로드)
   */
  viewerType?: 'evcp' | 'partners'
}

export function VendorPOItemsDialog({ open, onOpenChange, po, viewerType = 'partners' }: VendorPOItemsDialogProps) {
  const [items, setItems] = React.useState<VendorPOItem[]>([])
  const [loading, setLoading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)

  // POS 파일 선택 다이얼로그 상태
  const [posDialogOpen, setPosDialogOpen] = React.useState(false)
  const [selectedMaterialCode, setSelectedMaterialCode] = React.useState<string>("")
  const [posFiles, setPosFiles] = React.useState<Array<{
    fileName: string
    dcmtmId: string
    projNo: string
    posNo: string
    posRevNo: string
    fileSer: string
  }>>([])
  const [loadingPosFiles, setLoadingPosFiles] = React.useState(false)
  const [downloadingFileIndex, setDownloadingFileIndex] = React.useState<number | null>(null)

  // POS 파일 목록 조회 및 다이얼로그 열기
  const handleOpenPosDialog = async (materialCode: string) => {
    if (!materialCode) {
      toast.error("자재코드가 없습니다")
      return
    }

    setLoadingPosFiles(true)
    setSelectedMaterialCode(materialCode)

    try {
      toast.loading(`POS 파일 목록 조회 중... (${materialCode})`, { id: `pos-check-${materialCode}` })
      
      const result = await checkPosFileExists(materialCode)
      
      if (result.exists && result.files && result.files.length > 0) {
        // 파일 정보를 상세하게 가져오기 위해 getDownloadUrlByMaterialCode 사용
        const detailResult = await getDownloadUrlByMaterialCode(materialCode)
        
        if (detailResult.success && detailResult.availableFiles) {
          setPosFiles(detailResult.availableFiles)
          setPosDialogOpen(true)
          toast.success(`${result.fileCount}개의 POS 파일을 찾았습니다`, { id: `pos-check-${materialCode}` })
        } else {
          toast.error('POS 파일 정보를 가져올 수 없습니다', { id: `pos-check-${materialCode}` })
        }
      } else {
        toast.error(result.error || 'POS 파일을 찾을 수 없습니다', { id: `pos-check-${materialCode}` })
      }
    } catch (error) {
      console.error("POS 파일 조회 오류:", error)
      toast.error("POS 파일 조회에 실패했습니다", { id: `pos-check-${materialCode}` })
    } finally {
      setLoadingPosFiles(false)
    }
  }

  // POS 파일 다운로드 실행
  const handleDownloadPosFile = async (fileIndex: number, fileName: string) => {
    if (!selectedMaterialCode) return

    setDownloadingFileIndex(fileIndex)

    try {
      toast.loading(`POS 파일 다운로드 준비 중...`, { id: `download-${fileIndex}` })
      
      // viewerType에 따라 다른 엔드포인트 사용
      const endpoint = viewerType === 'partners' 
        ? `/api/pos/download-on-demand-partners` // 복호화 포함
        : `/api/pos/download-on-demand` // 암호화 파일 그대로
      
      const downloadUrl = `${endpoint}?materialCode=${encodeURIComponent(selectedMaterialCode)}&fileIndex=${fileIndex}`
      
      toast.success(`POS 파일 다운로드 시작: ${fileName}`, { id: `download-${fileIndex}` })
      window.open(downloadUrl, '_blank', 'noopener,noreferrer')
      
      // 다운로드 시작 후 잠시 대기 후 상태 초기화
      setTimeout(() => {
        setDownloadingFileIndex(null)
      }, 1000)
    } catch (error) {
      console.error("POS 파일 다운로드 오류:", error)
      toast.error("POS 파일 다운로드에 실패했습니다", { id: `download-${fileIndex}` })
      setDownloadingFileIndex(null)
    }
  }

  // POS 다이얼로그 닫기
  const handleClosePosDialog = () => {
    setPosDialogOpen(false)
    setSelectedMaterialCode("")
    setPosFiles([])
    setDownloadingFileIndex(null)
  }

  // 상세품목 데이터 로드
  React.useEffect(() => {
    if (!open || !po) {
      setItems([])
      setError(null)
      return
    }

    const loadItems = async () => {
      setLoading(true)
      setError(null)
      try {
        const vendorPOItems = await getVendorPOItemsByContractNo(po.contractNo)
        setItems(vendorPOItems)
      } catch (err) {
        console.error("Failed to load vendor PO items:", err)
        setError("상세품목을 불러오는 중 오류가 발생했습니다.")
      } finally {
        setLoading(false)
      }
    }

    loadItems()
  }, [open, po])

  if (!po) return null

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] max-h-[90vh] w-full flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle className="text-lg font-semibold">
            상세품목 현황 - {po.contractNo}
          </DialogTitle>
          <DialogDescription>
            {po.contractName} ({items.length}개 품목)
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-hidden">
          {loading ? (
            <div className="space-y-4">
              <div className="text-center py-4 text-muted-foreground">
                상세품목을 불러오는 중...
              </div>
              <div className="space-y-2">
                {Array.from({ length: 3 }).map((_, i) => (
                  <Skeleton key={i} className="h-12 w-full" />
                ))}
              </div>
            </div>
          ) : error ? (
            <div className="text-center py-8 text-destructive">
              {error}
            </div>
          ) : items.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              등록된 상세품목이 없습니다.
            </div>
          ) : (
            <div className="overflow-auto max-h-[60vh]">
              <Table>
                <TableHeader className="sticky top-0 bg-background z-10">
                  <TableRow>
                    <TableHead className="min-w-[120px] whitespace-nowrap">PO/계약번호</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">품번</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">P/R번호</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">PR 품번</TableHead>
                    <TableHead className="min-w-[120px] whitespace-nowrap">자재그룹(명)</TableHead>
                    {/* <TableHead className="min-w-[100px] whitespace-nowrap">단가기준</TableHead> */}
                    <TableHead className="min-w-[100px] whitespace-nowrap">자재번호</TableHead>
                    <TableHead className="min-w-[200px] whitespace-nowrap">품목/자재내역</TableHead>
                    {/* <TableHead className="min-w-[200px] whitespace-nowrap">자재내역사양</TableHead>
                    <TableHead className="min-w-[120px] whitespace-nowrap">설계자재번호</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">Fitting No.</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">Cert.</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">재질</TableHead>
                    <TableHead className="min-w-[150px] whitespace-nowrap">규격</TableHead> */}
                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">수량</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">수량단위</TableHead>
                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">중량</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">중량단위</TableHead>
                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">총중량</TableHead>
                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">단가(NETPR)</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">단가단위(BPRME)</TableHead>
                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">가격단위값(PEINH)</TableHead>
                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">참조단가</TableHead>
                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">발주단가</TableHead>
                    <TableHead className="min-w-[120px] text-right whitespace-nowrap">기본총액(BRTWR)</TableHead>
                    <TableHead className="min-w-[120px] text-right whitespace-nowrap">조정금액(ZPDT_EXDS_AMT)</TableHead>
                    <TableHead className="min-w-[120px] text-right whitespace-nowrap">최종정가(NETWR)</TableHead>
                    <TableHead className="min-w-[100px] text-center whitespace-nowrap">POS</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">예정시작일자</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">납기일자</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">예정종료일자</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">PR납기일</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">구매접수일</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">세금코드</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">플랜트</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">저장위치</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">RFQ번호</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">RFQ품번</TableHead>
                    <TableHead className="min-w-[150px] whitespace-nowrap">LOT No.</TableHead>
                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">볼륨</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">볼륨단위</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">시리즈구분</TableHead>
                    <TableHead className="min-w-[150px] whitespace-nowrap">비고</TableHead>
                    {/* <TableHead className="min-w-[120px] whitespace-nowrap">철의장 SPEC</TableHead> */}
                    {/* <TableHead className="min-w-[100px] whitespace-nowrap">P/R 담당자</TableHead> */}
                  </TableRow>
                </TableHeader>
              <TableBody>
                {items.map((item, index) => (
                  <TableRow key={`${item.contractNo}-${item.itemNo}-${index}`}>
                    <TableCell className="font-medium">{item.contractNo || '-'}</TableCell>
                    <TableCell>{item.itemNo || '-'}</TableCell>
                    <TableCell>{item.prNo || '-'}</TableCell>
                    <TableCell>{item.prItemNo || '-'}</TableCell>
                    <TableCell>{item.materialGroup || '-'}</TableCell>
                    {/* <TableCell>{item.priceStandard || '-'}</TableCell> */}
                    <TableCell className="font-mono text-sm">{item.materialNo || '-'}</TableCell>
                    <TableCell className="max-w-[200px]">
                      <div className="truncate" title={item.itemDescription || ''}>
                        {item.itemDescription || '-'}
                      </div>
                    </TableCell>
                    {/* 자재내역사양~규격 까지 받은 정보 없음 */}
                    {/* <TableCell className="max-w-[200px]">
                      <div className="truncate" title={item.materialSpec || ''}>
                        {item.materialSpec || '-'}
                      </div>
                    </TableCell>
                    <TableCell>{item.designMaterialNo || '-'}</TableCell>
                    <TableCell>{item.fittingNo || '-'}</TableCell>
                    <TableCell>{item.cert || '-'}</TableCell>
                    <TableCell>{item.material || '-'}</TableCell>
                    <TableCell>{item.specification || '-'}</TableCell> */}
                    <TableCell className="text-right font-mono">
                      {item.quantity !== undefined && item.quantity !== null ? item.quantity.toLocaleString() : '-'}
                    </TableCell>
                    <TableCell>{item.quantityUnit || '-'}</TableCell>
                    <TableCell className="text-right font-mono">
                      {item.weight ? item.weight.toLocaleString() : '-'}
                    </TableCell>
                    <TableCell>{item.weightUnit || '-'}</TableCell>
                    <TableCell className="text-right font-mono">
                      {item.totalWeight ? item.totalWeight.toLocaleString() : '-'}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return formatNumber(item.unitPrice, decimals)
                      })()}
                    </TableCell>
                    <TableCell>{item.BPRME || '-'}</TableCell>
                    <TableCell className="text-right">{item.PEINH ?? '-'}</TableCell>
                    <TableCell className="text-right font-mono">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return item.ZREF_NETPR ? formatNumber(item.ZREF_NETPR, decimals) : '-'
                      })()}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return item.ZNETPR ? formatNumber(item.ZNETPR, decimals) : '-'
                      })()}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return item.BRTWR ? formatNumber(item.BRTWR, decimals) : '-'
                      })()}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return item.ZPDT_EXDS_AMT ? formatNumber(item.ZPDT_EXDS_AMT, decimals) : '-'
                      })()}
                    </TableCell>
                    <TableCell className="text-right font-mono font-semibold">
                      {(() => {
                        const currency = po?.currency || ''
                        const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                        return item.NETWR ? formatNumber(item.NETWR, decimals) : '-'
                      })()}
                    </TableCell>
                    <TableCell className="text-center">
                      {item.materialNo ? (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-xs text-green-600 hover:text-green-800"
                          onClick={() => handleOpenPosDialog(item.materialNo!)}
                          disabled={loadingPosFiles && selectedMaterialCode === item.materialNo}
                          title={`POS 파일 다운로드 (자재코드: ${item.materialNo})`}
                        >
                          <FileText className="h-3 w-3 mr-1" />
                          <Download className="h-3 w-3 mr-1" />
                          {loadingPosFiles && selectedMaterialCode === item.materialNo ? '조회중...' : 'POS'}
                        </Button>
                      ) : (
                        <span className="text-muted-foreground">-</span>
                      )}
                    </TableCell>
                    <TableCell>{item.ZPLN_ST_DT || '-'}</TableCell>
                    <TableCell>{item.ZPO_DLV_DT || item.deliveryDate || '-'}</TableCell>
                    <TableCell>{item.ZPLN_ED_DT || '-'}</TableCell>
                    <TableCell>{item.LFDAT || '-'}</TableCell>
                    <TableCell>{item.ZRCV_DT || '-'}</TableCell>
                    <TableCell>{item.vatType || '-'}</TableCell>
                    <TableCell>{item.WERKS || '-'}</TableCell>
                    <TableCell>{item.LGORT || '-'}</TableCell>
                    <TableCell>{item.ANFNR || '-'}</TableCell>
                    <TableCell>{item.ANFPS || '-'}</TableCell>
                    <TableCell className="max-w-[150px]">
                      <div className="truncate" title={item.ZPO_LOT_NO || ''}>
                        {item.ZPO_LOT_NO || '-'}
                      </div>
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {item.VOLUM ? item.VOLUM.toLocaleString() : '-'}
                    </TableCell>
                    <TableCell>{item.VOLEH || '-'}</TableCell>
                    <TableCell>{item.ZCON_IND || '-'}</TableCell>
                    <TableCell className="max-w-[150px]">
                      <div className="truncate" title={item.remark || ''}>
                        {item.remark || '-'}
                      </div>
                    </TableCell>
                    {/* <TableCell>{item.steelSpec || '-'}</TableCell> */}
                    {/* <TableCell>{item.prManager || '-'}</TableCell> */}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            </div>
          )}
        </div>

        {items.length > 0 && (
          <div className="flex justify-between items-center pt-4 border-t flex-shrink-0">
            <div className="text-sm text-muted-foreground">
              총 {items.length}개 품목
            </div>
            <div className="text-sm font-medium">
              {(() => {
                // NETWR(최종정가) 합계 계산
                const totalNETWR = items.reduce((sum, item) => sum + (item.NETWR || item.contractAmount || 0), 0)
                // 통화별 소수점 자리수 결정 (KRW, JPY: 0자리, 나머지: 2자리)
                const currency = po?.currency || ''
                const decimals = (currency === 'KRW' || currency === 'JPY') ? 0 : 2
                const formattedAmount = formatNumber(totalNETWR, decimals)
                
                return `총 계약금액(NETWR): ${currency} ${formattedAmount}`
              })()}
            </div>
          </div>
        )}

        {/* POS 파일 선택 다이얼로그 */}
        <PosFileSelectionDialog
          isOpen={posDialogOpen}
          onClose={handleClosePosDialog}
          materialCode={selectedMaterialCode}
          files={posFiles}
          onDownload={handleDownloadPosFile}
          downloadingIndex={downloadingFileIndex}
        />
      </DialogContent>
    </Dialog>
  )
}