// lib/tbe-last/table/dialogs/session-detail-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 SessionDetailDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  sessionDetail: any
  isLoading: boolean
}

export function SessionDetailDialog({ 
  open, 
  onOpenChange, 
  sessionDetail, 
  isLoading 
}: SessionDetailDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>TBE Session Detail</DialogTitle>
          <DialogDescription>
            {sessionDetail?.session?.sessionCode} - {sessionDetail?.session?.vendorName}
          </DialogDescription>
        </DialogHeader>
        {isLoading ? (
          <div className="p-8 text-center">Loading...</div>
        ) : sessionDetail ? (
          <div className="space-y-4">
            {/* Session info */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm font-medium">RFQ Code</p>
                <p className="text-sm text-muted-foreground">{sessionDetail.session.rfqCode}</p>
              </div>
              <div>
                <p className="text-sm font-medium">Status</p>
                <Badge>{sessionDetail.session.sessionStatus}</Badge>
              </div>
              <div>
                <p className="text-sm font-medium">Project</p>
                <p className="text-sm text-muted-foreground">
                  {sessionDetail.session.projectCode} - {sessionDetail.session.projectName}
                </p>
              </div>
              <div>
                <p className="text-sm font-medium">Package</p>
                <p className="text-sm text-muted-foreground">
                  {sessionDetail.session.packageNo} - {sessionDetail.session.packageName}
                </p>
              </div>
            </div>
            
            {/* PR Items */}
            {sessionDetail.prItems?.length > 0 && (
              <div>
                <h3 className="font-medium mb-2">PR Items</h3>
                <div className="border rounded-lg">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="border-b">
                        <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">Qty</th>
                        <th className="text-left p-2">Delivery</th>
                      </tr>
                    </thead>
                    <tbody>
                      {sessionDetail.prItems.map((item: any) => (
                        <tr key={item.id} className="border-b">
                          <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.quantity} {item.uom}</td>
                          <td className="p-2">
                            {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        ) : null}
      </DialogContent>
    </Dialog>
  )
}