'use client'

import * as React from 'react'
import { Bidding } from '@/db/schema'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { formatDate } from '@/lib/utils'

interface PrItem {
  id: number
  biddingId: number
  itemName: string
  itemCode: string
  specification: string
  quantity: number
  unit: string
  estimatedPrice: number
  budget: number
  deliveryDate: Date
  notes: string
  createdAt: Date
  updatedAt: Date
}

interface BiddingDetailItemsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  prItems: PrItem[]
  bidding: Bidding
}

export function BiddingDetailItemsDialog({
  open,
  onOpenChange,
  prItems,
  bidding
}: BiddingDetailItemsDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>품목 정보</DialogTitle>
          <DialogDescription>
            입찰번호: {bidding.biddingNumber} - 품목 상세 정보
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium">프로젝트:</span> {bidding.projectName || '-'}
            </div>
            <div>
              <span className="font-medium">품목:</span> {bidding.itemName || '-'}
            </div>
          </div>

          <div className="border rounded-lg">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>품목코드</TableHead>
                  <TableHead>품목명</TableHead>
                  <TableHead>규격</TableHead>
                  <TableHead className="text-right">수량</TableHead>
                  <TableHead>단위</TableHead>
                  <TableHead className="text-right">예상단가</TableHead>
                  <TableHead className="text-right">예산</TableHead>
                  <TableHead>납기요청일</TableHead>
                  <TableHead>비고</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {prItems.length > 0 ? (
                  prItems.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-mono text-sm">
                        {item.itemCode}
                      </TableCell>
                      <TableCell className="font-medium">
                        {item.itemName}
                      </TableCell>
                      <TableCell className="text-sm">
                        {item.specification || '-'}
                      </TableCell>
                      <TableCell className="text-right">
                        {item.quantity ? Number(item.quantity).toLocaleString() : '-'}
                      </TableCell>
                      <TableCell>{item.unit}</TableCell>
                      <TableCell className="text-right font-mono">
                        {item.estimatedPrice ? Number(item.estimatedPrice).toLocaleString() : '-'} {bidding.currency}
                      </TableCell>
                      <TableCell className="text-right font-mono">
                        {item.budget ? Number(item.budget).toLocaleString() : '-'} {bidding.currency}
                      </TableCell>
                      <TableCell className="text-sm">
                        {item.deliveryDate ? formatDate(item.deliveryDate, 'KR') : '-'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {item.notes || '-'}
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={9} className="text-center py-8">
                      등록된 품목이 없습니다.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>

          {prItems.length > 0 && (
            <div className="text-sm text-muted-foreground">
              총 {prItems.length}개 품목
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}