import { useState, useEffect, useRef } from "react";
import { useNavigate, Link, useParams } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import {
  LogOut,
  Home,
  ChevronRight,
  Calendar,
  Save,
  X,
  Upload,
  Link as LinkIcon,
  ChevronLeft,
  ChevronDown,
  Clock,
  Image,
  Users,
  Check,
  Plus,
  MapPin,
  Settings,
  AlertTriangle,
  Trash2,
  Search,
} from "lucide-react";
import Toast from "../../../components/Toast";
import Lightbox from "../../../components/common/Lightbox";
// 커스텀 데이트픽커 컴포넌트 (AdminMemberEdit.jsx에서 가져옴)
function CustomDatePicker({ value, onChange, placeholder = "날짜 선택" }) {
  const [isOpen, setIsOpen] = useState(false);
  const [viewMode, setViewMode] = useState("days");
  const [viewDate, setViewDate] = useState(() => {
    if (value) return new Date(value);
    return new Date();
  });
  const ref = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setIsOpen(false);
        setViewMode("days");
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const year = viewDate.getFullYear();
  const month = viewDate.getMonth();

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const days = [];
  for (let i = 0; i < firstDay; i++) {
    days.push(null);
  }
  for (let i = 1; i <= daysInMonth; i++) {
    days.push(i);
  }

  const startYear = Math.floor(year / 10) * 10 - 1;
  const years = Array.from({ length: 12 }, (_, i) => startYear + i);

  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
  const prevYearRange = () => setViewDate(new Date(year - 10, month, 1));
  const nextYearRange = () => setViewDate(new Date(year + 10, month, 1));

  const selectDate = (day) => {
    const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(
      day
    ).padStart(2, "0")}`;
    onChange(dateStr);
    setIsOpen(false);
    setViewMode("days");
  };

  const selectYear = (y) => {
    setViewDate(new Date(y, month, 1));
    setViewMode("months");
  };

  const selectMonth = (m) => {
    setViewDate(new Date(year, m, 1));
    setViewMode("days");
  };

  const formatDisplayDate = (dateStr) => {
    if (!dateStr) return "";
    const [y, m, d] = dateStr.split("-");
    const days = ['일', '월', '화', '수', '목', '금', '토'];
    const date = new Date(parseInt(y), parseInt(m) - 1, parseInt(d));
    const dayOfWeek = days[date.getDay()];
    return `${y}년 ${parseInt(m)}월 ${parseInt(d)}일 (${dayOfWeek})`;
  };

  const isSelected = (day) => {
    if (!value || !day) return false;
    const [y, m, d] = value.split("-");
    return (
      parseInt(y) === year && parseInt(m) === month + 1 && parseInt(d) === day
    );
  };

  const isToday = (day) => {
    if (!day) return false;
    const today = new Date();
    return (
      today.getFullYear() === year &&
      today.getMonth() === month &&
      today.getDate() === day
    );
  };

  const isCurrentYear = (y) => new Date().getFullYear() === y;
  const isCurrentMonth = (m) => {
    const today = new Date();
    return today.getFullYear() === year && today.getMonth() === m;
  };

  const months = [
    "1월",
    "2월",
    "3월",
    "4월",
    "5월",
    "6월",
    "7월",
    "8월",
    "9월",
    "10월",
    "11월",
    "12월",
  ];

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-3 border border-gray-200 rounded-xl bg-white flex items-center justify-between hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
      >
        <span className={value ? "text-gray-900" : "text-gray-400"}>
          {value ? formatDisplayDate(value) : placeholder}
        </span>
        <Calendar size={18} className="text-gray-400" />
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.15 }}
            className="absolute z-50 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg p-4 w-80"
          >
            <div className="flex items-center justify-between mb-4">
              <button
                type="button"
                onClick={viewMode === "years" ? prevYearRange : prevMonth}
                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <ChevronLeft size={20} className="text-gray-600" />
              </button>
              <button
                type="button"
                onClick={() =>
                  setViewMode(viewMode === "days" ? "years" : "days")
                }
                className="font-medium text-gray-900 hover:text-primary transition-colors flex items-center gap-1"
              >
                {viewMode === "years"
                  ? `${years[0]} - ${years[years.length - 1]}`
                  : `${year}년 ${month + 1}월`}
                <ChevronDown
                  size={16}
                  className={`transition-transform ${
                    viewMode !== "days" ? "rotate-180" : ""
                  }`}
                />
              </button>
              <button
                type="button"
                onClick={viewMode === "years" ? nextYearRange : nextMonth}
                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <ChevronRight size={20} className="text-gray-600" />
              </button>
            </div>

            <AnimatePresence mode="wait">
              {viewMode === "years" && (
                <motion.div
                  key="years"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="text-center text-sm text-gray-500 mb-3">
                    년도
                  </div>
                  <div className="grid grid-cols-4 gap-2 mb-4">
                    {years.map((y) => (
                      <button
                        key={y}
                        type="button"
                        onClick={() => selectYear(y)}
                        className={`py-2 rounded-lg text-sm transition-colors ${
                          year === y
                            ? "bg-primary text-white"
                            : "hover:bg-gray-100 text-gray-700"
                        } ${
                          isCurrentYear(y) && year !== y
                            ? "border border-primary text-primary"
                            : ""
                        }`}
                      >
                        {y}
                      </button>
                    ))}
                  </div>
                  <div className="text-center text-sm text-gray-500 mb-3">
                    월
                  </div>
                  <div className="grid grid-cols-4 gap-2">
                    {months.map((m, i) => (
                      <button
                        key={m}
                        type="button"
                        onClick={() => selectMonth(i)}
                        className={`py-2 rounded-lg text-sm transition-colors ${
                          month === i
                            ? "bg-primary text-white"
                            : "hover:bg-gray-100 text-gray-700"
                        } ${
                          isCurrentMonth(i) && month !== i
                            ? "border border-primary text-primary"
                            : ""
                        }`}
                      >
                        {m}
                      </button>
                    ))}
                  </div>
                </motion.div>
              )}

              {viewMode === "months" && (
                <motion.div
                  key="months"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="text-center text-sm text-gray-500 mb-3">
                    월 선택
                  </div>
                  <div className="grid grid-cols-4 gap-2">
                    {months.map((m, i) => (
                      <button
                        key={m}
                        type="button"
                        onClick={() => selectMonth(i)}
                        className={`py-2.5 rounded-lg text-sm transition-colors ${
                          month === i
                            ? "bg-primary text-white"
                            : "hover:bg-gray-100 text-gray-700"
                        } ${
                          isCurrentMonth(i) && month !== i
                            ? "border border-primary text-primary"
                            : ""
                        }`}
                      >
                        {m}
                      </button>
                    ))}
                  </div>
                </motion.div>
              )}

              {viewMode === "days" && (
                <motion.div
                  key="days"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="grid grid-cols-7 gap-1 mb-2">
                    {["일", "월", "화", "수", "목", "금", "토"].map((d, i) => (
                      <div
                        key={d}
                        className={`text-center text-xs font-medium py-1 ${
                          i === 0
                            ? "text-red-400"
                            : i === 6
                            ? "text-blue-400"
                            : "text-gray-400"
                        }`}
                      >
                        {d}
                      </div>
                    ))}
                  </div>
                  <div className="grid grid-cols-7 gap-1">
                    {days.map((day, i) => {
                      const dayOfWeek = i % 7;
                      return (
                        <button
                          key={i}
                          type="button"
                          disabled={!day}
                          onClick={() => day && selectDate(day)}
                          className={`aspect-square rounded-full text-sm font-medium flex items-center justify-center transition-all
                                                        ${
                                                          !day
                                                            ? ""
                                                            : "hover:bg-gray-100"
                                                        }
                                                        ${
                                                          isSelected(day)
                                                            ? "bg-primary text-white hover:bg-primary"
                                                            : ""
                                                        }
                                                        ${
                                                          isToday(day) &&
                                                          !isSelected(day)
                                                            ? "bg-primary/10 text-primary font-bold hover:bg-primary/20"
                                                            : ""
                                                        }
                                                        ${
                                                          day &&
                                                          !isSelected(day) &&
                                                          !isToday(day) &&
                                                          dayOfWeek === 0
                                                            ? "text-red-500"
                                                            : ""
                                                        }
                                                        ${
                                                          day &&
                                                          !isSelected(day) &&
                                                          !isToday(day) &&
                                                          dayOfWeek === 6
                                                            ? "text-blue-500"
                                                            : ""
                                                        }
                                                        ${
                                                          day &&
                                                          !isSelected(day) &&
                                                          !isToday(day) &&
                                                          dayOfWeek > 0 &&
                                                          dayOfWeek < 6
                                                            ? "text-gray-700"
                                                            : ""
                                                        }
                                                    `}
                        >
                          {day}
                        </button>
                      );
                    })}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// 숫자 피커 컬럼 컴포넌트 (Vue 컴포넌트를 React로 변환)
function NumberPicker({ items, value, onChange }) {
  const ITEM_HEIGHT = 40;
  const containerRef = useRef(null);
  const [offset, setOffset] = useState(0);
  const offsetRef = useRef(0); // 드래그용 ref
  const touchStartY = useRef(0);
  const startOffset = useRef(0);
  const isScrolling = useRef(false);

  // offset 변경시 ref도 업데이트
  useEffect(() => {
    offsetRef.current = offset;
  }, [offset]);

  // 초기 위치 설정
  useEffect(() => {
    if (value !== null && value !== undefined) {
      const index = items.indexOf(value);
      if (index !== -1) {
        const newOffset = -index * ITEM_HEIGHT;
        setOffset(newOffset);
        offsetRef.current = newOffset;
      }
    }
  }, []);

  // 값 변경시 위치 업데이트
  useEffect(() => {
    const index = items.indexOf(value);
    if (index !== -1) {
      const targetOffset = -index * ITEM_HEIGHT;
      if (Math.abs(offset - targetOffset) > 1) {
        setOffset(targetOffset);
        offsetRef.current = targetOffset;
      }
    }
  }, [value, items]);

  const centerOffset = ITEM_HEIGHT; // 중앙 위치 오프셋

  // 아이템이 중앙에 있는지 확인
  const isItemInCenter = (item) => {
    const itemIndex = items.indexOf(item);
    const itemPosition = -itemIndex * ITEM_HEIGHT;
    const tolerance = ITEM_HEIGHT / 2;
    return Math.abs(offset - itemPosition) < tolerance;
  };

  // 오프셋 업데이트 (경계 제한)
  const updateOffset = (newOffset) => {
    const maxOffset = 0;
    const minOffset = -(items.length - 1) * ITEM_HEIGHT;
    return Math.min(maxOffset, Math.max(minOffset, newOffset));
  };

  // 중앙 아이템 업데이트
  const updateCenterItem = (currentOffset) => {
    const centerIndex = Math.round(-currentOffset / ITEM_HEIGHT);
    if (centerIndex >= 0 && centerIndex < items.length) {
      const centerItem = items[centerIndex];
      if (value !== centerItem) {
        onChange(centerItem);
      }
    }
  };

  // 가장 가까운 아이템에 스냅
  const snapToClosestItem = (currentOffset) => {
    const targetOffset = Math.round(currentOffset / ITEM_HEIGHT) * ITEM_HEIGHT;
    setOffset(targetOffset);
    offsetRef.current = targetOffset;
    updateCenterItem(targetOffset);
  };

  // 터치 시작
  const handleTouchStart = (e) => {
    e.stopPropagation();
    touchStartY.current = e.touches[0].clientY;
    startOffset.current = offsetRef.current;
  };

  // 터치 이동
  const handleTouchMove = (e) => {
    e.stopPropagation();
    const touchY = e.touches[0].clientY;
    const deltaY = touchY - touchStartY.current;
    const newOffset = updateOffset(startOffset.current + deltaY);
    setOffset(newOffset);
    offsetRef.current = newOffset;
  };

  // 터치 종료
  const handleTouchEnd = (e) => {
    e.stopPropagation();
    snapToClosestItem(offsetRef.current);
  };

  // 마우스 휠 - 바깥 스크롤 방지
  const handleWheel = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isScrolling.current) return;
    isScrolling.current = true;

    const newOffset = updateOffset(
      offsetRef.current - Math.sign(e.deltaY) * ITEM_HEIGHT
    );
    setOffset(newOffset);
    offsetRef.current = newOffset;
    snapToClosestItem(newOffset);

    setTimeout(() => {
      isScrolling.current = false;
    }, 50);
  };

  // 마우스 드래그
  const handleMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
    touchStartY.current = e.clientY;
    startOffset.current = offsetRef.current;

    const handleMouseMove = (moveEvent) => {
      moveEvent.preventDefault();
      const deltaY = moveEvent.clientY - touchStartY.current;
      const newOffset = updateOffset(startOffset.current + deltaY);
      setOffset(newOffset);
      offsetRef.current = newOffset;
    };

    const handleMouseUp = () => {
      snapToClosestItem(offsetRef.current);
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
  };

  // wheel 이벤트 passive false로 등록
  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.addEventListener("wheel", handleWheel, { passive: false });
      return () => container.removeEventListener("wheel", handleWheel);
    }
  }, []);

  return (
    <div
      ref={containerRef}
      className="relative w-16 h-[120px] overflow-hidden touch-none select-none cursor-grab active:cursor-grabbing"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onMouseDown={handleMouseDown}
    >
      {/* 중앙 선택 영역 */}
      <div className="absolute top-1/2 left-1 right-1 h-10 -translate-y-1/2 bg-primary/10 rounded-lg z-0" />

      {/* 피커 내부 */}
      <div
        className="relative transition-transform duration-150 ease-out"
        style={{ transform: `translateY(${offset + centerOffset}px)` }}
      >
        {items.map((item) => (
          <div
            key={item}
            className={`h-10 leading-10 text-center select-none transition-all duration-150 ${
              isItemInCenter(item)
                ? "text-primary text-lg font-bold"
                : "text-gray-300 text-base"
            }`}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

// 커스텀 시간 피커 (Vue 컴포넌트 기반)
function CustomTimePicker({ value, onChange, placeholder = "시간 선택" }) {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef(null);

  // 현재 값 파싱
  const parseValue = () => {
    if (!value) return { hour: "12", minute: "00", period: "오후" };
    const [h, m] = value.split(":");
    const hour = parseInt(h);
    const isPM = hour >= 12;
    const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
    return {
      hour: String(hour12).padStart(2, "0"),
      minute: m,
      period: isPM ? "오후" : "오전",
    };
  };

  const parsed = parseValue();
  const [selectedHour, setSelectedHour] = useState(parsed.hour);
  const [selectedMinute, setSelectedMinute] = useState(parsed.minute);
  const [selectedPeriod, setSelectedPeriod] = useState(parsed.period);

  // 외부 클릭 시 닫기
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // 피커 열릴 때 현재 값으로 초기화
  useEffect(() => {
    if (isOpen) {
      const parsed = parseValue();
      setSelectedHour(parsed.hour);
      setSelectedMinute(parsed.minute);
      setSelectedPeriod(parsed.period);
    }
  }, [isOpen, value]);

  // 시간 확정
  const handleSave = () => {
    let hour = parseInt(selectedHour);
    if (selectedPeriod === "오후" && hour !== 12) hour += 12;
    if (selectedPeriod === "오전" && hour === 12) hour = 0;
    const timeStr = `${String(hour).padStart(2, "0")}:${selectedMinute}`;
    onChange(timeStr);
    setIsOpen(false);
  };

  // 취소
  const handleCancel = () => {
    setIsOpen(false);
  };

  // 초기화
  const handleClear = () => {
    onChange("");
    setIsOpen(false);
  };

  // 표시용 포맷
  const displayValue = () => {
    if (!value) return placeholder;
    const [h, m] = value.split(":");
    const hour = parseInt(h);
    const isPM = hour >= 12;
    const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
    return `${isPM ? "오후" : "오전"} ${hour12}:${m}`;
  };

  // 피커 아이템 데이터
  const periods = ["오전", "오후"];
  const hours = [
    "01",
    "02",
    "03",
    "04",
    "05",
    "06",
    "07",
    "08",
    "09",
    "10",
    "11",
    "12",
  ];
  const minutes = Array.from({ length: 60 }, (_, i) =>
    String(i).padStart(2, "0")
  );

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-3 border border-gray-200 rounded-xl bg-white flex items-center justify-between hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
      >
        <span className={value ? "text-gray-900" : "text-gray-400"}>
          {displayValue()}
        </span>
        <Clock size={18} className="text-gray-400" />
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="absolute top-full left-0 mt-2 bg-white rounded-2xl shadow-xl border border-gray-200 z-50 overflow-hidden"
          >
            {/* 피커 영역 */}
            <div className="flex items-center justify-center px-4 py-4">
              {/* 오전/오후 (맨 앞) */}
              <NumberPicker
                items={periods}
                value={selectedPeriod}
                onChange={setSelectedPeriod}
              />

              {/* 시간 */}
              <NumberPicker
                items={hours}
                value={selectedHour}
                onChange={setSelectedHour}
              />

              <span className="text-xl text-gray-300 font-medium mx-0.5">
                :
              </span>

              {/* 분 */}
              <NumberPicker
                items={minutes}
                value={selectedMinute}
                onChange={setSelectedMinute}
              />
            </div>

            {/* 푸터 버튼 */}
            <div className="flex items-center justify-between px-4 py-3 bg-gray-50">
              <button
                type="button"
                onClick={handleClear}
                className="px-3 py-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors"
              >
                초기화
              </button>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={handleCancel}
                  className="px-4 py-1.5 text-sm text-gray-600 hover:bg-gray-200 rounded-lg transition-colors"
                >
                  취소
                </button>
                <button
                  type="button"
                  onClick={handleSave}
                  className="px-4 py-1.5 text-sm bg-primary text-white font-medium rounded-lg hover:bg-primary-dark transition-colors"
                >
                  저장
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

function AdminScheduleForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const isEditMode = !!id;

  const [user, setUser] = useState(null);
  const [toast, setToast] = useState(null);
  const [loading, setLoading] = useState(false);
  const [members, setMembers] = useState([]);

  // 폼 데이터 (날짜/시간 범위 지원)
  const [formData, setFormData] = useState({
    title: "",
    startDate: "",
    endDate: "",
    startTime: "",
    endTime: "",
    isRange: false, // 범위 설정 여부
    category: "",
    description: "",
    url: "",
    sourceName: "",
    members: [],
    images: [],
    // 장소 정보
    locationName: "", // 장소 이름
    locationAddress: "", // 주소
    locationDetail: "", // 상세주소 (예: 3관, N열 등)
    locationLat: null, // 위도
    locationLng: null, // 경도
  });

  // 이미지 미리보기
  const [imagePreviews, setImagePreviews] = useState([]);

  // 라이트박스 상태
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState(0);

  // 삭제 다이얼로그 상태
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTargetIndex, setDeleteTargetIndex] = useState(null);

  // 카테고리 목록 (API에서 로드)
  const [categories, setCategories] = useState([]);

  // 저장 중 상태
  const [saving, setSaving] = useState(false);

  // 장소 검색 관련 상태
  const [locationDialogOpen, setLocationDialogOpen] = useState(false);
  const [locationSearch, setLocationSearch] = useState("");
  const [locationResults, setLocationResults] = useState([]);
  const [locationSearching, setLocationSearching] = useState(false);

  // 수정 모드용 기존 이미지 ID 추적
  const [existingImageIds, setExistingImageIds] = useState([]);

  // 카테고리 색상 맵핑
  const colorMap = {
    blue: "bg-blue-500",
    green: "bg-green-500",
    purple: "bg-purple-500",
    red: "bg-red-500",
    pink: "bg-pink-500",
    yellow: "bg-yellow-500",
    orange: "bg-orange-500",
    gray: "bg-gray-500",
    cyan: "bg-cyan-500",
    indigo: "bg-indigo-500",
  };

  // 색상 스타일 (기본 색상 또는 커스텀 HEX)
  const getColorStyle = (color) => {
    if (!color) return { className: "bg-gray-500" };
    if (color.startsWith("#")) {
      return { style: { backgroundColor: color } };
    }
    return { className: colorMap[color] || "bg-gray-500" };
  };

  // 카테고리 색상
  const getCategoryColor = (categoryId) => {
    const cat = categories.find((c) => c.id === categoryId);
    if (cat && colorMap[cat.color]) {
      return colorMap[cat.color];
    }
    return "bg-gray-500";
  };

  // 날짜에서 요일 가져오기 (월, 화, 수 등)
  const getDayOfWeek = (dateStr) => {
    if (!dateStr) return '';
    const days = ['일', '월', '화', '수', '목', '금', '토'];
    const date = new Date(dateStr);
    return days[date.getDay()];
  };

  // 카테고리 로드
  const fetchCategories = async () => {
    try {
      const res = await fetch("/api/admin/schedule-categories");
      const data = await res.json();
      setCategories(data);
      // 첫 번째 카테고리를 기본값으로 설정
      if (data.length > 0 && !formData.category) {
        setFormData((prev) => ({ ...prev, category: data[0].id }));
      }
    } catch (error) {
      console.error("카테고리 로드 오류:", error);
    }
  };

  // Toast 자동 숨김
  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  useEffect(() => {
    const token = localStorage.getItem("adminToken");
    const userData = localStorage.getItem("adminUser");

    if (!token || !userData) {
      navigate("/admin");
      return;
    }

    setUser(JSON.parse(userData));
    fetchMembers();
    fetchCategories();

    // 수정 모드일 경우 기존 데이터 로드
    if (isEditMode && id) {
      fetchSchedule();
    }
  }, [navigate, isEditMode, id]);

  // 기존 일정 데이터 로드 (수정 모드)
  const fetchSchedule = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem("adminToken");
      const res = await fetch(`/api/admin/schedules/${id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      if (!res.ok) {
        throw new Error("일정을 찾을 수 없습니다.");
      }

      const data = await res.json();

      // 폼 데이터 설정
      setFormData({
        title: data.title || "",
        startDate: data.date
          ? new Date(data.date).toISOString().split("T")[0]
          : "",
        endDate: data.end_date
          ? new Date(data.end_date).toISOString().split("T")[0]
          : "",
        startTime: data.time?.slice(0, 5) || "",
        endTime: data.end_time?.slice(0, 5) || "",
        isRange: !!data.end_date,
        category: data.category_id || "",
        description: data.description || "",
        url: data.source_url || "",
        sourceName: data.source_name || "",
        members: data.members?.map((m) => m.id) || [],
        images: [],
        locationName: data.location_name || "",
        locationAddress: data.location_address || "",
        locationDetail: data.location_detail || "",
        locationLat: data.location_lat || null,
        locationLng: data.location_lng || null,
      });

      // 기존 이미지 설정
      if (data.images && data.images.length > 0) {
        // 기존 이미지를 formData.images에 저장 (id 포함)
        setFormData(prev => ({
          ...prev,
          title: data.title || "",
          isRange: data.is_range || false,
          startDate: data.date?.split("T")[0] || "",
          endDate: data.end_date?.split("T")[0] || "",
          startTime: data.time?.slice(0, 5) || "",
          endTime: data.end_time?.slice(0, 5) || "",
          category: data.category_id || 1,
          description: data.description || "",
          url: data.source_url || "",
          sourceName: data.source_name || "",
          members: data.members?.map((m) => m.id) || [],
          images: data.images.map(img => ({ id: img.id, url: img.image_url })),
          locationName: data.location_name || "",
          locationAddress: data.location_address || "",
          locationDetail: data.location_detail || "",
          locationLat: data.location_lat || null,
          locationLng: data.location_lng || null,
        }));
        setImagePreviews(data.images.map((img) => img.image_url));
        setExistingImageIds(data.images.map((img) => img.id));
      }
    } catch (error) {
      console.error("일정 로드 오류:", error);
      setToast({
        type: "error",
        message: error.message || "일정을 불러오는 중 오류가 발생했습니다.",
      });
      navigate("/admin/schedule");
    } finally {
      setLoading(false);
    }
  };

  const fetchMembers = async () => {
    try {
      const res = await fetch("/api/members");
      const data = await res.json();
      setMembers(data.filter((m) => !m.is_former));
    } catch (error) {
      console.error("멤버 로드 오류:", error);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem("adminToken");
    localStorage.removeItem("adminUser");
    navigate("/admin");
  };

  // 멤버 토글
  const toggleMember = (memberId) => {
    const newMembers = formData.members.includes(memberId)
      ? formData.members.filter((id) => id !== memberId)
      : [...formData.members, memberId];
    setFormData({ ...formData, members: newMembers });
  };

  // 전체 선택/해제
  const toggleAllMembers = () => {
    if (formData.members.length === members.length) {
      setFormData({ ...formData, members: [] });
    } else {
      setFormData({ ...formData, members: members.map((m) => m.id) });
    }
  };

  // 다중 이미지 업로드
  const handleImagesUpload = (e) => {
    const files = Array.from(e.target.files);
    // 파일을 {file: File} 형태로 저장 (제출 시 image.file로 접근하기 위함)
    const newImageObjects = files.map((file) => ({ file }));
    const newImages = [...formData.images, ...newImageObjects];
    setFormData({ ...formData, images: newImages });

    files.forEach((file) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreviews((prev) => [...prev, reader.result]);
      };
      reader.readAsDataURL(file);
    });
  };

  // 이미지 삭제 다이얼로그 열기
  const openDeleteDialog = (index) => {
    setDeleteTargetIndex(index);
    setDeleteDialogOpen(true);
  };

  // 이미지 삭제 확인
  const confirmDeleteImage = () => {
    if (deleteTargetIndex !== null) {
      const deletedImage = formData.images[deleteTargetIndex];
      const newImages = formData.images.filter(
        (_, i) => i !== deleteTargetIndex
      );
      const newPreviews = imagePreviews.filter(
        (_, i) => i !== deleteTargetIndex
      );
      setFormData({ ...formData, images: newImages });
      setImagePreviews(newPreviews);
      
      // 기존 이미지(서버에 있는)를 삭제한 경우 existingImageIds에서도 제거
      if (deletedImage && deletedImage.id) {
        setExistingImageIds(prev => prev.filter(id => id !== deletedImage.id));
      }
    }
    setDeleteDialogOpen(false);
    setDeleteTargetIndex(null);
  };

  // 라이트박스 열기
  const openLightbox = (index) => {
    setLightboxIndex(index);
    setLightboxOpen(true);
  };

  // 드래그 앤 드롭 상태
  const [draggedIndex, setDraggedIndex] = useState(null);
  const [dragOverIndex, setDragOverIndex] = useState(null);

  // 드래그 시작
  const handleDragStart = (e, index) => {
    setDraggedIndex(index);
    e.dataTransfer.effectAllowed = "move";
    // 드래그 이미지 설정
    e.dataTransfer.setData("text/plain", index);
  };

  // 드래그 오버
  const handleDragOver = (e, index) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    if (dragOverIndex !== index) {
      setDragOverIndex(index);
    }
  };

  // 드래그 종료
  const handleDragEnd = () => {
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  // 드롭 - 이미지 순서 변경
  const handleDrop = (e, dropIndex) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === dropIndex) {
      handleDragEnd();
      return;
    }

    // 새 배열 생성
    const newPreviews = [...imagePreviews];
    const newImages = [...formData.images];

    // 드래그된 아이템 제거 후 새 위치에 삽입
    const [movedPreview] = newPreviews.splice(draggedIndex, 1);
    const [movedImage] = newImages.splice(draggedIndex, 1);

    newPreviews.splice(dropIndex, 0, movedPreview);
    newImages.splice(dropIndex, 0, movedImage);

    setImagePreviews(newPreviews);
    setFormData({ ...formData, images: newImages });
    handleDragEnd();
  };

  // 카카오 장소 검색 API 호출 (엔터 키로 검색)
  const handleLocationSearch = async () => {
    if (!locationSearch.trim()) {
      setLocationResults([]);
      return;
    }

    setLocationSearching(true);
    try {
      const token = localStorage.getItem("adminToken");
      const response = await fetch(
        `/api/admin/kakao/places?query=${encodeURIComponent(locationSearch)}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      if (response.ok) {
        const data = await response.json();
        setLocationResults(data.documents || []);
      }
    } catch (error) {
      console.error("장소 검색 오류:", error);
    } finally {
      setLocationSearching(false);
    }
  };

  // 장소 선택
  const selectLocation = (place) => {
    setFormData({
      ...formData,
      locationName: place.place_name,
      locationAddress: place.road_address_name || place.address_name,
      locationLat: parseFloat(place.y),
      locationLng: parseFloat(place.x),
    });
    setLocationDialogOpen(false);
    setLocationSearch("");
    setLocationResults([]);
  };

  // 폼 제출
  const handleSubmit = async (e) => {
    e.preventDefault();

    // 유효성 검사
    if (!formData.title.trim()) {
      setToast({ type: "error", message: "제목을 입력해주세요." });
      return;
    }
    // 날짜 검증: 단일/기간 모드 모두 startDate를 사용함
    if (!formData.startDate) {
      setToast({ type: "error", message: "날짜를 선택해주세요." });
      return;
    }

    if (!formData.category) {
      setToast({ type: "error", message: "카테고리를 선택해주세요." });
      return;
    }

    setSaving(true);

    try {
      const token = localStorage.getItem("adminToken");

      // FormData 생성
      const submitData = new FormData();

      // JSON 데이터 - 항상 startDate를 date로 사용 (UI에서 단일/기간 모드 모두 startDate 사용)
      const jsonData = {
        title: formData.title.trim(),
        date: formData.startDate,
        time: formData.startTime || null,
        endDate: formData.isRange ? formData.endDate : null,
        endTime: formData.isRange ? formData.endTime : null,
        isRange: formData.isRange,
        category: formData.category,
        description: formData.description.trim() || null,
        url: formData.url.trim() || null,
        sourceName: formData.sourceName.trim() || null,
        members: formData.members,
        locationName: formData.locationName.trim() || null,
        locationAddress: formData.locationAddress.trim() || null,
        locationDetail: formData.locationDetail?.trim() || null,
        locationLat: formData.locationLat,
        locationLng: formData.locationLng,
      };

      // 수정 모드일 경우 유지할 기존 이미지 ID 추가
      if (isEditMode) {
        jsonData.existingImages = existingImageIds;
      }

      submitData.append("data", JSON.stringify(jsonData));

      // 이미지 파일 추가 (새로 추가된 이미지만)
      for (const image of formData.images) {
        if (image.file) {
          submitData.append("images", image.file);
        }
      }

      // 수정 모드면 PUT, 생성 모드면 POST
      const url = isEditMode
        ? `/api/admin/schedules/${id}`
        : "/api/admin/schedules";
      const method = isEditMode ? "PUT" : "POST";

      const response = await fetch(url, {
        method,
        headers: {
          Authorization: `Bearer ${token}`,
        },
        body: submitData,
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(
          error.error ||
            (isEditMode
              ? "일정 수정에 실패했습니다."
              : "일정 생성에 실패했습니다.")
        );
      }

      // 성공 메시지를 sessionStorage에 저장하고 목록 페이지로 이동
      sessionStorage.setItem(
        "scheduleToast",
        JSON.stringify({
          type: "success",
          message: isEditMode
            ? "일정이 수정되었습니다."
            : "일정이 추가되었습니다.",
        })
      );
      navigate("/admin/schedule");
    } catch (error) {
      console.error("일정 저장 오류:", error);
      setToast({
        type: "error",
        message: error.message || "일정 저장 중 오류가 발생했습니다.",
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <Toast toast={toast} onClose={() => setToast(null)} />

      {/* 삭제 확인 다이얼로그 */}
      <AnimatePresence>
        {deleteDialogOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
            onClick={() => setDeleteDialogOpen(false)}
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                  <AlertTriangle className="text-red-500" size={20} />
                </div>
                <h3 className="text-lg font-bold text-gray-900">이미지 삭제</h3>
              </div>

              <p className="text-gray-600 mb-6">
                이 이미지를 삭제하시겠습니까?
                <br />
                <span className="text-sm text-red-500">
                  이 작업은 되돌릴 수 없습니다.
                </span>
              </p>

              <div className="flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setDeleteDialogOpen(false)}
                  className="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  취소
                </button>
                <button
                  type="button"
                  onClick={confirmDeleteImage}
                  className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2"
                >
                  <Trash2 size={16} />
                  삭제
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 장소 검색 다이얼로그 */}
      <AnimatePresence>
        {locationDialogOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
            onClick={() => {
              setLocationDialogOpen(false);
              setLocationSearch("");
              setLocationResults([]);
            }}
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              className="bg-white rounded-2xl p-6 max-w-lg w-full mx-4 shadow-xl"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-bold text-gray-900">장소 검색</h3>
                <button
                  type="button"
                  onClick={() => {
                    setLocationDialogOpen(false);
                    setLocationSearch("");
                    setLocationResults([]);
                  }}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <X size={20} />
                </button>
              </div>

              {/* 검색 입력 */}
              <div className="flex gap-2 mb-4">
                <div className="flex-1 relative">
                  <Search
                    size={18}
                    className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                  />
                  <input
                    type="text"
                    value={locationSearch}
                    onChange={(e) => setLocationSearch(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        handleLocationSearch();
                      }
                    }}
                    placeholder="장소명을 입력하세요"
                    className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    autoFocus
                  />
                </div>
                <button
                  type="button"
                  onClick={handleLocationSearch}
                  disabled={locationSearching}
                  className="px-4 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors disabled:opacity-50"
                >
                  {locationSearching ? (
                    <motion.div
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 1,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                    >
                      <Search size={18} />
                    </motion.div>
                  ) : (
                    "검색"
                  )}
                </button>
              </div>

              {/* 검색 결과 */}
              <div className="max-h-80 overflow-y-auto pr-2">
                {locationResults.length > 0 ? (
                  <div className="space-y-2">
                    {locationResults.map((place, index) => (
                      <button
                        key={index}
                        type="button"
                        onClick={() => selectLocation(place)}
                        className="w-full p-3 text-left hover:bg-gray-50 rounded-xl flex items-start gap-3 border border-gray-100"
                      >
                        <MapPin
                          size={18}
                          className="text-gray-400 mt-0.5 flex-shrink-0"
                        />
                        <div className="flex-1 min-w-0">
                          <p className="font-medium text-gray-900">
                            {place.place_name}
                          </p>
                          <p className="text-sm text-gray-500 truncate">
                            {place.road_address_name || place.address_name}
                          </p>
                          {place.category_name && (
                            <p className="text-xs text-gray-400 mt-1">
                              {place.category_name}
                            </p>
                          )}
                        </div>
                      </button>
                    ))}
                  </div>
                ) : locationSearch && !locationSearching ? (
                  <div className="text-center py-8 text-gray-500">
                    <MapPin size={32} className="mx-auto mb-2 text-gray-300" />
                    <p>검색어를 입력하고 검색 버튼을 눌러주세요</p>
                  </div>
                ) : (
                  <div className="text-center py-8 text-gray-500">
                    <MapPin size={32} className="mx-auto mb-2 text-gray-300" />
                    <p>장소명을 입력하고 검색해주세요</p>
                  </div>
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 이미지 라이트박스 - 공통 컴포넌트 사용 */}
      <Lightbox
        images={imagePreviews}
        currentIndex={lightboxIndex}
        isOpen={lightboxOpen}
        onClose={() => setLightboxOpen(false)}
        onIndexChange={setLightboxIndex}
      />

      {/* 헤더 */}
      <header className="bg-white shadow-sm border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link
              to="/admin/dashboard"
              className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity"
            >
              fromis_9
            </Link>
            <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
              Admin
            </span>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-gray-500 text-sm">
              안녕하세요,{" "}
              <span className="text-gray-900 font-medium">
                {user?.username}
              </span>
              님
            </span>
            <button
              onClick={handleLogout}
              className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <LogOut size={18} />
              <span>로그아웃</span>
            </button>
          </div>
        </div>
      </header>

      {/* 메인 콘텐츠 */}
      <main className="max-w-4xl mx-auto px-6 py-8">
        {/* 브레드크럼 */}
        <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
          <Link
            to="/admin/dashboard"
            className="hover:text-primary transition-colors"
          >
            <Home size={16} />
          </Link>
          <ChevronRight size={14} />
          <Link
            to="/admin/schedule"
            className="hover:text-primary transition-colors"
          >
            일정 관리
          </Link>
          <ChevronRight size={14} />
          <span className="text-gray-700">
            {isEditMode ? "일정 수정" : "일정 추가"}
          </span>
        </div>

        {/* 타이틀 */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            {isEditMode ? "일정 수정" : "일정 추가"}
          </h1>
          <p className="text-gray-500">새로운 일정을 등록합니다</p>
        </div>

        {/* 폼 */}
        <form onSubmit={handleSubmit} className="space-y-8">
          {/* 기본 정보 카드 */}
          <div className="bg-white rounded-2xl shadow-sm p-8">
            <h2 className="text-lg font-bold text-gray-900 mb-6">기본 정보</h2>

            <div className="space-y-6">
              {/* 제목 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  제목 *
                </label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) =>
                    setFormData({ ...formData, title: e.target.value })
                  }
                  placeholder="일정 제목을 입력하세요"
                  className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  required
                />
              </div>

              {/* 범위 설정 토글 */}
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={() =>
                    setFormData({ ...formData, isRange: !formData.isRange })
                  }
                  className={`relative w-12 h-6 rounded-full transition-colors ${
                    formData.isRange ? "bg-primary" : "bg-gray-300"
                  }`}
                >
                  <span
                    className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all ${
                      formData.isRange ? "left-6" : "left-0.5"
                    }`}
                  />
                </button>
                <span className="text-sm text-gray-700">
                  기간 설정 (시작~종료)
                </span>
              </div>

              {/* 날짜 + 시간 */}
              {formData.isRange ? (
                // 범위 설정 모드
                <div className="space-y-4">
                  {/* 시작 */}
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        시작 날짜 *
                      </label>
                      <CustomDatePicker
                        value={formData.startDate}
                        onChange={(date) =>
                          setFormData({ ...formData, startDate: date })
                        }
                        placeholder="시작 날짜 선택"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        시작 시간
                      </label>
                      <CustomTimePicker
                        value={formData.startTime}
                        onChange={(time) =>
                          setFormData({ ...formData, startTime: time })
                        }
                        placeholder="시작 시간 선택"
                      />
                    </div>
                  </div>
                  {/* 종료 */}
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        종료 날짜 *
                      </label>
                      <CustomDatePicker
                        value={formData.endDate}
                        onChange={(date) =>
                          setFormData({ ...formData, endDate: date })
                        }
                        placeholder="종료 날짜 선택"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        종료 시간
                      </label>
                      <CustomTimePicker
                        value={formData.endTime}
                        onChange={(time) =>
                          setFormData({ ...formData, endTime: time })
                        }
                        placeholder="종료 시간 선택"
                      />
                    </div>
                  </div>
                </div>
              ) : (
                // 단일 날짜 모드
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      날짜 *
                    </label>
                    <CustomDatePicker
                      value={formData.startDate}
                      onChange={(date) =>
                        setFormData({ ...formData, startDate: date })
                      }
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      시간
                    </label>
                    <CustomTimePicker
                      value={formData.startTime}
                      onChange={(time) =>
                        setFormData({ ...formData, startTime: time })
                      }
                    />
                  </div>
                </div>
              )}

              {/* 카테고리 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-sm font-medium text-gray-700">
                    카테고리 *
                  </label>
                  <Link
                    to="/admin/schedule/categories"
                    className="flex items-center gap-1 text-xs text-gray-400 hover:text-primary transition-colors"
                  >
                    <Settings size={12} />
                    카테고리 관리
                  </Link>
                </div>
                <div className="flex flex-wrap gap-3">
                  {categories.map((category) => (
                    <button
                      key={category.id}
                      type="button"
                      onClick={() =>
                        setFormData({ ...formData, category: category.id })
                      }
                      className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl border-2 transition-all ${
                        formData.category === category.id
                          ? "border-primary bg-primary/5"
                          : "border-gray-200 hover:border-gray-300"
                      }`}
                    >
                      <span
                        className={`w-2.5 h-2.5 rounded-full ${
                          getColorStyle(category.color).className || ""
                        }`}
                        style={getColorStyle(category.color).style}
                      />
                      <span className="text-sm font-medium">
                        {category.name}
                      </span>
                    </button>
                  ))}
                </div>
              </div>

              {/* 장소 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-sm font-medium text-gray-700">
                    장소
                  </label>
                  {/* 검색으로 입력된 경우(좌표가 있는 경우) 초기화 버튼 표시 */}
                  {formData.locationLat && formData.locationLng && (
                    <button
                      type="button"
                      onClick={() =>
                        setFormData({
                          ...formData,
                          locationName: '',
                          locationAddress: '',
                          locationDetail: '',
                          locationLat: null,
                          locationLng: null,
                        })
                      }
                      className="text-xs text-gray-400 hover:text-red-500 transition-colors flex items-center gap-1"
                    >
                      <X size={12} />
                      초기화
                    </button>
                  )}
                </div>
                <div className="space-y-3">
                  {/* 장소 이름 + 검색 버튼 */}
                  <div className="flex gap-2">
                    <div className="flex-1 relative">
                      <MapPin
                        size={18}
                        className={`absolute left-4 top-1/2 -translate-y-1/2 ${formData.locationLat ? 'text-primary' : 'text-gray-400'}`}
                      />
                      <input
                        type="text"
                        value={formData.locationName}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            locationName: e.target.value,
                          })
                        }
                        placeholder="장소 이름 (예: 잠실실내체육관)"
                        disabled={!!(formData.locationLat && formData.locationLng)}
                        className={`w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${formData.locationLat && formData.locationLng ? 'bg-gray-50 text-gray-700 cursor-not-allowed' : ''}`}
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => setLocationDialogOpen(true)}
                      className="px-4 py-3 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 transition-colors flex items-center gap-2"
                    >
                      <Search size={18} />
                      <span className="hidden sm:inline">검색</span>
                    </button>
                  </div>

                  {/* 주소 */}
                  <input
                    type="text"
                    value={formData.locationAddress}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        locationAddress: e.target.value,
                      })
                    }
                    placeholder="주소 (예: 서울특별시 송파구 올림픽로 25)"
                    disabled={!!(formData.locationLat && formData.locationLng)}
                    className={`w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent ${formData.locationLat && formData.locationLng ? 'bg-gray-50 text-gray-700 cursor-not-allowed' : ''}`}
                  />

                  {/* 상세주소 */}
                  <input
                    type="text"
                    value={formData.locationDetail}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        locationDetail: e.target.value,
                      })
                    }
                    placeholder="상세주소 (예: 3관 A구역, N열 등)"
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  />
                </div>
              </div>

              {/* 설명 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  설명
                </label>
                <div className="border border-gray-200 rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-primary focus-within:border-transparent">
                  <textarea
                    rows={6}
                    value={formData.description}
                    onChange={(e) =>
                      setFormData({ ...formData, description: e.target.value })
                    }
                    placeholder="일정에 대한 설명을 입력하세요"
                    className="w-full px-4 py-3 border-none focus:outline-none resize-none"
                  />
                </div>
              </div>

              {/* URL */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  관련 URL
                </label>
                <div className="relative">
                  <LinkIcon
                    size={18}
                    className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                  />
                  <input
                    type="url"
                    value={formData.url}
                    onChange={(e) =>
                      setFormData({ ...formData, url: e.target.value })
                    }
                    placeholder="https://..."
                    className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  />
                </div>
              </div>

              {/* 출처 이름 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  출처 이름
                </label>
                <input
                  type="text"
                  value={formData.sourceName}
                  onChange={(e) =>
                    setFormData({ ...formData, sourceName: e.target.value })
                  }
                  placeholder="예: 스프:스튜디오 프로미스나인, MUSINSA TV"
                  className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
            </div>
          </div>

          {/* 멤버 선택 카드 */}
          <div className="bg-white rounded-2xl shadow-sm p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-2">
                <Users size={20} className="text-primary" />
                <h2 className="text-lg font-bold text-gray-900">참여 멤버</h2>
              </div>
              <button
                type="button"
                onClick={toggleAllMembers}
                className="text-sm text-primary hover:underline"
              >
                {formData.members.length === members.length
                  ? "전체 해제"
                  : "전체 선택"}
              </button>
            </div>

            <div className="grid grid-cols-5 gap-4">
              {members.map((member) => (
                <button
                  key={member.id}
                  type="button"
                  onClick={() => toggleMember(member.id)}
                  className={`relative rounded-xl overflow-hidden transition-all ${
                    formData.members.includes(member.id)
                      ? "ring-2 ring-primary ring-offset-2"
                      : "hover:opacity-80"
                  }`}
                >
                  <div className="aspect-[3/4] bg-gray-100">
                    {member.image_url ? (
                      <img
                        src={member.image_url}
                        alt={member.name}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center bg-gray-200">
                        <Users size={24} className="text-gray-400" />
                      </div>
                    )}
                  </div>
                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                    <p className="text-white text-sm font-medium">
                      {member.name}
                    </p>
                  </div>
                  {formData.members.includes(member.id) && (
                    <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
                      <Check size={14} className="text-white" />
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* 다중 이미지 업로드 카드 */}
          <div className="bg-white rounded-2xl shadow-sm p-8">
            <div className="flex items-center gap-2 mb-6">
              <Image size={20} className="text-primary" />
              <h2 className="text-lg font-bold text-gray-900">일정 이미지</h2>
              <span className="text-sm text-gray-400 ml-2">
                여러 장 업로드 가능
              </span>
            </div>

            {/* 이미지 그리드 */}
            <div className="grid grid-cols-4 gap-4">
              {/* 이미지 추가 버튼 - 항상 첫번째 */}
              <label className="aspect-square border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-primary/50 hover:bg-primary/5 transition-colors flex flex-col items-center justify-center">
                <input
                  type="file"
                  accept="image/*"
                  multiple
                  onChange={handleImagesUpload}
                  className="hidden"
                />
                <Plus size={24} className="text-gray-400 mb-2" />
                <p className="text-sm text-gray-500">이미지 추가</p>
              </label>

              {/* 이미지 목록 - 드래그 앤 드롭 가능 */}
              {imagePreviews.map((preview, index) => (
                <div
                  key={index}
                  className={`relative aspect-square rounded-xl overflow-hidden group cursor-grab active:cursor-grabbing transition-all duration-200 ${
                    draggedIndex === index ? "opacity-50 scale-95" : ""
                  } ${
                    dragOverIndex === index && draggedIndex !== index
                      ? "ring-2 ring-primary ring-offset-2"
                      : ""
                  }`}
                  draggable
                  onDragStart={(e) => handleDragStart(e, index)}
                  onDragOver={(e) => handleDragOver(e, index)}
                  onDragEnd={handleDragEnd}
                  onDrop={(e) => handleDrop(e, index)}
                >
                  {/* 이미지 클릭시 라이트박스 열기 */}
                  <img
                    src={preview}
                    alt={`업로드 ${index + 1}`}
                    className="w-full h-full object-cover"
                    onClick={() => openLightbox(index)}
                    draggable={false}
                  />
                  {/* 호버시 어두운 오버레이 */}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors pointer-events-none" />
                  {/* 순서 표시 */}
                  <div className="absolute bottom-2 left-2 px-2 py-0.5 bg-black/50 rounded-full text-white text-xs font-medium">
                    {index + 1}
                  </div>
                  {/* 삭제 버튼 */}
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      openDeleteDialog(index);
                    }}
                    className="absolute top-2 right-2 w-7 h-7 bg-black/50 hover:bg-red-500 rounded-full flex items-center justify-center transition-all shadow-lg"
                  >
                    <X size={14} className="text-white" />
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* 버튼 */}
          <div className="flex items-center justify-end gap-4">
            <button
              type="button"
              onClick={() => navigate("/admin/schedule")}
              className="px-6 py-3 text-gray-700 hover:bg-gray-100 rounded-xl transition-colors font-medium"
            >
              취소
            </button>
            <button
              type="submit"
              disabled={loading || saving}
              className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors font-medium disabled:opacity-50"
            >
              {saving ? (
                <>
                  <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  저장 중...
                </>
              ) : (
                <>
                  <Save size={18} />
                  {isEditMode ? "수정하기" : "추가하기"}
                </>
              )}
            </button>
          </div>
        </form>
      </main>
    </div>
  );
}

export default AdminScheduleForm;