fromis_9/frontend/src/pages/mobile/Schedule.jsx

import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Clock, Tag, Link2, ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar } from 'lucide-react';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useInView } from 'react-intersection-observer';

// 모바일 일정 페이지
function MobileSchedule() {
    const [selectedDate, setSelectedDate] = useState(new Date());
    const [schedules, setSchedules] = useState([]);
    const [categories, setCategories] = useState([]);
    const [loading, setLoading] = useState(true);
    const [isSearchMode, setIsSearchMode] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [showCalendar, setShowCalendar] = useState(false);
    
    const SEARCH_LIMIT = 10;
    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 }) => {
            const response = await fetch(
                `/api/schedules?search=${encodeURIComponent(searchTerm)}&offset=${pageParam}&limit=${SEARCH_LIMIT}`
            );
            if (!response.ok) throw new Error('Search failed');
            return response.json();
        },
        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]);

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

    // 일정 및 카테고리 로드
    useEffect(() => {
        const year = selectedDate.getFullYear();
        const month = selectedDate.getMonth() + 1;
        
        Promise.all([
            fetch(`/api/schedules?year=${year}&month=${month}`).then(res => res.json()),
            fetch('/api/schedules/categories').then(res => res.json())
        ]).then(([schedulesData, categoriesData]) => {
            setSchedules(schedulesData);
            setCategories(categoriesData);
            setLoading(false);
        }).catch(console.error);
    }, [selectedDate]);

    // 월 변경
    const changeMonth = (delta) => {
        const newDate = new Date(selectedDate);
        newDate.setMonth(newDate.getMonth() + delta);
        setSelectedDate(newDate);
    };

    // 카테고리 색상
    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);
        });
        return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
    }, [schedules]);

    return (
        <div className="pb-4">
            {/* 헤더 */}
            <div className="sticky top-0 z-50 bg-white shadow-sm">
                {isSearchMode ? (
                    <div className="flex items-center gap-2 px-4 py-3">
                        <div className="flex-1 flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2">
                            <Search size={18} className="text-gray-400" />
                            <input
                                type="text"
                                placeholder="일정 검색..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="flex-1 bg-transparent outline-none text-sm"
                                autoFocus
                            />
                            {searchTerm && (
                                <button onClick={() => setSearchTerm('')}>
                                    <X size={18} className="text-gray-400" />
                                </button>
                            )}
                        </div>
                        <button 
                            onClick={() => { setIsSearchMode(false); setSearchTerm(''); }}
                            className="text-sm text-gray-500 flex-shrink-0 whitespace-nowrap"
                        >
                            취소
                        </button>
                    </div>
                ) : (
                    <div className="flex items-center justify-between px-4 py-3">
                        <div className="flex items-center gap-1">
                            <button 
                                onClick={() => setShowCalendar(!showCalendar)} 
                                className="p-2 rounded-lg hover:bg-gray-100"
                            >
                                <Calendar size={20} className="text-primary" />
                            </button>
                            <button onClick={() => changeMonth(-1)} className="p-2">
                                <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={() => setIsSearchMode(true)} className="p-2">
                                <Search size={20} />
                            </button>
                        </div>
                    </div>
                )}
                
                {/* 달력 팝업 */}
                <AnimatePresence>
                    {showCalendar && !isSearchMode && (
                        <motion.div
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: 'auto', opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            className="overflow-hidden border-t bg-white"
                        >
                            <CalendarPicker 
                                selectedDate={selectedDate} 
                                schedules={schedules}
                                categories={categories}
                                onSelectDate={(date) => {
                                    setSelectedDate(date);
                                    setShowCalendar(false);
                                }}
                            />
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>

            {/* 컨텐츠 */}
            <div className="px-4 py-4">
                {isSearchMode && searchTerm ? (
                    // 검색 결과
                    <div className="space-y-3">
                        {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>
                        ) : (
                            <>
                                {searchResults.map((schedule, index) => (
                                    <ScheduleCard 
                                        key={`${schedule.id}-search-${index}`}
                                        schedule={schedule}
                                        categoryColor={getCategoryColor(schedule.category_id)}
                                        categories={categories}
                                    />
                                ))}
                                <div ref={loadMoreRef} className="py-4">
                                    {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>
                            </>
                        )}
                    </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>
                ) : groupedSchedules.length === 0 ? (
                    <div className="text-center py-8 text-gray-400">
                        이번 달 일정이 없습니다
                    </div>
                ) : (
                    // 깔끔한 날짜별 일정
                    <div className="space-y-6">
                        {groupedSchedules.map(([date, daySchedules], groupIndex) => {
                            const dateObj = new Date(date);
                            const month = dateObj.getMonth() + 1;
                            const day = dateObj.getDate();
                            const weekday = ['일', '월', '화', '수', '목', '금', '토'][dateObj.getDay()];
                            const isWeekend = dateObj.getDay() === 0 || dateObj.getDay() === 6;
                            
                            return (
                                <div key={date}>
                                    {/* 날짜 헤더 - 심플 스타일 */}
                                    <div className="flex items-center gap-3 mb-3">
                                        <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl font-bold ${
                                            isWeekend 
                                                ? 'bg-red-50 text-red-500' 
                                                : 'bg-primary/10 text-primary'
                                        }`}>
                                            <span className="text-lg">{day}</span>
                                            <span className="text-xs opacity-70">{weekday}</span>
                                        </div>
                                        <div className="h-px flex-1 bg-gray-200" />
                                    </div>
                                    
                                    {/* 일정 카드들 */}
                                    <div className="space-y-3">
                                        {daySchedules.map((schedule, index) => (
                                            <TimelineScheduleCard 
                                                key={schedule.id}
                                                schedule={schedule}
                                                categoryColor={getCategoryColor(schedule.category_id)}
                                                categories={categories}
                                                delay={groupIndex * 0.05 + index * 0.02}
                                            />
                                        ))}
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>
        </div>
    );
}

// 일정 카드 컴포넌트 (검색용)
function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
    const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
    const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
    const memberList = memberNames.split(',').filter(name => name.trim());

    return (
        <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay }}
            className="bg-white rounded-xl p-4 shadow-sm"
        >
            <div className="flex gap-3">
                <div 
                    className="w-1 rounded-full flex-shrink-0"
                    style={{ backgroundColor: categoryColor }}
                />
                <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-sm">{schedule.title}</h3>
                    <div className="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-500">
                        {schedule.time && (
                            <span className="flex items-center gap-1">
                                <Clock size={12} />
                                {schedule.time.slice(0, 5)}
                            </span>
                        )}
                        <span className="flex items-center gap-1">
                            <Tag size={12} />
                            {categoryName}
                        </span>
                        {schedule.source_name && (
                            <span className="flex items-center gap-1">
                                <Link2 size={12} />
                                {schedule.source_name}
                            </span>
                        )}
                    </div>
                    {memberList.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-2">
                            {memberList.length >= 5 ? (
                                <span className="px-2 py-0.5 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-full shadow-sm">
                                    프로미스나인
                                </span>
                            ) : (
                                memberList.map((name, i) => (
                                    <span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
                                        {name.trim()}
                                    </span>
                                ))
                            )}
                        </div>
                    )}
                </div>
            </div>
        </motion.div>
    );
}

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

    return (
        <motion.div
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
        >
            {/* 카드 본체 */}
            <div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
                <div className="p-4">
                
                {/* 시간 뱃지 */}
                {schedule.time && (
                    <div className="flex items-center gap-1.5 mb-2">
                        <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">
                    {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.length >= 5 ? (
                            <span 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">
                                프로미스나인
                            </span>
                        ) : (
                            memberList.map((name, i) => (
                                <span 
                                    key={i} 
                                    className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-lg font-medium"
                                >
                                    {name.trim()}
                                </span>
                            ))
                        )}
                    </div>
                )}
                </div>
            </div>
        </motion.div>
    );
}

// 달력 선택기 컴포넌트
function CalendarPicker({ selectedDate, schedules = [], categories = [], onSelectDate }) {
    const [viewDate, setViewDate] = useState(new Date(selectedDate));
    
    // 터치 스와이프 핸들링
    const touchStartX = useRef(0);
    const touchEndX = useRef(0);
    
    // 날짜별 일정 존재 여부 및 카테고리 색상
    const scheduleDates = useMemo(() => {
        const dateMap = {};
        schedules.forEach(schedule => {
            const date = schedule.date;
            if (!dateMap[date]) {
                dateMap[date] = [];
            }
            const category = categories.find(c => c.id === schedule.category_id);
            dateMap[date].push(category?.color || '#6b7280');
        });
        return dateMap;
    }, [schedules, categories]);
    
    const getScheduleColors = (date) => {
        const dateStr = date.toISOString().split('T')[0];
        const colors = scheduleDates[dateStr] || [];
        // 최대 3개까지만 표시
        return [...new Set(colors)].slice(0, 3);
    };
    
    const year = viewDate.getFullYear();
    const month = viewDate.getMonth();
    
    // 달력 데이터 생성 함수
    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) => {
        const newDate = new Date(viewDate);
        newDate.setMonth(newDate.getMonth() + delta);
        setViewDate(newDate);
    }, [viewDate]);
    
    const isToday = (date) => {
        const today = new Date();
        return date.getDate() === today.getDate() && 
               date.getMonth() === today.getMonth() && 
               date.getFullYear() === today.getFullYear();
    };
    
    // 년월 선택 모드
    const [showYearMonth, setShowYearMonth] = useState(false);
    const [yearRangeStart, setYearRangeStart] = useState(Math.floor(year / 12) * 12);
    const yearRange = Array.from({ length: 12 }, (_, i) => yearRangeStart + i);
    
    // 배경 스크롤 막기
    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 scheduleColors = item.isCurrentMonth ? getScheduleColors(item.date) : [];
                    
                    return (
                        <button
                            key={index}
                            onClick={() => onSelectDate(item.date)}
                            className="flex flex-col items-center py-1"
                        >
                            <span className={`w-7 h-7 flex items-center justify-center text-xs rounded-full transition-colors ${
                                !item.isCurrentMonth 
                                    ? 'text-gray-300' 
                                    : isToday(item.date)
                                        ? 'bg-primary text-white 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>
                            {/* 일정 점 */}
                            <div className="flex gap-0.5 mt-0.5 h-1.5">
                                {scheduleColors.map((color, i) => (
                                    <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={() => setYearRangeStart(yearRangeStart - 12)}
                                className="p-1"
                            >
                                <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 => (
                                <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' 
                                            : '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 => (
                                <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' 
                                            : 'text-gray-600 hover:bg-gray-100'
                                    }`}
                                >
                                    {m}월
                                </button>
                            ))}
                        </div>
                        
                        {/* 취소 버튼 */}
                        <div className="mt-4 flex justify-center">
                            <button
                                onClick={() => setShowYearMonth(false)}
                                className="text-xs text-gray-500 px-4 py-1.5"
                            >
                                취소
                            </button>
                        </div>
                    </motion.div>
                ) : (
                    <motion.div
                        key="calendar"
                        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-4">
                            <button 
                                onClick={() => changeMonth(-1)}
                                className="p-1"
                            >
                                <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;