import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Calendar, ArrowRight, Clock, Link2, Tag } from 'lucide-react';
import { getTodayKST } from '../../../utils/date';
import { getMembers } from '../../../api/public/members';
import { getUpcomingSchedules } from '../../../api/public/schedules';

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

    useEffect(() => {
        // 멤버 데이터 로드
        getMembers()
            .then(data => setMembers(data))
            .catch(error => console.error('멤버 데이터 로드 오류:', error));
        
        // 다가오는 일정 로드 (오늘 이후 3개)
        getUpcomingSchedules(3)
            .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-gray-50">
                <div className="max-w-7xl mx-auto px-6">
                    <motion.div 
                        className="grid grid-cols-4 gap-6"
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true, amount: 0.1 }}
                        variants={{
                            hidden: { opacity: 1 },
                            visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
                        }}
                    >
                        {[
                            { value: "2018.01.24", label: "데뷔일" },
                            { value: `D+${(Math.floor((new Date() - new Date('2018-01-24')) / (1000 * 60 * 60 * 24)) + 1).toLocaleString()}`, label: "D+Day" },
                            { value: "5", label: "멤버 수" },
                            { value: "flover", label: "팬덤명" }
                        ].map((stat, index) => (
                            <motion.div
                                key={index}
                                variants={{
                                    hidden: { opacity: 0, y: 20 },
                                    visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }
                                }}
                                className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
                            >
                                <p className="text-3xl font-bold mb-1">{stat.value}</p>
                                <p className="text-white/70 text-sm">{stat.label}</p>
                            </motion.div>
                        ))}
                    </motion.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: 30 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 0.3 + index * 0.1, duration: 0.5, ease: "easeOut" }}
                                className="group relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
                            >
                                {/* 이미지 컨테이너 */}
                                <div className="aspect-[3/4] overflow-hidden">
                                    <img
                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                    />
                                </div>
                                
                                {/* 그라데이션 오버레이 */}
                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300" />
                                
                                {/* 멤버 정보 */}
                                <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
                                    <h3 className="font-bold text-xl drop-shadow-lg">{member.name}</h3>
                                </div>
                            </motion.div>
                        ))}
                    </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="/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>
                    ) : (
                        <motion.div 
                            className="space-y-4"
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true, amount: 0.1 }}
                            variants={{
                                hidden: { opacity: 1 },
                                visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
                            }}
                        >
                            {upcomingSchedules.map((schedule) => {
                                const scheduleDate = new Date(schedule.date);
                                const today = new Date();
                                const currentYear = today.getFullYear();
                                const currentMonth = today.getMonth();
                                
                                const scheduleYear = scheduleDate.getFullYear();
                                const scheduleMonth = scheduleDate.getMonth();
                                const isCurrentYear = scheduleYear === currentYear;
                                const isCurrentMonth = isCurrentYear && scheduleMonth === currentMonth;
                                
                                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;
                                
                                return (
                                    <motion.div
                                        key={schedule.id}
                                        variants={{
                                            hidden: { opacity: 0, x: -30 },
                                            visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: "easeOut" } }
                                        }}
                                        className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
                                    >
                                        {/* 날짜 영역 - primary 색상 고정 */}
                                        <div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
                                            {/* 현재 년도가 아니면 년.월 표시 */}
                                            {!isCurrentYear && (
                                                <span className="text-xs font-medium opacity-70">
                                                    {scheduleYear}.{scheduleMonth + 1}
                                                </span>
                                            )}
                                            {/* 현재 달이 아니면 월 표시 (현재 년도일 때) */}
                                            {isCurrentYear && !isCurrentMonth && (
                                                <span className="text-xs font-medium opacity-70">
                                                    {scheduleMonth + 1}월
                                                </span>
                                            )}
                                            <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 opacity-60" />
                                                        <span>{schedule.time.slice(0, 5)}</span>
                                                    </div>
                                                )}
                                                {schedule.category_name && (
                                                    <div className="flex items-center gap-1">
                                                        <Tag size={14} className="text-primary opacity-60" />
                                                        <span>{schedule.category_name}</span>
                                                    </div>
                                                )}
                                                {schedule.source_name && (
                                                    <div className="flex items-center gap-1">
                                                        <Link2 size={14} className="text-primary opacity-60" />
                                                        <span>{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>
                                );
                            })}
                        </motion.div>
                    )}


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

export default Home;