fromis_9/frontend/src/pages/pc/AlbumDetail.jsx

import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';

function AlbumDetail() {
    const { name } = useParams();
    const navigate = useNavigate();
    const [album, setAlbum] = useState(null);
    const [loading, setLoading] = useState(true);
    const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
    const [slideDirection, setSlideDirection] = useState(0);
    const [imageLoaded, setImageLoaded] = useState(false);

    // 라이트박스 네비게이션 함수
    const goToPrev = useCallback(() => {
        if (lightbox.images.length <= 1) return;
        setImageLoaded(false);
        setSlideDirection(-1);
        setLightbox(prev => ({
            ...prev,
            index: (prev.index - 1 + prev.images.length) % prev.images.length
        }));
    }, [lightbox.images.length]);

    const goToNext = useCallback(() => {
        if (lightbox.images.length <= 1) return;
        setImageLoaded(false);
        setSlideDirection(1);
        setLightbox(prev => ({
            ...prev,
            index: (prev.index + 1) % prev.images.length
        }));
    }, [lightbox.images.length]);

    const closeLightbox = useCallback(() => {
        setLightbox(prev => ({ ...prev, open: false }));
    }, []);

    // 라이트박스 열릴 때 body 스크롤 숨기기
    useEffect(() => {
        if (lightbox.open) {
            document.documentElement.style.overflow = 'hidden';
            document.body.style.overflow = 'hidden';
        } else {
            document.documentElement.style.overflow = '';
            document.body.style.overflow = '';
        }
        return () => {
            document.documentElement.style.overflow = '';
            document.body.style.overflow = '';
        };
    }, [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]);

    // 키보드 이벤트 핸들러
    useEffect(() => {
        if (!lightbox.open) return;

        const handleKeyDown = (e) => {
            switch (e.key) {
                case 'ArrowLeft':
                    goToPrev();
                    break;
                case 'ArrowRight':
                    goToNext();
                    break;
                case 'Escape':
                    closeLightbox();
                    break;
                default:
                    break;
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [lightbox.open, goToPrev, goToNext, closeLightbox]);

    // 이미지 프리로딩 (이전/다음 이미지)
    useEffect(() => {
        if (!lightbox.open || lightbox.images.length <= 1) return;
        
        const preloadImages = [];
        const prevIdx = (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length;
        const nextIdx = (lightbox.index + 1) % lightbox.images.length;
        
        [prevIdx, nextIdx].forEach(idx => {
            const img = new Image();
            img.src = lightbox.images[idx];
            preloadImages.push(img);
        });
    }, [lightbox.open, lightbox.index, lightbox.images]);

    useEffect(() => {
        fetch(`/api/albums/by-name/${name}`)
            .then(res => res.json())
            .then(data => {
                setAlbum(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('앨범 데이터 로드 오류:', error);
                setLoading(false);
            });
    }, [name]);

    // URL 헬퍼 함수는 더 이상 필요 없음 - API에서 직접 제공

    // 날짜 포맷팅
    const formatDate = (dateStr) => {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
    };

    // 총 재생 시간 계산
    const getTotalDuration = () => {
        if (!album?.tracks) return '';
        let totalSeconds = 0;
        album.tracks.forEach(track => {
            if (track.duration) {
                const parts = track.duration.split(':');
                totalSeconds += parseInt(parts[0]) * 60 + parseInt(parts[1]);
            }
        });
        const mins = Math.floor(totalSeconds / 60);
        const secs = totalSeconds % 60;
        return `${mins}:${String(secs).padStart(2, '0')}`;
    };

    // 뒤로가기
    const handleBack = () => {
        navigate('/album');
    };

    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"></div>
            </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={handleBack}
                        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-2xl"
                    >
                        <img
                            src={album.cover_url}
                            alt={album.title}
                            className="w-full h-full object-cover"
                        />
                    </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>
                            <span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
                                {album.album_type}
                            </span>
                            <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)}</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>{getTotalDuration()}</span>
                                </div>
                            </div>

                            <p className="text-sm text-primary font-medium mb-4">
                                타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
                            </p>
                        </div>

                        {/* 앨범 티저 이미지 */}
                        {album.teasers && album.teasers.length > 0 && (
                            <div className="mt-auto">
                                <p className="text-xs text-gray-400 mb-2">Official Teaser</p>
                                <div className="flex gap-2">
                                    {album.teasers.map((teaser, index) => (
                                        <div 
                                            key={index}
                                        onClick={() => setLightbox({ open: true, images: album.teasers.map(t => t.original_url), index })}
                                            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"
                                        >
                                            <img 
                                                src={teaser.thumb_url}
                                                alt={`Teaser ${index + 1}`}
                                                className="w-full h-full object-cover"
                                            />
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </motion.div>
                </div>

                {/* 2열 그리드: 소개글 + 트랙 리스트 */}
                <div className="grid grid-cols-3 gap-8">
                    {/* 소개글 */}
                    {album.description && (
                        <motion.div
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.2, duration: 0.4 }}
                            className="col-span-1"
                        >
                            <h2 className="text-xl font-bold mb-4">앨범 소개</h2>
                            <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
                                <div className="max-h-[460px] overflow-y-auto p-6">
                                    <p className="text-gray-600 leading-relaxed text-sm whitespace-pre-line text-justify break-all">
                                        {album.description}
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                    )}

                    {/* 트랙 리스트 */}
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.3, duration: 0.4 }}
                        className={album.description ? "col-span-2" : "col-span-3"}
                    >
                        <h2 className="text-xl font-bold mb-4">수록곡</h2>
                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
                            {album.tracks?.map((track, index) => (
                                <div
                                    key={track.id}
                                    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">
                                                    타이틀
                                                </span>
                                            )}
                                        </div>
                                    </div>

                                    {/* 재생 시간 */}
                                    <div className="text-gray-400 tabular-nums text-sm">
                                        {track.duration || '-'}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </motion.div>
                </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"
                >
                    {(() => {
                        // 모든 컨셉 포토를 하나의 배열로 합치고 처음 4개만 표시
                        const allPhotos = Object.values(album.conceptPhotos).flat();
                        const previewPhotos = allPhotos.slice(0, 4);
                        const totalCount = allPhotos.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={() => setLightbox({ open: true, images: [photo.original_url], index: 0 })}
                                            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.medium_url} 
                                                alt={`컨셉 포토 ${idx + 1}`}
                                                className="w-full h-full object-cover"
                                            />
                                        </div>
                                    ))}
                                </div>
                            </>
                        );
                    })()}
                </motion.div>
                )}
            </div>
        </motion.div>

        {/* 라이트박스 모달 */}
        <AnimatePresence>
        {lightbox.open && (
            <motion.div 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2 }}
                className="fixed inset-0 bg-black/95 z-50 overflow-auto"
            >
                {/* 내부 컨테이너 - min-width, min-height 적용 */}
                <div className="min-w-[1200px] min-h-[800px] w-full h-full relative flex items-center justify-center">
                    {/* 상단 버튼들 */}
                    <div className="absolute top-6 right-6 flex gap-3 z-10">
                        {/* 다운로드 버튼 */}
                        <button 
                            className="text-white/70 hover:text-white transition-colors"
                            onClick={(e) => {
                                e.stopPropagation();
                                downloadImage();
                            }}
                        >
                            <Download size={28} />
                        </button>
                        {/* 닫기 버튼 */}
                        <button 
                            className="text-white/70 hover:text-white transition-colors"
                            onClick={closeLightbox}
                        >
                            <X size={32} />
                        </button>
                    </div>

                    {/* 이전 버튼 */}
                    {lightbox.images.length > 1 && (
                        <button 
                            className="absolute left-6 p-2 text-white/70 hover:text-white transition-colors z-10"
                            onClick={(e) => {
                                e.stopPropagation();
                                goToPrev();
                            }}
                        >
                            <ChevronLeft size={48} />
                        </button>
                    )}

                    {/* 로딩 스피너 */}
                    {!imageLoaded && (
                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
                        </div>
                    )}

                    {/* 이미지 */}
                    <div className="flex flex-col items-center mx-24">
                        <motion.img 
                            key={lightbox.index}
                            src={lightbox.images[lightbox.index]}
                            alt="확대 이미지"
                            className={`max-w-[1100px] max-h-[75vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                            onClick={(e) => e.stopPropagation()}
                            onLoad={() => setImageLoaded(true)}
                            initial={{ x: slideDirection * 100 }}
                            animate={{ x: 0 }}
                            transition={{ duration: 0.25, ease: 'easeOut' }}
                        />
                    </div>

                    {/* 다음 버튼 */}
                    {lightbox.images.length > 1 && (
                        <button 
                            className="absolute right-6 p-2 text-white/70 hover:text-white transition-colors z-10"
                            onClick={(e) => {
                                e.stopPropagation();
                                goToNext();
                            }}
                        >
                            <ChevronRight size={48} />
                        </button>
                    )}

                    {/* 인디케이터 */}
                    {lightbox.images.length > 1 && (
                        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-1.5 overflow-x-auto scrollbar-hide" style={{ maxWidth: '1000px' }}>
                            {lightbox.images.map((_, i) => (
                                <button
                                    key={i}
                                    className={`w-2 h-2 rounded-full transition-colors flex-shrink-0 ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setImageLoaded(false);
                                        setLightbox({ ...lightbox, index: i });
                                    }}
                                />
                            ))}
                        </div>
                    )}
                </div>
            </motion.div>
        )}
        </AnimatePresence>
    </>
    );
}

export default AlbumDetail;