import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { Instagram, Calendar } from 'lucide-react';
import { getMembers } from '../../../api/public/members';
import { formatDate } from '../../../utils/date';

function Members() {
    // useQuery로 멤버 데이터 로드
    const { data: members = [], isLoading: loading } = useQuery({
        queryKey: ['members'],
        queryFn: getMembers,
    });


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

                {/* 현재 멤버 그리드 */}
                <div className="grid grid-cols-5 gap-8">
                    {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: index * 0.1 }}
                            className="group h-full"
                        >
                            <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
                                {/* 이미지 */}
                                <div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
                                    <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 flex-1 flex flex-col">
                                    <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                                    <p className="text-primary text-sm font-medium mb-3 min-h-[20px]">{member.position || '\u00A0'}</p>
                                    
                                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-4">
                                        <Calendar size={14} />
                                        <span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
                                    </div>

                                    {/* 인스타그램 링크 */}
                                    {member.instagram && (
                                        <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 mt-auto"
                                        >
                                            <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>

                {/* 전 멤버 섹션 - 현재 멤버와 동일한 카드 UI */}
                {members.filter(m => m.is_former).length > 0 && (
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.5 }}
                        className="mt-16"
                    >
                        <h2 className="text-2xl font-bold mb-8 text-gray-400">전 멤버</h2>
                        <div className="grid grid-cols-5 gap-8">
                            {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.6 + index * 0.1 }}
                                    className="group h-full"
                                >
                                    <div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
                                        {/* 이미지 - grayscale */}
                                        <div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
                                            <img
                                                src={member.image_url}
                                                alt={member.name}
                                                className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
                                            />
                                        </div>

                                        {/* 정보 */}
                                        <div className="p-6 flex-1 flex flex-col">
                                            <h3 className="text-xl font-bold mb-1 text-gray-500">{member.name}</h3>
                                            <p className="text-gray-400 text-sm font-medium mb-3 min-h-[20px]">{member.position || '\u00A0'}</p>
                                            
                                            <div className="flex items-center gap-2 text-sm text-gray-400">
                                                <Calendar size={14} />
                                                <span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
                                            </div>
                                        </div>

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


            </div>
        </div>
    );
}

export default Members;
