"use client";

import React, { useState, useRef, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import {
  Upload,
  FileSpreadsheet,
  AlertCircle,
  CheckCircle2,
  ArrowRight,
  Zap,
  Download,
  Loader2,
} from "lucide-react";
import { importFromExcel, getExcelSheetNames, exportToExcel } from "@/lib/utils/excelExport";
import { cn } from "@/lib/utils";
import { EditableSpreadsheet } from "./EditableSpreadsheet";
import {
  TableChainConfig,
  uploadMultiTableExcel,
} from "@/lib/api/multiTableExcel";

export interface MultiTableExcelUploadModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  config: TableChainConfig;
  onSuccess?: () => void;
}

interface ColumnMapping {
  excelColumn: string;
  targetColumn: string | null;
}

export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProps> = ({
  open,
  onOpenChange,
  config,
  onSuccess,
}) => {
  // 스텝: 1=모드선택+파일, 2=컬럼매핑, 3=확인
  const [currentStep, setCurrentStep] = useState(1);

  // 모드 선택
  const [selectedModeId, setSelectedModeId] = useState<string>(
    config.uploadModes[0]?.id || ""
  );

  // 파일
  const [file, setFile] = useState<File | null>(null);
  const [sheetNames, setSheetNames] = useState<string[]>([]);
  const [selectedSheet, setSelectedSheet] = useState("");
  const [isDragOver, setIsDragOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [allData, setAllData] = useState<Record<string, any>[]>([]);
  const [displayData, setDisplayData] = useState<Record<string, any>[]>([]);
  const [excelColumns, setExcelColumns] = useState<string[]>([]);

  // 매핑
  const [columnMappings, setColumnMappings] = useState<ColumnMapping[]>([]);

  // 업로드
  const [isUploading, setIsUploading] = useState(false);

  const selectedMode = config.uploadModes.find((m) => m.id === selectedModeId);

  // 선택된 모드에서 활성화되는 컬럼 목록
  const activeColumns = React.useMemo(() => {
    if (!selectedMode) return [];
    const cols: Array<{ dbColumn: string; excelHeader: string; required: boolean; levelLabel: string }> = [];
    for (const levelIdx of selectedMode.activeLevels) {
      const level = config.levels[levelIdx];
      if (!level) continue;
      for (const col of level.columns) {
        cols.push({
          ...col,
          levelLabel: level.label,
        });
      }
    }
    return cols;
  }, [selectedMode, config.levels]);

  // 템플릿 다운로드
  const handleDownloadTemplate = () => {
    if (!selectedMode) return;

    const headers: string[] = [];
    const sampleRow: Record<string, string> = {};
    const sampleRow2: Record<string, string> = {};

    for (const levelIdx of selectedMode.activeLevels) {
      const level = config.levels[levelIdx];
      if (!level) continue;
      for (const col of level.columns) {
        headers.push(col.excelHeader);
        sampleRow[col.excelHeader] = col.required ? "(필수)" : "";
        sampleRow2[col.excelHeader] = "";
      }
    }

    // 예시 데이터 생성 (config에 맞춰)
    exportToExcel(
      [sampleRow, sampleRow2],
      `${config.name}_${selectedMode.label}_템플릿.xlsx`,
      "Sheet1"
    );

    toast.success("템플릿 파일이 다운로드되었습니다.");
  };

  // 파일 처리
  const processFile = async (selectedFile: File) => {
    const ext = selectedFile.name.split(".").pop()?.toLowerCase();
    if (!["xlsx", "xls", "csv"].includes(ext || "")) {
      toast.error("엑셀 파일만 업로드 가능합니다. (.xlsx, .xls, .csv)");
      return;
    }

    setFile(selectedFile);

    try {
      const sheets = await getExcelSheetNames(selectedFile);
      setSheetNames(sheets);
      setSelectedSheet(sheets[0] || "");

      const data = await importFromExcel(selectedFile, sheets[0]);
      setAllData(data);
      setDisplayData(data);

      if (data.length > 0) {
        setExcelColumns(Object.keys(data[0]));
      }

      toast.success(`파일 선택 완료: ${selectedFile.name}`);
    } catch (error) {
      console.error("파일 읽기 오류:", error);
      toast.error("파일을 읽는 중 오류가 발생했습니다.");
      setFile(null);
    }
  };

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) await processFile(selectedFile);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);
  };

  const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);
    const droppedFile = e.dataTransfer.files?.[0];
    if (droppedFile) await processFile(droppedFile);
  };

  const handleSheetChange = async (sheetName: string) => {
    setSelectedSheet(sheetName);
    if (!file) return;

    try {
      const data = await importFromExcel(file, sheetName);
      setAllData(data);
      setDisplayData(data);
      if (data.length > 0) {
        setExcelColumns(Object.keys(data[0]));
      }
    } catch (error) {
      console.error("시트 읽기 오류:", error);
      toast.error("시트를 읽는 중 오류가 발생했습니다.");
    }
  };

  // 2단계 진입 시 자동 매핑 시도
  useEffect(() => {
    if (currentStep === 2 && excelColumns.length > 0) {
      performAutoMapping();
    }
  }, [currentStep]);

  const performAutoMapping = () => {
    const newMappings: ColumnMapping[] = excelColumns.map((excelCol) => {
      const normalizedExcel = excelCol.toLowerCase().trim();
      const matched = activeColumns.find((ac) => {
        return (
          ac.excelHeader.toLowerCase().trim() === normalizedExcel ||
          ac.dbColumn.toLowerCase().trim() === normalizedExcel
        );
      });
      return {
        excelColumn: excelCol,
        targetColumn: matched ? matched.excelHeader : null,
      };
    });
    setColumnMappings(newMappings);

    const matchedCount = newMappings.filter((m) => m.targetColumn).length;
    if (matchedCount > 0) {
      toast.success(`${matchedCount}개 컬럼이 자동 매핑되었습니다.`);
    }
  };

  const handleMappingChange = (excelColumn: string, targetColumn: string | null) => {
    setColumnMappings((prev) =>
      prev.map((m) =>
        m.excelColumn === excelColumn ? { ...m, targetColumn } : m
      )
    );
  };

  // 업로드 실행
  const handleUpload = async () => {
    if (!file || !selectedMode) return;

    setIsUploading(true);

    try {
      // 엑셀 데이터를 excelHeader 기준으로 변환
      const mappedRows = allData.map((row) => {
        const mappedRow: Record<string, any> = {};
        columnMappings.forEach((mapping) => {
          if (mapping.targetColumn) {
            mappedRow[mapping.targetColumn] = row[mapping.excelColumn];
          }
        });
        return mappedRow;
      });

      // 빈 행 필터링
      const filteredRows = mappedRows.filter((row) =>
        Object.values(row).some(
          (v) => v !== undefined && v !== null && (typeof v !== "string" || v.trim() !== "")
        )
      );

      console.log(`다중 테이블 업로드: ${filteredRows.length}행`);

      const result = await uploadMultiTableExcel({
        config,
        modeId: selectedModeId,
        rows: filteredRows,
      });

      if (result.success && result.data) {
        const { results, errors } = result.data;
        const summaryParts = results
          .filter((r) => r.inserted + r.updated > 0)
          .map((r) => {
            const parts: string[] = [];
            if (r.inserted > 0) parts.push(`신규 ${r.inserted}건`);
            if (r.updated > 0) parts.push(`수정 ${r.updated}건`);
            return `${r.tableName}: ${parts.join(", ")}`;
          });

        const msg = summaryParts.join(" / ");
        const errorMsg = errors.length > 0 ? ` (오류: ${errors.length}건)` : "";

        toast.success(`업로드 완료: ${msg}${errorMsg}`);

        if (errors.length > 0) {
          console.warn("업로드 오류 목록:", errors);
        }

        onSuccess?.();
        onOpenChange(false);
      } else {
        toast.error(result.message || "업로드에 실패했습니다.");
      }
    } catch (error) {
      console.error("다중 테이블 업로드 실패:", error);
      toast.error("업로드 중 오류가 발생했습니다.");
    } finally {
      setIsUploading(false);
    }
  };

  // 다음/이전 단계
  const handleNext = () => {
    if (currentStep === 1) {
      if (!file) {
        toast.error("파일을 선택해주세요.");
        return;
      }
      if (displayData.length === 0) {
        toast.error("데이터가 없습니다.");
        return;
      }
    }

    if (currentStep === 2) {
      // 필수 컬럼 매핑 확인
      const mappedTargets = new Set(
        columnMappings.filter((m) => m.targetColumn).map((m) => m.targetColumn)
      );
      const unmappedRequired = activeColumns
        .filter((ac) => ac.required && !mappedTargets.has(ac.excelHeader))
        .map((ac) => `${ac.excelHeader}`);

      if (unmappedRequired.length > 0) {
        toast.error(`필수 컬럼이 매핑되지 않았습니다: ${unmappedRequired.join(", ")}`);
        return;
      }
    }

    setCurrentStep((prev) => Math.min(prev + 1, 3));
  };

  const handlePrevious = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1));
  };

  // 모달 닫기 시 초기화
  useEffect(() => {
    if (!open) {
      setCurrentStep(1);
      setSelectedModeId(config.uploadModes[0]?.id || "");
      setFile(null);
      setSheetNames([]);
      setSelectedSheet("");
      setAllData([]);
      setDisplayData([]);
      setExcelColumns([]);
      setColumnMappings([]);
    }
  }, [open, config.uploadModes]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-h-[95vh] max-w-[95vw] sm:max-w-[1200px]"
        style={{ width: "1000px", height: "700px", minWidth: "700px", minHeight: "500px", maxWidth: "1400px", maxHeight: "900px" }}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
            <FileSpreadsheet className="h-5 w-5" />
            {config.name} - 엑셀 업로드
            <span className="ml-2 rounded bg-indigo-100 px-2 py-0.5 text-xs font-normal text-indigo-700">
              다중 테이블
            </span>
          </DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            {config.description}
          </DialogDescription>
        </DialogHeader>

        {/* 스텝 인디케이터 */}
        <div className="flex items-center justify-between">
          {[
            { num: 1, label: "모드 선택 / 파일" },
            { num: 2, label: "컬럼 매핑" },
            { num: 3, label: "확인" },
          ].map((step, index) => (
            <React.Fragment key={step.num}>
              <div className="flex flex-col items-center gap-1">
                <div
                  className={cn(
                    "flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors sm:h-10 sm:w-10",
                    currentStep === step.num
                      ? "bg-primary text-primary-foreground"
                      : currentStep > step.num
                        ? "bg-success text-white"
                        : "bg-muted text-muted-foreground"
                  )}
                >
                  {currentStep > step.num ? (
                    <CheckCircle2 className="h-4 w-4 sm:h-5 sm:w-5" />
                  ) : (
                    step.num
                  )}
                </div>
                <span
                  className={cn(
                    "text-[10px] font-medium sm:text-xs",
                    currentStep === step.num ? "text-primary" : "text-muted-foreground"
                  )}
                >
                  {step.label}
                </span>
              </div>
              {index < 2 && (
                <div
                  className={cn(
                    "h-0.5 flex-1 transition-colors",
                    currentStep > step.num ? "bg-success" : "bg-muted"
                  )}
                />
              )}
            </React.Fragment>
          ))}
        </div>

        {/* 스텝별 컨텐츠 */}
        <div className="max-h-[calc(95vh-200px)] space-y-4 overflow-y-auto">
          {/* 1단계: 모드 선택 + 파일 선택 */}
          {currentStep === 1 && (
            <div className="space-y-4">
              {/* 업로드 모드 선택 */}
              <div>
                <Label className="text-xs font-medium sm:text-sm">업로드 모드 *</Label>
                <div className="mt-2 grid gap-2 sm:grid-cols-3">
                  {config.uploadModes.map((mode) => (
                    <button
                      key={mode.id}
                      type="button"
                      onClick={() => {
                        setSelectedModeId(mode.id);
                        setFile(null);
                        setAllData([]);
                        setDisplayData([]);
                        setExcelColumns([]);
                      }}
                      className={cn(
                        "rounded-lg border p-3 text-left transition-all",
                        selectedModeId === mode.id
                          ? "border-primary bg-primary/5 ring-2 ring-primary/20"
                          : "border-border hover:border-primary/50 hover:bg-muted/50"
                      )}
                    >
                      <p className="text-xs font-semibold sm:text-sm">{mode.label}</p>
                      <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
                        {mode.description}
                      </p>
                    </button>
                  ))}
                </div>
              </div>

              {/* 템플릿 다운로드 */}
              <div className="flex items-center justify-between rounded-md border border-muted bg-muted/30 p-3">
                <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
                  <Download className="h-4 w-4" />
                  <span>선택한 모드에 맞는 엑셀 양식을 다운로드하세요</span>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleDownloadTemplate}
                  className="h-8 text-xs sm:text-sm"
                >
                  <Download className="mr-1 h-3 w-3" />
                  템플릿 다운로드
                </Button>
              </div>

              {/* 파일 선택 */}
              <div>
                <Label htmlFor="multi-file-upload" className="text-xs sm:text-sm">
                  파일 선택 *
                </Label>
                <div
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onDrop={handleDrop}
                  onClick={() => fileInputRef.current?.click()}
                  className={cn(
                    "mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors",
                    isDragOver
                      ? "border-primary bg-primary/5"
                      : file
                        ? "border-green-500 bg-green-50"
                        : "border-muted-foreground/25 hover:border-primary hover:bg-muted/50"
                  )}
                >
                  {file ? (
                    <div className="flex items-center gap-3">
                      <FileSpreadsheet className="h-8 w-8 text-green-600" />
                      <div>
                        <p className="text-sm font-medium text-green-700">{file.name}</p>
                        <p className="text-xs text-muted-foreground">
                          클릭하여 다른 파일 선택
                        </p>
                      </div>
                    </div>
                  ) : (
                    <>
                      <Upload
                        className={cn(
                          "mb-2 h-8 w-8",
                          isDragOver ? "text-primary" : "text-muted-foreground"
                        )}
                      />
                      <p
                        className={cn(
                          "text-sm font-medium",
                          isDragOver ? "text-primary" : "text-muted-foreground"
                        )}
                      >
                        {isDragOver ? "파일을 놓으세요" : "파일을 드래그하거나 클릭하여 선택"}
                      </p>
                      <p className="mt-1 text-xs text-muted-foreground">
                        지원 형식: .xlsx, .xls, .csv
                      </p>
                    </>
                  )}
                  <input
                    ref={fileInputRef}
                    id="multi-file-upload"
                    type="file"
                    accept=".xlsx,.xls,.csv"
                    onChange={handleFileChange}
                    className="hidden"
                  />
                </div>
              </div>

              {/* 미리보기 */}
              {file && displayData.length > 0 && (
                <>
                  <div className="flex items-center gap-3">
                    <div className="flex items-center gap-2">
                      <Label className="text-xs text-muted-foreground sm:text-sm">시트:</Label>
                      <Select value={selectedSheet} onValueChange={handleSheetChange}>
                        <SelectTrigger className="h-8 w-[140px] text-xs sm:h-9 sm:w-[180px] sm:text-sm">
                          <SelectValue placeholder="Sheet1" />
                        </SelectTrigger>
                        <SelectContent>
                          {sheetNames.map((name) => (
                            <SelectItem key={name} value={name} className="text-xs sm:text-sm">
                              {name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <span className="text-xs text-muted-foreground">
                      {displayData.length}개 행
                    </span>
                  </div>

                  <EditableSpreadsheet
                    columns={excelColumns}
                    data={displayData}
                    onColumnsChange={setExcelColumns}
                    onDataChange={(newData) => {
                      setDisplayData(newData);
                      setAllData(newData);
                    }}
                    maxHeight="250px"
                  />
                </>
              )}
            </div>
          )}

          {/* 2단계: 컬럼 매핑 */}
          {currentStep === 2 && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold sm:text-base">컬럼 매핑 설정</h3>
                <Button
                  type="button"
                  variant="default"
                  size="sm"
                  onClick={performAutoMapping}
                  className="h-8 text-xs sm:h-9 sm:text-sm"
                >
                  <Zap className="mr-2 h-4 w-4" />
                  자동 매핑
                </Button>
              </div>

              <div className="space-y-2">
                <div className="grid grid-cols-[1fr_auto_1fr] gap-2 text-[10px] font-medium text-muted-foreground sm:text-xs">
                  <div>엑셀 컬럼</div>
                  <div></div>
                  <div>시스템 컬럼</div>
                </div>

                <div className="max-h-[300px] space-y-2 overflow-y-auto">
                  {columnMappings.map((mapping, index) => (
                    <div
                      key={index}
                      className="grid grid-cols-[1fr_auto_1fr] items-center gap-2"
                    >
                      <div className="rounded-md border border-border bg-muted px-3 py-2 text-xs font-medium sm:text-sm">
                        {mapping.excelColumn}
                      </div>
                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
                      <Select
                        value={mapping.targetColumn || "none"}
                        onValueChange={(value) =>
                          handleMappingChange(
                            mapping.excelColumn,
                            value === "none" ? null : value
                          )
                        }
                      >
                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                          <SelectValue placeholder="매핑 안함">
                            {mapping.targetColumn || "매핑 안함"}
                          </SelectValue>
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none" className="text-xs sm:text-sm">
                            매핑 안함
                          </SelectItem>
                          {activeColumns.map((ac) => (
                            <SelectItem
                              key={`${ac.levelLabel}-${ac.dbColumn}`}
                              value={ac.excelHeader}
                              className="text-xs sm:text-sm"
                            >
                              {ac.required && (
                                <span className="mr-1 text-destructive">*</span>
                              )}
                              [{ac.levelLabel}] {ac.excelHeader} ({ac.dbColumn})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  ))}
                </div>
              </div>

              {/* 미매핑 필수 컬럼 경고 */}
              {(() => {
                const mappedTargets = new Set(
                  columnMappings.filter((m) => m.targetColumn).map((m) => m.targetColumn)
                );
                const missing = activeColumns.filter(
                  (ac) => ac.required && !mappedTargets.has(ac.excelHeader)
                );
                if (missing.length === 0) return null;
                return (
                  <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
                    <div className="flex items-start gap-2">
                      <AlertCircle className="mt-0.5 h-4 w-4 text-destructive" />
                      <div className="text-[10px] text-destructive sm:text-xs">
                        <p className="font-medium">필수 컬럼이 매핑되지 않았습니다:</p>
                        <p className="mt-1">
                          {missing.map((m) => `[${m.levelLabel}] ${m.excelHeader}`).join(", ")}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })()}

              {/* 모드 정보 */}
              {selectedMode && (
                <div className="rounded-md border border-muted bg-muted/30 p-3">
                  <div className="flex items-start gap-2">
                    <Zap className="mt-0.5 h-4 w-4 text-muted-foreground" />
                    <div className="text-[10px] text-muted-foreground sm:text-xs">
                      <p className="font-medium">모드: {selectedMode.label}</p>
                      <p className="mt-1">
                        대상 테이블:{" "}
                        {selectedMode.activeLevels
                          .map((i) => config.levels[i]?.label)
                          .filter(Boolean)
                          .join(" → ")}
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* 3단계: 확인 */}
          {currentStep === 3 && (
            <div className="space-y-4">
              <div className="rounded-md border border-border bg-muted/50 p-4">
                <h3 className="text-sm font-medium sm:text-base">업로드 요약</h3>
                <div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
                  <p><span className="font-medium">파일:</span> {file?.name}</p>
                  <p><span className="font-medium">시트:</span> {selectedSheet}</p>
                  <p><span className="font-medium">데이터 행:</span> {allData.length}개</p>
                  <p><span className="font-medium">모드:</span> {selectedMode?.label}</p>
                  <p>
                    <span className="font-medium">대상 테이블:</span>{" "}
                    {selectedMode?.activeLevels
                      .map((i) => {
                        const level = config.levels[i];
                        return level
                          ? `${level.label}(${level.tableName})`
                          : "";
                      })
                      .filter(Boolean)
                      .join(" → ")}
                  </p>
                </div>
              </div>

              <div className="rounded-md border border-border bg-muted/50 p-4">
                <h3 className="text-sm font-medium sm:text-base">컬럼 매핑</h3>
                <div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
                  {columnMappings
                    .filter((m) => m.targetColumn)
                    .map((mapping, idx) => {
                      const ac = activeColumns.find(
                        (c) => c.excelHeader === mapping.targetColumn
                      );
                      return (
                        <p key={idx}>
                          <span className="font-medium">{mapping.excelColumn}</span>{" "}
                          → [{ac?.levelLabel}] {mapping.targetColumn}
                        </p>
                      );
                    })}
                </div>
              </div>

              <div className="rounded-md border border-warning bg-warning/10 p-3">
                <div className="flex items-start gap-2">
                  <AlertCircle className="mt-0.5 h-4 w-4 text-warning" />
                  <div className="text-[10px] text-warning sm:text-xs">
                    <p className="font-medium">주의사항</p>
                    <p className="mt-1">
                      업로드를 진행하면 데이터가 데이터베이스에 저장됩니다.
                      같은 키 값의 기존 데이터는 업데이트됩니다.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={currentStep === 1 ? () => onOpenChange(false) : handlePrevious}
            disabled={isUploading}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            {currentStep === 1 ? "취소" : "이전"}
          </Button>
          {currentStep < 3 ? (
            <Button
              onClick={handleNext}
              disabled={isUploading || (currentStep === 1 && !file)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              다음
            </Button>
          ) : (
            <Button
              onClick={handleUpload}
              disabled={isUploading || columnMappings.filter((m) => m.targetColumn).length === 0}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isUploading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  업로드 중...
                </>
              ) : (
                "업로드"
              )}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};