"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 { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { VendorPO, VendorPOItem } from "./types"
import { getVendorPOItemsByContractNo } from "./service"

interface VendorPOItemsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  po: VendorPO | null
}

export function VendorPOItemsDialog({ open, onOpenChange, po }: VendorPOItemsDialogProps) {
  const [items, setItems] = React.useState<VendorPOItem[]>([])
  const [loading, setLoading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(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-[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">단가기준</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">단가단위</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">가격단위값</TableHead>
                    <TableHead className="min-w-[120px] text-right whitespace-nowrap">PO계약금액</TableHead>
                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">조정금액</TableHead>
                    <TableHead className="min-w-[100px] whitespace-nowrap">납기일자</TableHead>
                    <TableHead className="min-w-[80px] whitespace-nowrap">VAT구분</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.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?.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">
                      {item.unitPrice?.toLocaleString() || '-'}
                    </TableCell>
                    <TableCell>{item.priceUnit || '-'}</TableCell>
                    <TableCell>{item.priceUnitValue || '-'}</TableCell>
                    <TableCell className="text-right font-mono font-semibold">
                      {item.contractAmount?.toLocaleString() || '-'}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {item.adjustmentAmount ? item.adjustmentAmount.toLocaleString() : '-'}
                    </TableCell>
                    <TableCell>{item.deliveryDate || '-'}</TableCell>
                    <TableCell>{item.vatType || '-'}</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">
              총 계약금액: {items.reduce((sum, item) => sum + item.contractAmount, 0).toLocaleString()} 원
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}