import { motion } from 'framer-motion';
import { Clock, MapPin, Users } from 'lucide-react';
import { schedules } from '../../data/dummy';

function Schedule() {
    // 스케줄을 날짜별로 그룹핑
    const groupedSchedules = schedules.reduce((acc, schedule) => {
        const date = schedule.date;
        if (!acc[date]) {
            acc[date] = [];
        }
        acc[date].push(schedule);
        return acc;
    }, {});

    const formatDate = (dateStr) => {
        const date = new Date(dateStr);
        const days = ['일', '월', '화', '수', '목', '금', '토'];
        return {
            month: date.getMonth() + 1,
            day: date.getDate(),
            weekday: days[date.getDay()],
        };
    };

    return (
        <div className="py-16">
            <div className="max-w-7xl mx-auto px-6">
                {/* 헤더 */}
                <div className="text-center mb-12">
                    <motion.h1
                        initial={{ opacity: 0, y: -20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="text-4xl font-bold mb-4"
                    >
                        스케줄
                    </motion.h1>
                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.2 }}
                        className="text-gray-500"
                    >
                        프로미스나인의 다가오는 일정을 확인하세요
                    </motion.p>
                </div>

                {/* 스케줄 리스트 */}
                <div className="max-w-4xl mx-auto space-y-4">
                    {Object.entries(groupedSchedules).map(([date, daySchedules], groupIndex) => {
                        const formatted = formatDate(date);
                        return daySchedules.map((schedule, index) => (
                            <motion.div
                                key={schedule.id}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: (groupIndex * daySchedules.length + index) * 0.1 }}
                                className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
                            >
                                {/* 날짜 영역 */}
                                <div className="w-24 bg-primary flex flex-col items-center justify-center text-white py-6">
                                    <span className="text-sm font-medium opacity-80">{formatted.month}월</span>
                                    <span className="text-3xl font-bold">{formatted.day}</span>
                                    <span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
                                </div>

                                {/* 스케줄 내용 */}
                                <div className="flex-1 p-6">
                                    <h3 className="font-bold text-lg mb-3">{schedule.title}</h3>
                                    
                                    <div className="flex flex-wrap gap-4 text-sm text-gray-500">
                                        <div className="flex items-center gap-1">
                                            <Clock size={14} className="text-primary" />
                                            <span>{schedule.time}</span>
                                        </div>
                                        <div className="flex items-center gap-1">
                                            <MapPin size={14} className="text-primary" />
                                            <span>{schedule.platform}</span>
                                        </div>
                                        <div className="flex items-center gap-1">
                                            <Users size={14} className="text-primary" />
                                            <span>{schedule.members.join(', ')}</span>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                        ));
                    })}
                </div>

                {/* 빈 스케줄 메시지 */}
                {Object.keys(groupedSchedules).length === 0 && (
                    <div className="text-center py-20">
                        <p className="text-gray-500">예정된 스케줄이 없습니다.</p>
                    </div>
                )}
            </div>
        </div>
    );
}

export default Schedule;