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

/**
 * 멤버 카드 컴포넌트 (PC)
 */
function MemberCard({ member, isFormer = false, delay = 0 }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay }}
      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 ${
              isFormer ? 'grayscale group-hover:grayscale-0' : ''
            }`}
          />
        </div>

        {/* 정보 */}
        <div className="p-6 flex-1 flex flex-col">
          <h3 className={`text-xl font-bold mb-3 ${isFormer ? 'text-gray-500' : ''}`}>
            {member.name}
          </h3>

          <div className={`flex items-center gap-2 text-sm ${isFormer ? 'text-gray-400' : 'text-gray-500'} mb-2`}>
            <Calendar size={14} />
            <span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
          </div>

          {/* 인스타그램 링크 */}
          {member.instagram && !isFormer && (
            <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 ${
            isFormer ? 'bg-gray-400' : 'bg-primary'
          } transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300`}
        />
      </div>
    </motion.div>
  );
}

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

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

  if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-[60vh]">
        <Loading text="멤버 로딩 중..." />
      </div>
    );
  }

  // 모바일 레이아웃
  if (isMobile) {
    return (
      <div className="px-4 py-4">
        {/* 현재 멤버 */}
        <div className="grid grid-cols-2 gap-4 mb-8">
          {currentMembers.map((member) => (
            <div key={member.id} className="bg-white rounded-2xl overflow-hidden shadow-md">
              <div className="aspect-[3/4] bg-gray-200">
                <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
              </div>
              <div className="p-3">
                <p className="font-semibold">{member.name}</p>
                <p className="text-xs text-gray-400">{formatDate(member.birth_date, 'YYYY.MM.DD')}</p>
              </div>
            </div>
          ))}
        </div>

        {/* 전 멤버 */}
        {formerMembers.length > 0 && (
          <>
            <h2 className="text-lg font-bold text-gray-400 mb-4">전 멤버</h2>
            <div className="grid grid-cols-2 gap-4">
              {formerMembers.map((member) => (
                <div key={member.id} className="bg-white rounded-2xl overflow-hidden shadow-md">
                  <div className="aspect-[3/4] bg-gray-200">
                    <img
                      src={member.image_url}
                      alt={member.name}
                      className="w-full h-full object-cover grayscale"
                    />
                  </div>
                  <div className="p-3">
                    <p className="font-semibold text-gray-500">{member.name}</p>
                    <p className="text-xs text-gray-400">{formatDate(member.birth_date, 'YYYY.MM.DD')}</p>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    );
  }

  // PC 레이아웃
  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">
          {currentMembers.map((member, index) => (
            <MemberCard key={member.id} member={member} delay={index * 0.1} />
          ))}
        </div>

        {/* 전 멤버 섹션 */}
        {formerMembers.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">
              {formerMembers.map((member, index) => (
                <MemberCard key={member.id} member={member} isFormer delay={0.6 + index * 0.1} />
              ))}
            </div>
          </motion.div>
        )}
      </div>
    </div>
  );
}

export default Members;