"use client";

/**
 * 수주관리 - IntegratedListTemplateV2 적용
 *
 * 수주 관리 페이지
 * - 상단 통계 카드: 이번 달 수주, 분할 대기, 생산지시 대기, 출하 대기
 * - 필터 탭: 전체, 수주등록, 수주확정, 생산지시완료, 미수
 * - 완전한 반응형 지원
 */

import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import {
  FileText,
  Edit,
  Trash2,
  DollarSign,
  SplitSquareVertical,
  ClipboardList,
  Truck,
  Eye,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import {
  IntegratedListTemplateV2,
  TabOption,
  TableColumn,
} from "@/components/templates/IntegratedListTemplateV2";
import { toast } from "sonner";
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { formatAmount, formatAmountManwon } from "@/utils/formatAmount";
import { ListMobileCard, InfoField } from "@/components/organisms/ListMobileCard";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

// 수주 상태 타입
type OrderStatus =
  | "order_registered"     // 수주등록
  | "order_confirmed"      // 수주확정
  | "production_ordered"   // 생산지시완료
  | "in_production"        // 생산중
  | "rework"               // 재작업중
  | "work_completed"       // 작업완료
  | "shipped"              // 출하완료
  | "cancelled";           // 취소

// 수주 타입
interface Order {
  id: string;
  lotNumber: string;          // 로트번호 KD-TS-XXXXXX-XX
  quoteNumber: string;        // 견적번호 KD-PR-XXXXXX-XX
  orderDate: string;          // 수주일자
  client: string;             // 발주처
  siteName: string;           // 현장명
  status: OrderStatus;
  expectedShipDate?: string;  // 출고예정일
  deliveryMethod?: string;    // 배송방식
  amount: number;             // 금액
  itemCount: number;          // 품목 수
  hasReceivable?: boolean;    // 미수 여부
}

// 샘플 수주 데이터
const SAMPLE_ORDERS: Order[] = [
  {
    id: "ORD-001",
    lotNumber: "KD-TS-251217-01",
    quoteNumber: "KD-PR-251210-01",
    orderDate: "2024-12-17",
    client: "태영건설(주)",
    siteName: "데시앙 동탄 파크뷰",
    status: "order_confirmed",
    expectedShipDate: "2025-01-15",
    deliveryMethod: "직접배차",
    amount: 38800000,
    itemCount: 5,
    hasReceivable: false,
  },
  {
    id: "ORD-002",
    lotNumber: "KD-TS-251217-02",
    quoteNumber: "KD-PR-251211-02",
    orderDate: "2024-12-17",
    client: "현대건설(주)",
    siteName: "힐스테이트 판교역",
    status: "in_production",
    expectedShipDate: "2025-01-20",
    deliveryMethod: "상차",
    amount: 52500000,
    itemCount: 8,
    hasReceivable: false,
  },
  {
    id: "ORD-003",
    lotNumber: "KD-TS-251216-01",
    quoteNumber: "KD-PR-251208-03",
    orderDate: "2024-12-16",
    client: "GS건설(주)",
    siteName: "자이 강남센터",
    status: "production_ordered",
    expectedShipDate: "2025-01-10",
    deliveryMethod: "직접배차",
    amount: 45000000,
    itemCount: 6,
    hasReceivable: false,
  },
  {
    id: "ORD-004",
    lotNumber: "KD-TS-251215-01",
    quoteNumber: "KD-PR-251205-04",
    orderDate: "2024-12-15",
    client: "대우건설(주)",
    siteName: "푸르지오 송도",
    status: "shipped",
    expectedShipDate: "2024-12-20",
    deliveryMethod: "상차",
    amount: 28900000,
    itemCount: 4,
    hasReceivable: true,
  },
  {
    id: "ORD-005",
    lotNumber: "KD-TS-251214-01",
    quoteNumber: "KD-PR-251201-05",
    orderDate: "2024-12-14",
    client: "포스코건설",
    siteName: "더샵 분당센트럴",
    status: "rework",
    expectedShipDate: "2025-01-25",
    deliveryMethod: "직접배차",
    amount: 62000000,
    itemCount: 10,
    hasReceivable: false,
  },
  {
    id: "ORD-006",
    lotNumber: "KD-TS-251213-01",
    quoteNumber: "KD-PR-251128-06",
    orderDate: "2024-12-13",
    client: "롯데건설(주)",
    siteName: "캐슬 잠실파크",
    status: "work_completed",
    expectedShipDate: "2024-12-25",
    deliveryMethod: "직접배차",
    amount: 35500000,
    itemCount: 5,
    hasReceivable: false,
  },
  {
    id: "ORD-007",
    lotNumber: "KD-TS-251212-01",
    quoteNumber: "KD-PR-251125-07",
    orderDate: "2024-12-12",
    client: "삼성물산(주)",
    siteName: "래미안 서초",
    status: "order_registered",
    expectedShipDate: undefined,
    deliveryMethod: undefined,
    amount: 48000000,
    itemCount: 7,
    hasReceivable: false,
  },
  {
    id: "ORD-008",
    lotNumber: "KD-TS-251211-01",
    quoteNumber: "KD-PR-251120-08",
    orderDate: "2024-12-11",
    client: "SK에코플랜트",
    siteName: "SK VIEW 일산",
    status: "shipped",
    expectedShipDate: "2024-12-18",
    deliveryMethod: "상차",
    amount: 31200000,
    itemCount: 4,
    hasReceivable: true,
  },
];

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

  const config = statusConfig[status];
  return (
    <BadgeSm className={config.className}>
      {config.label}
    </BadgeSm>
  );
}

export default function OrderManagementSalesPage() {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState("");
  const [filterType, setFilterType] = useState("all");
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 취소 확인 다이얼로그 state
  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
  const [cancelTargetId, setCancelTargetId] = useState<string | null>(null);

  // 삭제 확인 다이얼로그 state (다중 선택 삭제 지원)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [deleteTargetIds, setDeleteTargetIds] = useState<string[]>([]);

  // 모바일 인피니티 스크롤 state
  const [mobileDisplayCount, setMobileDisplayCount] = useState(20);
  const sentinelRef = useRef<HTMLDivElement>(null);

  // 로컬 데이터 state (실제 구현에서는 API 연동)
  const [orders, setOrders] = useState<Order[]>(SAMPLE_ORDERS);

  // 필터링 및 정렬
  const filteredOrders = orders
    .filter((order) => {
      const searchLower = searchTerm.toLowerCase();
      const matchesSearch =
        !searchTerm ||
        order.lotNumber.toLowerCase().includes(searchLower) ||
        order.quoteNumber.toLowerCase().includes(searchLower) ||
        order.client.toLowerCase().includes(searchLower) ||
        order.siteName.toLowerCase().includes(searchLower);

      let matchesFilter = true;
      if (filterType === "registered") {
        matchesFilter = order.status === "order_registered";
      } else if (filterType === "confirmed") {
        matchesFilter = order.status === "order_confirmed";
      } else if (filterType === "production_ordered") {
        matchesFilter = order.status === "production_ordered";
      } else if (filterType === "receivable") {
        matchesFilter = order.hasReceivable === true;
      }

      return matchesSearch && matchesFilter;
    })
    .sort((a, b) => {
      return new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime();
    });

  // 페이지네이션
  const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
  const paginatedOrders = filteredOrders.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  // 모바일용 인피니티 스크롤 데이터
  const mobileOrders = filteredOrders.slice(0, mobileDisplayCount);

  // Intersection Observer를 이용한 인피니티 스크롤
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (window.innerWidth >= 1280) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (
          entries[0].isIntersecting &&
          mobileDisplayCount < filteredOrders.length
        ) {
          setMobileDisplayCount((prev) =>
            Math.min(prev + 20, filteredOrders.length)
          );
        }
      },
      {
        threshold: 0.1,
        rootMargin: "100px",
      }
    );

    if (sentinelRef.current) {
      observer.observe(sentinelRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [mobileDisplayCount, filteredOrders.length]);

  // 탭이나 검색어 변경 시 모바일 표시 개수 초기화
  useEffect(() => {
    setMobileDisplayCount(20);
  }, [searchTerm, filterType]);

  // 통계 계산
  const now = new Date();
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

  // 이번 달 수주 금액
  const thisMonthOrders = orders.filter(
    (o) => new Date(o.orderDate) >= startOfMonth
  );
  const thisMonthAmount = thisMonthOrders.reduce((sum, o) => sum + o.amount, 0);

  // 분할 대기 (예시: 수주확정 상태)
  const splitPendingCount = orders.filter((o) => o.status === "order_confirmed").length;

  // 생산지시 대기 (수주확정 상태 중 생산지시 안된 것)
  const productionPendingCount = orders.filter(
    (o) => o.status === "order_confirmed" || o.status === "order_registered"
  ).length;

  // 출하 대기 (작업완료 상태)
  const shipPendingCount = orders.filter((o) => o.status === "work_completed").length;

  const stats = [
    {
      label: "이번 달 수주",
      value: formatAmountManwon(thisMonthAmount),
      icon: DollarSign,
      iconColor: "text-blue-600",
    },
    {
      label: "분할 대기",
      value: `${splitPendingCount}건`,
      icon: SplitSquareVertical,
      iconColor: "text-orange-600",
    },
    {
      label: "생산지시 대기",
      value: `${productionPendingCount}건`,
      icon: ClipboardList,
      iconColor: "text-green-600",
    },
    {
      label: "출하 대기",
      value: `${shipPendingCount}건`,
      icon: Truck,
      iconColor: "text-purple-600",
    },
  ];

  // 핸들러
  const handleView = (order: Order) => {
    router.push(`/sales/order-management-sales/${order.id}`);
  };

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

  const handleCancel = (orderId: string) => {
    setCancelTargetId(orderId);
    setIsCancelDialogOpen(true);
  };

  const handleConfirmCancel = () => {
    if (cancelTargetId) {
      const order = orders.find((o) => o.id === cancelTargetId);
      setOrders(
        orders.map((o) =>
          o.id === cancelTargetId ? { ...o, status: "cancelled" as OrderStatus } : o
        )
      );
      toast.success(
        `수주가 취소되었습니다${order ? `: ${order.lotNumber}` : ""}`
      );
      setIsCancelDialogOpen(false);
      setCancelTargetId(null);
    }
  };

  // 개별 삭제 (row에서 휴지통 아이콘 클릭)
  const handleDelete = (orderId: string) => {
    setDeleteTargetIds([orderId]);
    setIsDeleteDialogOpen(true);
  };

  // 다중 선택 삭제 (IntegratedListTemplateV2에서 확인 후 호출됨)
  // 템플릿 내부에서 이미 확인 팝업을 처리하므로 바로 삭제 실행
  const handleBulkDelete = () => {
    const selectedIds = Array.from(selectedItems);
    if (selectedIds.length > 0) {
      setOrders(orders.filter((o) => !selectedIds.includes(o.id)));
      setSelectedItems(new Set());
      toast.success(`${selectedIds.length}개의 수주가 삭제되었습니다.`);
    }
  };

  // 삭제 확정 (단일/다중 모두 처리)
  const handleConfirmDelete = () => {
    if (deleteTargetIds.length > 0) {
      const count = deleteTargetIds.length;
      setOrders(orders.filter((o) => !deleteTargetIds.includes(o.id)));
      // 선택 상태 초기화
      setSelectedItems(new Set());
      toast.success(`${count}개의 수주가 삭제되었습니다.`);
      setIsDeleteDialogOpen(false);
      setDeleteTargetIds([]);
    }
  };

  // 체크박스 선택
  const toggleSelection = (id: string) => {
    const newSelection = new Set(selectedItems);
    if (newSelection.has(id)) {
      newSelection.delete(id);
    } else {
      newSelection.add(id);
    }
    setSelectedItems(newSelection);
  };

  const toggleSelectAll = () => {
    if (
      selectedItems.size === paginatedOrders.length &&
      paginatedOrders.length > 0
    ) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(paginatedOrders.map((o) => o.id)));
    }
  };

  // 탭 구성
  const tabs: TabOption[] = [
    {
      value: "all",
      label: "전체",
      count: orders.length,
      color: "blue",
    },
    {
      value: "registered",
      label: "수주등록",
      count: orders.filter((o) => o.status === "order_registered").length,
      color: "gray",
    },
    {
      value: "confirmed",
      label: "수주확정",
      count: orders.filter((o) => o.status === "order_confirmed").length,
      color: "gray",
    },
    {
      value: "production_ordered",
      label: "생산지시완료",
      count: orders.filter((o) => o.status === "production_ordered").length,
      color: "blue",
    },
    {
      value: "receivable",
      label: "미수",
      count: orders.filter((o) => o.hasReceivable).length,
      color: "red",
    },
  ];

  // 테이블 컬럼 정의
  const tableColumns: TableColumn[] = [
    { key: "rowNumber", label: "번호", className: "px-4" },
    { key: "lotNumber", label: "로트번호", className: "px-4" },
    { key: "quoteNumber", label: "견적번호", className: "px-4" },
    { key: "client", label: "발주처", className: "px-4" },
    { key: "siteName", label: "현장명", className: "px-4" },
    { key: "status", label: "상태", className: "px-4" },
    { key: "expectedShipDate", label: "출고예정일", className: "px-4" },
    { key: "deliveryMethod", label: "배송방식", className: "px-4" },
    { key: "actions", label: "작업", className: "px-4" },
  ];

  // 테이블 행 렌더링
  const renderTableRow = (
    order: Order,
    index: number,
    globalIndex: number
  ) => {
    const itemId = order.id;
    const isSelected = selectedItems.has(itemId);

    return (
      <TableRow
        key={order.id}
        className={`cursor-pointer hover:bg-muted/50 ${isSelected ? "bg-blue-50" : ""}`}
        onClick={() => handleView(order)}
      >
        <TableCell onClick={(e) => e.stopPropagation()} className="text-center">
          <Checkbox
            checked={isSelected}
            onCheckedChange={() => toggleSelection(itemId)}
          />
        </TableCell>
        <TableCell>{globalIndex}</TableCell>
        <TableCell>
          <code className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono">
            {order.lotNumber}
          </code>
        </TableCell>
        <TableCell>
          <code className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono">
            {order.quoteNumber}
          </code>
        </TableCell>
        <TableCell>{order.client}</TableCell>
        <TableCell>{order.siteName}</TableCell>
        <TableCell>{getOrderStatusBadge(order.status)}</TableCell>
        <TableCell>{order.expectedShipDate || "-"}</TableCell>
        <TableCell>{order.deliveryMethod || "-"}</TableCell>
        <TableCell onClick={(e) => e.stopPropagation()}>
          {isSelected && (
            <div className="flex gap-1">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleView(order)}
              >
                <Eye className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleEdit(order)}
              >
                <Edit className="h-4 w-4" />
              </Button>
              {/* 삭제 버튼 - shipped, cancelled 제외 모든 상태에서 표시 */}
              {order.status !== "shipped" && order.status !== "cancelled" && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleDelete(order.id)}
                >
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              )}
            </div>
          )}
        </TableCell>
      </TableRow>
    );
  };

  // 모바일 카드 렌더링
  const renderMobileCard = (
    order: Order,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <ListMobileCard
        key={order.id}
        id={order.id}
        isSelected={isSelected}
        onToggleSelection={onToggle}
        onCardClick={() => handleView(order)}
        headerBadges={
          <>
            <Badge
              variant="outline"
              className="bg-gray-100 text-gray-700 font-mono text-xs"
            >
              #{globalIndex}
            </Badge>
            <code className="inline-block text-xs bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-md font-mono whitespace-nowrap">
              {order.lotNumber}
            </code>
          </>
        }
        title={order.client}
        statusBadge={getOrderStatusBadge(order.status)}
        infoGrid={
          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
            <InfoField label="현장명" value={order.siteName} />
            <InfoField label="견적번호" value={order.quoteNumber} />
            <InfoField label="출고예정일" value={order.expectedShipDate || "-"} />
            <InfoField label="배송방식" value={order.deliveryMethod || "-"} />
            <InfoField
              label="금액"
              value={formatAmount(order.amount)}
              valueClassName="text-green-600"
            />
            <InfoField label="품목 수" value={`${order.itemCount}개`} />
          </div>
        }
        actions={
          isSelected ? (
            <div className="flex gap-2 flex-wrap">
              <Button
                variant="outline"
                size="default"
                className="flex-1 min-w-[100px] h-11"
                onClick={(e) => {
                  e.stopPropagation();
                  handleView(order);
                }}
              >
                <Eye className="h-4 w-4 mr-2" />
                상세
              </Button>
              <Button
                variant="default"
                size="default"
                className="flex-1 min-w-[100px] h-11"
                onClick={(e) => {
                  e.stopPropagation();
                  handleEdit(order);
                }}
              >
                <Edit className="h-4 w-4 mr-2" />
                수정
              </Button>
              {/* 삭제 버튼 - shipped, cancelled 제외 모든 상태에서 표시 */}
              {order.status !== "shipped" && order.status !== "cancelled" && (
                <Button
                  variant="outline"
                  size="default"
                  className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleDelete(order.id);
                  }}
                >
                  <Trash2 className="h-4 w-4 mr-2" />
                  삭제
                </Button>
              )}
            </div>
          ) : undefined
        }
      />
    );
  };

  return (
    <>
      <IntegratedListTemplateV2
        title="수주 목록"
        description="수주 관리 및 생산지시 연동"
        icon={FileText}
        headerActions={
          <Button className="ml-auto" onClick={() => router.push("/sales/order-management-sales/new")}>
            <FileText className="w-4 h-4 mr-2" />
            수주 등록
          </Button>
        }
        stats={stats}
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="로트번호, 견적번호, 발주처, 현장명 검색..."
        tabs={tabs}
        activeTab={filterType}
        onTabChange={(value) => {
          setFilterType(value);
          setCurrentPage(1);
        }}
        tableColumns={tableColumns}
        tableTitle={`${tabs.find((t) => t.value === filterType)?.label || "전체"} (${filteredOrders.length}개)`}
        data={paginatedOrders}
        totalCount={filteredOrders.length}
        allData={mobileOrders}
        mobileDisplayCount={mobileDisplayCount}
        infinityScrollSentinelRef={sentinelRef}
        selectedItems={selectedItems}
        onToggleSelection={toggleSelection}
        onToggleSelectAll={toggleSelectAll}
        getItemId={(order) => order.id}
        onBulkDelete={handleBulkDelete}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredOrders.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 수주 취소 확인 다이얼로그 */}
      <AlertDialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>수주 취소 확인</AlertDialogTitle>
            <AlertDialogDescription>
              {cancelTargetId
                ? `수주번호: ${orders.find((o) => o.id === cancelTargetId)?.lotNumber || cancelTargetId}`
                : ""}
              <br />
              이 수주를 취소하시겠습니까? 취소된 수주는 복구할 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>닫기</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirmCancel} className="bg-orange-600 hover:bg-orange-700">
              취소 확정
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 수주 삭제 확인 다이얼로그 - 스크린샷 디자인 적용 */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent className="max-w-md">
          <AlertDialogHeader>
            <AlertDialogTitle className="flex items-center gap-2">
              <span className="text-yellow-600">⚠️</span>
              삭제 확인
            </AlertDialogTitle>
            <AlertDialogDescription asChild>
              <div className="space-y-4">
                <p className="text-foreground">
                  선택한 <strong>{deleteTargetIds.length}개</strong>의 수주를 삭제하시겠습니까?
                </p>
                {/* 주의 박스 */}
                <div className="bg-gray-100 rounded-lg p-3">
                  <div className="flex items-start gap-2">
                    <span className="text-yellow-600 mt-0.5">⚠️</span>
                    <div className="text-sm text-muted-foreground">
                      <span className="font-medium text-foreground">주의</span>
                      <br />
                      삭제된 수주는 복구할 수 없습니다. 관련된 작업지시, 출하정보도 함께 삭제될 수 있습니다.
                    </div>
                  </div>
                </div>
              </div>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleConfirmDelete}
              className="bg-gray-900 hover:bg-gray-800 text-white gap-2"
            >
              <Trash2 className="h-4 w-4" />
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}