import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Instagram, Calendar } from 'lucide-react';

function Members() {
    const [members, setMembers] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/members')
            .then(res => res.json())
            .then(data => {
                setMembers(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('멤버 데이터 로드 오류:', error);
                setLoading(false);
            });
    }, []);

    // 날짜 포맷팅 함수
    const formatDate = (dateStr) => {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
    };

    if (loading) {
        return (
            <div className="py-16 flex justify-center items-center min-h-[60vh]">
                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
            </div>
        );
    }

    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"
                    >
                        프로미스나인의 5명의 멤버를 소개합니다
                    </motion.p>
                </div>

                {/* 멤버 그리드 */}
                <div className="grid grid-cols-5 gap-8">
                    {members.map((member, index) => (
                        <motion.div
                            key={member.id}
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.1 }}
                            className="group"
                        >
                            <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300">
                                {/* 이미지 */}
                                <div className="aspect-[3/4] bg-gray-100 overflow-hidden">
                                    <img
                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                    />
                                </div>

                                {/* 정보 */}
                                <div className="p-6">
                                    <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                                    <p className="text-primary text-sm font-medium mb-3">{member.position}</p>
                                    
                                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-4">
                                        <Calendar size={14} />
                                        <span>{formatDate(member.birth_date)}</span>
                                    </div>

                                    {/* 인스타그램 링크 */}
                                    <a
                                        href={member.instagram}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors"
                                    >
                                        <Instagram size={16} />
                                        <span>Instagram</span>
                                    </a>
                                </div>

                                {/* 호버 효과 - 컬러 바 */}
                                <div className="absolute bottom-0 left-0 right-0 h-1 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
                            </div>
                        </motion.div>
                    ))}
                </div>

                {/* 그룹 정보 */}
                <motion.div
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.6 }}
                    className="mt-16 bg-gradient-to-r from-primary to-primary-dark rounded-3xl p-10 text-white"
                >
                    <div className="grid grid-cols-4 gap-8 text-center">
                        <div>
                            <p className="text-4xl font-bold mb-2">2018</p>
                            <p className="text-white/70">데뷔 연도</p>
                        </div>
                        <div>
                            <p className="text-4xl font-bold mb-2">5</p>
                            <p className="text-white/70">멤버 수</p>
                        </div>
                        <div>
                            <p className="text-4xl font-bold mb-2">7+</p>
                            <p className="text-white/70">앨범 수</p>
                        </div>
                        <div>
                            <p className="text-4xl font-bold mb-2">flover</p>
                            <p className="text-white/70">팬덤명</p>
                        </div>
                    </div>
                </motion.div>
            </div>
        </div>
    );
}

export default Members;