// lib/tbe-last/table/dialogs/pr-items-dialog.tsx

"use client"

import * as React from "react"
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogDescription 
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { formatDate } from "@/lib/utils"

interface PrItemsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  sessionDetail: any
  isLoading: boolean
}

export function PrItemsDialog({ 
  open, 
  onOpenChange, 
  sessionDetail, 
  isLoading 
}: PrItemsDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>PR Items</DialogTitle>
          <DialogDescription>
            Purchase Request items for this RFQ
          </DialogDescription>
        </DialogHeader>
        {isLoading ? (
          <div className="p-8 text-center">Loading...</div>
        ) : sessionDetail?.prItems ? (
          <div className="border rounded-lg">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b bg-muted/50">
                  <th className="text-left p-2">PR No</th>
                  <th className="text-left p-2">Material Code</th>
                  <th className="text-left p-2">Description</th>
                  <th className="text-left p-2">Size</th>
                  <th className="text-left p-2">Qty</th>
                  <th className="text-left p-2">Unit</th>
                  <th className="text-left p-2">Delivery</th>
                  <th className="text-left p-2">Major</th>
                </tr>
              </thead>
              <tbody>
                {sessionDetail.prItems.map((item: any) => (
                  <tr key={item.id} className="border-b hover:bg-muted/20">
                    <td className="p-2">{item.prNo}</td>
                    <td className="p-2">{item.materialCode}</td>
                    <td className="p-2">{item.materialDescription}</td>
                    <td className="p-2">{item.size || "-"}</td>
                    <td className="p-2 text-right">{item.quantity}</td>
                    <td className="p-2">{item.uom}</td>
                    <td className="p-2">
                      {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"}
                    </td>
                    <td className="p-2 text-center">
                      {item.majorYn && <Badge variant="default">Major</Badge>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="p-8 text-center text-muted-foreground">
            No PR items available
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}