import { motion } from 'framer-motion';
import { useState, useMemo, useRef, useEffect } from 'react';
import { Instagram, Calendar } from 'lucide-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { useMembers } from '@/hooks';

/**
 * Mobile 멤버 페이지 - 카드 스와이프 스타일
 */
function MobileMembers() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef(null);
  const indicatorRef = useRef(null);

  // 멤버 데이터 로드
  const { data: allMembers = [] } = useMembers();

  // 현재/전 멤버 정렬 (현재 멤버 먼저, 전 멤버 나중)
  const members = useMemo(() => {
    return [...allMembers].sort((a, b) => {
      if (a.is_former !== b.is_former) {
        return a.is_former ? 1 : -1;
      }
      return 0;
    });
  }, [allMembers]);

  // 나이 계산
  const calculateAge = (birthDate) => {
    if (!birthDate) return null;
    const birth = new Date(birthDate);
    const today = new Date();
    let age = today.getFullYear() - birth.getFullYear();
    const monthDiff = today.getMonth() - birth.getMonth();
    if (
      monthDiff < 0 ||
      (monthDiff === 0 && today.getDate() < birth.getDate())
    ) {
      age--;
    }
    return age;
  };

  // 인디케이터 자동 스크롤
  useEffect(() => {
    if (indicatorRef.current && members.length > 0) {
      const container = indicatorRef.current;
      const itemWidth = 64; // 52px 썸네일 + 12px 간격
      const containerWidth = container.offsetWidth;
      const paddingLeft = 16; // px-4
      const targetScroll =
        paddingLeft + currentIndex * itemWidth + 26 - containerWidth / 2;

      container.scrollTo({
        left: Math.max(0, targetScroll),
        behavior: 'smooth',
      });
    }
  }, [currentIndex, members.length]);

  // 인디케이터 클릭 핸들러
  const handleIndicatorClick = (index) => {
    if (swiperRef.current) {
      swiperRef.current.slideTo(index);
    }
  };

  if (members.length === 0) {
    return (
      <div className="flex items-center justify-center h-[calc(100vh-200px)]">
        <p className="text-gray-400">멤버 정보가 없습니다</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-[calc(100dvh-120px)] overflow-hidden overscroll-none touch-none">
      {/* 상단 썸네일 인디케이터 */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: 'easeOut' }}
        className="bg-white shadow-sm"
      >
        <div
          ref={indicatorRef}
          className="flex gap-3 px-4 py-4 overflow-x-auto scrollbar-hide"
          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
        >
          {members.map((member, index) => {
            const isSelected = index === currentIndex;
            const isFormer = member.is_former;

            return (
              <button
                key={member.id}
                onClick={() => handleIndicatorClick(index)}
                className={`flex-shrink-0 w-[52px] h-[52px] rounded-full p-[2px] transition-all duration-200
                  ${
                    isSelected
                      ? 'ring-[2.5px] ring-primary shadow-[0_0_8px_rgba(var(--primary-rgb),0.35)]'
                      : 'ring-[1.5px] ring-gray-300'
                  }`}
              >
                <div
                  className={`w-full h-full rounded-full overflow-hidden bg-gray-200
                    ${isFormer ? 'grayscale' : ''}`}
                >
                  {member.image_url ? (
                    <img
                      src={member.image_url}
                      alt={member.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center bg-gray-300 text-white font-bold">
                      {member.name[0]}
                    </div>
                  )}
                </div>
              </button>
            );
          })}
        </div>
      </motion.div>

      {/* 메인 카드 영역 */}
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2, ease: 'easeOut' }}
        className="flex-1 overflow-visible"
      >
        <Swiper
          onSwiper={(swiper) => {
            swiperRef.current = swiper;
          }}
          onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
          slidesPerView={1.12}
          centeredSlides={true}
          spaceBetween={0}
          className="h-full !overflow-visible [&>.swiper-wrapper]:!overflow-visible"
          style={{ padding: '8px 0' }}
        >
          {members.map((member) => {
            const isFormer = member.is_former;
            const age = calculateAge(member.birth_date);

            return (
              <SwiperSlide
                key={member.id}
                className="!flex items-center justify-center"
              >
                {({ isActive }) => (
                  <div
                    className={`relative w-full h-full max-h-[calc(100%-16px)] rounded-3xl overflow-hidden shadow-xl
                      transition-transform duration-300
                      ${isActive ? 'scale-100' : 'scale-[0.92]'}`}
                  >
                    {/* 배경 이미지 */}
                    {member.image_url ? (
                      <img
                        src={member.image_url}
                        alt={member.name}
                        className={`absolute inset-0 w-full h-full object-cover
                          ${isFormer ? 'grayscale' : ''}`}
                      />
                    ) : (
                      <div className="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400" />
                    )}

                    {/* 하단 그라데이션 오버레이 */}
                    <div className="absolute inset-x-0 bottom-0 h-[220px] bg-gradient-to-t from-black/80 via-black/30 to-transparent" />

                    {/* 전 멤버 라벨 */}
                    {isFormer && (
                      <div className="absolute top-4 right-4 px-3 py-1.5 bg-black/60 rounded-full">
                        <span className="text-white/70 text-xs font-medium">
                          전 멤버
                        </span>
                      </div>
                    )}

                    {/* 멤버 정보 */}
                    <div className="absolute inset-x-0 bottom-0 p-6">
                      {/* 이름 */}
                      <h2 className="text-[32px] font-bold text-white drop-shadow-lg">
                        {member.name}
                      </h2>

                      {/* 생일 정보 */}
                      {member.birth_date && (
                        <div className="flex items-center gap-1.5 mt-1.5 text-white/80">
                          <Calendar size={16} className="text-white/70" />
                          <span className="text-sm">
                            {member.birth_date
                              ?.slice(0, 10)
                              .replaceAll('-', '.')}
                          </span>
                          {age && (
                            <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-lg text-xs text-white font-medium">
                              {age}세
                            </span>
                          )}
                        </div>
                      )}

                      {/* 인스타그램 버튼 */}
                      {!isFormer && member.instagram && (
                        <a
                          href={member.instagram}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-2 mt-4 px-4 py-2.5
                            bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737]
                            rounded-full shadow-lg shadow-[#E1306C]/40
                            active:scale-95 transition-transform"
                        >
                          <Instagram size={18} className="text-white" />
                          <span className="text-white text-sm font-semibold">
                            Instagram
                          </span>
                        </a>
                      )}
                    </div>
                  </div>
                )}
              </SwiperSlide>
            );
          })}
        </Swiper>
      </motion.div>
    </div>
  );
}

export default MobileMembers;