import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Play, Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download, ChevronDown, ChevronUp, FileText } from 'lucide-react';
import { getAlbumByName } from '../../../api/public/albums';
import { formatDate } from '../../../utils/date';

// 모바일 앨범 상세 페이지
function MobileAlbumDetail() {
    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, showNav: true });
    const [imageLoaded, setImageLoaded] = useState(false);
    const [showAllTracks, setShowAllTracks] = useState(false);
    const [showDescriptionModal, setShowDescriptionModal] = useState(false);

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

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

    // 이미지 다운로드
    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]);

    useEffect(() => {
        getAlbumByName(name)
            .then(data => {
                setAlbum(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('앨범 로드 오류:', error);
                setLoading(false);
            });
    }, [name]);

    // 총 재생 시간 계산
    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')}`;
    };

    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 allPhotos = album.conceptPhotos ? Object.values(album.conceptPhotos).flat() : [];
    const displayTracks = showAllTracks ? album.tracks : album.tracks?.slice(0, 5);

    return (
        <>
            <div className="pb-6">
                {/* 앨범 히어로 섹션 - 커버 이미지 배경 */}
                <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={() => setLightbox({ 
                                    open: true, 
                                    images: [album.cover_original_url || album.cover_medium_url], 
                                    index: 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>{getTotalDuration()}</span>
                                    </div>
                                </div>

                                {/* 앨범 소개 버튼 */}
                                {album.description && (
                                    <button
                                        onClick={() => setShowDescriptionModal(true)}
                                        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={() => setLightbox({ 
                                        open: true, 
                                        images: album.teasers.map(t => 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"
                                >
                                    {teaser.media_type === 'video' ? (
                                        <>
                                            <video 
                                                src={teaser.original_url}
                                                className="w-full h-full object-cover"
                                                muted
                                            />
                                            <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>
                                        </>
                                    ) : (
                                        <img 
                                            src={teaser.thumb_url || teaser.original_url}
                                            alt={`Teaser ${index + 1}`}
                                            className="w-full h-full object-cover"
                                        />
                                    )}
                                </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}
                                    className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 transition-colors"
                                >
                                    <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>
                )}

                {/* 컨셉 포토 */}
                {allPhotos.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">
                            {allPhotos.slice(0, 6).map((photo, idx) => (
                                <div 
                                    key={photo.id}
                                    onClick={() => setLightbox({ 
                                        open: true, 
                                        images: [photo.original_url], 
                                        index: 0,
                                        showNav: false
                                    })}
                                    className="aspect-square bg-gray-100 rounded-xl overflow-hidden shadow-sm"
                                >
                                    <img 
                                        src={photo.thumb_url || photo.medium_url} 
                                        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"
                        >
                            전체 {allPhotos.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={() => setShowDescriptionModal(false)}
                    >
                        <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 > 200 || info.velocity.y > 500) {
                                    setShowDescriptionModal(false);
                                }
                            }}
                            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={() => setShowDescriptionModal(false)}
                                    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">
                                    {album.description}
                                </p>
                            </div>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>

            {/* 라이트박스 */}
            <AnimatePresence>
                {lightbox.open && (
                    <motion.div 
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 bg-black z-[60] flex items-center justify-center"
                        onClick={closeLightbox}
                    >
                        {/* 상단 버튼 */}
                        <div className="absolute top-4 right-4 flex gap-3 z-10">
                            <button 
                                className="text-white/70 p-2"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    downloadImage();
                                }}
                            >
                                <Download size={22} />
                            </button>
                            <button 
                                className="text-white/70 p-2"
                                onClick={closeLightbox}
                            >
                                <X size={24} />
                            </button>
                        </div>

                        {/* 이전 버튼 - showNav가 true일 때만 */}
                        {lightbox.showNav && lightbox.images.length > 1 && (
                            <button 
                                className="absolute left-2 p-2 text-white/70 z-10"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    goToPrev();
                                }}
                            >
                                <ChevronLeft size={32} />
                            </button>
                        )}

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

                        {/* 이미지/비디오 */}
                        {lightbox.teasers?.[lightbox.index]?.media_type === 'video' ? (
                            <video
                                src={lightbox.images[lightbox.index]}
                                className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                                onClick={(e) => e.stopPropagation()}
                                onCanPlay={() => setImageLoaded(true)}
                                controls
                                autoPlay
                            />
                        ) : (
                            <img 
                                src={lightbox.images[lightbox.index]}
                                alt="확대 이미지"
                                className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                                onClick={(e) => e.stopPropagation()}
                                onLoad={() => setImageLoaded(true)}
                            />
                        )}

                        {/* 다음 버튼 - showNav가 true일 때만 */}
                        {lightbox.showNav && lightbox.images.length > 1 && (
                            <button 
                                className="absolute right-2 p-2 text-white/70 z-10"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    goToNext();
                                }}
                            >
                                <ChevronRight size={32} />
                            </button>
                        )}

                        {/* 인디케이터 - showNav가 true일 때만 */}
                        {lightbox.showNav && lightbox.images.length > 1 && (
                            <div className="absolute bottom-8 left-0 right-0 flex justify-center">
                                <div className="bg-black/50 rounded-full px-3 py-1.5">
                                    <span className="text-white text-sm tabular-nums">
                                        {lightbox.index + 1} / {lightbox.images.length}
                                    </span>
                                </div>
                            </div>
                        )}
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
}

export default MobileAlbumDetail;