'use client';

import { useState, useRef, useEffect, useMemo } from "react";
import { useParams, useRouter } from "next/navigation";
import AdminSidebar from "@/app/components/AdminSidebar";
import DropdownIcon from "@/app/svgs/dropdownicon";
import BackArrowSvg from "@/app/svgs/backarrow";
import { getCourses, type Course } from "@/app/admin/courses/mockData";
import CloseXOSvg from "@/app/svgs/closexo";
import apiService from "@/app/lib/apiService";
import NoChangesModal from "@/app/admin/notices/NoChangesModal";

export default function LessonEditPage() {
  const params = useParams();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const videoFileInputRef = useRef<HTMLInputElement>(null);
  const vrFileInputRef = useRef<HTMLInputElement>(null);
  const csvFileInputRef = useRef<HTMLInputElement>(null);
  const [courses, setCourses] = useState<Course[]>([]);
  
  // 폼 상태
  const [selectedCourse, setSelectedCourse] = useState<string>("");
  const [lessonName, setLessonName] = useState("");
  const [learningGoal, setLearningGoal] = useState("");
  const [courseVideoCount, setCourseVideoCount] = useState(0);
  const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
  const [courseVideoFileObjects, setCourseVideoFileObjects] = useState<File[]>([]);
  const [courseVideoFileKeys, setCourseVideoFileKeys] = useState<string[]>([]);
  const [existingVideoFiles, setExistingVideoFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
  const [vrContentCount, setVrContentCount] = useState(0);
  const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
  const [vrContentFileObjects, setVrContentFileObjects] = useState<File[]>([]);
  const [vrContentFileKeys, setVrContentFileKeys] = useState<string[]>([]);
  const [existingVrFiles, setExistingVrFiles] = useState<Array<{fileName: string, fileKey?: string, url?: string}>>([]);
  const [questionFileCount, setQuestionFileCount] = useState(0);
  const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
  const [questionFileKey, setQuestionFileKey] = useState<string | null>(null);
  const [existingQuestionFile, setExistingQuestionFile] = useState<{fileName: string, fileKey?: string} | null>(null);
  const [csvData, setCsvData] = useState<string[][]>([]);
  const [csvHeaders, setCsvHeaders] = useState<string[]>([]);
  const [csvRows, setCsvRows] = useState<string[][]>([]);
  
  // 파일 교체 확인 모달 상태
  const [isFileReplaceModalOpen, setIsFileReplaceModalOpen] = useState(false);
  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
  const [pendingFileType, setPendingFileType] = useState<'video' | 'vr' | 'csv' | null>(null);
  
  // 변경사항 없음 모달 상태
  const [isNoChangesModalOpen, setIsNoChangesModalOpen] = useState(false);
  
  // 원본 데이터 저장 (변경사항 비교용)
  const [originalData, setOriginalData] = useState<{
    title?: string;
    objective?: string;
    videoUrl?: string;
    webglUrl?: string;
    csvUrl?: string;
  } | null>(null);
  
  // 에러 상태
  const [errors, setErrors] = useState<{
    selectedCourse?: string;
    lessonName?: string;
    learningGoal?: string;
  }>({});

  // 교육과정 옵션
  const courseOptions = useMemo(() => {
    return courses.map(course => ({
      id: course.id,
      name: course.courseName,
    }));
  }, [courses]);

  // 교육과정 목록 로드
  useEffect(() => {
    const loadCourses = async () => {
      try {
        const data = await getCourses();
        setCourses(data);
      } catch (error) {
        console.error('교육과정 목록 로드 오류:', error);
      }
    };
    loadCourses();
  }, []);

  // 강좌 데이터 로드
  useEffect(() => {
    const loadLecture = async () => {
      if (!params?.id) return;

      try {
        setLoading(true);
        
        // sessionStorage에서 저장된 강좌 데이터 가져오기
        let data: any = null;
        const storedData = typeof window !== 'undefined' ? sessionStorage.getItem('selectedLecture') : null;
        
        if (storedData) {
          try {
            data = JSON.parse(storedData);
          } catch (e) {
            console.error('저장된 데이터 파싱 실패:', e);
          }
        }
        
        // sessionStorage에 데이터가 없으면 API에서 직접 가져오기
        if (!data) {
          try {
            const response = await apiService.getLecture(params.id as string);
            data = response.data;
          } catch (err) {
            console.error('강좌 조회 실패:', err);
            // getLecture 실패 시 getLectures로 재시도
            try {
              const listResponse = await apiService.getLectures();
              const lectures = Array.isArray(listResponse.data) 
                ? listResponse.data 
                : listResponse.data?.items || listResponse.data?.lectures || listResponse.data?.data || [];
              
              data = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
            } catch (listErr) {
              console.error('강좌 리스트 조회 실패:', listErr);
            }
          }
        }

        if (!data) {
          throw new Error('강좌를 찾을 수 없습니다.');
        }

        // 원본 데이터 저장
        const original = {
          title: data.title || data.lectureName || '',
          objective: data.objective || data.goal || '',
          videoUrl: data.videoUrl || undefined,
          webglUrl: data.webglUrl || data.vrUrl || undefined,
          csvUrl: data.csvUrl || (data.csvKey ? `csv/${data.csvKey}` : undefined),
        };
        setOriginalData(original);

        // 폼에 데이터 채우기
        if (data.subjectId || data.subject_id) {
          setSelectedCourse(String(data.subjectId || data.subject_id));
        }
        setLessonName(original.title);
        setLearningGoal(original.objective);

        // 기존 비디오 파일
        if (data.videoUrl || data.videoKey) {
          const videoFiles = [];
          if (data.videoUrl) {
            videoFiles.push({
              fileName: data.videoFileName || '강좌영상.mp4',
              fileKey: data.videoKey,
              url: data.videoUrl,
            });
          }
          if (data.videoFiles && Array.isArray(data.videoFiles)) {
            data.videoFiles.forEach((vf: any) => {
              videoFiles.push({
                fileName: vf.fileName || vf.name || '강좌영상.mp4',
                fileKey: vf.fileKey || vf.key,
                url: vf.url || vf.videoUrl,
              });
            });
          }
          setExistingVideoFiles(videoFiles);
          setCourseVideoCount(videoFiles.length);
        }

        // 기존 VR 파일
        if (data.webglUrl || data.vrUrl || data.webglKey || data.vrKey) {
          const vrFiles = [];
          if (data.webglUrl || data.vrUrl) {
            vrFiles.push({
              fileName: data.vrFileName || data.webglFileName || 'VR_콘텐츠.zip',
              fileKey: data.webglKey || data.vrKey,
              url: data.webglUrl || data.vrUrl,
            });
          }
          setExistingVrFiles(vrFiles);
          setVrContentCount(vrFiles.length);
        }

        // 기존 평가 문제 파일
        if (data.csvKey || data.csvUrl) {
          const csvFileKey = data.csvKey || (data.csvUrl && data.csvUrl.startsWith('csv/') ? data.csvUrl.substring(4) : data.csvUrl);
          
          setExistingQuestionFile({
            fileName: data.csvFileName || data.csv_file_name || data.csvName || '평가문제.csv',
            fileKey: csvFileKey,
          });
          setQuestionFileCount(1);
          
          // CSV 파일 다운로드 및 파싱
          if (data.csvUrl || data.csvKey) {
            try {
              const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
              const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
              
              let fileKey: string | null = null;
              
              // csvUrl에서 fileKey 추출
              if (data.csvUrl) {
                // 전체 URL인 경우 fileKey 추출
                if (data.csvUrl.startsWith('http://') || data.csvUrl.startsWith('https://')) {
                  // URL에서 /api/files/ 이후 부분을 fileKey로 사용
                  const filesIndex = data.csvUrl.indexOf('/api/files/');
                  if (filesIndex !== -1) {
                    const extractedKey = data.csvUrl.substring(filesIndex + '/api/files/'.length);
                    // URL 디코딩
                    fileKey = decodeURIComponent(extractedKey);
                  } else {
                    // URL에서 마지막 경로를 fileKey로 사용
                    const urlParts = data.csvUrl.split('/');
                    const lastPart = urlParts[urlParts.length - 1];
                    if (lastPart) {
                      fileKey = decodeURIComponent(lastPart);
                    }
                  }
                } else if (data.csvUrl.startsWith('csv/')) {
                  // "csv/" 접두사 제거
                  fileKey = data.csvUrl.substring(4);
                } else {
                  // 그 외의 경우 fileKey로 사용
                  fileKey = data.csvUrl;
                }
              } else if (data.csvKey) {
                // csvKey가 있으면 fileKey로 사용
                fileKey = data.csvKey;
              }
              
              if (!fileKey) {
                return; // fileKey가 없으면 종료
              }
              
              // /api/files/{fileKey} 형태로 요청
              const csvUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey as string)}`;
              
              const csvResponse = await fetch(csvUrl, {
                method: 'GET',
                headers: {
                  ...(token && { Authorization: `Bearer ${token}` }),
                },
              });
              
              // 404 에러는 파일이 없는 것으로 간주하고 조용히 처리
              if (csvResponse.status === 404) {
                console.warn('CSV 파일을 찾을 수 없습니다:', data.csvUrl || data.csvKey);
              } else if (csvResponse.ok) {
                const csvText = await csvResponse.text();
                
                // CSV 파싱 함수
                const parseCsv = (csvText: string): string[][] => {
                  const lines: string[][] = [];
                  let currentLine: string[] = [];
                  let currentField = '';
                  let inQuotes = false;

                  for (let i = 0; i < csvText.length; i++) {
                    const char = csvText[i];
                    const nextChar = csvText[i + 1];

                    if (char === '"') {
                      if (inQuotes && nextChar === '"') {
                        currentField += '"';
                        i++;
                      } else {
                        inQuotes = !inQuotes;
                      }
                    } else if (char === ',' && !inQuotes) {
                      currentLine.push(currentField.trim());
                      currentField = '';
                    } else if ((char === '\n' || char === '\r') && !inQuotes) {
                      if (char === '\r' && nextChar === '\n') {
                        i++;
                      }
                      if (currentField || currentLine.length > 0) {
                        currentLine.push(currentField.trim());
                        lines.push(currentLine);
                        currentLine = [];
                        currentField = '';
                      }
                    } else {
                      currentField += char;
                    }
                  }

                  if (currentField || currentLine.length > 0) {
                    currentLine.push(currentField.trim());
                    lines.push(currentLine);
                  }

                  return lines;
                };

                const parsed = parseCsv(csvText);
                
                if (parsed.length > 0) {
                  const headers = parsed[0];
                  const rows = parsed.slice(1);
                  
                  setCsvHeaders(headers);
                  setCsvRows(rows);
                  setCsvData(parsed);
                }
              } else if (!csvResponse.ok) {
                console.error(`CSV 파일을 가져오는데 실패했습니다. (${csvResponse.status})`);
              }
            } catch (csvError) {
              console.error('CSV 파일 파싱 실패:', csvError);
              // CSV 파싱 실패해도 계속 진행
            }
          }
        }
      } catch (err) {
        console.error('강좌 로드 실패:', err);
        
        // 기본값 설정 (에러 발생 시에도 폼이 작동하도록)
        const defaultOriginal = {
          title: '',
          objective: '',
          videoUrl: undefined,
          webglUrl: undefined,
          csvUrl: undefined,
        };
        setOriginalData(defaultOriginal);
        
        alert('강좌를 불러오는데 실패했습니다. 페이지를 새로고침하거나 다시 시도해주세요.');
        // 에러 발생 시에도 페이지는 유지 (사용자가 수동으로 데이터 입력 가능)
      } finally {
        setLoading(false);
      }
    };

    loadLecture();
  }, [params?.id, router]);

  // 외부 클릭 시 드롭다운 닫기
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsDropdownOpen(false);
      }
    };

    if (isDropdownOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isDropdownOpen]);


  const handleBackClick = () => {
    router.push(`/admin/lessons/${params.id}`);
  };

  // 파일 업로드 함수
  const handleVideoFileUpload = async (validFiles: File[]) => {
    try {
      let fileKeys: string[] = [];
      
      // 파일이 1개인 경우 uploadFile 사용
      if (validFiles.length === 1) {
        const uploadResponse = await apiService.uploadFile(validFiles[0]);
        
        // 응답에서 fileKey 추출
        const fileKey = uploadResponse.data?.fileKey 
          || uploadResponse.data?.key 
          || uploadResponse.data?.id
          || uploadResponse.data?.fileId;
        
        if (fileKey) {
          fileKeys = [fileKey];
        } else {
          throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
        }
      } else {
        // 파일이 2개 이상인 경우 uploadFiles 사용
        const uploadResponse = await apiService.uploadFiles(validFiles);
        
        // 응답에서 fileKey 배열 추출
        if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
          uploadResponse.data.results.forEach((result: any) => {
            if (result.ok && result.fileKey) {
              fileKeys.push(result.fileKey);
            } else if (result.fileKey) {
              fileKeys.push(result.fileKey);
            }
          });
        } else if (Array.isArray(uploadResponse.data)) {
          // 응답이 배열인 경우
          fileKeys = uploadResponse.data.map((item: any) => 
            item.fileKey || item.key || item.id || item.fileId
          ).filter(Boolean);
        } else if (uploadResponse.data?.fileKeys && Array.isArray(uploadResponse.data.fileKeys)) {
          fileKeys = uploadResponse.data.fileKeys;
        }
      }
      
      if (fileKeys.length > 0) {
        // 새로 첨부한 파일로 교체 (기존 새로 첨부한 파일은 삭제, 서버에 저장된 기존 파일은 유지)
        setCourseVideoFiles(validFiles.map(f => f.name));
        setCourseVideoFileObjects(validFiles);
        setCourseVideoFileKeys(fileKeys);
        setCourseVideoCount(existingVideoFiles.length + fileKeys.length);
      } else {
        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
      }
    } catch (error) {
      console.error('강좌 영상 업로드 실패:', error);
      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
    }
  };

  const handleVrFileUpload = async (validFiles: File[]) => {
    try {
      let fileKeys: string[] = [];
      
      // 파일이 1개인 경우 uploadFile 사용
      if (validFiles.length === 1) {
        const uploadResponse = await apiService.uploadFile(validFiles[0]);
        
        // 응답에서 fileKey 추출
        const fileKey = uploadResponse.data?.fileKey 
          || uploadResponse.data?.key 
          || uploadResponse.data?.id
          || uploadResponse.data?.fileId;
        
        if (fileKey) {
          fileKeys = [fileKey];
        } else {
          throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
        }
      } else {
        // 파일이 2개 이상인 경우 uploadFiles 사용
        const uploadResponse = await apiService.uploadFiles(validFiles);
        
        // 응답에서 fileKey 배열 추출
        if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
          uploadResponse.data.results.forEach((result: any) => {
            if (result.ok && result.fileKey) {
              fileKeys.push(result.fileKey);
            } else if (result.fileKey) {
              fileKeys.push(result.fileKey);
            }
          });
        } else if (Array.isArray(uploadResponse.data)) {
          // 응답이 배열인 경우
          fileKeys = uploadResponse.data.map((item: any) => 
            item.fileKey || item.key || item.id || item.fileId
          ).filter(Boolean);
        } else if (uploadResponse.data?.fileKeys && Array.isArray(uploadResponse.data.fileKeys)) {
          fileKeys = uploadResponse.data.fileKeys;
        }
      }
      
      if (fileKeys.length > 0) {
        // 새로 첨부한 파일로 교체 (기존 새로 첨부한 파일은 삭제, 서버에 저장된 기존 파일은 유지)
        setVrContentFiles(validFiles.map(f => f.name));
        setVrContentFileObjects(validFiles);
        setVrContentFileKeys(fileKeys);
        setVrContentCount(existingVrFiles.length + fileKeys.length);
      } else {
        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
      }
    } catch (error) {
      console.error('VR 콘텐츠 업로드 실패:', error);
      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
    }
  };

  const handleCsvFileUpload = async (file: File) => {
    try {
      // CSV 파일 파싱 (Promise로 감싸서 파일 읽기 완료 대기)
      const parseCsvFile = (): Promise<string[][]> => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          
          reader.onload = (event) => {
            const text = event.target?.result as string;
            if (!text) {
              reject(new Error('파일을 읽을 수 없습니다.'));
              return;
            }

            try {
              // CSV 파싱 함수
              const parseCsv = (csvText: string): string[][] => {
                const lines: string[][] = [];
                let currentLine: string[] = [];
                let currentField = '';
                let inQuotes = false;

                for (let i = 0; i < csvText.length; i++) {
                  const char = csvText[i];
                  const nextChar = csvText[i + 1];

                  if (char === '"') {
                    if (inQuotes && nextChar === '"') {
                      currentField += '"';
                      i++;
                    } else {
                      inQuotes = !inQuotes;
                    }
                  } else if (char === ',' && !inQuotes) {
                    currentLine.push(currentField.trim());
                    currentField = '';
                  } else if ((char === '\n' || char === '\r') && !inQuotes) {
                    if (char === '\r' && nextChar === '\n') {
                      i++;
                    }
                    if (currentField || currentLine.length > 0) {
                      currentLine.push(currentField.trim());
                      lines.push(currentLine);
                      currentLine = [];
                      currentField = '';
                    }
                  } else {
                    currentField += char;
                  }
                }

                if (currentField || currentLine.length > 0) {
                  currentLine.push(currentField.trim());
                  lines.push(currentLine);
                }

                return lines;
              };

              const parsed = parseCsv(text);
              
              if (parsed.length === 0) {
                reject(new Error('CSV 파일이 비어있습니다.'));
                return;
              }

              resolve(parsed);
            } catch (parseError) {
              reject(new Error('CSV 파일을 읽는 중 오류가 발생했습니다.'));
            }
          };

          reader.onerror = () => {
            reject(new Error('파일을 읽는 중 오류가 발생했습니다.'));
          };

          reader.readAsText(file, 'UTF-8');
        });
      };

      // CSV 파일 파싱
      const parsed = await parseCsvFile();
      
      // 첫 번째 줄을 헤더로 사용
      const headers = parsed[0];
      const rows = parsed.slice(1);

      setCsvHeaders(headers);
      setCsvRows(rows);
      setCsvData(parsed);

      // 단일 파일 업로드
      const uploadResponse = await apiService.uploadFile(file);
      
      // 응답에서 fileKey 추출
      const fileKey = uploadResponse.data?.fileKey 
        || uploadResponse.data?.key 
        || uploadResponse.data?.id
        || uploadResponse.data?.fileId
        || uploadResponse.data?.imageKey
        || (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey))
        || null;
      
      if (fileKey) {
        // 이전 파일 삭제하고 새 파일로 교체
        setQuestionFileObject(file);
        setQuestionFileKey(fileKey);
        setQuestionFileCount(1);
        setExistingQuestionFile(null);
      } else {
        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
      }
    } catch (error) {
      console.error('학습 평가 문제 업로드 실패:', error);
      const errorMessage = error instanceof Error ? error.message : '파일 업로드에 실패했습니다. 다시 시도해주세요.';
      alert(errorMessage);
    }
  };

  // 파일 교체 확인 모달 핸들러
  const handleFileReplaceConfirm = () => {
    if (!pendingFileType) return;
    
    setIsFileReplaceModalOpen(false);
    
    // 파일 선택 다이얼로그 열기
    if (pendingFileType === 'video' && videoFileInputRef.current) {
      videoFileInputRef.current.click();
    } else if (pendingFileType === 'vr' && vrFileInputRef.current) {
      vrFileInputRef.current.click();
    } else if (pendingFileType === 'csv' && csvFileInputRef.current) {
      csvFileInputRef.current.click();
    }
    
    setPendingFiles([]);
    setPendingFileType(null);
  };

  const handleFileReplaceCancel = () => {
    setIsFileReplaceModalOpen(false);
    setPendingFiles([]);
    setPendingFileType(null);
  };

  const handleSaveClick = async () => {
    // 유효성 검사
    const newErrors: {
      selectedCourse?: string;
      lessonName?: string;
      learningGoal?: string;
    } = {};

    if (!selectedCourse) {
      newErrors.selectedCourse = "교육과정을 선택해 주세요.";
    }
    if (!lessonName.trim()) {
      newErrors.lessonName = "강좌명을 입력해 주세요.";
    }
    if (!learningGoal.trim()) {
      newErrors.learningGoal = "학습 목표를 입력해 주세요.";
    }

    setErrors(newErrors);

    if (Object.keys(newErrors).length > 0) {
      return;
    }

    if (isSaving) return;

    setIsSaving(true);

    try {
      if (!originalData) {
        alert('데이터를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
        return;
      }

      // 이미 업로드된 fileKey 배열 사용
      let videoUrl: string | undefined;
      let webglUrl: string | undefined;
      let csvUrl: string | undefined;

      // 강좌 영상 fileKey (새로 업로드된 파일이 있는 경우)
      if (courseVideoFileKeys.length > 0) {
        videoUrl = courseVideoFileKeys[0]; // 첫 번째 fileKey 사용
        // TODO: API가 배열을 받는 경우 courseVideoFileKeys 배열 전체를 저장해야 함
      } else if (existingVideoFiles.length > 0 && existingVideoFiles[0].url) {
        // 기존 파일 URL 유지
        videoUrl = existingVideoFiles[0].url;
      } else if (existingVideoFiles.length > 0 && existingVideoFiles[0].fileKey) {
        // 기존 파일 fileKey 사용
        videoUrl = existingVideoFiles[0].fileKey;
      }

      // VR 콘텐츠 fileKey (새로 업로드된 파일이 있는 경우)
      if (vrContentFileKeys.length > 0) {
        webglUrl = vrContentFileKeys[0]; // 첫 번째 fileKey 사용
        // TODO: API가 배열을 받는 경우 vrContentFileKeys 배열 전체를 저장해야 함
      } else if (existingVrFiles.length > 0 && existingVrFiles[0].url) {
        // 기존 파일 URL 유지
        webglUrl = existingVrFiles[0].url;
      } else if (existingVrFiles.length > 0 && existingVrFiles[0].fileKey) {
        // 기존 파일 fileKey 사용
        webglUrl = existingVrFiles[0].fileKey;
      }

      // 학습 평가 문제 fileKey (새로 업로드된 파일이 있는 경우)
      if (questionFileKey) {
        csvUrl = questionFileKey;
      } else if (existingQuestionFile?.fileKey) {
        // 기존 파일 fileKey 사용
        csvUrl = existingQuestionFile.fileKey;
      } else if (originalData.csvUrl) {
        // 원본 데이터의 csvUrl 유지
        csvUrl = originalData.csvUrl;
      }

      // 현재 값들
      const currentTitle = lessonName.trim();
      const currentObjective = learningGoal.trim();

      // 변경된 항목만 포함하는 request body 생성
      const requestBody: {
        title?: string;
        objective?: string;
        videoUrl?: string;
        webglUrl?: string;
        csvUrl?: string;
      } = {};

      // 변경된 항목만 추가
      if (currentTitle !== originalData.title) {
        requestBody.title = currentTitle;
      }
      if (currentObjective !== originalData.objective) {
        requestBody.objective = currentObjective;
      }
      
      // videoUrl 변경사항 체크 (원본에 있었는데 삭제된 경우도 포함)
      const originalVideoUrl = originalData.videoUrl;
      if (videoUrl !== originalVideoUrl) {
        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
        if (originalVideoUrl && !videoUrl) {
          requestBody.videoUrl = '';
        } else if (videoUrl) {
          requestBody.videoUrl = videoUrl;
        }
      }
      
      // webglUrl 변경사항 체크
      const originalWebglUrl = originalData.webglUrl;
      if (webglUrl !== originalWebglUrl) {
        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
        if (originalWebglUrl && !webglUrl) {
          requestBody.webglUrl = '';
        } else if (webglUrl) {
          requestBody.webglUrl = webglUrl;
        }
      }
      
      // csvUrl 변경사항 체크
      const originalCsvUrl = originalData.csvUrl;
      if (csvUrl !== originalCsvUrl) {
        // 원본에 있었는데 현재 없는 경우 (삭제된 경우) 빈 문자열로 처리
        if (originalCsvUrl && !csvUrl) {
          requestBody.csvUrl = '';
        } else if (csvUrl) {
          requestBody.csvUrl = csvUrl;
        }
      }

      // 변경사항이 없으면 알림
      if (Object.keys(requestBody).length === 0) {
        setIsNoChangesModalOpen(true);
        setIsSaving(false);
        return;
      }

      // 강좌 수정 API 호출 (PATCH /lectures/{id})
      await apiService.updateLecture(params.id as string, requestBody);

      // 성공 시 강좌 리스트로 이동 (토스트는 리스트 페이지에서 표시)
      router.push('/admin/lessons?updated=true');
    } catch (error) {
      console.error('강좌 수정 실패:', error);
      const errorMessage = error instanceof Error ? error.message : '강좌 수정 중 오류가 발생했습니다.';
      alert(errorMessage);
    } finally {
      setIsSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col bg-white">
        <div className="flex flex-1 min-h-0 justify-center">
          <div className="w-[1440px] flex min-h-0">
            <div className="flex">
              <AdminSidebar />
            </div>
            <main className="w-[1120px] bg-white">
              <div className="h-full flex flex-col px-8">
                <div className="h-[100px] flex items-center">
                  <div className="flex items-center gap-[12px]">
                    <button
                      type="button"
                      onClick={handleBackClick}
                      className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
                      aria-label="뒤로가기"
                    >
                      <BackArrowSvg width={32} height={32} />
                    </button>
                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
                      강좌 수정
                    </h1>
                  </div>
                </div>
                <section className="px-8 pb-20">
                  <div className="flex items-center justify-center py-20">
                    <p className="text-[16px] text-[#8c95a1]">로딩 중...</p>
                  </div>
                </section>
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <div className="flex flex-1 min-h-0 justify-center">
        <div className="w-[1440px] flex min-h-0">
          <div className="flex">
            <AdminSidebar />
          </div>
          <main className="w-[1120px] bg-white">
            <div className="h-full flex flex-col px-8">
              <div className="flex flex-col h-full">
                {/* 헤더 */}
                <div className="h-[100px] flex items-center">
                  <div className="flex items-center gap-[12px]">
                    <button
                      type="button"
                      onClick={handleBackClick}
                      className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
                      aria-label="뒤로가기"
                    >
                      <BackArrowSvg width={32} height={32} />
                    </button>
                    <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
                      강좌 수정
                    </h1>
                  </div>
                </div>

                {/* 폼 콘텐츠 */}
                <div className="flex-1 overflow-y-auto pb-[80px] pt-[32px]">
                  <div className="flex flex-col gap-[40px]">
                    {/* 강좌 정보 */}
                    <div className="flex flex-col gap-[8px]">
                      <h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
                        강좌 정보
                      </h2>
                      <div className="flex flex-col gap-[24px]">
                        {/* 교육 과정 */}
                        <div className="flex flex-col gap-[8px] max-w-[480px]">
                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                            교육 과정
                          </label>
                          <div className="relative" ref={dropdownRef}>
                            <button
                              type="button"
                              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                              className={`w-full h-[40px] px-[12px] py-[8px] border rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
                                errors.selectedCourse ? 'border-[#e63946]' : 'border-[#dee1e6]'
                              }`}
                            >
                              <span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
                                selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
                              }`}>
                                {selectedCourse 
                                  ? courseOptions.find(c => c.id === selectedCourse)?.name 
                                  : '교육과정을 선택해 주세요.'}
                              </span>
                              <DropdownIcon stroke="#8C95A1" className="shrink-0" />
                            </button>
                            {isDropdownOpen && (
                              <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto dropdown-scroll">
                                {courseOptions.map((course, index) => (
                                  <button
                                    key={course.id}
                                    type="button"
                                    onClick={() => {
                                      setSelectedCourse(course.id);
                                      setIsDropdownOpen(false);
                                      if (errors.selectedCourse) {
                                        setErrors(prev => ({ ...prev, selectedCourse: undefined }));
                                      }
                                    }}
                                    className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors cursor-pointer ${
                                      selectedCourse === course.id
                                        ? "bg-[#ecf0ff] text-[#1f2b91] font-semibold"
                                        : "text-[#1b2027]"
                                    } ${
                                      index === 0 ? "rounded-t-[8px]" : ""
                                    } ${
                                      index === courseOptions.length - 1 ? "rounded-b-[8px]" : ""
                                    }`}
                                  >
                                    {course.name}
                                  </button>
                                ))}
                              </div>
                            )}
                          </div>
                          {errors.selectedCourse && (
                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
                              {errors.selectedCourse}
                            </p>
                          )}
                        </div>

                        {/* 강좌명 */}
                        <div className="flex flex-col gap-[8px]">
                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                            강좌명
                          </label>
                          <input
                            type="text"
                            value={lessonName}
                            onChange={(e) => {
                              setLessonName(e.target.value);
                              if (errors.lessonName) {
                                setErrors(prev => ({ ...prev, lessonName: undefined }));
                              }
                            }}
                            placeholder="강좌명을 입력해 주세요."
                            className={`h-[40px] px-[12px] py-[8px] border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] ${
                              errors.lessonName ? 'border-[#e63946]' : 'border-[#dee1e6]'
                            }`}
                          />
                          {errors.lessonName && (
                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
                              {errors.lessonName}
                            </p>
                          )}
                        </div>

                        {/* 학습 목표 */}
                        <div className="flex flex-col gap-[8px]">
                          <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                            학습 목표
                          </label>
                          <div className="relative">
                            <textarea
                              value={learningGoal}
                              onChange={(e) => {
                                if (e.target.value.length <= 1000) {
                                  setLearningGoal(e.target.value);
                                  if (errors.learningGoal) {
                                    setErrors(prev => ({ ...prev, learningGoal: undefined }));
                                  }
                                }
                              }}
                              placeholder="내용을 입력해 주세요. (최대 1,000자)"
                              className={`w-full h-[160px] px-[12px] py-[8px] border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] resize-none ${
                                errors.learningGoal ? 'border-[#e63946]' : 'border-[#dee1e6]'
                              }`}
                            />
                            <div className="absolute bottom-[8px] right-[12px]">
                              <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
                                {learningGoal.length}/1000
                              </p>
                            </div>
                          </div>
                          {errors.learningGoal && (
                            <p className="text-[14px] font-normal leading-[1.5] text-[#e63946]">
                              {errors.learningGoal}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>

                    {/* 파일 첨부 */}
                    <div className="flex flex-col gap-[8px]">
                      <h2 className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">
                        파일 첨부
                      </h2>
                      <div className="flex flex-col gap-[24px]">
                        {/* 강좌 영상 */}
                        <div className="flex flex-col gap-[8px]">
                          <div className="flex items-center justify-between h-[32px]">
                            <div className="flex items-center gap-[8px]">
                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                                강좌 영상 ({existingVideoFiles.length + courseVideoFiles.length}/10)
                              </label>
                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
                                30MB 미만 파일
                              </span>
                            </div>
                            <label 
                              className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center"
                              onClick={(e) => {
                                // 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
                                if (existingVideoFiles.length > 0 || courseVideoFiles.length > 0 || courseVideoFileKeys.length > 0) {
                                  e.preventDefault();
                                  setPendingFiles([]);
                                  setPendingFileType('video');
                                  setIsFileReplaceModalOpen(true);
                                }
                              }}
                            >
                              <span>첨부</span>
                              <input
                                ref={videoFileInputRef}
                                type="file"
                                multiple
                                accept=".mp4,video/mp4"
                                className="hidden"
                                onChange={async (e) => {
                                  const files = e.target.files;
                                  if (!files) return;

                                  const MAX_SIZE = 30 * 1024 * 1024; // 30MB
                                  const MAX_COUNT = 10; // 최대 10개
                                  const validFiles: File[] = [];
                                  const oversizedFiles: string[] = [];
                                  const invalidTypeFiles: string[] = [];
                                  
                                  Array.from(files).forEach((file) => {
                                    // mp4 파일인지 확인
                                    if (!file.name.toLowerCase().endsWith('.mp4')) {
                                      invalidTypeFiles.push(file.name);
                                      return;
                                    }
                                    // 각 파일이 30MB 이하인지 검사
                                    if (file.size <= MAX_SIZE) {
                                      validFiles.push(file);
                                    } else {
                                      oversizedFiles.push(file.name);
                                    }
                                  });

                                  // 파일 타입 오류
                                  if (invalidTypeFiles.length > 0) {
                                    alert(`다음 파일은 MP4 형식만 가능합니다:\n${invalidTypeFiles.join('\n')}`);
                                  }

                                  // 30MB 초과 파일이 있으면 알림
                                  if (oversizedFiles.length > 0) {
                                    alert(`다음 파일은 30MB 이하여야 합니다:\n${oversizedFiles.join('\n')}`);
                                  }

                                  // 파일 개수 제한 확인
                                  const totalCount = existingVideoFiles.length + courseVideoFiles.length + validFiles.length;
                                  if (totalCount > MAX_COUNT) {
                                    const currentCount = existingVideoFiles.length + courseVideoFiles.length;
                                    const availableCount = MAX_COUNT - currentCount;
                                    alert(`강좌 영상은 최대 ${MAX_COUNT}개까지 첨부할 수 있습니다. (현재 ${currentCount}개, 추가 가능 ${availableCount > 0 ? availableCount : 0}개)`);
                                    e.target.value = '';
                                    return;
                                  }

                                  // 30MB 초과 파일이나 잘못된 타입 파일만 있는 경우 중단
                                  if (validFiles.length === 0 && (oversizedFiles.length > 0 || invalidTypeFiles.length > 0)) {
                                    e.target.value = '';
                                    return;
                                  }

                                  if (validFiles.length > 0) {
                                    // 기존 파일 삭제 후 새 파일 업로드
                                    setExistingVideoFiles([]);
                                    handleVideoFileUpload(validFiles);
                                  }
                                  e.target.value = '';
                                }}
                              />
                            </label>
                          </div>
                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
                            {existingVideoFiles.length === 0 && courseVideoFiles.length === 0 ? (
                              <div className="h-[64px] flex items-center justify-center">
                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
                                  강좌 주제별 영상 파일을 첨부해주세요.
                                </p>
                              </div>
                            ) : (
                              <div className="flex flex-col py-[12px]">
                                {existingVideoFiles.map((file, index) => (
                                  <div
                                    key={`existing-${index}`}
                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
                                  >
                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
                                      {file.fileName}
                                    </p>
                                    <button
                                      type="button"
                                      onClick={() => {
                                        setExistingVideoFiles(prev => prev.filter((_, i) => i !== index));
                                        setCourseVideoCount(prev => prev - 1);
                                      }}
                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
                                      aria-label="파일 삭제"
                                    >
                                      <CloseXOSvg />
                                    </button>
                                  </div>
                                ))}
                                {courseVideoFiles.map((fileName, index) => (
                                  <div
                                    key={`new-${index}`}
                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
                                  >
                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
                                      {fileName}
                                    </p>
                                    <button
                                      type="button"
                                      onClick={() => {
                                        setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
                                        setCourseVideoFileObjects(prev => prev.filter((_, i) => i !== index));
                                        setCourseVideoFileKeys(prev => prev.filter((_, i) => i !== index));
                                        setCourseVideoCount(prev => prev - 1);
                                      }}
                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
                                      aria-label="파일 삭제"
                                    >
                                      <CloseXOSvg />
                                    </button>
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </div>

                        {/* VR 콘텐츠 */}
                        <div className="flex flex-col gap-[8px]">
                          <div className="flex items-center justify-between h-[32px]">
                            <div className="flex items-center gap-[8px]">
                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                                VR 콘텐츠 ({existingVrFiles.length + vrContentFiles.length}/10)
                              </label>
                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
                                30MB 미만 파일
                              </span>
                            </div>
                            <label 
                              className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center"
                              onClick={(e) => {
                                // 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
                                if (existingVrFiles.length > 0 || vrContentFiles.length > 0 || vrContentFileKeys.length > 0) {
                                  e.preventDefault();
                                  setPendingFiles([]);
                                  setPendingFileType('vr');
                                  setIsFileReplaceModalOpen(true);
                                }
                              }}
                            >
                              <span>첨부</span>
                              <input
                                ref={vrFileInputRef}
                                type="file"
                                multiple
                                accept=".zip,application/zip"
                                className="hidden"
                                onChange={async (e) => {
                                  const files = e.target.files;
                                  if (!files) return;

                                  const MAX_SIZE = 30 * 1024 * 1024; // 30MB
                                  const MAX_COUNT = 10; // 최대 10개
                                  const validFiles: File[] = [];
                                  const oversizedFiles: string[] = [];
                                  const invalidTypeFiles: string[] = [];
                                  
                                  Array.from(files).forEach((file) => {
                                    // zip 파일인지 확인
                                    if (!file.name.toLowerCase().endsWith('.zip')) {
                                      invalidTypeFiles.push(file.name);
                                      return;
                                    }
                                    // 각 파일이 30MB 이하인지 검사
                                    if (file.size <= MAX_SIZE) {
                                      validFiles.push(file);
                                    } else {
                                      oversizedFiles.push(file.name);
                                    }
                                  });

                                  // 파일 타입 오류
                                  if (invalidTypeFiles.length > 0) {
                                    alert(`다음 파일은 ZIP 형식만 가능합니다:\n${invalidTypeFiles.join('\n')}`);
                                  }

                                  // 30MB 초과 파일이 있으면 알림
                                  if (oversizedFiles.length > 0) {
                                    alert(`다음 파일은 30MB 이하여야 합니다:\n${oversizedFiles.join('\n')}`);
                                  }

                                  // 파일 개수 제한 확인
                                  const totalCount = existingVrFiles.length + vrContentFiles.length + validFiles.length;
                                  if (totalCount > MAX_COUNT) {
                                    const currentCount = existingVrFiles.length + vrContentFiles.length;
                                    const availableCount = MAX_COUNT - currentCount;
                                    alert(`VR 콘텐츠는 최대 ${MAX_COUNT}개까지 첨부할 수 있습니다. (현재 ${currentCount}개, 추가 가능 ${availableCount > 0 ? availableCount : 0}개)`);
                                    e.target.value = '';
                                    return;
                                  }

                                  // 30MB 초과 파일이나 잘못된 타입 파일만 있는 경우 중단
                                  if (validFiles.length === 0 && (oversizedFiles.length > 0 || invalidTypeFiles.length > 0)) {
                                    e.target.value = '';
                                    return;
                                  }

                                  if (validFiles.length > 0) {
                                    // 기존 파일 삭제 후 새 파일 업로드
                                    setExistingVrFiles([]);
                                    handleVrFileUpload(validFiles);
                                  }
                                  e.target.value = '';
                                }}
                              />
                            </label>
                          </div>
                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
                            {existingVrFiles.length === 0 && vrContentFiles.length === 0 ? (
                              <div className="h-[64px] flex items-center justify-center">
                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
                                  VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
                                </p>
                              </div>
                            ) : (
                              <div className="flex flex-col py-[12px]">
                                {existingVrFiles.map((file, index) => (
                                  <div
                                    key={`existing-vr-${index}`}
                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
                                  >
                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
                                      {file.fileName}
                                    </p>
                                    <button
                                      type="button"
                                      onClick={() => {
                                        setExistingVrFiles(prev => prev.filter((_, i) => i !== index));
                                        setVrContentCount(prev => prev - 1);
                                      }}
                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
                                      aria-label="파일 삭제"
                                    >
                                      <CloseXOSvg />
                                    </button>
                                  </div>
                                ))}
                                {vrContentFiles.map((fileName, index) => (
                                  <div
                                    key={`new-vr-${index}`}
                                    className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
                                  >
                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
                                      {fileName}
                                    </p>
                                    <button
                                      type="button"
                                      onClick={() => {
                                        setVrContentFiles(prev => prev.filter((_, i) => i !== index));
                                        setVrContentFileObjects(prev => prev.filter((_, i) => i !== index));
                                        setVrContentFileKeys(prev => prev.filter((_, i) => i !== index));
                                        setVrContentCount(prev => prev - 1);
                                      }}
                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
                                      aria-label="파일 삭제"
                                    >
                                      <CloseXOSvg />
                                    </button>
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </div>

                        {/* 학습 평가 문제 */}
                        <div className="flex flex-col gap-[8px]">
                          <div className="flex items-center justify-between h-[32px]">
                            <div className="flex items-center gap-[8px]">
                              <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
                                학습 평가 문제
                              </label>
                              <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
                                CSV 파일 형식만 첨부 가능
                              </span>
                            </div>
                            <div className="flex items-center gap-[8px]">
                              <label 
                                className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center"
                                onClick={(e) => {
                                  // 기존 파일이나 새로 첨부한 파일이 있으면 확인 모달 표시
                                  if (questionFileObject || questionFileKey || existingQuestionFile) {
                                    e.preventDefault();
                                    setPendingFiles([]);
                                    setPendingFileType('csv');
                                    setIsFileReplaceModalOpen(true);
                                  }
                                }}
                              >
                                <span>첨부</span>
                                <input
                                  ref={csvFileInputRef}
                                  type="file"
                                  accept=".csv"
                                  className="hidden"
                                  onChange={async (e) => {
                                    const files = e.target.files;
                                    if (!files || files.length === 0) return;

                                    const file = files[0];
                                    
                                    // CSV 파일만 허용
                                    if (!file.name.toLowerCase().endsWith('.csv')) {
                                      alert('CSV 파일 형식만 첨부할 수 있습니다.');
                                      e.target.value = '';
                                      return;
                                    }

                                    // 기존 파일 삭제 후 새 파일 업로드
                                    setExistingQuestionFile(null);
                                    await handleCsvFileUpload(file);
                                    e.target.value = '';
                                  }}
                                />
                              </label>
                            </div>
                          </div>
                          <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
                            {csvData.length === 0 ? (
                              <div className="h-[64px] flex items-center justify-center">
                                <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
                                  학습 평가용 문항 파일을 첨부해주세요.
                                </p>
                              </div>
                            ) : (
                              <div className="flex flex-col">
                                {/* 파일 정보 및 삭제 버튼 */}
                                {(existingQuestionFile || questionFileObject) && (
                                  <div className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px] bg-white border-b border-[#dee1e6]">
                                    <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
                                      {existingQuestionFile ? existingQuestionFile.fileName : questionFileObject?.name}
                                    </p>
                                    <button
                                      type="button"
                                      onClick={() => {
                                        setQuestionFileObject(null);
                                        setQuestionFileKey(null);
                                        setExistingQuestionFile(null);
                                        setQuestionFileCount(0);
                                        setCsvData([]);
                                        setCsvHeaders([]);
                                        setCsvRows([]);
                                      }}
                                      className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
                                      aria-label="파일 삭제"
                                    >
                                      <CloseXOSvg />
                                    </button>
                                  </div>
                                )}
                                {/* CSV 표 */}
                                <div className="m-[24px] border border-[#dee1e6] border-solid relative bg-white max-h-[400px] overflow-y-auto csv-table-scroll">
                                  <div className="content-stretch flex flex-col items-start justify-center relative size-full">
                                    {/* 헤더 */}
                                    <div className="bg-[#f1f8ff] content-stretch flex h-[48px] items-center overflow-clip relative shrink-0 w-full sticky top-0 z-10">
                                      {csvHeaders.map((header, index) => {
                                        const isLast = index === csvHeaders.length - 1;
                                        return (
                                          <div
                                            key={index}
                                            className={`border-[#dee1e6] ${
                                              isLast ? '' : 'border-[0px_1px_0px_0px]'
                                            } border-solid box-border content-stretch flex gap-[10px] h-full items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
                                              index === 0 ? 'w-[48px]' : index === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
                                            }`}
                                          >
                                            <div className="flex flex-col font-['Pretendard:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#4c5561] text-[14px] text-nowrap">
                                              <p className="leading-[1.5] whitespace-pre">{header || `열 ${index + 1}`}</p>
                                            </div>
                                          </div>
                                        );
                                      })}
                                    </div>

                                    {/* 데이터 행 */}
                                    {csvRows.map((row, rowIndex) => (
                                      <div
                                        key={rowIndex}
                                        className="border-[#dee1e6] border-[1px_0px_0px] border-solid h-[48px] relative shrink-0 w-full"
                                      >
                                        <div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
                                          {csvHeaders.map((_, colIndex) => {
                                            const isLast = colIndex === csvHeaders.length - 1;
                                            const cellValue = row[colIndex] || '';
                                            return (
                                              <div
                                                key={colIndex}
                                                className={`border-[#dee1e6] ${
                                                  isLast ? '' : 'border-[0px_1px_0px_0px]'
                                                } border-solid box-border content-stretch flex flex-col gap-[4px] items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
                                                  colIndex === 0 ? 'w-[48px]' : colIndex === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
                                                }`}
                                              >
                                                <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#1b2027] text-[15px] text-nowrap whitespace-pre">
                                                  {cellValue}
                                                </p>
                                              </div>
                                            );
                                          })}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 액션 버튼 */}
                    <div className="flex items-center justify-end gap-[12px]">
                      <button
                        type="button"
                        onClick={handleBackClick}
                        className="h-[48px] px-[8px] rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] min-w-[80px] hover:bg-[#e5e7eb] transition-colors cursor-pointer"
                      >
                        취소
                      </button>
                      <button
                        type="button"
                        onClick={handleSaveClick}
                        disabled={isSaving || !originalData || loading}
                        className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        {isSaving ? '저장 중...' : '저장하기'}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>

      {/* 파일 교체 확인 모달 */}
      {isFileReplaceModalOpen && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center">
          <div 
            className="absolute inset-0 bg-black/40"
            onClick={handleFileReplaceCancel}
            aria-hidden="true"
          />
          <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
            <div className="flex flex-col gap-[16px] items-start justify-center w-full">
              <div className="flex gap-[8px] items-start w-full">
                <p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
                  이미 첨부된 파일이 있습니다.
                </p>
              </div>
              <div className="flex gap-[8px] items-start w-full">
                <div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
                  <p className="mb-0">새 파일을 첨부하면 기존 파일이 삭제됩니다.</p>
                  <p>계속 진행하시겠습니까?</p>
                </div>
              </div>
            </div>
            <div className="flex gap-[8px] items-center justify-end shrink-0">
              <button
                type="button"
                onClick={handleFileReplaceCancel}
                className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
              >
                <p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
                  취소
                </p>
              </button>
              <button
                type="button"
                onClick={handleFileReplaceConfirm}
                className="bg-[#1f2b91] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#1a2478] cursor-pointer transition-colors"
              >
                <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
                  확인
                </p>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 변경사항 없음 모달 */}
      <NoChangesModal
        open={isNoChangesModalOpen}
        onClose={() => setIsNoChangesModalOpen(false)}
      />
    </div>
  );
}