import { motion } from 'framer-motion';
import { Instagram, Cake } from 'lucide-react';
import { useMembers } from '@/hooks';
import { Loading } from '@/components/common';
import { formatDate } from '@/utils';

/**
 * PC 멤버 페이지
 */
function Members() {
  const { data: members = [], isLoading: loading } = useMembers();

  if (loading) {
    return (
      <div className="py-16 flex justify-center items-center min-h-[60vh]">
        <Loading />
      </div>
    );
  }

  return (
    <div className="py-16">
      <div className="max-w-4xl 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>

        {/* 멤버 그리드 - 3열, 마지막 줄 가운데 정렬 */}
        <div className="flex flex-wrap justify-center 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: index * 0.1 }}
                className="group w-[calc(33.333%-1rem)]"
              >
                <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-3">{member.name}</h3>

                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
                      <Cake 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>
      </div>
    </div>
  );
}

export default Members;