xrlms/src/app/admin/lessons/[id]/edit/page.tsx

'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";

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 [courses, setCourses] = useState<Course[]>([]);
  const [showToast, setShowToast] = useState(false);
  
  // 폼 상태
  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 [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) {
          setExistingQuestionFile({
            fileName: data.csvFileName || data.csv_file_name || data.csvName || '평가문제.csv',
            fileKey: data.csvKey,
          });
          setQuestionFileCount(1);
        }
      } 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]);

  // 토스트 자동 닫기
  useEffect(() => {
    if (showToast) {
      const timer = setTimeout(() => {
        setShowToast(false);
      }, 3000); // 3초 후 자동 닫기

      return () => clearTimeout(timer);
    }
  }, [showToast]);

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

  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) {
        alert('변경된 내용이 없습니다.');
        setIsSaving(false);
        return;
      }

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

      // 성공 시 토스트 표시
      setShowToast(true);
      
      // 토스트 표시 후 상세 페이지로 이동
      setTimeout(() => {
        router.push(`/admin/lessons/${params.id}`);
      }, 1500);
    } 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">
                              <span>첨부</span>
                              <input
                                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) {
                                    try {
                                      // 다중 파일 업로드
                                      const uploadResponse = await apiService.uploadFiles(validFiles);
                                      
                                      // 응답에서 fileKey 배열 추출
                                      const fileKeys: string[] = [];
                                      if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
                                        uploadResponse.data.results.forEach((result: any) => {
                                          if (result.ok && result.fileKey) {
                                            fileKeys.push(result.fileKey);
                                          }
                                        });
                                      }
                                      
                                      if (fileKeys.length > 0) {
                                        setCourseVideoFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
                                        setCourseVideoFileObjects(prev => [...prev, ...validFiles]);
                                        setCourseVideoFileKeys(prev => [...prev, ...fileKeys]);
                                        setCourseVideoCount(prev => prev + validFiles.length);
                                      } else {
                                        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
                                      }
                                    } catch (error) {
                                      console.error('강좌 영상 업로드 실패:', error);
                                      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
                                    }
                                  }
                                  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">
                              <span>첨부</span>
                              <input
                                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) {
                                    try {
                                      // 다중 파일 업로드
                                      const uploadResponse = await apiService.uploadFiles(validFiles);
                                      
                                      // 응답에서 fileKey 배열 추출
                                      const fileKeys: string[] = [];
                                      if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results)) {
                                        uploadResponse.data.results.forEach((result: any) => {
                                          if (result.ok && result.fileKey) {
                                            fileKeys.push(result.fileKey);
                                          }
                                        });
                                      }
                                      
                                      if (fileKeys.length > 0) {
                                        setVrContentFiles(prev => [...prev, ...validFiles.map(f => f.name)]);
                                        setVrContentFileObjects(prev => [...prev, ...validFiles]);
                                        setVrContentFileKeys(prev => [...prev, ...fileKeys]);
                                        setVrContentCount(prev => prev + validFiles.length);
                                      } else {
                                        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
                                      }
                                    } catch (error) {
                                      console.error('VR 콘텐츠 업로드 실패:', error);
                                      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
                                    }
                                  }
                                  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">
                                <span>첨부</span>
                                <input
                                  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;
                                    }

                                    try {
                                      // CSV 파일 파싱
                                      const reader = new FileReader();
                                      reader.onload = (event) => {
                                        const text = event.target?.result as string;
                                        if (!text) 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) {
                                            alert('CSV 파일이 비어있습니다.');
                                            return;
                                          }

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

                                          setCsvHeaders(headers);
                                          setCsvRows(rows);
                                          setCsvData(parsed);
                                        } catch (parseError) {
                                          console.error('CSV 파싱 오류:', parseError);
                                          alert('CSV 파일을 읽는 중 오류가 발생했습니다.');
                                        }
                                      };

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

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

                                      // 단일 파일 업로드
                                      const uploadResponse = await apiService.uploadFile(file);
                                      
                                      // 응답에서 fileKey 추출
                                      let fileKey: string | null = null;
                                      if (uploadResponse.data?.fileKey) {
                                        fileKey = uploadResponse.data.fileKey;
                                      } else if (uploadResponse.data?.key) {
                                        fileKey = uploadResponse.data.key;
                                      } else if (uploadResponse.data?.id) {
                                        fileKey = uploadResponse.data.id;
                                      } else if (uploadResponse.data?.imageKey) {
                                        fileKey = uploadResponse.data.imageKey;
                                      } else if (uploadResponse.data?.fileId) {
                                        fileKey = uploadResponse.data.fileId;
                                      } else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
                                        fileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
                                      } else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
                                        const result = uploadResponse.data.results[0];
                                        if (result.ok && result.fileKey) {
                                          fileKey = result.fileKey;
                                        }
                                      }
                                      
                                      if (fileKey) {
                                        setQuestionFileObject(file);
                                        setQuestionFileKey(fileKey);
                                        setQuestionFileCount(1);
                                        setExistingQuestionFile(null);
                                      } else {
                                        throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
                                      }
                                    } catch (error) {
                                      console.error('학습 평가 문제 업로드 실패:', error);
                                      alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
                                    }
                                    // input 초기화 (같은 파일 다시 선택 가능하도록)
                                    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">
                                  <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>

      {/* 강좌 수정 완료 토스트 */}
      {showToast && (
        <div className="fixed right-[60px] bottom-[60px] z-50">
          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
              강좌가 수정되었습니다.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}