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

/**
 * 디자인 미리보기 페이지 - 여러 디자인 옵션 비교
 */
function MembersPreview() {
  const [designType, setDesignType] = useState('card');

  const designs = [
    { id: 'current', label: '현재' },
    { id: 'card', label: '카드 분리' },
    { id: 'grid', label: '그리드' },
    { id: 'sheet', label: '하단 시트' },
  ];

  return (
    <div className="flex flex-col h-[calc(100dvh-56px)] overflow-hidden">
      {/* 디자인 선택 탭 */}
      <div className="flex gap-2 px-4 py-3 bg-white border-b overflow-x-auto">
        {designs.map((d) => (
          <button
            key={d.id}
            onClick={() => setDesignType(d.id)}
            className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all
              ${designType === d.id
                ? 'bg-primary text-white'
                : 'bg-gray-100 text-gray-600'
              }`}
          >
            {d.label}
          </button>
        ))}
      </div>

      {/* 선택된 디자인 렌더링 */}
      <div className="flex-1 overflow-hidden">
        {designType === 'current' && <CurrentDesign />}
        {designType === 'card' && <CardDesign />}
        {designType === 'grid' && <GridDesign />}
        {designType === 'sheet' && <SheetDesign />}
      </div>
    </div>
  );
}

/**
 * 공통 훅 - 멤버 데이터 및 유틸
 */
function useMemberUtils() {
  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;
  };

  return { members, calculateAge };
}

/**
 * 디자인 1: 현재 디자인 (기존 그대로)
 */
function CurrentDesign() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef(null);
  const indicatorRef = useRef(null);
  const { members, calculateAge } = useMemberUtils();

  useEffect(() => {
    if (indicatorRef.current && members.length > 0) {
      const container = indicatorRef.current;
      const itemWidth = 64;
      const containerWidth = container.offsetWidth;
      const targetScroll = 16 + currentIndex * itemWidth + 26 - containerWidth / 2;
      container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
    }
  }, [currentIndex, members.length]);

  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* 썸네일 인디케이터 */}
      <div className="bg-white shadow-sm">
        <div ref={indicatorRef} className="flex gap-3 px-4 py-4 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
          {members.map((member, index) => (
            <button
              key={member.id}
              onClick={() => swiperRef.current?.slideTo(index)}
              className={`flex-shrink-0 w-[52px] h-[52px] rounded-full p-[2px] transition-all duration-200
                ${index === currentIndex ? 'ring-[2.5px] ring-primary' : 'ring-[1.5px] ring-gray-300'}`}
            >
              <div className={`w-full h-full rounded-full overflow-hidden bg-gray-200 ${member.is_former ? '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>
      </div>

      {/* 메인 카드 */}
      <div className="flex-1 overflow-visible">
        <Swiper
          onSwiper={(swiper) => { swiperRef.current = swiper; }}
          onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
          slidesPerView={1.12}
          centeredSlides={true}
          className="h-full !overflow-visible"
          style={{ padding: '8px 0' }}
        >
          {members.map((member) => {
            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 ${member.is_former ? '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" />
                    {member.is_former && (
                      <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">
                          <Cake 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>
                      )}
                      {!member.is_former && 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 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>
      </div>
    </div>
  );
}

/**
 * 디자인 2: 카드 분리형 - 이미지 고정 비율 + 하단 정보 분리
 */
function CardDesign() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef(null);
  const { members, calculateAge } = useMemberUtils();

  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;

  return (
    <div className="h-full bg-gray-50">
      <Swiper
        onSwiper={(swiper) => { swiperRef.current = swiper; }}
        onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
        slidesPerView={1.15}
        centeredSlides={true}
        spaceBetween={12}
        className="h-full py-4"
      >
        {members.map((member) => {
          const age = calculateAge(member.birth_date);
          return (
            <SwiperSlide key={member.id}>
              {({ isActive }) => (
                <motion.div
                  animate={{ scale: isActive ? 1 : 0.95, opacity: isActive ? 1 : 0.7 }}
                  transition={{ duration: 0.2 }}
                  className="h-full flex flex-col bg-white rounded-3xl overflow-hidden shadow-lg"
                >
                  {/* 이미지 영역 - 고정 비율 */}
                  <div className={`relative w-full aspect-[3/4] ${member.is_former ? '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 bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                        <span className="text-6xl text-gray-400 font-bold">{member.name[0]}</span>
                      </div>
                    )}
                    {member.is_former && (
                      <div className="absolute top-3 right-3 px-2.5 py-1 bg-black/50 rounded-full">
                        <span className="text-white/80 text-xs">전 멤버</span>
                      </div>
                    )}
                  </div>

                  {/* 정보 영역 */}
                  <div className="flex-1 p-5 flex flex-col justify-center">
                    <h2 className="text-2xl font-bold text-gray-900">{member.name}</h2>
                    {member.birth_date && (
                      <div className="flex items-center gap-2 mt-2 text-gray-500">
                        <Cake size={16} />
                        <span className="text-sm">{member.birth_date?.slice(0, 10).replaceAll('-', '.')}</span>
                        {age && (
                          <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium">
                            {age}세
                          </span>
                        )}
                      </div>
                    )}
                    {!member.is_former && 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 self-start active:scale-95 transition-transform">
                        <Instagram size={16} className="text-white" />
                        <span className="text-white text-sm font-medium">Instagram</span>
                      </a>
                    )}
                  </div>
                </motion.div>
              )}
            </SwiperSlide>
          );
        })}
      </Swiper>

      {/* 하단 인디케이터 */}
      <div className="absolute bottom-6 left-0 right-0 flex justify-center gap-1.5">
        {members.map((_, index) => (
          <button
            key={index}
            onClick={() => swiperRef.current?.slideTo(index)}
            className={`w-2 h-2 rounded-full transition-all ${
              index === currentIndex ? 'bg-primary w-6' : 'bg-gray-300'
            }`}
          />
        ))}
      </div>
    </div>
  );
}

/**
 * 디자인 3: 그리드 레이아웃 - 2열 그리드 + 선택 시 확장
 */
function GridDesign() {
  const [selectedMember, setSelectedMember] = useState(null);
  const { members, calculateAge } = useMemberUtils();

  // 현재 멤버와 전 멤버 분리
  const currentMembers = useMemo(() => members.filter(m => !m.is_former), [members]);
  const formerMembers = useMemo(() => members.filter(m => m.is_former), [members]);

  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;

  const MemberCard = ({ member }) => (
    <motion.button
      key={member.id}
      whileTap={{ scale: 0.97 }}
      onClick={() => setSelectedMember(member)}
      className={`relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md ${member.is_former ? 'grayscale' : ''}`}
    >
      {(member.image_medium || member.image_url) ? (
        <img src={member.image_medium || member.image_url} alt={member.name} className="w-full h-full object-cover" />
      ) : (
        <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
          <span className="text-4xl text-gray-400 font-bold">{member.name[0]}</span>
        </div>
      )}
      <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/70 to-transparent">
        <p className="text-white font-semibold text-lg">{member.name}</p>
      </div>
    </motion.button>
  );

  return (
    <div className="h-full overflow-y-auto bg-gray-50 p-4">
      {/* 현재 멤버 */}
      <div className="grid grid-cols-2 gap-3">
        {currentMembers.map((member) => (
          <MemberCard key={member.id} member={member} />
        ))}
      </div>

      {/* 전 멤버 섹션 */}
      {formerMembers.length > 0 && (
        <>
          <div className="flex items-center gap-3 my-6">
            <div className="flex-1 h-px bg-gray-300" />
            <span className="text-gray-400 text-sm font-medium">전 멤버</span>
            <div className="flex-1 h-px bg-gray-300" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            {formerMembers.map((member) => (
              <MemberCard key={member.id} member={member} />
            ))}
          </div>
        </>
      )}

      {/* 선택된 멤버 모달 */}
      {selectedMember && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 bg-black/60 flex items-end"
          onClick={() => setSelectedMember(null)}
        >
          <motion.div
            initial={{ y: '100%' }}
            animate={{ y: 0 }}
            exit={{ y: '100%' }}
            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
            className="w-full bg-white rounded-t-3xl overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto mt-3" />
            <div className="p-5">
              <div className="flex gap-4">
                <div className={`w-24 h-32 rounded-xl overflow-hidden flex-shrink-0 ${selectedMember.is_former ? 'grayscale' : ''}`}>
                  {(selectedMember.image_thumb || selectedMember.image_url) ? (
                    <img src={selectedMember.image_thumb || selectedMember.image_url} alt={selectedMember.name} className="w-full h-full object-cover" />
                  ) : (
                    <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl font-bold text-gray-400">
                      {selectedMember.name[0]}
                    </div>
                  )}
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold">{selectedMember.name}</h3>
                  {selectedMember.birth_date && (
                    <p className="text-gray-500 text-sm mt-1">
                      {selectedMember.birth_date?.slice(0, 10).replaceAll('-', '.')}
                      {calculateAge(selectedMember.birth_date) && (
                        <span className="ml-2 text-primary">({calculateAge(selectedMember.birth_date)}세)</span>
                      )}
                    </p>
                  )}
                  {selectedMember.is_former && (
                    <span className="inline-block mt-2 px-2 py-0.5 bg-gray-200 text-gray-600 text-xs rounded">전 멤버</span>
                  )}
                  {!selectedMember.is_former && selectedMember.instagram && (
                    <a href={selectedMember.instagram} target="_blank" rel="noopener noreferrer"
                      className="inline-flex items-center gap-2 mt-3 px-3 py-2 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-full">
                      <Instagram size={14} className="text-white" />
                      <span className="text-white text-xs font-medium">Instagram</span>
                    </a>
                  )}
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </div>
  );
}

/**
 * 디자인 4: Full-bleed 이미지 + 하단 시트
 */
function SheetDesign() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef(null);
  const { members, calculateAge } = useMemberUtils();

  if (members.length === 0) return <div className="flex items-center justify-center h-full"><p className="text-gray-400">로딩 중...</p></div>;

  const currentMember = members[currentIndex];
  const age = calculateAge(currentMember?.birth_date);

  return (
    <div className="relative h-full bg-black">
      {/* 전체 화면 이미지 슬라이더 */}
      <Swiper
        onSwiper={(swiper) => { swiperRef.current = swiper; }}
        onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
        slidesPerView={1}
        className="h-[65%]"
      >
        {members.map((member) => (
          <SwiperSlide key={member.id}>
            <div className={`w-full h-full ${member.is_former ? 'grayscale' : ''}`}>
              {member.image_url ? (
                <img src={member.image_url} alt={member.name} className="w-full h-full object-cover object-top" />
              ) : (
                <div className="w-full h-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
                  <span className="text-8xl text-gray-600 font-bold">{member.name[0]}</span>
                </div>
              )}
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* 하단 정보 시트 */}
      <div className="absolute bottom-0 left-0 right-0 h-[40%] bg-white rounded-t-[32px] shadow-2xl">
        <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto mt-3" />

        {currentMember && (
          <div className="px-6 pt-4 pb-8">
            <div className="flex items-start justify-between">
              <div>
                <h2 className="text-3xl font-bold text-gray-900">{currentMember.name}</h2>
                {currentMember.birth_date && (
                  <div className="flex items-center gap-2 mt-2 text-gray-500">
                    <Cake size={16} />
                    <span>{currentMember.birth_date?.slice(0, 10).replaceAll('-', '.')}</span>
                    {age && (
                      <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-sm font-medium">
                        {age}세
                      </span>
                    )}
                  </div>
                )}
              </div>
              {currentMember.is_former && (
                <span className="px-3 py-1 bg-gray-100 text-gray-500 text-sm rounded-full">전 멤버</span>
              )}
            </div>

            {!currentMember.is_former && currentMember.instagram && (
              <a href={currentMember.instagram} target="_blank" rel="noopener noreferrer"
                className="flex items-center justify-between mt-6 px-5 py-4 bg-gradient-to-r from-[#833AB4] via-[#E1306C] to-[#F77737] rounded-2xl active:scale-[0.98] transition-transform">
                <div className="flex items-center gap-3">
                  <Instagram size={22} className="text-white" />
                  <span className="text-white font-semibold">Instagram 방문하기</span>
                </div>
                <ChevronRight size={20} className="text-white/80" />
              </a>
            )}

            {/* 멤버 선택 인디케이터 */}
            <div className="flex justify-center gap-2 mt-6">
              {members.map((member, index) => (
                <button
                  key={member.id}
                  onClick={() => swiperRef.current?.slideTo(index)}
                  className={`w-10 h-10 rounded-full overflow-hidden border-2 transition-all ${
                    index === currentIndex ? 'border-primary scale-110' : 'border-transparent opacity-50'
                  }`}
                >
                  {member.image_url ? (
                    <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
                  ) : (
                    <div className="w-full h-full bg-gray-200 flex items-center justify-center text-xs font-bold">
                      {member.name[0]}
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default MembersPreview;
