"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { RfqWithAll } from "../types"
/**
 * 아이템 구조 예시
 * - API 응답에서 quantity가 "string" 형태이므로,
 *   숫자로 사용하실 거라면 parse 과정이 필요할 수 있습니다.
 */
export interface RfqItem {
  id: number
  itemCode: string
  itemName: string
  quantity: string
  description: string
  uom: string
}

/**
 * 첨부파일 구조 예시
 */
export interface RfqAttachment {
  id: number
  fileName: string
  filePath: string
  vendorId: number | null
  evaluationId: number | null
}


/**
 * 다이얼로그 내에서만 사용할 단순 아이템 구조 (예: 임시/기본값 표출용)
 */
export interface DefaultItem {
  id?: number
  itemCode: string
  description?: string | null
  quantity?: number | null
  uom?: string | null
}

/**
 * RfqsItemsDialog 컴포넌트 Prop 타입
 */
export interface RfqsItemsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  rfq: RfqWithAll
  defaultItems?: DefaultItem[]
}

export function RfqsItemsDialog({
  open,
  onOpenChange,
  rfq,
}: RfqsItemsDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-none w-[1200px]">
        <DialogHeader>
          <DialogTitle>Items for RFQ {rfq?.rfqCode}</DialogTitle>
          <DialogDescription>
            Below is the list of items for this RFQ.
          </DialogDescription>
        </DialogHeader>

        <div className="overflow-x-auto w-full space-y-4">
          {rfq && rfq.items.length === 0 && (
            <p className="text-sm text-muted-foreground">No items found.</p>
          )}
          {rfq && rfq.items.length > 0 && (
            <Table>
              {/* 필요에 따라 TableCaption 등을 추가해도 좋습니다. */}
              <TableHeader>
                <TableRow>
                  <TableHead>Item Code</TableHead>
                  <TableHead>Item Code</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead>Qty</TableHead>
                  <TableHead>UoM</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rfq.items.map((it, idx) => (
                  <TableRow key={it.id ?? idx}>
                    <TableCell>{it.itemCode || "No Code"}</TableCell>
                    <TableCell>{it.itemName || "No Name"}</TableCell>
                    <TableCell>{it.description || "-"}</TableCell>
                    <TableCell>{it.quantity ?? 1}</TableCell>
                    <TableCell>{it.uom ?? "each"}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </div>

        <DialogFooter className="mt-4">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}