import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { motion, AnimatePresence } from 'framer-motion';
import { Calendar, Music2, Clock, X, MoreVertical, FileText } from 'lucide-react';
import { getAlbumByName } from '@/api';
import { formatDate, calculateTotalDuration } from '@/utils';
import { Lightbox } from '@/components/common';

/**
 * PC 앨범 상세 페이지
 */
function PCAlbumDetail() {
  const { name } = useParams();
  const navigate = useNavigate();
  const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, teasers: null, photos: null });
  const [showDescriptionModal, setShowDescriptionModal] = useState(false);
  const [showMenu, setShowMenu] = useState(false);

  // 앨범 데이터 로드
  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, teasers: options.teasers, photos: options.photos || null });
    window.history.pushState({ lightbox: true }, '');
  }, []);

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

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

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

  // 타이틀곡 찾기
  const getTitleTrack = () => {
    if (!album?.tracks) return null;
    return album.tracks.find((t) => t.is_title_track);
  };

  if (loading) {
    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="py-16 flex justify-center items-center min-h-[60vh]"
      >
        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent" />
      </motion.div>
    );
  }

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

  return (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.3 }}
        className="py-16"
      >
        <div className="max-w-7xl mx-auto px-6">
          {/* 브레드크럼 네비게이션 */}
          <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
            <button onClick={() => navigate('/album')} className="hover:text-primary transition-colors">
              앨범
            </button>
            <span>/</span>
            <span className="text-gray-700">{album?.title}</span>
          </div>

          {/* 앨범 정보 헤더 */}
          <div className="flex gap-8 mb-10">
            {/* 앨범 커버 */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.4 }}
              className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
              onClick={() => openLightbox([album.cover_original_url || album.cover_medium_url], 0)}
            >
              <img
                src={album.cover_medium_url || album.cover_original_url}
                alt={album.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </motion.div>

            {/* 앨범 정보 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1, duration: 0.4 }}
              className="flex-1 flex flex-col"
            >
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
                    {album.album_type}
                  </span>
                  {/* 메뉴 버튼 */}
                  {album.description && (
                    <div className="relative">
                      <button
                        onClick={() => setShowMenu(!showMenu)}
                        className="p-2 hover:bg-gray-100 rounded-full transition-colors relative z-20"
                      >
                        <MoreVertical size={20} className="text-gray-500" />
                      </button>
                      <AnimatePresence>
                        {showMenu && (
                          <>
                            <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
                            <motion.div
                              initial={{ opacity: 0, scale: 0.95, y: -5 }}
                              animate={{ opacity: 1, scale: 1, y: 0 }}
                              exit={{ opacity: 0, scale: 0.95, y: -5 }}
                              transition={{ duration: 0.15 }}
                              className="absolute right-0 top-full mt-1 bg-white rounded-xl shadow-lg border border-gray-100 py-1 z-20 min-w-[140px]"
                            >
                              <button
                                onClick={() => {
                                  setShowDescriptionModal(true);
                                  window.history.pushState({ description: true }, '');
                                  setShowMenu(false);
                                }}
                                className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                              >
                                <FileText size={16} />
                                앨범 소개
                              </button>
                            </motion.div>
                          </>
                        )}
                      </AnimatePresence>
                    </div>
                  )}
                </div>
                <h1 className="text-4xl font-bold mb-3">{album.title}</h1>

                <div className="flex items-center gap-6 text-gray-500 mb-3">
                  <div className="flex items-center gap-2">
                    <Calendar size={18} />
                    <span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Music2 size={18} />
                    <span>{album.tracks?.length || 0}곡</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Clock size={18} />
                    <span>{totalDuration}</span>
                  </div>
                </div>
              </div>

              {/* 앨범 티저 이미지/영상 */}
              {album.teasers && album.teasers.length > 0 && (
                <div className="mt-auto">
                  <p className="text-xs text-gray-400 mb-2">티저 이미지</p>
                  <div className="flex gap-2">
                    {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 }
                          )
                        }
                        className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-300 ease-out hover:scale-105 hover:shadow-xl hover:z-10 relative"
                      >
                        <img
                          src={teaser.thumb_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">
                              <div className="w-0 h-0 border-l-[10px] border-l-gray-800 border-y-[6px] border-y-transparent ml-1" />
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </motion.div>
          </div>

          {/* 수록곡 리스트 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.4 }}
          >
            <h2 className="text-xl font-bold mb-4">수록곡</h2>
            <div className="bg-white rounded-2xl shadow-md overflow-hidden">
              {album.tracks?.map((track, index) => (
                <div
                  key={track.id}
                  onClick={() =>
                    navigate(`/album/${encodeURIComponent(album.title)}/track/${encodeURIComponent(track.title)}`)
                  }
                  className={`group flex items-center gap-4 p-4 hover:bg-primary/5 transition-all duration-200 cursor-pointer ${
                    index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
                  }`}
                >
                  {/* 트랙 번호 */}
                  <div className="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary/10 transition-colors">
                    <span className="text-gray-500 group-hover:text-primary transition-colors">
                      {String(track.track_number).padStart(2, '0')}
                    </span>
                  </div>

                  {/* 트랙 정보 */}
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold group-hover:text-primary transition-colors">{track.title}</h3>
                      {track.is_title_track === 1 && (
                        <span className="px-2 py-0.5 bg-primary text-white text-xs font-medium rounded-full">
                          TITLE
                        </span>
                      )}
                    </div>
                  </div>

                  {/* 재생 시간 */}
                  <div className="text-gray-400 tabular-nums text-sm">{track.duration || '-'}</div>
                </div>
              ))}
            </div>
          </motion.div>

          {/* 컨셉 포토 섹션 */}
          {album.conceptPhotos && Object.keys(album.conceptPhotos).length > 0 && (
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.4 }}
              className="mt-10"
            >
              {(() => {
                // 컨셉 정보를 포함한 사진 배열 생성
                const allPhotosWithInfo = [];
                Object.entries(album.conceptPhotos).forEach(([concept, conceptPhotos]) => {
                  conceptPhotos.forEach((p) =>
                    allPhotosWithInfo.push({
                      ...p,
                      originalUrl: p.original_url,
                      mediumUrl: p.medium_url,
                      title: concept,
                      members: p.members || '',
                    })
                  );
                });
                const previewCount = 4;
                const previewPhotos = allPhotosWithInfo.slice(0, previewCount);
                const totalCount = allPhotosWithInfo.length;

                return (
                  <>
                    <div className="flex items-center justify-between mb-4">
                      <h2 className="text-xl font-bold">컨셉 포토</h2>
                      <button
                        className="text-sm text-primary hover:underline"
                        onClick={() => navigate(`/album/${name}/gallery`)}
                      >
                        전체보기 ({totalCount}장)
                      </button>
                    </div>
                    <div className="grid grid-cols-4 gap-4">
                      {previewPhotos.map((photo, idx) => (
                        <div
                          key={photo.id}
                          onClick={() =>
                            openLightbox(
                              previewPhotos.map((p) => p.originalUrl),
                              idx,
                              { photos: previewPhotos }
                            )
                          }
                          className="aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer transition-all duration-300 ease-out hover:scale-[1.03] hover:shadow-xl hover:z-10"
                        >
                          <img
                            src={photo.mediumUrl}
                            alt={`컨셉 포토 ${idx + 1}`}
                            loading="lazy"
                            className="w-full h-full object-cover"
                          />
                        </div>
                      ))}
                    </div>
                  </>
                );
              })()}
            </motion.div>
          )}
        </div>
      </motion.div>

      {/* 라이트박스 */}
      <Lightbox
        images={lightbox.images}
        photos={lightbox.photos}
        teasers={lightbox.teasers}
        currentIndex={lightbox.index}
        isOpen={lightbox.open}
        onClose={() => window.history.back()}
        onIndexChange={(index) => setLightbox((prev) => ({ ...prev, index }))}
        showCounter={lightbox.images.length > 1}
        showDownload
      />

      {/* 앨범 소개 다이얼로그 */}
      <AnimatePresence>
        {showDescriptionModal && album?.description && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
            onClick={() => window.history.back()}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              className="bg-white rounded-2xl shadow-2xl max-w-xl w-full max-h-[80vh] overflow-hidden"
              onClick={(e) => e.stopPropagation()}
            >
              {/* 헤더 */}
              <div className="flex items-center justify-between p-5 border-b border-gray-100">
                <h3 className="text-lg font-bold">앨범 소개</h3>
                <button
                  onClick={() => window.history.back()}
                  className="p-1.5 hover:bg-gray-100 rounded-full transition-colors"
                >
                  <X size={20} className="text-gray-500" />
                </button>
              </div>
              {/* 내용 */}
              <div className="p-6 overflow-y-auto max-h-[60vh]">
                <p className="text-gray-600 leading-relaxed whitespace-pre-line text-justify">{album.description}</p>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

export default PCAlbumDetail;
