"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";
import { useRouter } from "next/navigation"

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 router = useRouter()

  const [selectedGeneralContractType, setSelectedGeneralContractType] = React.useState("");
  const [contractStartDate, setContractStartDate] = React.useState("");
  const [contractEndDate, setContractEndDate] = React.useState("");

  // 계약종류 옵션
  const contractTypes = [
    { value: 'UP', label: 'UP - 자재단가계약' },
    { value: 'LE', label: 'LE - 임대차계약' },
    { value: 'IL', label: 'IL - 개별운송계약' },
    { value: 'AL', label: 'AL - 연간운송계약' },
    { value: 'OS', label: 'OS - 외주용역계약' },
    { value: 'OW', label: 'OW - 도급계약' },
    { value: 'IS', label: 'IS - 검사계약' },
    { value: 'LO', label: 'LO - LOI (의향서)' },
    { value: 'FA', label: 'FA - Frame Agreement' },
    { value: 'SC', label: 'SC - 납품합의계약' },
    { value: 'OF', label: 'OF - 클레임상계계약' },
    { value: 'AW', label: 'AW - 사전작업합의' },
    { value: 'AD', label: 'AD - 사전납품합의' },
    { value: 'AM', label: 'AM - 설계계약' },
    { value: 'SC_SELL', label: 'SC - 폐기물매각계약' },
  ];

  // 입찰 관련 state 추가
  const [biddingContractType, setBiddingContractType] = React.useState<"unit_price" | "general" | "sale" | "">("");
  const [biddingType, setBiddingType] = React.useState<string>("");
  const [awardCount, setAwardCount] = React.useState<"single" | "multiple">("single");
  const [biddingStartDate, setBiddingStartDate] = React.useState("");
  const [biddingEndDate, setBiddingEndDate] = React.useState("");

  // 입찰 옵션들
  const biddingContractTypes = [
    { value: 'unit_price', label: '단가계약' },
    { value: 'general', label: '일반계약' },
    { value: 'sale', label: '매각계약' }
  ];

  const biddingTypes = [
    { value: 'equipment', label: '기자재' },
    { value: 'construction', label: '공사' },
    { value: 'service', label: '용역' },
    { value: 'lease', label: '임차' },
    { value: 'steel_stock', label: '형강스톡' },
    { value: 'piping', label: '배관' },
    { value: 'transport', label: '운송' },
    { value: 'waste', label: '폐기물' },
    { value: 'sale', label: '매각' }
  ];

  const awardCounts = [
    { value: 'single', label: '단수' },
    { value: 'multiple', label: '복수' }
  ];

  // 선정된 업체 정보 확인
  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 (selectedContractType === "CONTRACT") {
      if (!selectedGeneralContractType) {
        toast.error("계약종류를 선택해주세요.");
        return;
      }
      if (!contractStartDate) {
        toast.error("계약 시작일을 선택해주세요.");
        return;
      }
      if (!contractEndDate) {
        toast.error("계약 종료일을 선택해주세요.");
        return;
      }
      if (new Date(contractStartDate) >= new Date(contractEndDate)) {
        toast.error("계약 종료일은 시작일보다 이후여야 합니다.");
        return;
      }
    }

    // 입찰 검증
    if (selectedContractType === "BIDDING") {
      if (!biddingContractType) {
        toast.error("계약구분을 선택해주세요.");
        return;
      }
      if (!biddingType) {
        toast.error("입찰유형을 선택해주세요.");
        return;
      }
      if (!biddingStartDate || !biddingEndDate) {
        toast.error("입찰 기간을 입력해주세요.");
        return;
      }
      if (new Date(biddingStartDate) >= new Date(biddingEndDate)) {
        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,
            contractStartDate: new Date(contractStartDate),
            contractEndDate: new Date(contractEndDate),
            contractType: selectedGeneralContractType, // 계약종류 추가

          });
          break;

        case "BIDDING":
          result = await createBidding({
            rfqId: data.rfqInfo.id,
            vendorId: selectedVendor.vendorId,
            vendorName: selectedVendor.vendorName,
            totalAmount: selectedVendor.totalAmount,
            currency: selectedVendor.currency,
            contractType: biddingContractType,
            biddingType: biddingType,
            awardCount: awardCount,
            biddingStartDate: new Date(biddingStartDate),
            biddingEndDate: new Date(biddingEndDate),
          });
          break;

        default:
          throw new Error("올바른 계약 유형이 아닙니다.");
      }

      if (result.success) {
        toast.success(result.message || "계약 프로세스가 시작되었습니다.");
        setShowContractDialog(false);
        // 모든 state 초기화
        setSelectedContractType("");
        setSelectedGeneralContractType("");
        setContractStartDate("");
        setContractEndDate("");
        setBiddingContractType("");
        setBiddingType("");
        setAwardCount("single");
        setBiddingStartDate("");
        setBiddingEndDate("");
        router.refresh();
      } 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("");
        router.refresh()
      } 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("");
        router.refresh()
      } 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 max-h-[90vh] overflow-y-auto">
            <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-4">
                    {/* 계약종류 선택 */}
                    <div className="space-y-2">
                      <label htmlFor="contract-type" className="text-sm font-medium">
                        계약종류 선택 *
                      </label>
                      <select
                        id="contract-type"
                        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={selectedGeneralContractType}
                        onChange={(e) => setSelectedGeneralContractType(e.target.value)}
                        required
                      >
                        <option value="">계약종류를 선택하세요</option>
                        {contractTypes.map(type => (
                          <option key={type.value} value={type.value}>
                            {type.label}
                          </option>
                        ))}
                      </select>
                    </div>

                    {/* 계약 기간 */}
                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-2">
                        <label htmlFor="start-date" className="text-sm font-medium">
                          계약 시작일 *
                        </label>
                        <input
                          id="start-date"
                          type="date"
                          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                          value={contractStartDate}
                          onChange={(e) => setContractStartDate(e.target.value)}
                          min={new Date().toISOString().split('T')[0]}
                          required
                        />
                      </div>

                      <div className="space-y-2">
                        <label htmlFor="end-date" className="text-sm font-medium">
                          계약 종료일 *
                        </label>
                        <input
                          id="end-date"
                          type="date"
                          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                          value={contractEndDate}
                          onChange={(e) => setContractEndDate(e.target.value)}
                          min={contractStartDate || new Date().toISOString().split('T')[0]}
                          required
                        />
                      </div>
                    </div>

                    {/* 계약 기간 표시 */}
                    {contractStartDate && contractEndDate && (
                      <div className="p-3 bg-blue-50 rounded-md">
                        <p className="text-sm text-blue-700">
                          계약 기간: {format(new Date(contractStartDate), "yyyy년 MM월 dd일", { locale: ko })} ~ {format(new Date(contractEndDate), "yyyy년 MM월 dd일", { locale: ko })}
                          <span className="ml-2 font-medium">
                            ({Math.ceil((new Date(contractEndDate).getTime() - new Date(contractStartDate).getTime()) / (1000 * 60 * 60 * 24))}일간)
                          </span>
                        </p>
                      </div>
                    )}

                    {/* 계약 옵션 */}
                    <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>
                        <label className="flex items-center gap-2">
                          <input type="checkbox" className="rounded" />
                          <span>자동 연장 조항 포함</span>
                        </label>
                      </div>
                    </div>
                  </div>
                )}
                {/* 입찰 옵션 */}
                {selectedContractType === "BIDDING" && (
                  <div className="space-y-4">
                    {/* 계약구분 선택 */}
                    <div className="space-y-2">
                      <label htmlFor="bidding-contract-type" className="text-sm font-medium">
                        계약구분 *
                      </label>
                      <select
                        id="bidding-contract-type"
                        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                        value={biddingContractType}
                        onChange={(e) => setBiddingContractType(e.target.value as any)}
                        required
                      >
                        <option value="">계약구분을 선택하세요</option>
                        {biddingContractTypes.map(type => (
                          <option key={type.value} value={type.value}>
                            {type.label}
                          </option>
                        ))}
                      </select>
                    </div>

                    {/* 입찰유형 선택 */}
                    <div className="space-y-2">
                      <label htmlFor="bidding-type" className="text-sm font-medium">
                        입찰유형 *
                      </label>
                      <select
                        id="bidding-type"
                        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                        value={biddingType}
                        onChange={(e) => setBiddingType(e.target.value)}
                        required
                      >
                        <option value="">입찰유형을 선택하세요</option>
                        {biddingTypes.map(type => (
                          <option key={type.value} value={type.value}>
                            {type.label}
                          </option>
                        ))}
                      </select>
                    </div>

                    {/* 낙찰수 선택 */}
                    <div className="space-y-2">
                      <label htmlFor="award-count" className="text-sm font-medium">
                        낙찰수
                      </label>
                      <select
                        id="award-count"
                        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                        value={awardCount}
                        onChange={(e) => setAwardCount(e.target.value as any)}
                      >
                        {awardCounts.map(type => (
                          <option key={type.value} value={type.value}>
                            {type.label}
                          </option>
                        ))}
                      </select>
                    </div>

                    {/* 입찰 기간 */}
                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-2">
                        <label htmlFor="bidding-start-date" className="text-sm font-medium">
                          입찰 시작일 *
                        </label>
                        <input
                          id="bidding-start-date"
                          type="date"
                          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                          value={biddingStartDate}
                          onChange={(e) => setBiddingStartDate(e.target.value)}
                          min={new Date().toISOString().split('T')[0]}
                          required
                        />
                      </div>

                      <div className="space-y-2">
                        <label htmlFor="bidding-end-date" className="text-sm font-medium">
                          입찰 마감일 *
                        </label>
                        <input
                          id="bidding-end-date"
                          type="date"
                          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                          value={biddingEndDate}
                          onChange={(e) => setBiddingEndDate(e.target.value)}
                          min={biddingStartDate || new Date().toISOString().split('T')[0]}
                          required
                        />
                      </div>
                    </div>

                    {/* 입찰 기간 표시 */}
                    {biddingStartDate && biddingEndDate && (
                      <div className="p-3 bg-purple-50 rounded-md">
                        <p className="text-sm text-purple-700">
                          입찰 기간: {format(new Date(biddingStartDate), "yyyy년 MM월 dd일", { locale: ko })} ~ {format(new Date(biddingEndDate), "yyyy년 MM월 dd일", { locale: ko })}
                          <span className="ml-2 font-medium">
                            ({Math.ceil((new Date(biddingEndDate).getTime() - new Date(biddingStartDate).getTime()) / (1000 * 60 * 60 * 24))}일간)
                          </span>
                        </p>
                      </div>
                    )}

                    {/* 추가 옵션 */}
                    <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>
                        <label className="flex items-center gap-2">
                          <input type="checkbox" className="rounded" />
                          <span>공개입찰</span>
                        </label>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}

            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={() => {
                  setShowContractDialog(false);
                  // 모든 state 초기화
                  setSelectedContractType("");
                  setSelectedGeneralContractType("");
                  setContractStartDate("");
                  setContractEndDate("");
                  setBiddingContractType("");
                  setBiddingType("");
                  setAwardCount("single");
                  setBiddingStartDate("");
                  setBiddingEndDate("");
                }}
                disabled={isSubmitting}
              >
                취소
              </Button>
              <Button
                onClick={handleContractCreation}
                disabled={
                  isSubmitting ||
                  (selectedContractType === "CONTRACT" &&
                    (!selectedGeneralContractType || !contractStartDate || !contractEndDate)) ||
                  (selectedContractType === "BIDDING" &&
                    (!biddingContractType || !biddingType || !biddingStartDate || !biddingEndDate))
                }
              >
                {isSubmitting ? "처리 중..." : "진행"}
              </Button>
            </div>
          </div>
        </div>
      )}


    </div>
  );
}