fromis_9/frontend/src/pages/mobile/album/AlbumDetail.jsx

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,
  ChevronDown,
  ChevronUp,
  FileText,
  ChevronRight,
} from 'lucide-react';
import { getAlbumByName } from '@/api';
import { formatDate, calculateTotalDuration } from '@/utils';
import { MobileLightbox } from '@/components/common';

/**
 * Mobile 앨범 상세 페이지
 */
function MobileAlbumDetail() {
  const { name } = useParams();
  const navigate = useNavigate();
  const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, teasers: null, photos: null });
  const [showAllTracks, setShowAllTracks] = useState(false);
  const [showDescriptionModal, setShowDescriptionModal] = useState(false);
  const descriptionHistoryRef = useRef(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 || null,
      photos: options.photos || null,
    });
    window.history.pushState({ lightbox: true }, '');
  }, []);

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

  // 앨범 소개 닫기
  const closeDescriptionModal = useCallback(() => {
    setShowDescriptionModal(false);
    if (descriptionHistoryRef.current) {
      descriptionHistoryRef.current = false;
      window.history.back();
    }
  }, []);

  // 뒤로가기 처리 (앨범 소개만 - 라이트박스는 MobileLightbox에서 처리)
  useEffect(() => {
    const handlePopState = () => {
      if (showDescriptionModal) {
        descriptionHistoryRef.current = false;
        setShowDescriptionModal(false);
      }
    };

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

  // 앨범 소개 모달 body 스크롤 방지 (라이트박스는 MobileLightbox에서 처리)
  useEffect(() => {
    if (showDescriptionModal) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [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,
          concept: concept !== 'Default' ? concept : null,
          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)}
              >
                <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, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.15 }}
            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 }
                    )
                  }
                  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 }}
            transition={{ delay: 0.2 }}
            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.25 }}
            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,
                      { 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-center justify-center p-6"
            onClick={closeDescriptionModal}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
              className="bg-white rounded-2xl w-full max-h-[70vh] overflow-hidden"
              onClick={(e) => e.stopPropagation()}
            >
              {/* 헤더 */}
              <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 className="text-lg font-bold">앨범 소개</h3>
                <button onClick={closeDescriptionModal} className="p-1.5">
                  <X size={20} className="text-gray-500" />
                </button>
              </div>
              {/* 내용 */}
              <div className="px-5 py-4 overflow-y-auto max-h-[55vh]">
                <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-line text-justify">{album.description}</p>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 라이트박스 */}
      <MobileLightbox
        images={lightbox.images}
        photos={lightbox.photos}
        teasers={lightbox.teasers}
        currentIndex={lightbox.index}
        isOpen={lightbox.open}
        onClose={() => setLightbox((prev) => ({ ...prev, open: false }))}
        onIndexChange={(index) => setLightbox((prev) => ({ ...prev, index }))}
        showCounter={lightbox.images.length > 1}
        downloadPrefix={`fromis9_${album?.title || 'photo'}`}
      />
    </>
  );
}

export default MobileAlbumDetail;