import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Calendar, Users, Disc3, ArrowRight, Clock } from 'lucide-react';

function Home() {
    const [members, setMembers] = useState([]);
    const [upcomingSchedules, setUpcomingSchedules] = useState([]);

    useEffect(() => {
        // 멤버 데이터 로드
        fetch('/api/members')
            .then(res => res.json())
            .then(data => setMembers(data))
            .catch(error => console.error('멤버 데이터 로드 오류:', error));
        
        // 다가오는 일정 로드 (오늘 이후 3개)
        // KST 기준으로 오늘 날짜 계산
        const now = new Date();
        const kstOffset = 9 * 60; // KST는 UTC+9
        const kstTime = new Date(now.getTime() + (kstOffset + now.getTimezoneOffset()) * 60000);
        const todayStr = kstTime.toISOString().split('T')[0];
        
        fetch(`/api/schedules?startDate=${todayStr}&limit=3`)

            .then(res => res.json())
            .then(data => setUpcomingSchedules(data))
            .catch(error => console.error('일정 데이터 로드 오류:', error));
    }, []);

    return (
        <div>
            {/* 히어로 섹션 */}
            <section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
                <div className="absolute inset-0 bg-black/20" />
                <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        className="text-white"
                    >
                        <h1 className="text-6xl font-bold mb-4">fromis_9</h1>
                        <p className="text-2xl font-light mb-2">프로미스나인</p>
                        <p className="text-lg opacity-80 mb-8 leading-relaxed">
                            인사드리겠습니다. 둘, 셋!<br />
                            이제는 약속해 소중히 간직해,<br />
                            당신의 아이돌로 성장하겠습니다!
                        </p>
                        <Link
                            to="/members"
                            className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
                        >
                            멤버 보기
                            <ArrowRight size={18} />
                        </Link>
                    </motion.div>
                </div>

                {/* 장식 */}
                <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
                    <div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
                    <div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
                </div>
            </section>

            {/* 퀵 링크 섹션 */}
            <section className="py-16 bg-white">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-3 gap-8">
                        <Link
                            to="/members"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Users size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">멤버</h3>
                            <p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
                        </Link>
                        <Link
                            to="/album"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">앨범</h3>
                            <p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p>
                        </Link>
                        <Link
                            to="/schedule"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Calendar size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">일정</h3>
                            <p className="text-gray-500 group-hover:text-white/80">다가오는 일정을 확인하세요</p>
                        </Link>
                    </div>
                </div>
            </section>

            {/* 멤버 미리보기 */}
            <section className="py-16 bg-gray-50">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="flex justify-between items-center mb-8">
                        <h2 className="text-3xl font-bold">멤버</h2>
                        <Link to="/members" className="text-primary hover:underline flex items-center gap-1">
                            전체보기 <ArrowRight size={16} />
                        </Link>
                    </div>
                    <div className="grid grid-cols-5 gap-6">
                        {members.filter(m => !m.is_former).map((member, index) => (
                            <motion.div
                                key={member.id}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: index * 0.1 }}
                                className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
                            >
                                <div className="aspect-square bg-gray-100">
                                    <img
                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                <div className="p-4 text-center">
                                    <h3 className="font-bold text-lg">{member.name}</h3>
                                    <p className="text-sm text-gray-500">{member.position?.split(',')[0]}</p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 일정 미리보기 */}
            <section className="py-16 bg-white">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="flex justify-between items-center mb-8">
                        <h2 className="text-3xl font-bold">다가오는 일정</h2>
                        <Link to="/schedule" className="text-primary hover:underline flex items-center gap-1">
                            전체보기 <ArrowRight size={16} />
                        </Link>
                    </div>
                    {upcomingSchedules.length === 0 ? (
                        <div className="text-center py-12 text-gray-400">
                            <Calendar size={48} className="mx-auto mb-4 opacity-30" />
                            <p>예정된 일정이 없습니다</p>
                        </div>
                    ) : (
                        <div className="space-y-4">
                            {upcomingSchedules.map((schedule, index) => {
                                const scheduleDate = new Date(schedule.date);
                                const day = scheduleDate.getDate();
                                const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
                                const weekday = weekdays[scheduleDate.getDay()];
                                
                                // 멤버 처리
                                const memberList = schedule.member_names ? schedule.member_names.split(',') : [];
                                const displayMembers = memberList.length >= 5 ? ['프로미스나인'] : memberList;
                                
                                // 카테고리 색상 (기본값)
                                const categoryColor = schedule.category_color || '#6B8E6B';
                                
                                return (
                                    <motion.div
                                        key={schedule.id}
                                        initial={{ opacity: 0 }}
                                        animate={{ opacity: 1 }}
                                        transition={{ delay: index * 0.05 }}
                                        className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
                                    >
                                        {/* 날짜 영역 */}
                                        <div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
                                            <span className="text-3xl font-bold">{day}</span>
                                            <span className="text-sm font-medium opacity-80">{weekday}</span>
                                        </div>


                                        {/* 내용 영역 */}
                                        <div className="flex-1 p-5 flex flex-col justify-center">
                                            <h3 className="font-bold text-lg text-gray-900 mb-2">{schedule.title}</h3>
                                            
                                            <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
                                                {schedule.time && (
                                                    <div className="flex items-center gap-1">
                                                        <Clock size={14} className="text-primary" />
                                                        <span>{schedule.time.slice(0, 5)}</span>
                                                    </div>
                                                )}
                                                {schedule.category_name && (
                                                    <div className="flex items-center gap-1.5">
                                                        <span 
                                                            className="w-2 h-2 rounded-full" 
                                                            style={{ backgroundColor: categoryColor }}
                                                        />
                                                        <span>
                                                            {schedule.category_name}
                                                            {schedule.source_name && ` · ${schedule.source_name}`}
                                                        </span>
                                                    </div>
                                                )}
                                            </div>
                                            
                                            {/* 멤버 태그 */}
                                            {displayMembers.length > 0 && (
                                                <div className="flex flex-wrap gap-1.5 mt-3">
                                                    {displayMembers.map((name, i) => (
                                                        <span 
                                                            key={i} 
                                                            className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
                                                        >
                                                            {name.trim()}
                                                        </span>
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    </motion.div>
                                );
                            })}
                        </div>
                    )}


                </div>
            </section>
        </div>
    );
}

export default Home;