import { motion } from 'framer-motion';
import { Instagram, Calendar } 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-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-3">{member.name}</h3>

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

        {/* 전 멤버 섹션 */}
        {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-3 text-gray-500">
                          {member.name}
                        </h3>

                        <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;