// lib/vendor-rfq-response/vendor-tbe-table/vendor-evaluation-view-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 { ScrollArea } from "@/components/ui/scroll-area"
import { 
  CheckCircle, 
  XCircle, 
  AlertCircle,
  FileText,
  Package,
  DollarSign,
  MessageSquare
} from "lucide-react"
import { formatDate } from "@/lib/utils"

interface VendorEvaluationViewDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedSession: any
  sessionDetail: any
}

export function VendorEvaluationViewDialog({
  open,
  onOpenChange,
  selectedSession,
  sessionDetail
}: VendorEvaluationViewDialogProps) {
  
  // Get evaluation icon
  const getEvaluationIcon = (result: string | null) => {
    switch (result) {
      case "pass":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      case "conditional_pass":
        return <AlertCircle className="h-5 w-5 text-yellow-600" />
      case "non_pass":
        return <XCircle className="h-5 w-5 text-red-600" />
      default:
        return null
    }
  }
  
  // Get result display text
  const getResultDisplay = (result: string | null) => {
    switch (result) {
      case "pass":
        return { text: "Pass", variant: "default" as const }
      case "conditional_pass":
        return { text: "Conditional Pass", variant: "secondary" as const }
      case "non_pass":
        return { text: "Non-Pass", variant: "destructive" as const }
      default:
        return { text: "Pending", variant: "outline" as const }
    }
  }
  
  const resultDisplay = getResultDisplay(selectedSession?.evaluationResult)
  
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle>TBE Evaluation Result</DialogTitle>
          <DialogDescription>
            {selectedSession?.sessionCode} - Technical Bid Evaluation 결과
          </DialogDescription>
        </DialogHeader>
        
        <ScrollArea className="h-[500px] pr-4">
          <div className="space-y-6">
            {/* Overall Result */}
            <div className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-medium">Overall Evaluation Result</h3>
                <div className="flex items-center gap-2">
                  {getEvaluationIcon(selectedSession?.evaluationResult)}
                  <Badge variant={resultDisplay.variant} className="text-sm">
                    {resultDisplay.text}
                  </Badge>
                </div>
              </div>
              
              {selectedSession?.evaluationResult === "conditional_pass" && (
                <div className="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                  <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-2">
                    Conditions to be fulfilled:
                  </p>
                  <p className="text-sm text-yellow-700 dark:text-yellow-300">
                    {sessionDetail?.session?.conditionalRequirements || "조건부 요구사항이 명시되지 않았습니다."}
                  </p>
                  {sessionDetail?.session?.conditionsFulfilled !== undefined && (
                    <div className="mt-2">
                      <Badge variant={sessionDetail.session.conditionsFulfilled ? "default" : "outline"}>
                        {sessionDetail.session.conditionsFulfilled ? "Conditions Fulfilled" : "Pending Fulfillment"}
                      </Badge>
                    </div>
                  )}
                </div>
              )}
              
              {selectedSession?.evaluationResult === "non_pass" && (
                <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                  <p className="text-sm text-red-700 dark:text-red-300">
                    기술 평가 기준을 충족하지 못했습니다. 자세한 내용은 아래 평가 요약을 참고해주세요.
                  </p>
                </div>
              )}
            </div>
            
            {/* Technical Summary */}
            {sessionDetail?.session?.technicalSummary && (
              <div className="border rounded-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <Package className="h-5 w-5 text-muted-foreground" />
                  <h3 className="font-medium">Technical Evaluation Summary</h3>
                </div>
                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                  {sessionDetail.session.technicalSummary}
                </p>
              </div>
            )}
            
            {/* Commercial Summary */}
            {sessionDetail?.session?.commercialSummary && (
              <div className="border rounded-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <DollarSign className="h-5 w-5 text-muted-foreground" />
                  <h3 className="font-medium">Commercial Evaluation Summary</h3>
                </div>
                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                  {sessionDetail.session.commercialSummary}
                </p>
              </div>
            )}
            
            {/* Overall Remarks */}
            {sessionDetail?.session?.overallRemarks && (
              <div className="border rounded-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <MessageSquare className="h-5 w-5 text-muted-foreground" />
                  <h3 className="font-medium">Overall Remarks</h3>
                </div>
                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                  {sessionDetail.session.overallRemarks}
                </p>
              </div>
            )}
            
            {/* Approval Information */}
            {sessionDetail?.session?.approvedAt && (
              <div className="border rounded-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <FileText className="h-5 w-5 text-muted-foreground" />
                  <h3 className="font-medium">Approval Information</h3>
                </div>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="text-muted-foreground">Approved By</p>
                    <p className="font-medium">{sessionDetail.session.approvedBy || "-"}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Approved Date</p>
                    <p className="font-medium">
                      {formatDate(sessionDetail.session.approvedAt, "KR")}
                    </p>
                  </div>
                  {sessionDetail.session.approvalRemarks && (
                    <div className="col-span-2">
                      <p className="text-muted-foreground mb-1">Approval Remarks</p>
                      <p className="font-medium">{sessionDetail.session.approvalRemarks}</p>
                    </div>
                  )}
                </div>
              </div>
            )}
            
            {/* Session Information */}
            <div className="border rounded-lg p-4">
              <h3 className="font-medium mb-3">Session Information</h3>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <p className="text-muted-foreground">Status</p>
                  <Badge>{selectedSession?.sessionStatus}</Badge>
                </div>
                <div>
                  <p className="text-muted-foreground">Created Date</p>
                  <p className="font-medium">
                    {selectedSession?.createdAt ? formatDate(selectedSession.createdAt, "KR") : "-"}
                  </p>
                </div>
                {sessionDetail?.session?.actualStartDate && (
                  <div>
                    <p className="text-muted-foreground">Start Date</p>
                    <p className="font-medium">
                      {formatDate(sessionDetail.session.actualStartDate, "KR")}
                    </p>
                  </div>
                )}
                {sessionDetail?.session?.actualEndDate && (
                  <div>
                    <p className="text-muted-foreground">End Date</p>
                    <p className="font-medium">
                      {formatDate(sessionDetail.session.actualEndDate, "KR")}
                    </p>
                  </div>
                )}
              </div>
            </div>
            
            {/* Next Steps (for vendor) */}
            {selectedSession?.evaluationResult && (
              <div className="border rounded-lg p-4 bg-muted/50">
                <h3 className="font-medium mb-3">Next Steps</h3>
                {selectedSession.evaluationResult === "pass" && (
                  <p className="text-sm text-muted-foreground">
                    기술 평가를 통과하셨습니다. 상업 협상 단계로 진행될 예정입니다.
                    구매담당자가 추가 안내를 제공할 것입니다.
                  </p>
                )}
                {selectedSession.evaluationResult === "conditional_pass" && (
                  <p className="text-sm text-muted-foreground">
                    조건부 통과되었습니다. 명시된 조건을 충족하신 후 최종 승인을 받으실 수 있습니다.
                    조건 충족을 위한 추가 문서나 설명을 제출해주세요.
                  </p>
                )}
                {selectedSession.evaluationResult === "non_pass" && (
                  <p className="text-sm text-muted-foreground">
                    안타깝게도 이번 기술 평가를 통과하지 못하셨습니다.
                    평가 요약 내용을 참고하시어 향후 입찰에 반영해주시기 바랍니다.
                  </p>
                )}
              </div>
            )}
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  )
}