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

/**
 * 멤버 카드 컴포넌트
 */
function MemberCard({ member, index }) {
  return (
    <motion.div
      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>
  );
}

/**
 * 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>
    );
  }

  const currentMembers = members.filter((m) => !m.is_former);

  // 2/3 배열
  const rows = [
    currentMembers.slice(0, 2),
    currentMembers.slice(2, 5),
  ];

  let globalIndex = 0;

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

        {/* 멤버 그리드 - 2/3/3 배열 */}
        <div className="space-y-6">
          {rows.map((row, rowIndex) => (
            <div key={rowIndex} className="flex justify-center gap-6">
              {row.map((member) => (
                <MemberCard key={member.id} member={member} index={globalIndex++} />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Members;