"use client";

/**
 * 수주 상세 페이지
 *
 * - 문서 모달: 계약서, 거래명세서, 발주서
 * - 기본 정보, 수주/배송 정보, 비고
 * - 제품 내역 테이블
 * - 상태별 버튼 차이
 */

import { useState, useEffect } from "react";
import { useRouter, useParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  FileText,
  ArrowLeft,
  Edit,
  Factory,
  XCircle,
  FileSpreadsheet,
  FileCheck,
  ClipboardList,
  Eye,
} from "lucide-react";
import { toast } from "sonner";
import { PageLayout } from "@/components/organisms/PageLayout";
import { PageHeader } from "@/components/organisms/PageHeader";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import { formatAmount } from "@/utils/formatAmount";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  OrderItem,
  OrderDocumentModal,
  type OrderDocumentType,
} from "@/components/orders";

// 수주 상태 타입
type OrderStatus =
  | "order_registered"
  | "order_confirmed"
  | "production_ordered"
  | "in_production"
  | "rework"
  | "work_completed"
  | "shipped"
  | "cancelled";

// 수주 상세 데이터 타입
interface OrderDetail {
  id: string;
  lotNumber: string;
  quoteNumber: string;
  orderDate: string;
  status: OrderStatus;
  client: string;
  siteName: string;
  manager: string;
  contact: string;
  expectedShipDate: string;
  deliveryRequestDate: string;
  deliveryMethod: string;
  shippingCost: string;
  receiver: string;
  receiverContact: string;
  address: string;
  remarks: string;
  items: OrderItem[];
  subtotal: number;
  discountRate: number;
  totalAmount: number;
}

// 샘플 품목 데이터
const SAMPLE_ITEMS: OrderItem[] = [
  {
    id: "1",
    itemCode: "PRD-001",
    itemName: "국민방화스크린세터",
    type: "B1",
    symbol: "FSS1",
    spec: "7260×2600",
    width: 7260,
    height: 2600,
    quantity: 2,
    unit: "EA",
    unitPrice: 8000000,
    amount: 16000000,
  },
  {
    id: "2",
    itemCode: "PRD-002",
    itemName: "국민방화스크린세터",
    type: "B1",
    symbol: "FSS2",
    spec: "5000×2400",
    width: 5000,
    height: 2400,
    quantity: 3,
    unit: "EA",
    unitPrice: 7600000,
    amount: 22800000,
  },
];

// 샘플 수주 데이터 (리스트 페이지와 동기화)
const SAMPLE_ORDERS: Record<string, OrderDetail> = {
  "ORD-001": {
    id: "ORD-001",
    lotNumber: "KD-TS-251217-01",
    quoteNumber: "KD-PR-251210-01",
    orderDate: "2024-12-17",
    status: "order_confirmed",
    client: "태영건설(주)",
    siteName: "데시앙 동탄 파크뷰",
    manager: "김철수",
    contact: "010-1234-5678",
    expectedShipDate: "2025-01-15",
    deliveryRequestDate: "2025-01-20",
    deliveryMethod: "직접배차",
    shippingCost: "무료",
    receiver: "박반장",
    receiverContact: "010-9876-5432",
    address: "경기도 화성시 동탄대로 123-45 데시앙 동탄 파크뷰 현장",
    remarks: "4층 우선 납품 요청",
    items: SAMPLE_ITEMS,
    subtotal: 38800000,
    discountRate: 0,
    totalAmount: 38800000,
  },
  "ORD-002": {
    id: "ORD-002",
    lotNumber: "KD-TS-251217-02",
    quoteNumber: "KD-PR-251211-02",
    orderDate: "2024-12-17",
    status: "in_production",
    client: "현대건설(주)",
    siteName: "힐스테이트 판교역",
    manager: "이영희",
    contact: "010-2345-6789",
    expectedShipDate: "2025-01-20",
    deliveryRequestDate: "2025-01-25",
    deliveryMethod: "상차",
    shippingCost: "선불",
    receiver: "김반장",
    receiverContact: "010-8765-4321",
    address: "경기도 성남시 분당구 판교역로 123",
    remarks: "지하 1층 납품",
    items: SAMPLE_ITEMS,
    subtotal: 52500000,
    discountRate: 0,
    totalAmount: 52500000,
  },
  "ORD-003": {
    id: "ORD-003",
    lotNumber: "KD-TS-251216-01",
    quoteNumber: "KD-PR-251208-03",
    orderDate: "2024-12-16",
    status: "production_ordered",
    client: "GS건설(주)",
    siteName: "자이 강남센터",
    manager: "박민수",
    contact: "010-3456-7890",
    expectedShipDate: "2025-01-10",
    deliveryRequestDate: "2025-01-15",
    deliveryMethod: "직접배차",
    shippingCost: "무료",
    receiver: "최반장",
    receiverContact: "010-7654-3210",
    address: "서울시 강남구 테헤란로 234",
    remarks: "",
    items: SAMPLE_ITEMS,
    subtotal: 45000000,
    discountRate: 0,
    totalAmount: 45000000,
  },
  "ORD-004": {
    id: "ORD-004",
    lotNumber: "KD-TS-251215-01",
    quoteNumber: "KD-PR-251205-04",
    orderDate: "2024-12-15",
    status: "shipped",
    client: "대우건설(주)",
    siteName: "푸르지오 송도",
    manager: "정수진",
    contact: "010-4567-8901",
    expectedShipDate: "2024-12-20",
    deliveryRequestDate: "2024-12-22",
    deliveryMethod: "상차",
    shippingCost: "착불",
    receiver: "오반장",
    receiverContact: "010-6543-2109",
    address: "인천시 연수구 송도동 456",
    remarks: "출하 완료",
    items: SAMPLE_ITEMS,
    subtotal: 28900000,
    discountRate: 0,
    totalAmount: 28900000,
  },
  "ORD-005": {
    id: "ORD-005",
    lotNumber: "KD-TS-251214-01",
    quoteNumber: "KD-PR-251201-05",
    orderDate: "2024-12-14",
    status: "rework",
    client: "포스코건설",
    siteName: "더샵 분당센트럴",
    manager: "강호동",
    contact: "010-5678-9012",
    expectedShipDate: "2025-01-25",
    deliveryRequestDate: "2025-01-30",
    deliveryMethod: "직접배차",
    shippingCost: "무료",
    receiver: "유반장",
    receiverContact: "010-5432-1098",
    address: "경기도 성남시 분당구 정자동 789",
    remarks: "재작업 진행 중",
    items: SAMPLE_ITEMS,
    subtotal: 62000000,
    discountRate: 0,
    totalAmount: 62000000,
  },
  "ORD-006": {
    id: "ORD-006",
    lotNumber: "KD-TS-251213-01",
    quoteNumber: "KD-PR-251128-06",
    orderDate: "2024-12-13",
    status: "work_completed",
    client: "롯데건설(주)",
    siteName: "캐슬 잠실파크",
    manager: "신동엽",
    contact: "010-6789-0123",
    expectedShipDate: "2024-12-25",
    deliveryRequestDate: "2024-12-28",
    deliveryMethod: "직접배차",
    shippingCost: "무료",
    receiver: "한반장",
    receiverContact: "010-4321-0987",
    address: "서울시 송파구 잠실동 321",
    remarks: "작업 완료, 출하 대기",
    items: SAMPLE_ITEMS,
    subtotal: 35500000,
    discountRate: 0,
    totalAmount: 35500000,
  },
  "ORD-007": {
    id: "ORD-007",
    lotNumber: "KD-TS-251212-01",
    quoteNumber: "KD-PR-251125-07",
    orderDate: "2024-12-12",
    status: "order_registered",
    client: "삼성물산(주)",
    siteName: "래미안 서초",
    manager: "유재석",
    contact: "010-7890-1234",
    expectedShipDate: "",
    deliveryRequestDate: "2025-02-01",
    deliveryMethod: "",
    shippingCost: "",
    receiver: "이반장",
    receiverContact: "010-3210-9876",
    address: "서울시 서초구 서초동 654",
    remarks: "수주 등록 상태",
    items: SAMPLE_ITEMS,
    subtotal: 48000000,
    discountRate: 0,
    totalAmount: 48000000,
  },
  "ORD-008": {
    id: "ORD-008",
    lotNumber: "KD-TS-251211-01",
    quoteNumber: "KD-PR-251120-08",
    orderDate: "2024-12-11",
    status: "shipped",
    client: "SK에코플랜트",
    siteName: "SK VIEW 일산",
    manager: "하하",
    contact: "010-8901-2345",
    expectedShipDate: "2024-12-18",
    deliveryRequestDate: "2024-12-20",
    deliveryMethod: "상차",
    shippingCost: "선불",
    receiver: "조반장",
    receiverContact: "010-2109-8765",
    address: "경기도 고양시 일산서구 주엽동 987",
    remarks: "출하 완료, 미수금 있음",
    items: SAMPLE_ITEMS,
    subtotal: 31200000,
    discountRate: 0,
    totalAmount: 31200000,
  },
};

// 상태 뱃지 헬퍼
function getOrderStatusBadge(status: OrderStatus) {
  const statusConfig: Record<OrderStatus, { label: string; className: string }> = {
    order_registered: { label: "수주등록", className: "bg-gray-100 text-gray-700 border-gray-200" },
    order_confirmed: { label: "수주확정", className: "bg-gray-100 text-gray-700 border-gray-200" },
    production_ordered: { label: "생산지시완료", className: "bg-blue-100 text-blue-700 border-blue-200" },
    in_production: { label: "생산중", className: "bg-green-100 text-green-700 border-green-200" },
    rework: { label: "재작업중", className: "bg-orange-100 text-orange-700 border-orange-200" },
    work_completed: { label: "작업완료", className: "bg-blue-600 text-white border-blue-600" },
    shipped: { label: "출하완료", className: "bg-gray-500 text-white border-gray-500" },
    cancelled: { label: "취소", className: "bg-red-100 text-red-700 border-red-200" },
  };
  const config = statusConfig[status];
  return (
    <BadgeSm className={config.className}>
      {config.label}
    </BadgeSm>
  );
}

// 정보 표시 컴포넌트
function InfoItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <p className="text-sm text-muted-foreground">{label}</p>
      <p className="font-medium">{value || "-"}</p>
    </div>
  );
}

export default function OrderDetailPage() {
  const router = useRouter();
  const params = useParams();
  const orderId = params.id as string;

  const [order, setOrder] = useState<OrderDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);

  // 취소 폼 상태
  const [cancelReason, setCancelReason] = useState("");
  const [cancelDetail, setCancelDetail] = useState("");

  // 문서 모달 상태
  const [documentModalOpen, setDocumentModalOpen] = useState(false);
  const [documentType, setDocumentType] = useState<OrderDocumentType>("contract");

  // 데이터 로드 (샘플 - ID로 매칭)
  useEffect(() => {
    // 실제 구현에서는 API 호출
    setTimeout(() => {
      const foundOrder = SAMPLE_ORDERS[orderId];
      setOrder(foundOrder || null);
      setLoading(false);
    }, 300);
  }, [orderId]);

  const handleBack = () => {
    router.push("/sales/order-management-sales");
  };

  const handleEdit = () => {
    router.push(`/sales/order-management-sales/${orderId}/edit`);
  };

  const handleProductionOrder = () => {
    // 생산지시 생성 페이지로 이동
    router.push(`/sales/order-management-sales/${orderId}/production-order`);
  };

  const handleViewProductionOrder = () => {
    // 생산지시 목록 페이지로 이동 (수주관리 내부)
    router.push(`/sales/order-management-sales/production-orders`);
  };

  const handleCancel = () => {
    setCancelReason("");
    setCancelDetail("");
    setIsCancelDialogOpen(true);
  };

  const handleConfirmCancel = () => {
    if (!cancelReason) {
      toast.error("취소 사유를 선택해주세요.");
      return;
    }
    if (order) {
      setOrder({ ...order, status: "cancelled" });
      toast.success("수주가 취소되었습니다.");
    }
    setIsCancelDialogOpen(false);
    setCancelReason("");
    setCancelDetail("");
  };

  // 문서 모달 열기
  const openDocumentModal = (type: OrderDocumentType) => {
    setDocumentType(type);
    setDocumentModalOpen(true);
  };

  if (loading) {
    return (
      <PageLayout>
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
        </div>
      </PageLayout>
    );
  }

  if (!order) {
    return (
      <PageLayout>
        <div className="text-center py-12">
          <p className="text-muted-foreground">수주 정보를 찾을 수 없습니다.</p>
          <Button variant="outline" onClick={handleBack} className="mt-4">
            <ArrowLeft className="h-4 w-4 mr-2" />
            목록으로
          </Button>
        </div>
      </PageLayout>
    );
  }

  // 상태별 버튼 표시 여부
  const showEditButton = order.status !== "shipped" && order.status !== "cancelled";
  // 생산지시 생성 버튼: 출하완료, 취소, 생산지시완료 제외하고 표시
  // (수주등록, 수주확정, 생산중, 재작업중, 작업완료에서 표시)
  const showProductionCreateButton =
    order.status !== "shipped" &&
    order.status !== "cancelled" &&
    order.status !== "production_ordered";
  // 생산지시 보기 버튼: 생산지시완료 상태에서 숨김 (기획서 오류로 제거)
  const showProductionViewButton = false;
  const showCancelButton =
    order.status !== "shipped" &&
    order.status !== "cancelled" &&
    order.status !== "production_ordered";

  return (
    <PageLayout>
      {/* 헤더 */}
      <PageHeader
        title="수주 상세"
        icon={FileText}
        actions={
          <div className="flex items-center gap-2 flex-wrap">
            <Button variant="outline" onClick={handleBack}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              목록
            </Button>
            {showEditButton && (
              <Button variant="outline" onClick={handleEdit}>
                <Edit className="h-4 w-4 mr-2" />
                수정
              </Button>
            )}
            {showProductionCreateButton && (
              <Button onClick={handleProductionOrder}>
                <Factory className="h-4 w-4 mr-2" />
                생산지시 생성
              </Button>
            )}
            {showProductionViewButton && (
              <Button onClick={handleViewProductionOrder}>
                <Eye className="h-4 w-4 mr-2" />
                생산지시 보기
              </Button>
            )}
            {showCancelButton && (
              <Button variant="outline" onClick={handleCancel} className="border-orange-200 text-orange-600 hover:border-orange-300">
                <XCircle className="h-4 w-4 mr-2" />
                취소
              </Button>
            )}
          </div>
        }
      />

      <div className="space-y-6">
        {/* 수주 정보 헤더 */}
        <Card>
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between flex-wrap gap-2">
              <div className="flex items-center gap-3">
                <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
                  {order.lotNumber}
                </code>
                {getOrderStatusBadge(order.status)}
              </div>
              <div className="text-sm text-muted-foreground">
                수주일: {order.orderDate}
              </div>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            {/* 문서 버튼들 */}
            <div className="flex items-center gap-2 pt-4 border-t">
              <span className="text-sm text-muted-foreground mr-2">문서:</span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => openDocumentModal("contract")}
              >
                <FileCheck className="h-4 w-4 mr-1" />
                계약서
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => openDocumentModal("transaction")}
              >
                <FileSpreadsheet className="h-4 w-4 mr-1" />
                거래명세서
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => openDocumentModal("purchaseOrder")}
              >
                <ClipboardList className="h-4 w-4 mr-1" />
                발주서
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* 기본 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">기본 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              <InfoItem label="발주처" value={order.client} />
              <InfoItem label="현장명" value={order.siteName} />
              <InfoItem label="담당자" value={order.manager} />
              <InfoItem label="연락처" value={order.contact} />
            </div>
          </CardContent>
        </Card>

        {/* 수주/배송 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">수주/배송 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              <InfoItem label="수주일자" value={order.orderDate} />
              <InfoItem label="출고예정일" value={order.expectedShipDate || "미정"} />
              <InfoItem label="납품요청일" value={order.deliveryRequestDate} />
              <InfoItem label="배송방식" value={order.deliveryMethod} />
              <InfoItem label="운임비용" value={order.shippingCost} />
              <InfoItem label="수신(반장/업체)" value={order.receiver} />
              <InfoItem label="수신처 연락처" value={order.receiverContact} />
              <InfoItem label="수신처 주소" value={order.address} />
            </div>
          </CardContent>
        </Card>

        {/* 비고 */}
        {order.remarks && (
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">비고</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-wrap">{order.remarks}</p>
            </CardContent>
          </Card>
        )}

        {/* 제품 내역 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">제품 내역</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px] text-center">순번</TableHead>
                    <TableHead>품목코드</TableHead>
                    <TableHead>품명</TableHead>
                    <TableHead>층</TableHead>
                    <TableHead>부호</TableHead>
                    <TableHead>규격</TableHead>
                    <TableHead className="text-center">수량</TableHead>
                    <TableHead className="text-center">단위</TableHead>
                    <TableHead className="text-right">단가</TableHead>
                    <TableHead className="text-right">금액</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {order.items.map((item, index) => (
                    <TableRow key={item.id}>
                      <TableCell className="text-center">{index + 1}</TableCell>
                      <TableCell>
                        <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">
                          {item.itemCode}
                        </code>
                      </TableCell>
                      <TableCell>{item.itemName}</TableCell>
                      <TableCell>{item.type || "-"}</TableCell>
                      <TableCell>{item.symbol || "-"}</TableCell>
                      <TableCell>{item.spec}</TableCell>
                      <TableCell className="text-center">{item.quantity}</TableCell>
                      <TableCell className="text-center">{item.unit}</TableCell>
                      <TableCell className="text-right">
                        {formatAmount(item.unitPrice)}원
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {formatAmount(item.amount)}원
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* 합계 */}
            <div className="flex flex-col items-end gap-2 pt-4 mt-4 border-t">
              <div className="flex items-center gap-4 text-sm">
                <span className="text-muted-foreground">소계:</span>
                <span className="w-32 text-right">
                  {formatAmount(order.subtotal)}원
                </span>
              </div>
              <div className="flex items-center gap-4 text-sm">
                <span className="text-muted-foreground">할인율:</span>
                <span className="w-32 text-right">{order.discountRate}%</span>
              </div>
              <div className="flex items-center gap-4 text-lg font-semibold">
                <span>총금액:</span>
                <span className="w-32 text-right text-green-600">
                  {formatAmount(order.totalAmount)}원
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 문서 모달 */}
      <OrderDocumentModal
        open={documentModalOpen}
        onOpenChange={setDocumentModalOpen}
        documentType={documentType}
        data={{
          lotNumber: order.lotNumber,
          orderDate: order.orderDate,
          client: order.client,
          siteName: order.siteName,
          manager: order.manager,
          managerContact: order.contact,
          deliveryRequestDate: order.deliveryRequestDate,
          expectedShipDate: order.expectedShipDate,
          deliveryMethod: order.deliveryMethod,
          address: order.address,
          items: order.items,
          subtotal: order.subtotal,
          discountRate: order.discountRate,
          totalAmount: order.totalAmount,
          remarks: order.remarks,
        }}
      />

      {/* 취소 확인 다이얼로그 */}
      <Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <XCircle className="h-5 w-5" />
              수주 취소
            </DialogTitle>
          </DialogHeader>

          <div className="space-y-4">
            {/* 수주 정보 박스 */}
            <div className="border rounded-lg p-4 space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">수주번호</span>
                <span className="font-medium">{order.lotNumber}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">발주처</span>
                <span>{order.client}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">현장명</span>
                <span>{order.siteName}</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-muted-foreground">현재 상태</span>
                {getOrderStatusBadge(order.status)}
              </div>
            </div>

            {/* 취소 사유 선택 */}
            <div className="space-y-2">
              <Label htmlFor="cancelReason">
                취소 사유 <span className="text-red-500">*</span>
              </Label>
              <Select value={cancelReason} onValueChange={setCancelReason}>
                <SelectTrigger id="cancelReason">
                  <SelectValue placeholder="취소 사유를 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="customer_request">고객 요청</SelectItem>
                  <SelectItem value="spec_change">사양 변경</SelectItem>
                  <SelectItem value="price_issue">가격 문제</SelectItem>
                  <SelectItem value="delivery_issue">납기 문제</SelectItem>
                  <SelectItem value="duplicate_order">중복 수주</SelectItem>
                  <SelectItem value="other">기타</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 상세 사유 입력 */}
            <div className="space-y-2">
              <Label htmlFor="cancelDetail">상세 사유</Label>
              <Textarea
                id="cancelDetail"
                placeholder="취소 사유에 대한 상세 내용을 입력하세요"
                value={cancelDetail}
                onChange={(e) => setCancelDetail(e.target.value)}
                rows={3}
              />
            </div>

            {/* 취소 시 유의사항 */}
            <div className="bg-gray-50 border rounded-lg p-4 text-sm space-y-1">
              <p className="font-medium mb-2">취소 시 유의사항</p>
              <ul className="space-y-1 text-muted-foreground">
                <li>• 취소된 수주는 목록에서 '취소' 상태로 표시됩니다</li>
                <li>• 취소 후에는 수정이 불가능합니다</li>
                <li>• 관련된 생산지시가 있는 경우 먼저 생산지시를 취소해야 합니다</li>
              </ul>
            </div>
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setIsCancelDialogOpen(false)}
            >
              닫기
            </Button>
            <Button
              variant="outline"
              onClick={handleConfirmCancel}
              className="border-gray-300"
            >
              <XCircle className="h-4 w-4 mr-1" />
              취소 확정
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </PageLayout>
  );
}