"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { formatDateTime } from "@/lib/utils"
import { CalendarClock } from "lucide-react"
import { RfqItemsTable } from "../vendor-cbe-table/rfq-items-table/rfq-items-table"
import { TbeVendorFields } from "@/config/vendorTbeColumnsConfig"

interface RfqDeailDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  rfqId: number | null
  rfq: TbeVendorFields | null
}

export function RfqDeailDialog({
  isOpen,
  onOpenChange,
  rfqId,
  rfq,
}: RfqDeailDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[90wv] sm:max-h-[80vh] overflow-auto" style={{maxWidth:1000, height:480}}>
        <DialogHeader>
          <div className="flex flex-col space-y-2">
            <DialogTitle>{rfq && rfq.rfqCode} Detail</DialogTitle>
            {rfq && (
              <div className="flex flex-col space-y-3 mt-2">
                <div className="text-sm text-muted-foreground">
                  <span className="font-medium text-foreground">{rfq.rfqDescription && rfq.rfqDescription}</span>
                </div>
                
                {/* 정보를 두 행으로 나누어 표시 */}
                <div className="flex flex-col space-y-2 sm:space-y-0 sm:flex-row sm:justify-between sm:items-center">
                  {/* 첫 번째 행: 상태 배지 */}
                  <div className="flex items-center flex-wrap gap-2">
                    {rfq.vendorStatus && (
                      <Badge variant="outline">
                        {rfq.rfqStatus}
                      </Badge>
                    )}
                    {rfq.rfqType && (
                      <Badge
                        variant={
                          rfq.rfqType === "BUDGETARY" ? "default" :
                          rfq.rfqType === "PURCHASE" ? "destructive" :
                          rfq.rfqType === "PURCHASE_BUDGETARY" ? "secondary" : "outline"
                        }
                      >
                        {rfq.rfqType}
                      </Badge>
                    )}
                  </div>
                  
                  {/* 두 번째 행: Due Date를 강조 표시 */}
                  {rfq.rfqDueDate && (
                    <div className="flex items-center">
                      <Badge variant="secondary" className="flex gap-1 text-xs py-1 px-3">
                        <CalendarClock className="h-3.5 w-3.5" />
                        <span className="font-semibold">Due Date:</span> 
                        <span>{formatDateTime(rfq.rfqDueDate)}</span>
                      </Badge>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </DialogHeader>
        {rfqId && (
          <div className="py-4">
            <RfqItemsTable rfqId={rfqId} />
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}