"use client";

import React, { useState, useRef, useEffect, useMemo } from "react";
import ModalCloseSvg from "@/app/svgs/closexsvg";
import DropdownIcon from "@/app/svgs/dropdownicon";
import CloseXOSvg from "@/app/svgs/closexo";
import { type UserRow } from "@/app/admin/id/mockData";
import { type Course } from "./mockData";
import apiService from "@/app/lib/apiService";

type Props = {
  open: boolean;
  onClose: () => void;
  onSave?: (courseName: string, instructorName: string) => void;
  onDelete?: () => void;
  editingCourse?: Course | null;
};

export default function CourseRegistrationModal({ open, onClose, onSave, onDelete, editingCourse }: Props) {
  const [courseName, setCourseName] = useState("");
  const [instructorId, setInstructorId] = useState<string>("");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isImageDeleted, setIsImageDeleted] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 강사 목록 가져오기
  const [instructors, setInstructors] = useState<UserRow[]>([]);
  const [isLoadingInstructors, setIsLoadingInstructors] = useState(false);
  
  // 강사 목록 로드 함수
  const loadInstructors = async () => {
    if (isLoadingInstructors) return; // 이미 로딩 중이면 중복 호출 방지
    
    setIsLoadingInstructors(true);
    try {
      // 외부 API 호출 - type이 'ADMIN'인 사용자만 조회
      const response = await apiService.getUsersCompact({ type: 'ADMIN', limit: 10 });
      const data = response.data;
      
      // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
      let usersArray: any[] = [];
      if (Array.isArray(data)) {
        usersArray = data;
      } else if (data && typeof data === 'object') {
        usersArray = data.items || data.users || data.data || data.list || [];
      }
      
      // API 응답 데이터를 UserRow 형식으로 변환
      const transformedUsers: UserRow[] = usersArray.length > 0
        ? usersArray.map((user: any) => {
              // 가입일을 YYYY-MM-DD 형식으로 변환
              const formatDate = (dateString: string | null | undefined): string => {
                if (!dateString) return new Date().toISOString().split('T')[0];
                try {
                  const date = new Date(dateString);
                  return date.toISOString().split('T')[0];
                } catch {
                  return new Date().toISOString().split('T')[0];
                }
              };
              
              // null 값을 명시적으로 처리
              const getValue = (value: any, fallback: string = '-') => {
                if (value === null || value === undefined) return fallback;
                if (typeof value === 'string' && value.trim() === '') return fallback;
                return String(value);
              };
              
              // status가 "ACTIVE"이면 활성화, 아니면 비활성화
              const accountStatus: 'active' | 'inactive' = 
                user.status === 'ACTIVE' || user.status === 'active' ? 'active' : 'inactive';
              
              // role 데이터 처리
              let userRole: 'learner' | 'instructor' | 'admin' = 'learner'; // 기본값
              if (user.role) {
                const roleLower = String(user.role).toLowerCase();
                if (roleLower === 'instructor' || roleLower === '강사') {
                  userRole = 'instructor';
                } else if (roleLower === 'admin' || roleLower === '관리자') {
                  userRole = 'admin';
                } else {
                  userRole = 'learner';
                }
              }
              
              return {
                id: String(user.id || user.userId || Math.random()),
                joinDate: formatDate(user.createdAt || user.joinDate || user.join_date),
                name: getValue(user.name || user.userName, '-'),
                email: getValue(user.email || user.userEmail, '-'),
                role: userRole,
                status: accountStatus,
              };
            })
        : [];
      
      setInstructors(transformedUsers);
    } catch (error) {
      console.error('강사 목록 로드 오류:', error);
      setInstructors([]);
    } finally {
      setIsLoadingInstructors(false);
    }
  };
  
  // 선택된 강사 정보
  const selectedInstructor = useMemo(() => {
    return instructors.find(inst => inst.id === instructorId);
  }, [instructors, instructorId]);

  // previewUrl 변경 시 이전 Blob URL 정리
  useEffect(() => {
    return () => {
      if (previewUrl && previewUrl.startsWith('blob:')) {
        URL.revokeObjectURL(previewUrl);
      }
    };
  }, [previewUrl]);

  // 수정 모드일 때 기존 데이터 채우기
  useEffect(() => {
    if (open && editingCourse) {
      setCourseName(editingCourse.courseName);
      // 수정 모드일 때 강사 목록 자동 로드
      loadInstructors();
      
      // 수정 모드일 때 이미지 로드
      if (editingCourse.imageKey) {
        setIsImageDeleted(false); // 초기화
        setSelectedImage(null); // 새 이미지 선택 초기화
        const loadImage = async () => {
          try {
            const imageUrl = await apiService.getFile(editingCourse.imageKey!);
            // 이미지가 있으면 previewUrl 설정, 없으면 null
            if (imageUrl) {
              setPreviewUrl(imageUrl);
            } else {
              setPreviewUrl(null);
            }
          } catch (error) {
            console.error('이미지 로드 오류:', error);
            // 이미지 로드 실패 시 null로 설정
            setPreviewUrl(null);
          }
        };
        loadImage();
      } else {
        setIsImageDeleted(false); // 초기화
        setSelectedImage(null); // 새 이미지 선택 초기화
        setPreviewUrl(null); // 이미지가 없으면 명시적으로 null 설정
      }
    } else if (!open) {
      setCourseName("");
      setInstructorId("");
      setIsDropdownOpen(false);
      setErrors({});
      setIsDeleteConfirmOpen(false);
      setSelectedImage(null);
      setPreviewUrl(null);
      setIsDragging(false);
      setIsImageDeleted(false);
      setInstructors([]); // 모달 닫을 때 강사 목록 초기화
    }
  }, [open, editingCourse]);

  // instructors가 로드된 후 editingCourse의 강사 찾기
  useEffect(() => {
    if (open && editingCourse && instructors.length > 0) {
      const instructor = instructors.find(inst => inst.name === editingCourse.instructorName);
      if (instructor) {
        setInstructorId(instructor.id);
      }
    }
  }, [open, editingCourse, instructors]);

  // 외부 클릭 시 드롭다운 닫기
  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 handleModalClick = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  // 저장 버튼 클릭 핸들러
  const handleSave = async () => {
    const nextErrors: Record<string, string> = {};
    
    if (!courseName.trim()) {
      nextErrors.courseName = "교육 과정명을 입력해 주세요.";
    }
    if (!instructorId || !selectedInstructor) {
      nextErrors.instructor = "강사를 선택해 주세요.";
    }
    
    setErrors(nextErrors);
    
    if (Object.keys(nextErrors).length > 0) {
      return;
    }
    
    if (isSaving) return; // 이미 저장 중이면 중복 호출 방지
    
    // selectedInstructor가 없으면 종료
    if (!selectedInstructor) {
      return;
    }
    
    setIsSaving(true);
    setErrors((prev) => {
      const next = { ...prev };
      delete next.submit;
      return next;
    });
    
    try {
      let imageKey: string | null = null;

      // 새 이미지가 선택된 경우 업로드
      if (selectedImage) {
        try {
          const uploadResponse = await apiService.uploadFile(selectedImage);
          
          // 응답에서 imageKey 추출
          // apiService.uploadFile은 ApiResponse<T> 형태로 반환하므로 uploadResponse.data가 실제 응답 데이터
          if (uploadResponse.data) {
            // 다양한 가능한 응답 구조 확인
            imageKey = uploadResponse.data.imageKey 
              || uploadResponse.data.key 
              || uploadResponse.data.id 
              || uploadResponse.data.fileKey 
              || uploadResponse.data.fileId
              || (uploadResponse.data.data && (uploadResponse.data.data.imageKey || uploadResponse.data.data.key))
              || null;
          }
        } catch (uploadError) {
          const errorMessage = uploadError instanceof Error ? uploadError.message : '이미지 업로드 중 오류가 발생했습니다.';
          console.error('이미지 업로드 오류:', errorMessage);
          setErrors((prev) => ({ 
            ...prev, 
            image: '이미지 업로드 중 오류가 발생했습니다. 이미지 없이 계속 진행됩니다.',
          }));
          // 이미지 업로드 오류 발생해도 계속 진행 (선택사항)
        }
      }

      const requestBody: {
        title: string;
        instructor: string;
        imageKey?: string;
      } = {
        title: courseName.trim(),
        instructor: selectedInstructor.name,
      };

      // imageKey 처리: 수정 모드에서는 항상 명시적으로 설정
      if (editingCourse && editingCourse.id) {
        // 수정 모드: 이미지가 삭제된 경우 "null" 문자열, 새 이미지가 있으면 값, 기존 이미지 유지 시 기존 값, 없으면 "null"
        if (isImageDeleted) {
          // 이미지가 삭제된 경우 무조건 "null" 문자열로 설정
          requestBody.imageKey = "null";
        } else if (imageKey) {
          // 새 이미지가 업로드된 경우
          requestBody.imageKey = imageKey;
        } else if (editingCourse.imageKey) {
          // 기존 이미지를 유지하는 경우
          requestBody.imageKey = editingCourse.imageKey;
        } else {
          // 이미지가 없는 경우 "null" 문자열로 명시적으로 설정
          requestBody.imageKey = "null";
        }
      } else {
        // 등록 모드: 새 이미지가 있으면 값, 없으면 undefined (선택사항)
        if (imageKey) {
          requestBody.imageKey = imageKey;
        }
      }

      // 수정 모드인지 등록 모드인지 확인
      if (editingCourse && editingCourse.id) {
        // 수정 모드: PUT /subjects/{id}
        try {
          await apiService.updateSubject(editingCourse.id, requestBody);
          
          // 성공 시 onSave 콜백 호출 및 모달 닫기
          if (onSave && selectedInstructor) {
            onSave(courseName.trim(), selectedInstructor.name);
          }
          onClose(); // 모달 닫기
        } catch (updateError) {
          const errorMessage = updateError instanceof Error ? updateError.message : '과목 수정 중 오류가 발생했습니다.';
          console.error('과목 수정 실패:', errorMessage);
          setErrors({ submit: errorMessage });
          setIsSaving(false);
          return;
        }
      } else {
        // 등록 모드: POST /subjects
        try {
          const createRequestBody: {
            title: string;
            instructor: string;
            imageKey?: string;
          } = {
            title: courseName.trim(),
            instructor: selectedInstructor.name,
          };

          // imageKey 처리: 등록 모드에서 새 이미지가 있으면 포함
          if (imageKey) {
            createRequestBody.imageKey = imageKey;
          }

          await apiService.createSubject(createRequestBody);

          // 성공 시 onSave 콜백 호출 및 모달 닫기
          if (onSave && selectedInstructor) {
            onSave(courseName.trim(), selectedInstructor.name);
          }
          onClose(); // 모달 닫기
        } catch (createError) {
          const errorMessage = createError instanceof Error ? createError.message : '과목 등록 중 오류가 발생했습니다.';
          console.error('과목 등록 실패:', errorMessage);
          setErrors({ submit: errorMessage });
          setIsSaving(false);
          return;
        }
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
      console.error('과목 저장 오류:', errorMessage);
      setErrors({ submit: errorMessage });
    } finally {
      setIsSaving(false);
    }
  };

  // 삭제 버튼 클릭 핸들러
  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsDeleteConfirmOpen(true);
  };

  // 삭제 확인 핸들러
  const handleDeleteConfirm = async () => {
    if (!editingCourse || !editingCourse.id) {
      console.error('삭제할 교육과정 정보가 없습니다.');
      setErrors({ submit: '삭제할 교육과정 정보가 없습니다.' });
      return;
    }

    if (isDeleting) return; // 이미 삭제 중이면 중복 호출 방지

    setIsDeleting(true);
    setErrors((prev) => {
      const next = { ...prev };
      delete next.submit;
      return next;
    });

    try {
      await apiService.deleteSubject(editingCourse.id);

      // 성공 시 모달 닫기 및 콜백 호출
      setIsDeleteConfirmOpen(false);
      if (onDelete) {
        onDelete();
      }
      onClose();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '교육과정 삭제 중 오류가 발생했습니다.';
      console.error('교육과정 삭제 실패:', errorMessage);
      setErrors({ submit: errorMessage });
    } finally {
      setIsDeleting(false);
    }
  };

  // 삭제 취소 핸들러
  const handleDeleteCancel = () => {
    setIsDeleteConfirmOpen(false);
  };

  // 파일 유효성 검사
  const validateImageFile = (file: File): string | null => {
    const maxSize = 30 * 1024 * 1024; // 30MB
    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
    
    if (!allowedTypes.includes(file.type)) {
      return "PNG 또는 JPG 파일만 업로드 가능합니다.";
    }
    
    if (file.size > maxSize) {
      return "파일 크기는 30MB 미만이어야 합니다.";
    }
    
    return null;
  };

  // 이미지 파일 처리
  const handleImageFile = (file: File) => {
    const error = validateImageFile(file);
    if (error) {
      setErrors((prev) => ({ ...prev, image: error }));
      return;
    }

    setSelectedImage(file);
    setIsImageDeleted(false); // 새 이미지 선택 시 삭제 상태 해제
    setErrors((prev) => {
      const next = { ...prev };
      delete next.image;
      return next;
    });

    // 기존 previewUrl이 Blob URL인 경우 메모리 해제
    if (previewUrl && previewUrl.startsWith('blob:')) {
      URL.revokeObjectURL(previewUrl);
    }

    // 미리보기 URL 생성
    const reader = new FileReader();
    reader.onloadend = () => {
      setPreviewUrl(reader.result as string);
    };
    reader.readAsDataURL(file);
  };

  // 파일 선택 핸들러
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      handleImageFile(file);
    }
  };

  // 클릭으로 파일 선택
  const handleImageAreaClick = () => {
    fileInputRef.current?.click();
  };

  // 드래그 오버 핸들러
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  };

  // 드래그 리브 핸들러
  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  // 드롭 핸들러
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    const file = e.dataTransfer.files?.[0];
    if (file) {
      handleImageFile(file);
    }
  };

  // 이미지 삭제 핸들러
  const handleRemoveImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    setSelectedImage(null);
    // previewUrl이 Blob URL인 경우 메모리 해제
    if (previewUrl && previewUrl.startsWith('blob:')) {
      URL.revokeObjectURL(previewUrl);
    }
    setPreviewUrl(null);
    setIsImageDeleted(true); // 이미지 삭제 상태 설정
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
    setErrors((prev) => {
      const next = { ...prev };
      delete next.image;
      return next;
    });
  };

  if (!open && !isDeleteConfirmOpen) return null;

  return (
    <>
      {/* 메인 모달 */}
      {open && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center"
          aria-hidden={!open}
          onClick={onClose}
        >
          <div
            className="absolute inset-0 bg-black/40"
            aria-hidden="true"
          />
          <div
            ref={modalRef}
            className="relative z-10 shadow-xl"
            onClick={handleModalClick}
          >
            <div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
          {/* Header */}
          <div className="flex items-center justify-between gap-[10px] p-6">
            <h2 className="text-[20px] font-bold leading-normal text-[var(--color-neutral-700)]">
              {editingCourse ? "교육과정 수정" : "과목 등록"}
            </h2>
            <button
              type="button"
              onClick={onClose}
              className="w-6 h-6 flex items-center justify-center cursor-pointer hover:opacity-80 shrink-0"
              aria-label="닫기"
            >
              <ModalCloseSvg />
            </button>
          </div>

          {/* Form Container */}
          <div className="px-6 py-0">
            <div className="flex flex-col gap-6">
              {/* 교육 과정명 */}
              <div className="flex flex-col gap-2">
                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
                  교육 과정명<span className="text-[var(--color-error)]">*</span>
                </label>
                <input
                  type="text"
                  value={courseName}
                  onChange={(e) => {
                    setCourseName(e.target.value);
                    if (errors.courseName) {
                      setErrors((prev) => {
                        const next = { ...prev };
                        delete next.courseName;
                        return next;
                      });
                    }
                  }}
                  placeholder="교육 과정명을 입력해 주세요."
                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-normal text-[var(--color-text-title)] placeholder:text-[var(--color-text-placeholder-alt)] focus:outline-none ${
                    errors.courseName
                      ? "border-[var(--color-error)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
                      : "border-[var(--color-neutral-40)] focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]"
                  }`}
                />
                {errors.courseName && (
                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.courseName}</p>
                )}
              </div>

              {/* 강사 */}
              <div className="flex flex-col gap-2">
                <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] w-[100px]">
                  강사<span className="text-[var(--color-error)]">*</span>
                </label>
                <div className="relative" ref={dropdownRef}>
                  <button
                    type="button"
                    onClick={async () => {
                      const willOpen = !isDropdownOpen;
                      setIsDropdownOpen(willOpen);
                      // 드롭다운을 열 때만 API 호출
                      if (willOpen) {
                        await loadInstructors();
                      }
                    }}
                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] cursor-pointer ${
                      errors.instructor
                        ? "border-border-error"
                        : "border-[var(--color-neutral-40)]"
                    }`}
                  >
                    <span
                      className={`text-[16px] font-normal leading-normal flex-1 ${
                        selectedInstructor ? "text-[var(--color-text-title)]" : "text-[var(--color-text-label)]"
                      }`}
                    >
                      {selectedInstructor?.name || "강사를 선택해 주세요."}
                    </span>
                    <DropdownIcon stroke="var(--color-text-meta)" className="shrink-0" />
                  </button>
                  {isDropdownOpen && (
                    <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[var(--color-neutral-40)] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto">
                      {isLoadingInstructors ? (
                        <div className="px-3 py-2 text-[16px] font-normal leading-normal text-[var(--color-text-label)] text-center">
                          로딩 중...
                        </div>
                      ) : instructors.length === 0 ? (
                        <div className="px-3 py-2 text-[16px] font-normal leading-normal text-[var(--color-text-label)] text-center">
                          등록된 강사가 없습니다.
                        </div>
                      ) : (
                        instructors.map((instructor, index) => (
                          <button
                            key={instructor.id}
                            type="button"
                            onClick={() => {
                              setInstructorId(instructor.id);
                              setIsDropdownOpen(false);
                              if (errors.instructor) {
                                setErrors((prev) => {
                                  const next = { ...prev };
                                  delete next.instructor;
                                  return next;
                                });
                              }
                            }}
                            className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-normal hover:bg-[var(--color-bg-gray-light)] transition-colors cursor-pointer ${
                              instructorId === instructor.id
                                ? "bg-[var(--color-bg-primary-light)] text-[var(--color-active-button)] font-semibold"
                                : "text-[var(--color-text-title)]"
                            } ${
                              index === 0 ? "rounded-t-[8px]" : ""
                            } ${
                              index === instructors.length - 1 ? "rounded-b-[8px]" : ""
                            }`}
                          >
                            {instructor.name}
                          </button>
                        ))
                      )}
                    </div>
                  )}
                </div>
                {errors.instructor && (
                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.instructor}</p>
                )}
              </div>

              {/* 과목 이미지 */}
              <div className="flex flex-col gap-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <label className="text-[15px] font-semibold leading-normal text-[var(--color-text-label)] whitespace-pre">
                      과목 이미지
                    </label>
                    <span className="text-[13px] font-normal leading-[1.4] text-[var(--color-text-meta)]">
                      30MB 미만의 PNG, JPG
                    </span>
                  </div>
                </div>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/png,image/jpeg,image/jpg"
                  onChange={handleFileSelect}
                  className="hidden"
                  aria-label="이미지 파일 선택"
                />
                <div
                  onClick={handleImageAreaClick}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onDrop={handleDrop}
                  className={`border border-dashed min-h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer transition-colors px-0 relative overflow-hidden ${
                    isDragging
                      ? "bg-blue-50 border-blue-300"
                      : previewUrl
                      ? "bg-white border-[var(--color-neutral-40)]"
                      : "bg-gray-50 border-[var(--color-neutral-40)] hover:bg-gray-100"
                  }`}
                >
                  {previewUrl ? (
                    <>
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="relative flex items-start">
                          <img
                            src={previewUrl}
                            alt="미리보기"
                            className="h-[160px] w-auto object-contain"
                          />
                          <button
                            type="button"
                            onClick={handleRemoveImage}
                            className="w-[18px] h-[18px] flex items-center justify-center ml-1 z-10 hover:opacity-80 transition-opacity shrink-0"
                            aria-label="이미지 삭제"
                          >
                            <CloseXOSvg width={18} height={18} />
                          </button>
                        </div>
                      </div>
                      <div className="absolute inset-0 bg-black/0 hover:bg-black/20 transition-colors flex items-center justify-center my-4">
                        <div className="text-center opacity-0 hover:opacity-100 transition-opacity">
                          <p className="text-[14px] font-normal leading-normal text-white">
                            클릭하여 이미지 변경
                          </p>
                        </div>
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="w-10 h-10 flex items-center justify-center shrink-0">
                        <svg
                          width="40"
                          height="40"
                          viewBox="0 0 40 40"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M20 13.3333V26.6667M13.3333 20H26.6667"
                            stroke="var(--color-text-meta)"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                      <div className="text-center">
                        <p className="text-[14px] font-normal leading-normal text-[var(--color-text-meta)] whitespace-pre">
                          (클릭하여 이미지 업로드)
                          <br aria-hidden="true" />
                          미첨부 시 기본 이미지가 노출됩니다.
                        </p>
                      </div>
                    </>
                  )}
                </div>
                {errors.image && (
                  <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.image}</p>
                )}
              </div>
            </div>
          </div>

          {/* 에러 메시지 표시 */}
          {errors.submit && (
            <div className="px-6 pb-2">
              <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
            </div>
          )}

          {/* Actions Container */}
          <div className="flex flex-col gap-8 h-[96px] items-center p-6">
            <div className="flex items-center justify-center gap-3 w-full">
              {editingCourse && (
                <button
                  type="button"
                  onClick={handleDeleteClick}
                  className="h-[48px] px-4 rounded-[10px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] w-[136px] hover:bg-[#fae6e6] transition-colors cursor-pointer"
                >
                  삭제
                </button>
              )}
              <button
                type="button"
                onClick={onClose}
                className="h-[48px] px-4 rounded-[10px] bg-[var(--color-bg-gray-light)] text-[16px] font-semibold leading-normal text-[var(--color-basic-text)] w-[136px] hover:bg-[var(--color-bg-gray-hover)] transition-colors cursor-pointer"
              >
                취소
              </button>
              <button
                type="button"
                onClick={handleSave}
                disabled={isSaving}
                className="h-[48px] px-4 rounded-[10px] bg-[var(--color-active-button)] text-[16px] font-semibold leading-normal text-white w-[136px] hover:bg-[var(--color-active-button-hover)] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isSaving ? '저장 중...' : '저장'}
              </button>
            </div>
          </div>
        </div>
          </div>
        </div>
      )}

      {/* 삭제 확인 모달 */}
      {isDeleteConfirmOpen && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center">
          <div 
            className="absolute inset-0 bg-black/40"
            onClick={handleDeleteCancel}
            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">
            <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>
              {errors.submit && (
                <p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
              )}
            </div>
            <div className="flex gap-[8px] items-center justify-end shrink-0">
              <button
                type="button"
                onClick={handleDeleteCancel}
                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={handleDeleteConfirm}
                disabled={isDeleting}
                className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
                  {isDeleting ? '삭제 중...' : '삭제'}
                </p>
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

