import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Clock, Tag, Link2, ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar } from 'lucide-react';
import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
import { useInView } from 'react-intersection-observer';
import { useVirtualizer } from '@tanstack/react-virtual';
import confetti from 'canvas-confetti';
import { getTodayKST } from '../../../utils/date';
import { getSchedules, searchSchedules } from '../../../api/public/schedules';
import useScheduleStore from '../../../stores/useScheduleStore';

// 멤버 리스트 추출 (검색 결과와 일반 데이터 모두 처리)
const getMemberList = (schedule) => {
    // member_names 문자열이 있으면 사용
    if (schedule.member_names) {
        return schedule.member_names.split(',').map(n => n.trim()).filter(Boolean);
    }
    // members 배열이 있으면
    if (Array.isArray(schedule.members) && schedule.members.length > 0) {
        // 문자열 배열인 경우 (검색 결과)
        if (typeof schedule.members[0] === 'string') {
            return schedule.members.filter(Boolean);
        }
        // 객체 배열인 경우 (일반 데이터)
        return schedule.members.map(m => m.name).filter(Boolean);
    }
    return [];
};

// 폭죽 애니메이션 함수
const fireBirthdayConfetti = () => {
    const duration = 3000;
    const animationEnd = Date.now() + duration;
    const colors = ['#ff69b4', '#ff1493', '#da70d6', '#ba55d3', '#9370db', '#8a2be2', '#ffd700', '#ff6347'];

    const randomInRange = (min, max) => Math.random() * (max - min) + min;

    const interval = setInterval(() => {
        const timeLeft = animationEnd - Date.now();

        if (timeLeft <= 0) {
            clearInterval(interval);
            return;
        }

        const particleCount = 50 * (timeLeft / duration);

        // 왼쪽에서 발사
        confetti({
            particleCount: Math.floor(particleCount),
            startVelocity: 30,
            spread: 60,
            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
            colors: colors,
            shapes: ['circle', 'square'],
            gravity: 1.2,
            scalar: randomInRange(0.8, 1.2),
            drift: randomInRange(-0.5, 0.5),
        });

        // 오른쪽에서 발사
        confetti({
            particleCount: Math.floor(particleCount),
            startVelocity: 30,
            spread: 60,
            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
            colors: colors,
            shapes: ['circle', 'square'],
            gravity: 1.2,
            scalar: randomInRange(0.8, 1.2),
            drift: randomInRange(-0.5, 0.5),
        });
    }, 250);

    // 초기 대형 폭죽
    confetti({
        particleCount: 100,
        spread: 100,
        origin: { x: 0.5, y: 0.6 },
        colors: colors,
        shapes: ['circle', 'square'],
        startVelocity: 45,
    });
};

// HTML 엔티티 디코딩 함수
const decodeHtmlEntities = (text) => {
    if (!text) return '';
    const textarea = document.createElement('textarea');
    textarea.innerHTML = text;
    return textarea.value;
};

// 모바일 생일 카드 컴포넌트
function MobileBirthdayCard({ schedule, onClick, delay = 0 }) {
    return (
        <motion.div
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
            onClick={onClick}
            className="cursor-pointer"
        >
            <div className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-xl shadow-lg">
                {/* 배경 장식 */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute -top-3 -right-3 w-16 h-16 bg-white/10 rounded-full" />
                    <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-white/10 rounded-full" />
                    <div className="absolute bottom-3 left-8 text-sm animate-pulse">🎉</div>
                </div>

                <div className="relative flex items-center p-4 gap-3">
                    {/* 멤버 사진 */}
                    {schedule.member_image && (
                        <div className="flex-shrink-0">
                            <div className="w-14 h-14 rounded-full border-2 border-white/50 shadow-md overflow-hidden bg-white">
                                <img
                                    src={schedule.member_image}
                                    alt={schedule.member_names}
                                    className="w-full h-full object-cover"
                                />
                            </div>
                        </div>
                    )}

                    {/* 내용 */}
                    <div className="flex-1 text-white flex items-center gap-2 min-w-0">
                        <span className="text-2xl flex-shrink-0">🎂</span>
                        <h3 className="font-bold text-base tracking-wide truncate">
                            {decodeHtmlEntities(schedule.title)}
                        </h3>
                    </div>
                </div>
            </div>
        </motion.div>
    );
}

// 모바일 일정 페이지
function MobileSchedule() {
    const navigate = useNavigate();

    // zustand store에서 상태 가져오기
    const {
        selectedDate: storedSelectedDate,
        setSelectedDate: setStoredSelectedDate,
    } = useScheduleStore();

    // 선택된 날짜 (store에 없으면 오늘 날짜)
    const selectedDate = storedSelectedDate || new Date();
    const setSelectedDate = (date) => setStoredSelectedDate(date);

    const [isSearchMode, setIsSearchMode] = useState(false);
    const [searchInput, setSearchInput] = useState(''); // 입력값
    const [searchTerm, setSearchTerm] = useState(''); // 실제 검색어
    const [showCalendar, setShowCalendar] = useState(false);
    const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate));  // 달력 뷰 날짜
    const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false);  // 달력 년월 선택 모드
    const contentRef = useRef(null);  // 스크롤 초기화용
    const searchContainerRef = useRef(null); // 검색 컨테이너 (외부 클릭 감지용)
    const searchInputRef = useRef(null); // 검색 입력 필드 (키패드 닫기용)

    // 검색 추천 관련 상태
    const [showSuggestions, setShowSuggestions] = useState(false);
    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
    const [originalSearchQuery, setOriginalSearchQuery] = useState(''); // 필터링용 원본 쿼리
    const [suggestions, setSuggestions] = useState([]); // 추천 검색어 목록
    const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
    const [lastSearchTerm, setLastSearchTerm] = useState(''); // 마지막 검색어 (복원용)
    const [showSuggestionsScreen, setShowSuggestionsScreen] = useState(false); // 추천 검색어 화면 표시 여부

    // 검색 모드 진입 함수 (history 상태 추가)
    const enterSearchMode = () => {
        setIsSearchMode(true);
        window.history.pushState({ searchMode: true }, '');
    };

    // 검색 모드 종료 함수
    const exitSearchMode = () => {
        setIsSearchMode(false);
        setSearchInput('');
        setOriginalSearchQuery('');
        setSearchTerm('');
        setLastSearchTerm('');
        setShowSuggestions(false);
        setShowSuggestionsScreen(false);
        setSelectedSuggestionIndex(-1);
    };

    // 추천 검색어 화면 숨기고 검색 결과로 돌아가기
    const hideSuggestionsScreen = () => {
        setShowSuggestionsScreen(false);
        setSearchInput(lastSearchTerm); // 검색어 복원
        setOriginalSearchQuery(lastSearchTerm);
    };

    // 뒤로가기 버튼 처리
    useEffect(() => {
        const handlePopState = (e) => {
            if (isSearchMode) {
                // 추천 검색어 화면이고 검색 결과가 있으면 → 검색 결과로 돌아가기
                if (showSuggestionsScreen && searchTerm) {
                    hideSuggestionsScreen();
                    window.history.pushState({ searchMode: true }, '');
                } else {
                    // 그 외에는 검색 모드 종료
                    exitSearchMode();
                }
            }
        };

        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, [isSearchMode, showSuggestionsScreen, searchTerm, lastSearchTerm]);
    
    // 달력 월 변경 함수
    const changeCalendarMonth = (delta) => {
        const newDate = new Date(calendarViewDate);
        newDate.setMonth(newDate.getMonth() + delta);
        setCalendarViewDate(newDate);
    };
    
    const SEARCH_LIMIT = 20; // 페이지당 20개
    const ESTIMATED_ITEM_HEIGHT = 100; // 아이템 추정 높이 (동적 측정)
    const scrollContainerRef = useRef(null); // 가상 스크롤 컨테이너
    const { ref: loadMoreRef, inView } = useInView({ threshold: 0, rootMargin: '100px' });

    // 검색 무한 스크롤
    const {
        data: searchData,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
        isLoading: searchLoading,
    } = useInfiniteQuery({
        queryKey: ['mobileScheduleSearch', searchTerm],
        queryFn: async ({ pageParam = 0 }) => {
            return searchSchedules(searchTerm, { offset: pageParam, limit: SEARCH_LIMIT });
        },
        getNextPageParam: (lastPage) => {
            if (lastPage.hasMore) {
                return lastPage.offset + lastPage.schedules.length;
            }
            return undefined;
        },
        enabled: !!searchTerm && isSearchMode,
    });

    const searchResults = useMemo(() => {
        if (!searchData?.pages) return [];
        return searchData.pages.flatMap(page => page.schedules);
    }, [searchData]);

    // 가상 스크롤 설정 (검색 모드에서만 활성화, 동적 높이 지원)
    const virtualizer = useVirtualizer({
        count: isSearchMode && searchTerm ? searchResults.length : 0,
        getScrollElement: () => scrollContainerRef.current,
        estimateSize: () => ESTIMATED_ITEM_HEIGHT,
        overscan: 5, // 버퍼 아이템 수
    });

    // 검색어 변경 시 스크롤 위치 초기화
    useEffect(() => {
        if (searchTerm && !showSuggestionsScreen) {
            // 약간의 지연 후 스크롤 초기화 (렌더링 완료 후)
            requestAnimationFrame(() => {
                virtualizer.scrollToOffset(0);
                if (scrollContainerRef.current) {
                    scrollContainerRef.current.scrollTop = 0;
                }
            });
        }
    }, [searchTerm, showSuggestionsScreen]);

    useEffect(() => {
        if (inView && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) {
            fetchNextPage();
        }
    }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);

    // 일정 및 카테고리 로드 (useQuery)
    const viewYear = selectedDate.getFullYear();
    const viewMonth = selectedDate.getMonth() + 1;

    // 월별 일정 데이터 로드
    const { data: schedules = [], isLoading: loading } = useQuery({
        queryKey: ['schedules', viewYear, viewMonth],
        queryFn: () => getSchedules(viewYear, viewMonth),
    });

    // 카테고리는 일정 데이터에서 추출
    const categories = useMemo(() => {
        const categoryMap = new Map();
        schedules.forEach(s => {
            const catId = s.category?.id || s.category_id;
            if (catId && !categoryMap.has(catId)) {
                categoryMap.set(catId, {
                    id: catId,
                    name: s.category?.name || s.category_name,
                    color: s.category?.color || s.category_color,
                });
            }
        });
        return Array.from(categoryMap.values());
    }, [schedules]);

    // 달력 표시용 일정 데이터 (calendarViewDate 기준)
    const calendarYear = calendarViewDate.getFullYear();
    const calendarMonth = calendarViewDate.getMonth() + 1;
    const isSameMonth = viewYear === calendarYear && viewMonth === calendarMonth;

    const { data: calendarSchedules = [] } = useQuery({
        queryKey: ['schedules', calendarYear, calendarMonth],
        queryFn: () => getSchedules(calendarYear, calendarMonth),
        enabled: !isSameMonth, // 같은 월이면 중복 조회 안함
    });

    // 생일 폭죽 효과 (하루에 한 번만)
    useEffect(() => {
        if (loading || schedules.length === 0) return;

        const today = getTodayKST();
        const confettiKey = `birthday-confetti-${today}`;

        // 이미 오늘 폭죽을 봤으면 스킵
        if (localStorage.getItem(confettiKey)) return;

        const hasBirthdayToday = schedules.some(s => {
            if (!s.is_birthday) return false;
            const scheduleDate = s.date ? s.date.split('T')[0] : '';
            return scheduleDate === today;
        });

        if (hasBirthdayToday) {
            // 약간의 딜레이 후 폭죽 발사 (페이지 렌더링 완료 후)
            const timer = setTimeout(() => {
                fireBirthdayConfetti();
                localStorage.setItem(confettiKey, 'true');
            }, 500);
            return () => clearTimeout(timer);
        }
    }, [schedules, loading]);

    // 2017년 1월 이전으로 이동 불가
    const canGoPrevMonth = !(selectedDate.getFullYear() === 2017 && selectedDate.getMonth() === 0);

    // 월 변경
    const changeMonth = (delta) => {
        if (delta < 0 && !canGoPrevMonth) return;

        const newDate = new Date(selectedDate);
        newDate.setMonth(newDate.getMonth() + delta);

        // 이번 달이면 오늘 날짜, 다른 달이면 1일 선택
        const today = new Date();
        if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
            newDate.setDate(today.getDate());
        } else {
            newDate.setDate(1);
        }

        setSelectedDate(newDate);
        setCalendarViewDate(newDate);
    };

    // 날짜 변경 시 스크롤 맨 위로 초기화
    useEffect(() => {
        if (contentRef.current) {
            contentRef.current.scrollTop = 0;
        }
    }, [selectedDate]);


    // 캘린더가 열릴 때 배경 스크롤 방지
    useEffect(() => {
        const preventScroll = (e) => e.preventDefault();
        
        if (showCalendar) {
            document.addEventListener('touchmove', preventScroll, { passive: false });
        } else {
            document.removeEventListener('touchmove', preventScroll);
        }
        return () => {
            document.removeEventListener('touchmove', preventScroll);
        };
    }, [showCalendar]);

    // 검색 추천 드롭다운 외부 클릭 감지
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (searchContainerRef.current && !searchContainerRef.current.contains(event.target)) {
                setShowSuggestions(false);
                setSelectedSuggestionIndex(-1);
            }
        };
        
        if (showSuggestions) {
            document.addEventListener('mousedown', handleClickOutside);
            document.addEventListener('touchstart', handleClickOutside);
        }
        
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
            document.removeEventListener('touchstart', handleClickOutside);
        };
    }, [showSuggestions]);

    // 검색어 자동완성 API 호출 (debounce 적용)
    useEffect(() => {
        // 검색어가 비어있으면 초기화
        if (!originalSearchQuery || originalSearchQuery.trim().length === 0) {
            setSuggestions([]);
            return;
        }

        // debounce: 200ms 후에 API 호출
        const timeoutId = setTimeout(async () => {
            setIsLoadingSuggestions(true);
            try {
                const response = await fetch(`/api/schedules/suggestions?q=${encodeURIComponent(originalSearchQuery)}&limit=10`);
                if (response.ok) {
                    const data = await response.json();
                    setSuggestions(data.suggestions || []);
                }
            } catch (error) {
                console.error('추천 검색어 API 오류:', error);
                setSuggestions([]);
            } finally {
                setIsLoadingSuggestions(false);
            }
        }, 200);

        return () => clearTimeout(timeoutId);
    }, [originalSearchQuery]);

    // 카테고리 색상
    const getCategoryColor = (categoryId) => {
        const category = categories.find(c => c.id === categoryId);
        return category?.color || '#6b7280';
    };

    // 날짜별 일정 그룹화 (생일 우선)
    const groupedSchedules = useMemo(() => {
        const groups = {};
        schedules.forEach(schedule => {
            const date = schedule.date;
            if (!groups[date]) groups[date] = [];
            groups[date].push(schedule);
        });
        // 각 날짜 그룹 내에서 생일 우선 정렬
        Object.values(groups).forEach(group => {
            group.sort((a, b) => {
                const aIsBirthday = a.is_birthday || String(a.id).startsWith('birthday-');
                const bIsBirthday = b.is_birthday || String(b.id).startsWith('birthday-');
                if (aIsBirthday && !bIsBirthday) return -1;
                if (!aIsBirthday && bIsBirthday) return 1;
                return 0;
            });
        });
        return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
    }, [schedules]);

    // 해당 달의 모든 날짜 배열
    const daysInMonth = useMemo(() => {
        const year = selectedDate.getFullYear();
        const month = selectedDate.getMonth();
        const lastDay = new Date(year, month + 1, 0).getDate();
        const days = [];
        for (let d = 1; d <= lastDay; d++) {
            days.push(new Date(year, month, d));
        }
        return days;
    }, [selectedDate]);

    // 선택된 날짜의 일정 (생일 우선)
    const selectedDateSchedules = useMemo(() => {
        // KST 기준 날짜 문자열 생성
        const year = selectedDate.getFullYear();
        const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
        const day = String(selectedDate.getDate()).padStart(2, '0');
        const dateStr = `${year}-${month}-${day}`;
        // API 응답의 date는 ISO 형식이므로 T 이전 부분만 비교
        return schedules
            .filter(s => s.date.split('T')[0] === dateStr)
            .sort((a, b) => {
                const aIsBirthday = a.is_birthday || String(a.id).startsWith('birthday-');
                const bIsBirthday = b.is_birthday || String(b.id).startsWith('birthday-');
                if (aIsBirthday && !bIsBirthday) return -1;
                if (!aIsBirthday && bIsBirthday) return 1;
                return 0;
            });
    }, [schedules, selectedDate]);

    // 요일 이름
    const getDayName = (date) => {
        return ['일', '월', '화', '수', '목', '금', '토'][date.getDay()];
    };

    // 오늘 여부
    const isToday = (date) => {
        const today = new Date();
        return date.getDate() === today.getDate() && 
               date.getMonth() === today.getMonth() && 
               date.getFullYear() === today.getFullYear();
    };

    // 선택된 날짜 여부
    const isSelected = (date) => {
        return date.getDate() === selectedDate.getDate() && 
               date.getMonth() === selectedDate.getMonth() && 
               date.getFullYear() === selectedDate.getFullYear();
    };

    // 날짜 선택 컨테이너 ref
    const dateScrollRef = useRef(null);

    // 선택된 날짜로 자동 스크롤
    useEffect(() => {
        // 검색 모드가 아닐 때만 스크롤 조정
        if (!isSearchMode && dateScrollRef.current) {
            const selectedDay = selectedDate.getDate();
            const buttons = dateScrollRef.current.querySelectorAll('button');
            if (buttons[selectedDay - 1]) {
                // 약간의 지연 후 스크롤 (DOM 렌더링 완료 후)
                setTimeout(() => {
                    buttons[selectedDay - 1].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
                }, 50);
            }
        }
    }, [selectedDate, isSearchMode]);

    return (
        <>
            {/* 툴바 (헤더 + 날짜 선택기) */}
            <div className="mobile-toolbar-schedule shadow-sm z-50">
                {isSearchMode ? (
                    <div className="flex items-center gap-3 px-4 py-3 relative" ref={searchContainerRef}>
                        <div className="flex-1 flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2 min-w-0">
                            <Search size={18} className="text-gray-400 flex-shrink-0" />
                            <input
                                ref={searchInputRef}
                                type="text"
                                inputMode="search"
                                enterKeyHint="search"
                                placeholder="일정 검색..."
                                value={searchInput}
                                onChange={(e) => {
                                    setSearchInput(e.target.value);
                                    setOriginalSearchQuery(e.target.value);
                                    setShowSuggestions(true);
                                    setShowSuggestionsScreen(true);
                                    setSelectedSuggestionIndex(-1);
                                }}
                                onFocus={() => {
                                    setShowSuggestions(true);
                                    setShowSuggestionsScreen(true);
                                }}
                                onKeyDown={(e) => {
                                    if (e.key === 'ArrowDown') {
                                        e.preventDefault();
                                        const newIndex = selectedSuggestionIndex < suggestions.length - 1
                                            ? selectedSuggestionIndex + 1
                                            : 0;
                                        setSelectedSuggestionIndex(newIndex);
                                        if (suggestions[newIndex]) {
                                            setSearchInput(suggestions[newIndex]);
                                        }
                                    } else if (e.key === 'ArrowUp') {
                                        e.preventDefault();
                                        const newIndex = selectedSuggestionIndex > 0
                                            ? selectedSuggestionIndex - 1
                                            : suggestions.length - 1;
                                        setSelectedSuggestionIndex(newIndex);
                                        if (suggestions[newIndex]) {
                                            setSearchInput(suggestions[newIndex]);
                                        }
                                    } else if (e.key === 'Enter') {
                                        e.preventDefault();
                                        const term = selectedSuggestionIndex >= 0 && suggestions[selectedSuggestionIndex]
                                            ? suggestions[selectedSuggestionIndex]
                                            : searchInput.trim();
                                        if (term) {
                                            setSearchInput(term);
                                            setSearchTerm(term);
                                            setLastSearchTerm(term); // 검색어 저장
                                            setShowSuggestionsScreen(false);
                                        }
                                        setShowSuggestions(false);
                                        setSelectedSuggestionIndex(-1);
                                        // 키패드 닫기
                                        searchInputRef.current?.blur();
                                    }
                                }}
                                className="flex-1 bg-transparent outline-none text-sm min-w-0 [&::-webkit-search-cancel-button]:hidden"
                                autoFocus={!searchTerm}
                            />
                            {searchInput && (
                                <button
                                    onClick={() => {
                                        setSearchInput('');
                                        setOriginalSearchQuery('');
                                        setShowSuggestions(true);
                                        setShowSuggestionsScreen(true);
                                        setSelectedSuggestionIndex(-1);
                                        // searchTerm과 lastSearchTerm은 유지하여 뒤로가기 시 복원 가능
                                    }}
                                    className="flex-shrink-0"
                                >
                                    <X size={18} className="text-gray-400" />
                                </button>
                            )}
                        </div>
                        <button 
                            onClick={exitSearchMode}
                            className="text-sm text-gray-500 flex-shrink-0"
                        >
                            취소
                        </button>
                    </div>
                ) : (
                    <div className="relative flex items-center justify-between px-4 py-3">
                        {showCalendar ? (
                            // 달력 열렸을 때: 년월은 absolute로 가운데 고정, 드롭다운은 바로 옆에
                            <>
                                <div className="flex items-center gap-1">
                                    <button 
                                        onClick={() => {
                                            setShowCalendar(false);
                                            setCalendarShowYearMonth(false);
                                        }} 
                                        className="p-2 rounded-lg hover:bg-gray-100"
                                    >
                                        <Calendar size={20} className="text-primary" />
                                    </button>
                                    <button onClick={() => changeCalendarMonth(-1)} className="p-2">
                                        <ChevronLeft size={20} />
                                    </button>
                                </div>
                                
                                {/* 년월 텍스트: absolute로 정확히 가운데 고정, 클릭하면 드롭다운 토글 */}
                                <button 
                                    onClick={() => setCalendarShowYearMonth(!calendarShowYearMonth)}
                                    className={`absolute left-1/2 -translate-x-1/2 font-bold transition-colors ${
                                        calendarShowYearMonth ? 'text-primary' : ''
                                    }`}
                                >
                                    {calendarViewDate.getFullYear()}년 {calendarViewDate.getMonth() + 1}월
                                </button>
                                
                                {/* 드롭다운 버튼: 년월 텍스트 바로 옆에 위치하도록 가운데 배치 */}
                                <button 
                                    onClick={() => setCalendarShowYearMonth(!calendarShowYearMonth)}
                                    className={`absolute transition-colors ${
                                        calendarShowYearMonth ? 'text-primary' : ''
                                    }`}
                                    style={{ left: 'calc(50% + 52px)' }}
                                >
                                    <ChevronDown 
                                        size={16} 
                                        className={`transition-transform duration-200 ${calendarShowYearMonth ? 'rotate-180' : ''}`}
                                    />
                                </button>
                                
                                <div className="flex items-center gap-1">
                                    <button onClick={() => changeCalendarMonth(1)} className="p-2">
                                        <ChevronRight size={20} />
                                    </button>
                                    <button onClick={enterSearchMode} className="p-2">
                                        <Search size={20} />
                                    </button>
                                </div>
                            </>
                        ) : (
                            // 달력 닫혔을 때: 기존 UI
                            <>
                                <div className="flex items-center gap-1">
                                    <button 
                                        onClick={() => {
                                            setCalendarViewDate(selectedDate);
                                            setShowCalendar(true);
                                        }} 
                                        className="p-2 rounded-lg hover:bg-gray-100"
                                    >
                                        <Calendar size={20} className="text-gray-600" />
                                    </button>
                                    <button
                                        onClick={() => changeMonth(-1)}
                                        disabled={!canGoPrevMonth}
                                        className={`p-2 ${!canGoPrevMonth ? 'opacity-30' : ''}`}
                                    >
                                        <ChevronLeft size={20} />
                                    </button>
                                </div>
                                <span className="font-bold">
                                    {selectedDate.getFullYear()}년 {selectedDate.getMonth() + 1}월
                                </span>
                                <div className="flex items-center gap-1">
                                    <button onClick={() => changeMonth(1)} className="p-2">
                                        <ChevronRight size={20} />
                                    </button>
                                    <button onClick={enterSearchMode} className="p-2">
                                        <Search size={20} />
                                    </button>
                                </div>
                            </>
                        )}
                    </div>
                )}

                {/* 가로 스크롤 날짜 선택기 */}
                {!isSearchMode && (
                    <div 
                        ref={dateScrollRef}
                        className="flex overflow-x-auto scrollbar-hide px-2 py-2 gap-1"
                        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                    >
                        {daysInMonth.map((date) => {
                            const dayOfWeek = date.getDay();
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, '0');
                            const day = String(date.getDate()).padStart(2, '0');
                            const dateStr = `${year}-${month}-${day}`;
                            
                            // 해당 날짜의 일정 목록 (최대 3개)
                            const daySchedules = schedules
                                .filter(s => s.date?.split('T')[0] === dateStr)
                                .slice(0, 3);
                            
                            return (
                                <button
                                    key={date.getDate()}
                                    onClick={() => {
                                        setSelectedDate(date);
                                        setCalendarViewDate(date);
                                    }}
                                    className={`flex flex-col items-center min-w-[44px] h-[64px] py-2 px-1 rounded-xl transition-all ${
                                        isSelected(date)
                                            ? 'bg-primary text-white'
                                            : 'hover:bg-gray-100'
                                    }`}
                                >
                                    <span className={`text-[10px] font-medium ${
                                        isSelected(date) 
                                            ? 'text-white/80' 
                                            : dayOfWeek === 0 
                                                ? 'text-red-400' 
                                                : dayOfWeek === 6 
                                                    ? 'text-blue-400' 
                                                    : 'text-gray-400'
                                    }`}>
                                        {getDayName(date)}
                                    </span>
                                    <span className={`text-sm font-semibold mt-0.5 ${
                                        isSelected(date) 
                                            ? 'text-white' 
                                            : isToday(date) 
                                                ? 'text-primary' 
                                                : 'text-gray-700'
                                    }`}>
                                        {date.getDate()}
                                    </span>
                                    {/* 일정 점 (최대 3개) */}
                                    <div className="flex gap-0.5 mt-1 h-1.5">
                                        {!isSelected(date) && daySchedules.map((schedule, i) => {
                                            const cat = categories.find(c => c.id === (schedule.category?.id || schedule.category_id));
                                            const color = cat?.color || '#6b7280';
                                            return (
                                                <div 
                                                    key={i}
                                                    className="w-1 h-1 rounded-full"
                                                    style={{ backgroundColor: color }}
                                                />
                                            );
                                        })}
                                    </div>
                                </button>
                            );
                        })}
                    </div>
                )}
            </div>

            {/* 달력 팝업 - fixed로 위에 띄우기 */}
            <AnimatePresence>
                {showCalendar && !isSearchMode && (
                    <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        className="fixed left-0 right-0 bg-white shadow-lg z-50 border-b overflow-hidden"
                        style={{ top: '56px' }}
                    >
                        <CalendarPicker
                            selectedDate={selectedDate}
                            schedules={isSameMonth ? schedules : calendarSchedules}
                            categories={categories}
                            hideHeader={true}
                            externalViewDate={calendarViewDate}
                            onViewDateChange={setCalendarViewDate}
                            externalShowYearMonth={calendarShowYearMonth}
                            onShowYearMonthChange={setCalendarShowYearMonth}
                            onSelectDate={(date) => {
                                setSelectedDate(date);
                                setCalendarViewDate(date);
                                setCalendarShowYearMonth(false);
                                setShowCalendar(false);
                            }}
                        />
                    </motion.div>
                )}
            </AnimatePresence>

            {/* 캘린더 배경 오버레이 */}
            <AnimatePresence>
                {showCalendar && !isSearchMode && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        onClick={() => setShowCalendar(false)}
                        className="fixed inset-0 bg-black/40 z-40"
                        style={{ top: 0 }}
                    />
                )}
            </AnimatePresence>

            {/* 컨텐츠 영역 */}
            <div className="mobile-content" ref={isSearchMode && searchTerm && !showSuggestionsScreen ? scrollContainerRef : contentRef}>
            <div className={`px-4 pb-4 ${isSearchMode && showSuggestionsScreen ? 'pt-0' : 'pt-4'}`}>
                {isSearchMode ? (
                    // 검색 모드
                    showSuggestionsScreen ? (
                        // 추천 검색어 화면 (유튜브 스타일)
                        <div className="space-y-0">
                            {suggestions.length === 0 ? (
                                <div className="text-center py-8 text-gray-400">
                                    검색어를 입력하세요
                                </div>
                            ) : (
                                suggestions.map((suggestion, index) => (
                                    <button
                                        key={suggestion}
                                        onClick={() => {
                                            setSearchInput(suggestion);
                                            setSearchTerm(suggestion);
                                            setLastSearchTerm(suggestion); // 검색어 저장
                                            setShowSuggestions(false);
                                            setShowSuggestionsScreen(false);
                                            setSelectedSuggestionIndex(-1);
                                        }}
                                        className={`w-full px-0 py-3.5 text-left flex items-center gap-4 border-b border-gray-100 active:bg-gray-50 ${
                                            index === selectedSuggestionIndex
                                                ? 'bg-primary/5'
                                                : ''
                                        }`}
                                    >
                                        <Search size={18} className="text-gray-400 shrink-0" />
                                        <span className="text-[15px] text-gray-700 flex-1">{suggestion}</span>
                                    </button>
                                ))
                            )}
                        </div>
                    ) : !searchTerm ? (
                        // 검색어 없음 (첫 진입)
                        <div className="text-center py-8 text-gray-400">
                            검색어를 입력하세요
                        </div>
                    ) : searchLoading ? (
                        <div className="flex justify-center py-8">
                            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                        </div>
                    ) : searchResults.length === 0 ? (
                        <div className="text-center py-8 text-gray-400">
                            검색 결과가 없습니다
                        </div>
                    ) : (
                        <>
                            <div
                                style={{
                                    height: `${virtualizer.getTotalSize()}px`,
                                    width: '100%',
                                    position: 'relative',
                                }}
                            >
                                {virtualizer.getVirtualItems().map((virtualItem) => {
                                    const schedule = searchResults[virtualItem.index];
                                    if (!schedule) return null;
                                    
                                    return (
                                        <div
                                            key={virtualItem.key}
                                            ref={virtualizer.measureElement}
                                            data-index={virtualItem.index}
                                            style={{
                                                position: 'absolute',
                                                top: 0,
                                                left: 0,
                                                width: '100%',
                                                transform: `translateY(${virtualItem.start}px)`,
                                            }}
                                        >
                                            <div className={virtualItem.index < searchResults.length - 1 ? "pb-3" : ""}>
                                                <ScheduleCard
                                                    schedule={schedule}
                                                    categoryColor={getCategoryColor(schedule.category?.id || schedule.category_id)}
                                                    categories={categories}
                                                    onClick={() => navigate(`/schedule/${schedule.id}`)}
                                                />
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                            {/* 무한 스크롤 트리거 */}
                            <div ref={loadMoreRef} className="py-2">
                                {isFetchingNextPage && (
                                    <div className="flex justify-center">
                                        <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                                    </div>
                                )}
                            </div>
                        </>
                    )
                ) : loading ? (
                    <div className="flex justify-center py-8">
                        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                    </div>
                ) : selectedDateSchedules.length === 0 ? (
                    <div className="text-center py-8 text-gray-400">
                        {selectedDate.getMonth() + 1}월 {selectedDate.getDate()}일 일정이 없습니다
                    </div>
                ) : (
                    // 선택된 날짜의 일정
                    <div className="space-y-3">
                        {selectedDateSchedules.map((schedule, index) => {
                            const isBirthday = schedule.is_birthday || String(schedule.id).startsWith('birthday-');

                            if (isBirthday) {
                                return (
                                    <MobileBirthdayCard
                                        key={schedule.id}
                                        schedule={schedule}
                                        delay={index * 0.05}
                                        onClick={() => {
                                            const scheduleYear = new Date(schedule.date).getFullYear();
                                            const memberName = schedule.member_names;
                                            navigate(`/birthday/${encodeURIComponent(memberName)}/${scheduleYear}`);
                                        }}
                                    />
                                );
                            }

                            return (
                                <TimelineScheduleCard
                                    key={schedule.id}
                                    schedule={schedule}
                                    categoryColor={getCategoryColor(schedule.category?.id || schedule.category_id)}
                                    categories={categories}
                                    delay={index * 0.05}
                                    onClick={() => navigate(`/schedule/${schedule.id}`)}
                                />
                            );
                        })}
                    </div>
                )}
            </div>
            </div>
        </>
    );
}

// 일정 카드 컴포넌트 (검색용) - 날짜 포함 모던 디자인
function ScheduleCard({ schedule, categoryColor, categories, delay = 0, onClick }) {
    const categoryName = categories.find(c => c.id === (schedule.category?.id || schedule.category_id))?.name || '미분류';
    const memberList = getMemberList(schedule);

    // 날짜 파싱
    const parseDate = (dateStr) => {
        if (!dateStr) return null;
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
        const weekday = weekdays[date.getDay()];
        const isWeekend = date.getDay() === 0 || date.getDay() === 6;
        const isSunday = date.getDay() === 0;
        return { year, month, day, weekday, isWeekend, isSunday };
    };

    const dateInfo = parseDate(schedule.date);

    return (
        <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
            onClick={onClick}
            className="cursor-pointer"
        >
            {/* 카드 본체 */}
            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden active:bg-gray-50 transition-colors">
                <div className="flex">
                    {/* 왼쪽 날짜 영역 */}
                    {dateInfo && (
                        <div className="flex-shrink-0 w-16 py-3 px-2 bg-gray-50 border-r border-gray-100 flex flex-col items-center justify-center">
                            <span className="text-[10px] text-gray-400">{dateInfo.year}</span>
                            <span className="text-lg font-bold text-gray-800">{dateInfo.month}.{dateInfo.day}</span>
                            <span className={`text-[11px] font-medium ${
                                dateInfo.isSunday ? 'text-red-500' : 
                                dateInfo.isWeekend ? 'text-blue-500' : 'text-gray-500'
                            }`}>
                                {dateInfo.weekday}요일
                            </span>
                        </div>
                    )}
                    
                    {/* 오른쪽 콘텐츠 영역 */}
                    <div className="flex-1 p-4 min-w-0">
                        {/* 시간 및 카테고리 뱃지 */}
                        <div className="flex items-center gap-1.5 mb-2 flex-wrap">
                            {schedule.time && (
                                <div 
                                    className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
                                    style={{ backgroundColor: categoryColor }}
                                >
                                    <Clock size={10} />
                                    {schedule.time.slice(0, 5)}
                                </div>
                            )}
                            <span 
                                className="px-2 py-0.5 rounded-full text-xs font-medium"
                                style={{ 
                                    backgroundColor: `${categoryColor}15`,
                                    color: categoryColor 
                                }}
                            >
                                {categoryName}
                            </span>
                        </div>
                        
                        {/* 제목 */}
                        <h3 className="font-bold text-[15px] text-gray-800 leading-snug line-clamp-2">
                            {decodeHtmlEntities(schedule.title)}
                        </h3>
                        
                        {/* 출처 */}
                        {schedule.source?.name && (
                            <div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
                                <Link2 size={11} />
                                <span>{schedule.source?.name}</span>
                            </div>
                        )}
                        
                        {/* 멤버 */}
                        {memberList.length > 0 && (
                            <div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
                                {memberList.map((name, i) => (
                                    <span
                                        key={i}
                                        className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
                                    >
                                        {name.trim()}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </motion.div>
    );
}

// 타임라인용 일정 카드 컴포넌트 - 모던 디자인
function TimelineScheduleCard({ schedule, categoryColor, categories, delay = 0, onClick }) {
    const categoryName = categories.find(c => c.id === (schedule.category?.id || schedule.category_id))?.name || '미분류';
    const memberList = getMemberList(schedule);

    return (
        <motion.div
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
            onClick={onClick}
            className="cursor-pointer"
        >
            {/* 카드 본체 */}
            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden active:bg-gray-50 transition-colors">
                <div className="p-4">
                
                {/* 시간 및 카테고리 뱃지 */}
                <div className="flex items-center gap-1.5 mb-2">
                    {schedule.time && (
                        <div
                            className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
                            style={{ backgroundColor: categoryColor }}
                        >
                            <Clock size={10} />
                            {schedule.time.slice(0, 5)}
                        </div>
                    )}
                    <span
                        className="px-2 py-0.5 rounded-full text-xs font-medium"
                        style={{
                            backgroundColor: `${categoryColor}15`,
                            color: categoryColor
                        }}
                    >
                        {categoryName}
                    </span>
                </div>
                
                {/* 제목 */}
                <h3 className="font-bold text-[15px] text-gray-800 leading-snug">
                    {decodeHtmlEntities(schedule.title)}
                </h3>
                
                {/* 출처 */}
                {schedule.source?.name && (
                    <div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
                        <Link2 size={11} />
                        <span>{schedule.source?.name}</span>
                    </div>
                )}
                
                {/* 멤버 */}
                {memberList.length > 0 && (
                    <div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
                        {memberList.map((name, i) => (
                            <span
                                key={i}
                                className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
                            >
                                {name.trim()}
                            </span>
                        ))}
                    </div>
                )}
                </div>
            </div>
        </motion.div>
    );
}

// 달력 선택기 컴포넌트
function CalendarPicker({ 
    selectedDate, 
    schedules = [], 
    categories = [], 
    onSelectDate,
    hideHeader = false,           // 헤더 숨김 여부
    externalViewDate,             // 외부에서 제어하는 viewDate
    onViewDateChange,             // viewDate 변경 콜백
    externalShowYearMonth,        // 외부에서 제어하는 년월 선택 모드
    onShowYearMonthChange         // 년월 선택 모드 변경 콜백
}) {
    const [internalViewDate, setInternalViewDate] = useState(new Date(selectedDate));
    
    // 외부 viewDate가 있으면 사용, 없으면 내부 상태 사용
    const viewDate = externalViewDate || internalViewDate;
    const setViewDate = (date) => {
        if (onViewDateChange) {
            onViewDateChange(date);
        } else {
            setInternalViewDate(date);
        }
    };
    
    // 터치 스와이프 핸들링
    const touchStartX = useRef(0);
    const touchEndX = useRef(0);
    
    // 날짜별 일정 존재 여부 및 카테고리 색상
    const scheduleDates = useMemo(() => {
        const dateMap = {};
        schedules.forEach(schedule => {
            const date = schedule.date.split('T')[0];  // YYYY-MM-DD 형식으로 통일
            if (!dateMap[date]) {
                dateMap[date] = [];
            }
            const category = categories.find(c => c.id === (schedule.category?.id || schedule.category_id));
            dateMap[date].push(category?.color || '#6b7280');
        });
        return dateMap;
    }, [schedules, categories]);
    
    // 날짜별 일정 목록 가져오기 (점 표시용, 최대 3개)
    const getDaySchedules = (date) => {
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        const dateStr = `${y}-${m}-${d}`;
        return schedules.filter(s => s.date?.split('T')[0] === dateStr).slice(0, 3);
    };
    
    const year = viewDate.getFullYear();
    const month = viewDate.getMonth();

    // 2017년 1월 이전으로 이동 불가
    const canGoPrevMonth = !(year === 2017 && month === 0);

    // 달력 데이터 생성 함수
    const getCalendarDays = useCallback((y, m) => {
        const firstDay = new Date(y, m, 1);
        const lastDay = new Date(y, m + 1, 0);
        const startDay = firstDay.getDay();
        const daysInMonth = lastDay.getDate();
        
        const days = [];
        
        // 이전 달 날짜
        const prevMonth = new Date(y, m, 0);
        for (let i = startDay - 1; i >= 0; i--) {
            days.push({ 
                day: prevMonth.getDate() - i, 
                isCurrentMonth: false,
                date: new Date(y, m - 1, prevMonth.getDate() - i)
            });
        }
        
        // 현재 달 날짜
        for (let i = 1; i <= daysInMonth; i++) {
            days.push({ 
                day: i, 
                isCurrentMonth: true,
                date: new Date(y, m, i)
            });
        }
        
        // 다음 달 날짜 (현재 줄만 채우기)
        const remaining = (7 - (days.length % 7)) % 7;
        for (let i = 1; i <= remaining; i++) {
            days.push({ 
                day: i, 
                isCurrentMonth: false,
                date: new Date(y, m + 1, i)
            });
        }
        
        return days;
    }, []);
    
    const changeMonth = useCallback((delta) => {
        if (delta < 0 && !canGoPrevMonth) return;
        const newDate = new Date(viewDate);
        newDate.setMonth(newDate.getMonth() + delta);
        setViewDate(newDate);
    }, [viewDate, canGoPrevMonth]);
    
    const isToday = (date) => {
        const today = new Date();
        return date.getDate() === today.getDate() && 
               date.getMonth() === today.getMonth() && 
               date.getFullYear() === today.getFullYear();
    };
    
    // 선택된 날짜인지 확인
    const isSelected = (date) => {
        return date.getDate() === selectedDate.getDate() && 
               date.getMonth() === selectedDate.getMonth() && 
               date.getFullYear() === selectedDate.getFullYear();
    };
    
    // 년월 선택 모드 - 외부에서 제어 가능
    const [internalShowYearMonth, setInternalShowYearMonth] = useState(false);
    const showYearMonth = externalShowYearMonth !== undefined ? externalShowYearMonth : internalShowYearMonth;
    const setShowYearMonth = (value) => {
        if (onShowYearMonthChange) {
            onShowYearMonthChange(value);
        } else {
            setInternalShowYearMonth(value);
        }
    };
    
    const MIN_YEAR = 2017;
    const [yearRangeStart, setYearRangeStart] = useState(MIN_YEAR);
    const yearRange = Array.from({ length: 12 }, (_, i) => yearRangeStart + i);
    const canGoPrevYearRange = yearRangeStart > MIN_YEAR;
    
    // 배경 스크롤 막기
    useEffect(() => {
        document.body.style.overflow = 'hidden';
        return () => { document.body.style.overflow = ''; };
    }, []);
    
    // 현재 달 캘린더 데이터
    const currentMonthDays = useMemo(() => {
        return getCalendarDays(year, month);
    }, [year, month, getCalendarDays]);
    
    // 터치 핸들러
    const handleTouchStart = (e) => {
        touchStartX.current = e.touches[0].clientX;
    };
    
    const handleTouchMove = (e) => {
        touchEndX.current = e.touches[0].clientX;
    };
    
    const handleTouchEnd = () => {
        const diff = touchStartX.current - touchEndX.current;
        const threshold = 50;
        
        if (Math.abs(diff) > threshold) {
            if (diff > 0) {
                changeMonth(1);
            } else {
                changeMonth(-1);
            }
        }
        touchStartX.current = 0;
        touchEndX.current = 0;
    };
    
    // 월 렌더링 컴포넌트
    const renderMonth = (days) => (
        <div
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}
        >
            {/* 요일 헤더 */}
            <div className="grid grid-cols-7 gap-1 mb-2">
                {['일', '월', '화', '수', '목', '금', '토'].map((day, i) => (
                    <div 
                        key={day} 
                        className={`text-center text-xs font-medium py-1 ${
                            i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-500'
                        }`}
                    >
                        {day}
                    </div>
                ))}
            </div>
            
            {/* 날짜 그리드 */}
            <div className="grid grid-cols-7 gap-1">
                {days.map((item, index) => {
                    const dayOfWeek = index % 7;
                    const isSunday = dayOfWeek === 0;
                    const isSaturday = dayOfWeek === 6;
                    const daySchedules = item.isCurrentMonth ? getDaySchedules(item.date) : [];
                    
                    return (
                        <button
                            key={index}
                            onClick={() => onSelectDate(item.date)}
                            className="flex flex-col items-center py-2"
                        >
                            <span className={`w-9 h-9 flex items-center justify-center text-sm font-medium rounded-full transition-all ${
                                !item.isCurrentMonth 
                                    ? 'text-gray-300' 
                                    : isSelected(item.date)
                                        ? 'bg-primary text-white font-bold shadow-lg'
                                        : isToday(item.date)
                                            ? 'text-primary font-bold'
                                            : isSunday 
                                                ? 'text-red-500 hover:bg-red-50' 
                                                : isSaturday 
                                                    ? 'text-blue-500 hover:bg-blue-50'
                                                    : 'text-gray-700 hover:bg-gray-100'
                            }`}>
                                {item.day}
                            </span>
                            {/* 일정 점 - 선택된 날짜에는 표시하지 않음, 최대 3개 */}
                            {!isSelected(item.date) && daySchedules.length > 0 && (
                                <div className="flex gap-0.5 mt-0.5 h-1.5">
                                    {daySchedules.map((schedule, i) => {
                                        const cat = categories.find(c => c.id === (schedule.category?.id || schedule.category_id));
                                        const color = cat?.color || '#6b7280';
                                        return (
                                            <div 
                                                key={i} 
                                                className="w-1 h-1 rounded-full"
                                                style={{ backgroundColor: color }}
                                            />
                                        );
                                    })}
                                </div>
                            )}
                        </button>
                    );
                })}
            </div>
        </div>
    );

    return (
        <div className="p-4">
            <AnimatePresence mode="wait">
                {showYearMonth ? (
                    // 년월 선택 UI
                    <motion.div
                        key="yearMonth"
                        initial={{ opacity: 0, y: -10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -10 }}
                        transition={{ duration: 0.15 }}
                    >
                        {/* 년도 범위 헤더 */}
                        <div className="flex items-center justify-between mb-3">
                            <button
                                onClick={() => canGoPrevYearRange && setYearRangeStart(Math.max(MIN_YEAR, yearRangeStart - 12))}
                                disabled={!canGoPrevYearRange}
                                className={`p-1 ${canGoPrevYearRange ? '' : 'opacity-30'}`}
                            >
                                <ChevronLeft size={18} />
                            </button>
                            <span className="font-semibold text-sm">
                                {yearRangeStart} - {yearRangeStart + 11}
                            </span>
                            <button
                                onClick={() => setYearRangeStart(yearRangeStart + 12)}
                                className="p-1"
                            >
                                <ChevronRight size={18} />
                            </button>
                        </div>
                        
                        {/* 년도 선택 */}
                        <div className="text-center text-xs text-gray-400 mb-2">년도</div>
                        <div className="grid grid-cols-4 gap-2 mb-4">
                            {yearRange.map(y => {
                                const isCurrentYear = y === new Date().getFullYear();
                                return (
                                    <button
                                        key={y}
                                        onClick={() => {
                                            const newDate = new Date(viewDate);
                                            newDate.setFullYear(y);
                                            setViewDate(newDate);
                                        }}
                                        className={`py-2 text-sm rounded-lg transition-colors ${
                                            y === year
                                                ? 'bg-primary text-white'
                                                : isCurrentYear
                                                    ? 'text-primary font-semibold hover:bg-gray-100'
                                                    : 'text-gray-600 hover:bg-gray-100'
                                        }`}
                                    >
                                        {y}
                                    </button>
                                );
                            })}
                        </div>
                        
                        {/* 월 선택 */}
                        <div className="text-center text-xs text-gray-400 mb-2">월</div>
                        <div className="grid grid-cols-4 gap-2">
                            {Array.from({ length: 12 }, (_, i) => i + 1).map(m => {
                                const today = new Date();
                                const isCurrentMonth = year === today.getFullYear() && m === today.getMonth() + 1;
                                return (
                                    <button
                                        key={m}
                                        onClick={() => {
                                            const newDate = new Date(year, m - 1, 1);
                                            setViewDate(newDate);
                                            setShowYearMonth(false);
                                        }}
                                        className={`py-2 text-sm rounded-lg transition-colors ${
                                            m === month + 1
                                                ? 'bg-primary text-white'
                                                : isCurrentMonth
                                                    ? 'text-primary font-semibold hover:bg-gray-100'
                                                    : 'text-gray-600 hover:bg-gray-100'
                                        }`}
                                    >
                                        {m}월
                                    </button>
                                );
                            })}
                        </div>
                    </motion.div>
                ) : (
                    <motion.div
                        key={`calendar-${year}-${month}`}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.15 }}
                    >
                        {/* 달력 헤더 - hideHeader일 때 숨김 */}
                        {!hideHeader && (
                            <div className="flex items-center justify-between mb-4">
                                <button
                                    onClick={() => changeMonth(-1)}
                                    disabled={!canGoPrevMonth}
                                    className={`p-1 ${!canGoPrevMonth ? 'opacity-30' : ''}`}
                                >
                                    <ChevronLeft size={18} />
                                </button>
                                <button 
                                    onClick={() => setShowYearMonth(true)}
                                    className="flex items-center gap-1 font-semibold text-sm hover:text-primary transition-colors"
                                >
                                    {year}년 {month + 1}월
                                    <ChevronDown size={16} />
                                </button>
                                <button 
                                    onClick={() => changeMonth(1)}
                                    className="p-1"
                                >
                                    <ChevronRight size={18} />
                                </button>
                            </div>
                        )}
            
                        {/* 달력 (터치 스와이프 지원) */}
                        {renderMonth(currentMonthDays)}
                        
                        {/* 오늘 버튼 */}
                        <div className="mt-3 flex justify-center">
                            <button
                                onClick={() => onSelectDate(new Date())}
                                className="text-xs text-primary font-medium px-4 py-1.5 bg-primary/10 rounded-full"
                            >
                                오늘
                            </button>
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}

export default MobileSchedule;
