"use client";

import * as React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Trophy,
  TrendingUp,
  TrendingDown,
  AlertCircle,
  CheckCircle,
  XCircle,
  ChevronDown,
  ChevronUp,
  Info,
  DollarSign,
  Calendar,
  Package,
  Globe,
  FileText,
  Truck,
  AlertTriangle,
  Award,
  UserCheck,
  X,
  RefreshCw,
  Clock,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { ComparisonData, selectVendor, cancelVendorSelection } from "./compare-action";
import { createPO, createGeneralContract, createBidding } from "./contract-actions";
import { toast } from "sonner";

interface QuotationCompareViewProps {
  data: ComparisonData;
}

export function QuotationCompareView({ data }: QuotationCompareViewProps) {
  const [expandedItems, setExpandedItems] = React.useState<Set<number>>(new Set());
  const [selectedVendorId, setSelectedVendorId] = React.useState<string>("");
  const [showSelectionDialog, setShowSelectionDialog] = React.useState(false);
  const [showCancelDialog, setShowCancelDialog] = React.useState(false);
  const [showContractDialog, setShowContractDialog] = React.useState(false);
  const [selectedContractType, setSelectedContractType] = React.useState<"PO" | "CONTRACT" | "BIDDING" | "">("");
  const [selectionReason, setSelectionReason] = React.useState("");
  const [cancelReason, setCancelReason] = React.useState("");
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  // 선정된 업체 정보 확인
  const selectedVendor = data.vendors.find(v => v.isSelected);
  const hasSelection = !!selectedVendor;
  const isSelectionApproved = selectedVendor?.selectionApprovalStatus === "승인";
  const isPendingApproval = selectedVendor?.selectionApprovalStatus === "대기";
  const hasContract = selectedVendor?.contractStatus ? true : false;

  // 계약 진행 처리
  const handleContractCreation = async () => {
    if (!selectedContractType) {
      toast.error("계약 유형을 선택해주세요.");
      return;
    }

    if (!selectedVendor) {
      toast.error("선정된 업체가 없습니다.");
      return;
    }

    setIsSubmitting(true);
    try {
      let result;
      
      switch (selectedContractType) {
        case "PO":
          result = await createPO({
            rfqId: data.rfqInfo.id,
            vendorId: selectedVendor.vendorId,
            vendorName: selectedVendor.vendorName,
            totalAmount: selectedVendor.totalAmount,
            currency: selectedVendor.currency,
            selectionReason: selectedVendor.selectionReason,
          });
          break;
          
        case "CONTRACT":
          result = await createGeneralContract({
            rfqId: data.rfqInfo.id,
            vendorId: selectedVendor.vendorId,
            vendorName: selectedVendor.vendorName,
            totalAmount: selectedVendor.totalAmount,
            currency: selectedVendor.currency,
          });
          break;
          
        case "BIDDING":
          result = await createBidding({
            rfqId: data.rfqInfo.id,
            vendorId: selectedVendor.vendorId,
            vendorName: selectedVendor.vendorName,
            totalAmount: selectedVendor.totalAmount,
            currency: selectedVendor.currency,
          });
          break;
          
        default:
          throw new Error("올바른 계약 유형이 아닙니다.");
      }

      if (result.success) {
        toast.success(result.message || "계약 프로세스가 시작되었습니다.");
        setShowContractDialog(false);
        setSelectedContractType("");
        window.location.reload();
      } else {
        throw new Error(result.error || "계약 진행 중 오류가 발생했습니다.");
      }
    } catch (error) {
      console.error("계약 생성 오류:", error);
      toast.error(error instanceof Error ? error.message : "계약 진행 중 오류가 발생했습니다.");
    } finally {
      setIsSubmitting(false);
    }
  };

  // 컴포넌트 마운트 시 선정된 업체가 있으면 자동 선택
  React.useEffect(() => {
    if (selectedVendor) {
      setSelectedVendorId(selectedVendor.vendorId.toString());
    }
  }, [selectedVendor]);

  // 아이템 확장/축소 토글
  const toggleItemExpansion = (itemId: number) => {
    setExpandedItems((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(itemId)) {
        newSet.delete(itemId);
      } else {
        newSet.add(itemId);
      }
      return newSet;
    });
  };

  // 순위에 따른 색상
  const getRankColor = (rank: number) => {
    switch (rank) {
      case 1:
        return "text-green-600 bg-green-50";
      case 2:
        return "text-blue-600 bg-blue-50";
      case 3:
        return "text-orange-600 bg-orange-50";
      default:
        return "text-gray-600 bg-gray-50";
    }
  };

  // 가격 차이 색상
  const getVarianceColor = (variance: number) => {
    if (variance < -5) return "text-green-600";
    if (variance > 5) return "text-red-600";
    return "text-gray-600";
  };

  // 금액 포맷
  const formatAmount = (amount: number, currency: string = "KRW") => {
    return new Intl.NumberFormat("ko-KR", {
      style: "currency",
      currency: currency,
      minimumFractionDigits: 0,
      maximumFractionDigits: 2,
    }).format(amount);
  };

  // 업체 선정 처리
  const handleVendorSelection = async () => {
    if (!selectedVendorId) {
      toast.error("선정할 업체를 선택해주세요.");
      return;
    }

    if (!selectionReason.trim()) {
      toast.error("선정 사유를 입력해주세요.");
      return;
    }

    setIsSubmitting(true);
    try {
      const vendor = data.vendors.find(v => v.vendorId === parseInt(selectedVendorId));
      if (!vendor) {
        throw new Error("선택한 업체를 찾을 수 없습니다.");
      }

      const result = await selectVendor({
        rfqId: data.rfqInfo.id,
        vendorId: vendor.vendorId,
        vendorName: vendor.vendorName,
        vendorCode: vendor.vendorCode,
        totalAmount: vendor.totalAmount,
        currency: vendor.currency,
        selectionReason: selectionReason,
        priceRank: vendor.rank || 0,
        hasConditionDifferences: vendor.conditionDifferences.hasDifferences,
        criticalDifferences: vendor.conditionDifferences.criticalDifferences,
      });

      if (result.success) {
        toast.success("업체가 성공적으로 선정되었습니다.");
        setShowSelectionDialog(false);
        setSelectionReason("");
        window.location.reload(); // 페이지 새로고침으로 선정 상태 반영
      } else {
        throw new Error(result.error || "업체 선정 중 오류가 발생했습니다.");
      }
    } catch (error) {
      console.error("업체 선정 오류:", error);
      toast.error(error instanceof Error ? error.message : "업체 선정 중 오류가 발생했습니다.");
    } finally {
      setIsSubmitting(false);
    }
  };

  // 업체 선정 취소 처리
  const handleCancelSelection = async () => {
    if (!cancelReason.trim()) {
      toast.error("취소 사유를 입력해주세요.");
      return;
    }

    setIsSubmitting(true);
    try {
      // 파라미터를 올바르게 전달
      const result = await cancelVendorSelection(Number(data.rfqInfo.id),cancelReason);

      if (result.success) {
        toast.success("업체 선정이 취소되었습니다.");
        setShowCancelDialog(false);
        setCancelReason("");
        window.location.reload();
      } else {
        throw new Error(result.error || "선정 취소 중 오류가 발생했습니다.");
      }
    } catch (error) {
      console.error("선정 취소 오류:", error);
      toast.error(error instanceof Error ? error.message : "선정 취소 중 오류가 발생했습니다.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* 상단 액션 바 */}
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">견적 비교 분석</h2>
        <div className="flex gap-2">
          {hasSelection ? (
            <>
              {!isSelectionApproved && (
                <Button
                  variant="destructive"
                  onClick={() => setShowCancelDialog(true)}
                  className="gap-2"
                >
                  <X className="h-4 w-4" />
                  선정 취소
                </Button>
              )}
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedVendorId("");
                  setShowSelectionDialog(true);
                }}
                disabled={isSelectionApproved}
                className="gap-2"
              >
                <RefreshCw className="h-4 w-4" />
                재선정
              </Button>
            </>
          ) : (
            <Button
              onClick={() => setShowSelectionDialog(true)}
              disabled={!selectedVendorId}
              className="gap-2"
            >
              <Award className="h-4 w-4" />
              업체 선정
            </Button>
          )}
        </div>
      </div>

      {/* 선정 상태 알림 */}
      {hasSelection && (
        <Alert className={cn(
          "border-2",
          hasContract 
            ? "border-purple-500 bg-purple-50"
            : isSelectionApproved 
            ? "border-green-500 bg-green-50" 
            : isPendingApproval
            ? "border-yellow-500 bg-yellow-50"
            : "border-blue-500 bg-blue-50"
        )}>
          <div className="flex items-start justify-between">
            <div className="flex gap-3">
              {hasContract ? (
                <FileText className="h-5 w-5 text-purple-600 mt-0.5" />
              ) : isSelectionApproved ? (
                <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
              ) : isPendingApproval ? (
                <Clock className="h-5 w-5 text-yellow-600 mt-0.5" />
              ) : (
                <Award className="h-5 w-5 text-blue-600 mt-0.5" />
              )}
              <div className="space-y-2">
                <AlertTitle className="text-lg">
                  {hasContract
                    ? "계약 진행중"
                    : isSelectionApproved 
                    ? "업체 선정 승인 완료"
                    : isPendingApproval
                    ? "업체 선정 승인 대기중"
                    : "업체 선정 완료"}
                </AlertTitle>
                <AlertDescription className="space-y-1">
                  <p className="font-semibold">선정 업체: {selectedVendor.vendorName} ({selectedVendor.vendorCode})</p>
                  <p>선정 금액: {formatAmount(selectedVendor.totalAmount, selectedVendor.currency)}</p>
                  <p>선정일: {selectedVendor.selectionDate ? format(new Date(selectedVendor.selectionDate), "yyyy년 MM월 dd일", { locale: ko }) : "-"}</p>
                  <p>선정 사유: {selectedVendor.selectionReason || "-"}</p>
                  {selectedVendor.contractNo && (
                    <>
                      <div className="border-t pt-1 mt-2">
                        <p className="font-semibold">계약 정보</p>
                        <p>계약 번호: {selectedVendor.contractNo}</p>
                        <p>계약 상태: {selectedVendor.contractStatus}</p>
                        {selectedVendor.contractCreatedAt && (
                          <p>계약 생성일: {format(new Date(selectedVendor.contractCreatedAt), "yyyy년 MM월 dd일", { locale: ko })}</p>
                        )}
                      </div>
                    </>
                  )}
                  {selectedVendor.selectedByName && (
                    <p className="text-sm text-muted-foreground">선정자: {selectedVendor.selectedByName}</p>
                  )}
                </AlertDescription>
              </div>
            </div>
            {/* 계약 진행 버튼들을 알림 카드 안에도 추가 (선택사항) */}
            {!hasContract && !isPendingApproval && (
              <div className="flex flex-col gap-2">
                <Button
                  size="sm"
                  variant="default"
                  onClick={() => {
                    setSelectedContractType("PO");
                    setShowContractDialog(true);
                  }}
                  className="gap-1 bg-green-600 hover:bg-green-700 text-xs"
                >
                  <FileText className="h-3 w-3" />
                  PO 생성
                </Button>
                <Button
                  size="sm"
                  variant="default"
                  onClick={() => {
                    setSelectedContractType("CONTRACT");
                    setShowContractDialog(true);
                  }}
                  className="gap-1 bg-blue-600 hover:bg-blue-700 text-xs"
                >
                  <FileText className="h-3 w-3" />
                  일반계약
                </Button>
                <Button
                  size="sm"
                  variant="default"
                  onClick={() => {
                    setSelectedContractType("BIDDING");
                    setShowContractDialog(true);
                  }}
                  className="gap-1 bg-purple-600 hover:bg-purple-700 text-xs"
                >
                  <Globe className="h-3 w-3" />
                  입찰
                </Button>
              </div>
            )}
          </div>
        </Alert>
      )}

      {/* 요약 카드 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {/* 최저가 벤더 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <Trophy className="h-4 w-4 text-yellow-500" />
              최저가 벤더
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-lg font-bold">{data.summary.lowestBidder}</p>
            <p className="text-sm text-muted-foreground">
              {formatAmount(data.summary.priceRange.min, data.summary.currency)}
            </p>
          </CardContent>
        </Card>

        {/* 선정 업체 또는 평균 가격 */}
        {hasSelection ? (
          <Card className="border-2 border-blue-200 bg-blue-50">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                <UserCheck className="h-4 w-4 text-blue-600" />
                선정 업체
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-lg font-bold">{selectedVendor.vendorName}</p>
              <p className="text-sm text-blue-600">
                {formatAmount(selectedVendor.totalAmount, selectedVendor.currency)}
              </p>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                <DollarSign className="h-4 w-4" />
                평균 가격
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-lg font-bold">
                {formatAmount(data.summary.priceRange.average, data.summary.currency)}
              </p>
              <p className="text-sm text-muted-foreground">
                {data.vendors.length}개 업체 평균
              </p>
            </CardContent>
          </Card>
        )}

        {/* 가격 범위 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <TrendingUp className="h-4 w-4" />
              가격 범위
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-lg font-bold">
              {((data.summary.priceRange.max - data.summary.priceRange.min) / data.summary.priceRange.min * 100).toFixed(1)}%
            </p>
            <p className="text-sm text-muted-foreground">
              최저가 대비 최고가 차이
            </p>
          </CardContent>
        </Card>

        {/* 조건 불일치 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <AlertCircle className="h-4 w-4 text-orange-500" />
              조건 불일치
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-lg font-bold">
              {data.vendors.filter(v => v.conditionDifferences.hasDifferences).length}개
            </p>
            <p className="text-sm text-muted-foreground">
              제시 조건과 차이 있음
            </p>
          </CardContent>
        </Card>
      </div>

      {/* 탭 뷰 */}
      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="overview">종합 비교</TabsTrigger>
          <TabsTrigger value="conditions">조건 비교</TabsTrigger>
          <TabsTrigger value="items">아이템별 비교</TabsTrigger>
          <TabsTrigger value="analysis">상세 분석</TabsTrigger>
        </TabsList>

        {/* 종합 비교 */}
        <TabsContent value="overview" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>가격 순위 및 업체 선정</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {data.vendors.map((vendor) => (
                  <div
                    key={vendor.vendorId}
                    className={cn(
                      "flex items-center justify-between p-4 border rounded-lg transition-colors",
                      vendor.isSelected 
                        ? "bg-blue-100 border-blue-400 border-2" 
                        : hasSelection
                        ? "opacity-60"
                        : selectedVendorId === vendor.vendorId.toString()
                        ? "bg-blue-50 border-blue-300 cursor-pointer"
                        : "hover:bg-gray-50 cursor-pointer"
                    )}
                    onClick={() => {
                      if (!hasSelection) {
                        setSelectedVendorId(vendor.vendorId.toString());
                      }
                    }}
                  >
                    <div className="flex items-center gap-4">
                      {!hasSelection && (
                        <input
                          type="radio"
                          name="vendor-selection"
                          value={vendor.vendorId}
                          checked={selectedVendorId === vendor.vendorId.toString()}
                          onChange={(e) => setSelectedVendorId(e.target.value)}
                          className="h-4 w-4 text-blue-600"
                        />
                      )}
                      <div
                        className={cn(
                          "w-10 h-10 rounded-full flex items-center justify-center font-bold",
                          getRankColor(vendor.rank || 0)
                        )}
                      >
                        {vendor.rank}
                      </div>
                      <div>
                        <p className="font-semibold flex items-center gap-2">
                          {vendor.vendorName}
                          {vendor.isSelected && (
                            <Badge className="bg-blue-600">선정</Badge>
                          )}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {vendor.vendorCode} • {vendor.vendorCountry}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-6">
                      {/* 조건 차이 표시 */}
                      {vendor.conditionDifferences.criticalDifferences.length > 0 && (
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger>
                              <Badge variant="destructive" className="gap-1">
                                <AlertTriangle className="h-3 w-3" />
                                중요 차이 {vendor.conditionDifferences.criticalDifferences.length}
                              </Badge>
                            </TooltipTrigger>
                            <TooltipContent>
                              <div className="space-y-1">
                                {vendor.conditionDifferences.criticalDifferences.map((diff, idx) => (
                                  <p key={idx} className="text-xs">{diff}</p>
                                ))}
                              </div>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      )}

                      {/* 가격 정보 */}
                      <div className="text-right">
                        <p className="text-lg font-bold">
                          {formatAmount(vendor.totalAmount, vendor.currency)}
                        </p>
                        <p className={cn("text-sm", getVarianceColor(vendor.priceVariance || 0))}>
                          {vendor.priceVariance && vendor.priceVariance > 0 ? "+" : ""}
                          {vendor.priceVariance?.toFixed(1)}% vs 평균
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 조건 비교 */}
        <TabsContent value="conditions" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>거래 조건 비교</CardTitle>
            </CardHeader>
            <CardContent className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b">
                    <th className="text-left p-2">항목</th>
                    <th className="text-left p-2">구매자 제시</th>
                    {data.vendors.map((vendor) => (
                      <th key={vendor.vendorId} className={cn(
                        "text-left p-2",
                        vendor.isSelected && "bg-blue-50"
                      )}>
                        {vendor.vendorName}
                        {vendor.isSelected && (
                          <Badge className="ml-2 bg-blue-600">선정</Badge>
                        )}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {/* 통화 */}
                  <tr>
                    <td className="p-2 font-medium">통화</td>
                    <td className="p-2">{data.vendors[0]?.buyerConditions.currency}</td>
                    {data.vendors.map((vendor) => (
                      <td key={vendor.vendorId} className={cn(
                        "p-2",
                        vendor.isSelected && "bg-blue-50"
                      )}>
                        <div className="flex items-center gap-2">
                          {vendor.vendorConditions.currency || vendor.buyerConditions.currency}
                          {vendor.vendorConditions.currency !== vendor.buyerConditions.currency && (
                            <Badge variant="outline" className="text-xs">변경</Badge>
                          )}
                        </div>
                      </td>
                    ))}
                  </tr>

                  {/* 지급조건 */}
                  <tr>
                    <td className="p-2 font-medium">지급조건</td>
                    <td className="p-2">
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger>
                            {data.vendors[0]?.buyerConditions.paymentTermsCode}
                          </TooltipTrigger>
                          <TooltipContent>
                            {data.vendors[0]?.buyerConditions.paymentTermsDesc}
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </td>
                    {data.vendors.map((vendor) => (
                      <td key={vendor.vendorId} className={cn(
                        "p-2",
                        vendor.isSelected && "bg-blue-50"
                      )}>
                        <div className="flex items-center gap-2">
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger>
                                {vendor.vendorConditions.paymentTermsCode || vendor.buyerConditions.paymentTermsCode}
                              </TooltipTrigger>
                              <TooltipContent>
                                {vendor.vendorConditions.paymentTermsDesc || vendor.buyerConditions.paymentTermsDesc}
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                          {vendor.vendorConditions.paymentTermsCode && 
                           vendor.vendorConditions.paymentTermsCode !== vendor.buyerConditions.paymentTermsCode && (
                            <Badge variant="outline" className="text-xs">변경</Badge>
                          )}
                        </div>
                      </td>
                    ))}
                  </tr>

                  {/* 나머지 조건들도 동일한 패턴으로 처리 */}
                </tbody>
              </table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 아이템별 비교 */}
        <TabsContent value="items" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>PR 아이템별 가격 비교</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {data.prItems.map((item) => (
                  <Collapsible
                    key={item.prItemId}
                    open={expandedItems.has(item.prItemId)}
                    onOpenChange={() => toggleItemExpansion(item.prItemId)}
                  >
                    <div className="border rounded-lg">
                      <CollapsibleTrigger className="w-full p-4 hover:bg-gray-50 transition-colors">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4 text-left">
                            <div className="flex items-center gap-2">
                              {expandedItems.has(item.prItemId) ? (
                                <ChevronUp className="h-4 w-4" />
                              ) : (
                                <ChevronDown className="h-4 w-4" />
                              )}
                              <Package className="h-4 w-4 text-muted-foreground" />
                            </div>
                            <div>
                              <p className="font-medium">{item.materialDescription}</p>
                              <p className="text-sm text-muted-foreground">
                                {item.materialCode} • {item.prNo} • {item.requestedQuantity} {item.uom}
                              </p>
                            </div>
                          </div>
                          <div className="text-right">
                            <p className="text-sm text-muted-foreground">단가 범위</p>
                            <p className="font-semibold">
                              {formatAmount(item.priceAnalysis.lowestPrice)} ~ {formatAmount(item.priceAnalysis.highestPrice)}
                            </p>
                          </div>
                        </div>
                      </CollapsibleTrigger>

                      <CollapsibleContent>
                        <div className="p-4 pt-0">
                          <table className="w-full">
                            <thead>
                              <tr className="border-b text-sm">
                                <th className="text-left p-2">벤더</th>
                                <th className="text-right p-2">단가</th>
                                <th className="text-right p-2">총액</th>
                                <th className="text-right p-2">수량</th>
                                <th className="text-left p-2">납기</th>
                                <th className="text-left p-2">제조사</th>
                                <th className="text-center p-2">순위</th>
                              </tr>
                            </thead>
                            <tbody className="divide-y">
                              {item.vendorQuotes.map((quote) => (
                                <tr key={quote.vendorId} className="text-sm">
                                  <td className="p-2 font-medium">{quote.vendorName}</td>
                                  <td className="p-2 text-right">
                                    {formatAmount(quote.unitPrice, quote.currency)}
                                  </td>
                                  <td className="p-2 text-right">
                                    {formatAmount(quote.totalPrice, quote.currency)}
                                  </td>
                                  <td className="p-2 text-right">{quote.quotedQuantity}</td>
                                  <td className="p-2">
                                    {quote.deliveryDate
                                      ? format(new Date(quote.deliveryDate), "yyyy-MM-dd")
                                      : quote.leadTime
                                      ? `${quote.leadTime}일`
                                      : "-"}
                                  </td>
                                  <td className="p-2">
                                    {quote.manufacturer && (
                                      <div>
                                        <p>{quote.manufacturer}</p>
                                        {quote.modelNo && (
                                          <p className="text-xs text-muted-foreground">{quote.modelNo}</p>
                                        )}
                                      </div>
                                    )}
                                  </td>
                                  <td className="p-2 text-center">
                                    <Badge className={cn("", getRankColor(quote.priceRank || 0))}>
                                      #{quote.priceRank}
                                    </Badge>
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>

                          {/* 가격 분석 요약 */}
                          <div className="mt-4 p-3 bg-gray-50 rounded-lg">
                            <div className="grid grid-cols-4 gap-4 text-sm">
                              <div>
                                <p className="text-muted-foreground">평균 단가</p>
                                <p className="font-semibold">
                                  {formatAmount(item.priceAnalysis.averagePrice)}
                                </p>
                              </div>
                              <div>
                                <p className="text-muted-foreground">가격 편차</p>
                                <p className="font-semibold">
                                  ±{formatAmount(item.priceAnalysis.priceVariance)}
                                </p>
                              </div>
                              <div>
                                <p className="text-muted-foreground">최저가 업체</p>
                                <p className="font-semibold">
                                  {item.vendorQuotes.find(q => q.priceRank === 1)?.vendorName}
                                </p>
                              </div>
                              <div>
                                <p className="text-muted-foreground">가격 차이</p>
                                <p className="font-semibold">
                                  {((item.priceAnalysis.highestPrice - item.priceAnalysis.lowestPrice) / 
                                    item.priceAnalysis.lowestPrice * 100).toFixed(1)}%
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </CollapsibleContent>
                    </div>
                  </Collapsible>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 상세 분석 */}
        <TabsContent value="analysis" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* 위험 요소 분석 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <AlertTriangle className="h-5 w-5 text-orange-500" />
                  위험 요소 분석
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {data.vendors.map((vendor) => {
                    if (!vendor.conditionDifferences.hasDifferences) return null;
                    
                    return (
                      <div key={vendor.vendorId} className="p-3 border rounded-lg">
                        <p className="font-medium mb-2">{vendor.vendorName}</p>
                        {vendor.conditionDifferences.criticalDifferences.length > 0 && (
                          <div className="space-y-1 mb-2">
                            <p className="text-xs font-medium text-red-600">중요 차이점:</p>
                            {vendor.conditionDifferences.criticalDifferences.map((diff, idx) => (
                              <p key={idx} className="text-xs text-red-600 pl-2">• {diff}</p>
                            ))}
                          </div>
                        )}
                        {vendor.conditionDifferences.differences.length > 0 && (
                          <div className="space-y-1">
                            <p className="text-xs font-medium text-orange-600">일반 차이점:</p>
                            {vendor.conditionDifferences.differences.map((diff, idx) => (
                              <p key={idx} className="text-xs text-orange-600 pl-2">• {diff}</p>
                            ))}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </CardContent>
            </Card>

            {/* 추천 사항 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Info className="h-5 w-5 text-blue-500" />
                  선정 추천
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {/* 가격 기준 추천 */}
                  <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                    <p className="font-medium text-green-800 mb-1">가격 우선 선정</p>
                    <p className="text-sm text-green-700">
                      {data.vendors[0]?.vendorName} - {formatAmount(data.vendors[0]?.totalAmount || 0)}
                    </p>
                    {data.vendors[0]?.conditionDifferences.hasDifferences && (
                      <p className="text-xs text-orange-600 mt-1">
                        ⚠️ 조건 차이 검토 필요
                      </p>
                    )}
                  </div>

                  {/* 조건 준수 기준 추천 */}
                  <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <p className="font-medium text-blue-800 mb-1">조건 준수 우선 선정</p>
                    {(() => {
                      const compliantVendor = data.vendors.find(v => !v.conditionDifferences.hasDifferences);
                      if (compliantVendor) {
                        return (
                          <div>
                            <p className="text-sm text-blue-700">
                              {compliantVendor.vendorName} - {formatAmount(compliantVendor.totalAmount)}
                            </p>
                            <p className="text-xs text-blue-600 mt-1">
                              모든 조건 충족 (가격 순위: #{compliantVendor.rank})
                            </p>
                          </div>
                        );
                      }
                      return (
                        <p className="text-sm text-blue-700">
                          모든 조건을 충족하는 벤더 없음
                        </p>
                      );
                    })()}
                  </div>

                  {/* 균형 추천 */}
                  <div className="p-3 bg-purple-50 border border-purple-200 rounded-lg">
                    <p className="font-medium text-purple-800 mb-1">균형 선정 (추천)</p>
                    {(() => {
                      // 가격 순위와 조건 차이를 고려한 점수 계산
                      const scoredVendors = data.vendors.map(v => ({
                        ...v,
                        score: (v.rank || 10) + v.conditionDifferences.criticalDifferences.length * 3 + 
                               v.conditionDifferences.differences.length
                      }));
                      scoredVendors.sort((a, b) => a.score - b.score);
                      const recommended = scoredVendors[0];
                      
                      return (
                        <div>
                          <p className="text-sm text-purple-700">
                            {recommended.vendorName} - {formatAmount(recommended.totalAmount)}
                          </p>
                          <p className="text-xs text-purple-600 mt-1">
                            가격 순위 #{recommended.rank}, 조건 차이 최소화
                          </p>
                        </div>
                      );
                    })()}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 벤더별 비고사항 */}
          {data.vendors.some(v => v.generalRemark || v.technicalProposal) && (
            <Card>
              <CardHeader>
                <CardTitle>벤더 제안사항 및 비고</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {data.vendors.map((vendor) => {
                    if (!vendor.generalRemark && !vendor.technicalProposal) return null;
                    
                    return (
                      <div key={vendor.vendorId} className="border rounded-lg p-4">
                        <p className="font-medium mb-2">{vendor.vendorName}</p>
                        {vendor.generalRemark && (
                          <div className="mb-2">
                            <p className="text-sm font-medium text-muted-foreground">일반 비고:</p>
                            <p className="text-sm">{vendor.generalRemark}</p>
                          </div>
                        )}
                        {vendor.technicalProposal && (
                          <div>
                            <p className="text-sm font-medium text-muted-foreground">기술 제안:</p>
                            <p className="text-sm">{vendor.technicalProposal}</p>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>

      {/* 업체 선정 모달 */}
      {showSelectionDialog && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
          <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4">
            <h3 className="text-lg font-semibold mb-4">
              {hasSelection ? "업체 재선정 확인" : "업체 선정 확인"}
            </h3>
            
            {selectedVendorId && (
              <div className="space-y-4">
                <div className="rounded-lg border p-4">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm font-medium">선정 업체</span>
                      <span className="text-sm font-bold">
                        {data.vendors.find(v => v.vendorId === parseInt(selectedVendorId))?.vendorName}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm font-medium">견적 금액</span>
                      <span className="text-sm">
                        {formatAmount(
                          data.vendors.find(v => v.vendorId === parseInt(selectedVendorId))?.totalAmount || 0,
                          data.vendors.find(v => v.vendorId === parseInt(selectedVendorId))?.currency
                        )}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm font-medium">가격 순위</span>
                      <span className="text-sm">
                        #{data.vendors.find(v => v.vendorId === parseInt(selectedVendorId))?.rank || 0}
                      </span>
                    </div>
                    {data.vendors.find(v => v.vendorId === parseInt(selectedVendorId))?.conditionDifferences.hasDifferences && (
                      <Alert className="mt-2">
                        <AlertCircle className="h-4 w-4" />
                        <AlertDescription>
                          제시 조건과 차이가 있습니다. 선정 사유를 명확히 기재해주세요.
                        </AlertDescription>
                      </Alert>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <label htmlFor="selection-reason" className="text-sm font-medium">
                    선정 사유 *
                  </label>
                  <textarea
                    id="selection-reason"
                    className="w-full min-h-[100px] p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="업체 선정 사유를 입력해주세요..."
                    value={selectionReason}
                    onChange={(e) => setSelectionReason(e.target.value)}
                    required
                  />
                </div>
              </div>
            )}

            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={() => {
                  setShowSelectionDialog(false);
                  setSelectionReason("");
                }}
                disabled={isSubmitting}
              >
                취소
              </Button>
              <Button
                onClick={handleVendorSelection}
                disabled={!selectionReason || isSubmitting}
              >
                {isSubmitting ? "처리 중..." : hasSelection ? "재선정 확정" : "선정 확정"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* 선정 취소 모달 */}
      {showCancelDialog && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
          <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4">
            <h3 className="text-lg font-semibold mb-4">업체 선정 취소</h3>
            
            <Alert className="mb-4">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>
                업체 선정을 취소하시겠습니까? 이 작업은 되돌릴 수 없습니다.
              </AlertDescription>
            </Alert>

            {selectedVendor && (
              <div className="rounded-lg border p-4 mb-4 bg-gray-50">
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm font-medium">선정 업체</span>
                    <span className="text-sm font-bold">{selectedVendor.vendorName}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm font-medium">선정 금액</span>
                    <span className="text-sm">
                      {formatAmount(selectedVendor.totalAmount, selectedVendor.currency)}
                    </span>
                  </div>
                </div>
              </div>
            )}

            <div className="space-y-2">
              <label htmlFor="cancel-reason" className="text-sm font-medium">
                취소 사유 *
              </label>
              <textarea
                id="cancel-reason"
                className="w-full min-h-[100px] p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
                placeholder="선정 취소 사유를 입력해주세요..."
                value={cancelReason}
                onChange={(e) => setCancelReason(e.target.value)}
                required
              />
            </div>

            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={() => {
                  setShowCancelDialog(false);
                  setCancelReason("");
                }}
                disabled={isSubmitting}
              >
                닫기
              </Button>
              <Button
                variant="destructive"
                onClick={handleCancelSelection}
                disabled={!cancelReason || isSubmitting}
              >
                {isSubmitting ? "처리 중..." : "선정 취소"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* 계약 진행 모달 */}
      {showContractDialog && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
          <div className="bg-white rounded-lg p-6 max-w-lg w-full mx-4">
            <h3 className="text-lg font-semibold mb-4">
              {selectedContractType === "PO" && "PO (SAP) 생성"}
              {selectedContractType === "CONTRACT" && "일반계약 생성"}
              {selectedContractType === "BIDDING" && "입찰 생성"}
            </h3>
            
            {selectedVendor && (
              <div className="space-y-4">
                <div className="rounded-lg border p-4 bg-gray-50">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm font-medium">선정 업체</span>
                      <span className="text-sm font-bold">{selectedVendor.vendorName}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm font-medium">계약 금액</span>
                      <span className="text-sm">
                        {formatAmount(selectedVendor.totalAmount, selectedVendor.currency)}
                      </span>
                    </div>
                  </div>
                </div>

                <Alert>
                  <Info className="h-4 w-4" />
                  <AlertDescription>
                    {selectedContractType === "PO" && (
                      "PO를 생성하면 SAP 시스템으로 자동 전송됩니다. 계속 진행하시겠습니까?"
                    )}
                    {selectedContractType === "CONTRACT" && (
                      "일반계약을 생성하면 계약서 작성 프로세스가 시작됩니다. 계속 진행하시겠습니까?"
                    )}
                    {selectedContractType === "BIDDING" && (
                      "입찰을 생성하면 입찰 공고 프로세스가 시작됩니다. 계속 진행하시겠습니까?"
                    )}
                  </AlertDescription>
                </Alert>

                {/* 추가 옵션이 필요한 경우 여기에 추가 */}
                {selectedContractType === "CONTRACT" && (
                  <div className="space-y-2">
                    <p className="text-sm font-medium">계약 옵션</p>
                    <div className="space-y-2 text-sm">
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span>표준계약서 사용</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span>전자서명 요청</span>
                      </label>
                    </div>
                  </div>
                )}

                {selectedContractType === "BIDDING" && (
                  <div className="space-y-2">
                    <p className="text-sm font-medium">입찰 유형</p>
                    <select className="w-full px-3 py-2 border rounded-md">
                      <option value="">선택하세요</option>
                      <option value="open">공개입찰</option>
                      <option value="limited">제한입찰</option>
                      <option value="private">지명입찰</option>
                    </select>
                  </div>
                )}
              </div>
            )}

            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={() => {
                  setShowContractDialog(false);
                  setSelectedContractType("");
                }}
                disabled={isSubmitting}
              >
                취소
              </Button>
              <Button
                onClick={handleContractCreation}
                disabled={isSubmitting}
              >
                {isSubmitting ? "처리 중..." : "진행"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}