import { useState, useEffect, useCallback, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Play,
  Calendar,
  Music2,
  Clock,
  X,
  Download,
  ChevronDown,
  ChevronUp,
  FileText,
  ChevronRight,
  Info,
  Users,
  Tag,
} from 'lucide-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Virtual } from 'swiper/modules';
import 'swiper/css';
import { getAlbumByName } from '@/api/albums';
import { formatDate, calculateTotalDuration } from '@/utils';
import { LightboxIndicator } from '@/components/common';

/**
 * Mobile 앨범 상세 페이지
 */
function MobileAlbumDetail() {
  const { name } = useParams();
  const navigate = useNavigate();
  const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, showNav: true, teasers: null, photos: null });
  const [showAllTracks, setShowAllTracks] = useState(false);
  const [showDescriptionModal, setShowDescriptionModal] = useState(false);
  const [showPhotoInfo, setShowPhotoInfo] = useState(false);
  const swiperRef = useRef(null);

  // 앨범 데이터 로드
  const { data: album, isLoading: loading } = useQuery({
    queryKey: ['album', name],
    queryFn: () => getAlbumByName(name),
    enabled: !!name,
  });

  // 라이트박스 열기
  const openLightbox = useCallback((images, index, options = {}) => {
    setLightbox({
      open: true,
      images,
      index,
      showNav: options.showNav !== false,
      teasers: options.teasers,
      photos: options.photos || null,
    });
    window.history.pushState({ lightbox: true }, '');
  }, []);

  // 앨범 소개 열기
  const openDescriptionModal = useCallback(() => {
    setShowDescriptionModal(true);
    window.history.pushState({ description: true }, '');
  }, []);

  // 사진 정보 바텀시트 열기
  const openPhotoInfo = useCallback(() => {
    setShowPhotoInfo(true);
    window.history.pushState({ photoInfo: true }, '');
  }, []);

  // 뒤로가기 처리
  useEffect(() => {
    const handlePopState = () => {
      if (showPhotoInfo) {
        setShowPhotoInfo(false);
      } else if (showDescriptionModal) {
        setShowDescriptionModal(false);
      } else if (lightbox.open) {
        setLightbox((prev) => ({ ...prev, open: false }));
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [showPhotoInfo, showDescriptionModal, lightbox.open]);

  // 이미지 다운로드
  const downloadImage = useCallback(async () => {
    const imageUrl = lightbox.images[lightbox.index];
    if (!imageUrl) return;

    try {
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `fromis9_photo_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('다운로드 오류:', error);
    }
  }, [lightbox.images, lightbox.index]);

  // 라이트박스/모달 body 스크롤 방지
  useEffect(() => {
    if (lightbox.open || showDescriptionModal) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [lightbox.open, showDescriptionModal]);

  // 총 재생 시간 계산
  const totalDuration = calculateTotalDuration(album?.tracks);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!album) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500">앨범을 찾을 수 없습니다</p>
      </div>
    );
  }

  // 컨셉 정보를 포함한 사진 배열 생성
  const allPhotosWithInfo = [];
  if (album.conceptPhotos) {
    Object.entries(album.conceptPhotos).forEach(([concept, conceptPhotos]) => {
      conceptPhotos.forEach((p) =>
        allPhotosWithInfo.push({
          ...p,
          originalUrl: p.original_url,
          mediumUrl: p.medium_url,
          thumbUrl: p.thumb_url,
          title: concept,
          members: p.members || '',
        })
      );
    });
  }
  const previewCount = 6;
  const previewPhotos = allPhotosWithInfo.slice(0, previewCount);
  const displayTracks = showAllTracks ? album.tracks : album.tracks?.slice(0, 5);

  return (
    <>
      <div>
        {/* 앨범 히어로 섹션 */}
        <div className="relative">
          {/* 배경 블러 이미지 */}
          <div className="absolute inset-0 overflow-hidden">
            <img src={album.cover_medium_url} alt="" className="w-full h-full object-cover blur-2xl scale-110 opacity-30" />
            <div className="absolute inset-0 bg-gradient-to-b from-white/60 via-white/80 to-white" />
          </div>

          {/* 콘텐츠 */}
          <div className="relative px-5 pt-4 pb-5">
            <div className="flex flex-col items-center">
              {/* 앨범 커버 */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="w-44 h-44 rounded-2xl overflow-hidden shadow-xl mb-4"
                onClick={() => openLightbox([album.cover_original_url || album.cover_medium_url], 0, { showNav: false })}
              >
                <img src={album.cover_medium_url} alt={album.title} className="w-full h-full object-cover" />
              </motion.div>

              {/* 앨범 정보 */}
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
                className="text-center"
              >
                <span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-2">
                  {album.album_type}
                </span>
                <h1 className="text-2xl font-bold mb-2">{album.title}</h1>

                {/* 메타 정보 */}
                <div className="flex items-center justify-center gap-4 text-sm text-gray-500">
                  <div className="flex items-center gap-1">
                    <Calendar size={14} />
                    <span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Music2 size={14} />
                    <span>{album.tracks?.length || 0}곡</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock size={14} />
                    <span>{totalDuration}</span>
                  </div>
                </div>

                {/* 앨범 소개 버튼 */}
                {album.description && (
                  <button
                    onClick={openDescriptionModal}
                    className="mt-3 flex items-center gap-1.5 mx-auto px-3 py-1.5 text-xs text-gray-500 bg-white/80 rounded-full shadow-sm"
                  >
                    <FileText size={12} />
                    앨범 소개
                  </button>
                )}
              </motion.div>
            </div>
          </div>
        </div>

        {/* 티저 이미지 */}
        {album.teasers && album.teasers.length > 0 && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="px-4 py-4 border-b border-gray-100">
            <p className="text-sm font-semibold mb-3">티저 이미지</p>
            <div className="flex gap-3 overflow-x-auto pb-1 -mx-4 px-4 scrollbar-hide">
              {album.teasers.map((teaser, index) => (
                <div
                  key={index}
                  onClick={() =>
                    openLightbox(
                      album.teasers.map((t) => (t.media_type === 'video' ? t.video_url || t.original_url : t.original_url)),
                      index,
                      { teasers: album.teasers, showNav: true }
                    )
                  }
                  className="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-2xl overflow-hidden relative shadow-sm"
                >
                  <img
                    src={teaser.thumb_url || teaser.original_url}
                    alt={`Teaser ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                  {teaser.media_type === 'video' && (
                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                      <div className="w-8 h-8 bg-white/90 rounded-full flex items-center justify-center">
                        <Play size={14} fill="currentColor" className="ml-0.5 text-gray-800" />
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </motion.div>
        )}

        {/* 수록곡 */}
        {album.tracks && album.tracks.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="px-4 py-4 border-b border-gray-100"
          >
            <p className="text-sm font-semibold mb-3">수록곡</p>
            <div className="space-y-1">
              {displayTracks?.map((track) => (
                <div
                  key={track.id}
                  onClick={() =>
                    navigate(`/album/${encodeURIComponent(album.title)}/track/${encodeURIComponent(track.title)}`)
                  }
                  className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer"
                >
                  <span className="w-6 text-center text-sm text-gray-400 tabular-nums">
                    {String(track.track_number).padStart(2, '0')}
                  </span>
                  <div className="flex-1 min-w-0 flex items-center gap-2">
                    <p className={`text-sm font-medium truncate ${track.is_title_track ? 'text-primary' : 'text-gray-800'}`}>
                      {track.title}
                    </p>
                    {track.is_title_track === 1 && (
                      <span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded flex-shrink-0">
                        TITLE
                      </span>
                    )}
                  </div>
                  <span className="text-xs text-gray-400 tabular-nums">{track.duration || '-'}</span>
                </div>
              ))}
            </div>
            {/* 더보기/접기 버튼 */}
            {album.tracks.length > 5 && (
              <button
                onClick={() => setShowAllTracks(!showAllTracks)}
                className="w-full mt-2 py-2 text-sm text-gray-500 flex items-center justify-center gap-1"
              >
                {showAllTracks ? '접기' : `${album.tracks.length - 5}곡 더보기`}
                {showAllTracks ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
              </button>
            )}
          </motion.div>
        )}

        {/* 컨셉 포토 */}
        {previewPhotos.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="px-4 py-4"
          >
            <p className="text-sm font-semibold mb-3">컨셉 포토</p>
            <div className="grid grid-cols-3 gap-2">
              {previewPhotos.map((photo, idx) => (
                <div
                  key={photo.id}
                  onClick={() =>
                    openLightbox(
                      previewPhotos.map((p) => p.originalUrl),
                      idx,
                      { showNav: true, photos: previewPhotos }
                    )
                  }
                  className="aspect-square bg-gray-100 rounded-xl overflow-hidden shadow-sm"
                >
                  <img
                    src={photo.thumbUrl || photo.mediumUrl}
                    alt={`컨셉 포토 ${idx + 1}`}
                    loading="lazy"
                    className="w-full h-full object-cover"
                  />
                </div>
              ))}
            </div>
            {/* 전체보기 버튼 */}
            <button
              onClick={() => navigate(`/album/${name}/gallery`)}
              className="w-full mt-3 py-3 text-sm text-primary font-medium bg-primary/5 rounded-xl flex items-center justify-center gap-1"
            >
              전체 {allPhotosWithInfo.length}장 보기
              <ChevronRight size={16} />
            </button>
          </motion.div>
        )}
      </div>

      {/* 앨범 소개 다이얼로그 */}
      <AnimatePresence>
        {showDescriptionModal && album?.description && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/60 z-[60] flex items-end justify-center"
            onClick={() => window.history.back()}
          >
            <motion.div
              initial={{ y: '100%' }}
              animate={{ y: 0 }}
              exit={{ y: '100%' }}
              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
              drag="y"
              dragConstraints={{ top: 0, bottom: 0 }}
              dragElastic={{ top: 0, bottom: 0.5 }}
              onDragEnd={(_, info) => {
                if (info.offset.y > 100 || info.velocity.y > 300) {
                  window.history.back();
                }
              }}
              className="bg-white rounded-t-3xl w-full max-h-[80vh] overflow-hidden"
              onClick={(e) => e.stopPropagation()}
            >
              {/* 드래그 핸들 */}
              <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
                <div className="w-10 h-1 bg-gray-300 rounded-full" />
              </div>
              {/* 헤더 */}
              <div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
                <h3 className="text-lg font-bold">앨범 소개</h3>
                <button onClick={() => window.history.back()} className="p-1.5">
                  <X size={20} className="text-gray-500" />
                </button>
              </div>
              {/* 내용 */}
              <div className="px-5 py-4 overflow-y-auto max-h-[60vh]">
                <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-line text-justify">{album.description}</p>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 라이트박스 - Swiper ViewPager 스타일 */}
      <AnimatePresence>
        {lightbox.open && (() => {
          const currentPhoto = lightbox.photos?.[lightbox.index];
          const concept = currentPhoto?.title;
          const hasValidConcept = concept && concept.trim() && concept !== 'Default';
          const members = currentPhoto?.members;
          const hasMembers = members && String(members).trim();
          const hasPhotoInfo = hasValidConcept || hasMembers;

          return (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black z-[60] flex flex-col"
            >
              {/* 상단 헤더 */}
              <div className="absolute top-0 left-0 right-0 flex items-center px-4 py-3 z-20">
                <div className="flex-1 flex justify-start">
                  <button onClick={() => window.history.back()} className="text-white/80 p-1">
                    <X size={24} />
                  </button>
                </div>
                {lightbox.showNav && lightbox.images.length > 1 && (
                  <span className="text-white/70 text-sm tabular-nums">
                    {lightbox.index + 1} / {lightbox.images.length}
                  </span>
                )}
                <div className="flex-1 flex justify-end items-center gap-2">
                  {hasPhotoInfo && (
                    <button onClick={openPhotoInfo} className="text-white/80 p-1">
                      <Info size={22} />
                    </button>
                  )}
                  <button onClick={downloadImage} className="text-white/80 p-1">
                    <Download size={22} />
                  </button>
                </div>
              </div>

              {/* Swiper */}
              <Swiper
                modules={[Virtual]}
                virtual
                initialSlide={lightbox.index}
                onSwiper={(swiper) => {
                  swiperRef.current = swiper;
                }}
                onSlideChange={(swiper) => setLightbox((prev) => ({ ...prev, index: swiper.activeIndex }))}
                className="w-full h-full"
                spaceBetween={0}
                slidesPerView={1}
                resistance={true}
                resistanceRatio={0.5}
              >
                {lightbox.images.map((url, index) => (
                  <SwiperSlide key={index} virtualIndex={index}>
                    <div className="w-full h-full flex items-center justify-center">
                      {lightbox.teasers?.[index]?.media_type === 'video' ? (
                        <video
                          src={url}
                          className="max-w-full max-h-full object-contain"
                          controls
                          autoPlay={index === lightbox.index}
                        />
                      ) : (
                        <img
                          src={url}
                          alt=""
                          className="max-w-full max-h-full object-contain"
                          loading={Math.abs(index - lightbox.index) <= 2 ? 'eager' : 'lazy'}
                        />
                      )}
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>

              {/* 모바일용 인디케이터 */}
              {lightbox.showNav && lightbox.images.length > 1 && (
                <LightboxIndicator
                  count={lightbox.images.length}
                  currentIndex={lightbox.index}
                  goToIndex={(i) => swiperRef.current?.slideTo(i)}
                  width={120}
                />
              )}

              {/* 사진 정보 바텀시트 */}
              <AnimatePresence>
                {showPhotoInfo && hasPhotoInfo && (
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="absolute inset-0 bg-black/60 z-30"
                    onClick={() => window.history.back()}
                  >
                    <motion.div
                      initial={{ y: '100%' }}
                      animate={{ y: 0 }}
                      exit={{ y: '100%' }}
                      transition={{ type: 'spring', damping: 25, stiffness: 300 }}
                      drag="y"
                      dragConstraints={{ top: 0, bottom: 0 }}
                      dragElastic={{ top: 0, bottom: 0.5 }}
                      onDragEnd={(_, info) => {
                        if (info.offset.y > 100 || info.velocity.y > 300) {
                          window.history.back();
                        }
                      }}
                      className="absolute bottom-0 left-0 right-0 bg-zinc-900 rounded-t-3xl"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {/* 드래그 핸들 */}
                      <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
                        <div className="w-10 h-1 bg-zinc-600 rounded-full" />
                      </div>

                      {/* 정보 내용 */}
                      <div className="px-5 pb-8 space-y-4">
                        <h3 className="text-white font-semibold text-lg">사진 정보</h3>

                        {hasMembers && (
                          <div className="flex items-start gap-3">
                            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
                              <Users size={16} className="text-primary" />
                            </div>
                            <div>
                              <p className="text-zinc-400 text-xs mb-1">멤버</p>
                              <p className="text-white">{members}</p>
                            </div>
                          </div>
                        )}

                        {hasValidConcept && (
                          <div className="flex items-start gap-3">
                            <div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0">
                              <Tag size={16} className="text-zinc-400" />
                            </div>
                            <div>
                              <p className="text-zinc-400 text-xs mb-1">컨셉</p>
                              <p className="text-white">{concept}</p>
                            </div>
                          </div>
                        )}
                      </div>
                    </motion.div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          );
        })()}
      </AnimatePresence>
    </>
  );
}

export default MobileAlbumDetail;