import { useState, useEffect, useCallback, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { X, Download, ChevronRight, Info, Users, Tag } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Virtual } from 'swiper/modules';
import 'swiper/css';
import { getAlbumByName } from '../../../api/public/albums';
import LightboxIndicator from '../../../components/common/LightboxIndicator';

// 모바일 앨범 갤러리 페이지
function MobileAlbumGallery() {
    const { name } = useParams();
    const navigate = useNavigate();
    const [album, setAlbum] = useState(null);
    const [photos, setPhotos] = useState([]);
    const [loading, setLoading] = useState(true);
    const [selectedIndex, setSelectedIndex] = useState(null);
    const [showInfo, setShowInfo] = useState(false);
    const swiperRef = useRef(null);

    useEffect(() => {
        getAlbumByName(name)
            .then(data => {
                setAlbum(data);
                const allPhotos = [];
                if (data.conceptPhotos && typeof data.conceptPhotos === 'object') {
                    Object.entries(data.conceptPhotos).forEach(([concept, photos]) => {
                        photos.forEach(p => allPhotos.push({ 
                            ...p,
                            concept: concept !== 'Default' ? concept : null
                        }));
                    });
                }
                setPhotos(allPhotos);
                setLoading(false);
            })
            .catch(error => {
                console.error('앨범 데이터 로드 오류:', error);
                setLoading(false);
            });
    }, [name]);

    // 라이트박스 열기 - 히스토리 추가
    const openLightbox = useCallback((index) => {
        setSelectedIndex(index);
        window.history.pushState({ lightbox: true }, '');
    }, []);

    // 라이트박스 닫기
    const closeLightbox = useCallback(() => {
        setSelectedIndex(null);
        setShowInfo(false);
    }, []);

    // 정보 시트 열기 - 히스토리 추가
    const openInfo = useCallback(() => {
        setShowInfo(true);
        window.history.pushState({ infoSheet: true }, '');
    }, []);

    // 정보 시트 닫기
    const closeInfo = useCallback(() => {
        setShowInfo(false);
    }, []);

    // 뒤로가기 처리
    useEffect(() => {
        const handlePopState = (e) => {
            if (showInfo) {
                setShowInfo(false);
            } else if (selectedIndex !== null) {
                setSelectedIndex(null);
            }
        };

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

    // 이미지 다운로드
    const downloadImage = useCallback(async () => {
        const photo = photos[selectedIndex];
        if (!photo) return;
        
        try {
            const response = await fetch(photo.original_url);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `fromis9_${album?.title || 'photo'}_${String(selectedIndex + 1).padStart(2, '0')}.webp`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        } catch (error) {
            console.error('다운로드 오류:', error);
        }
    }, [photos, selectedIndex, album?.title]);

    // 바디 스크롤 방지
    useEffect(() => {
        if (selectedIndex !== null) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
        return () => { document.body.style.overflow = ''; };
    }, [selectedIndex]);

    // 사진을 2열 지그재그로 분배
    const distributePhotos = () => {
        const leftColumn = [];
        const rightColumn = [];
        
        photos.forEach((photo, index) => {
            if (index % 2 === 0) {
                leftColumn.push({ ...photo, originalIndex: index });
            } else {
                rightColumn.push({ ...photo, originalIndex: index });
            }
        });
        
        return { leftColumn, rightColumn };
    };

    const { leftColumn, rightColumn } = distributePhotos();

    // 현재 사진 정보
    const currentPhoto = selectedIndex !== null ? photos[selectedIndex] : null;
    const hasInfo = currentPhoto?.concept || currentPhoto?.members;

    // 정보 시트 드래그 핸들러
    const handleInfoDragEnd = (_, info) => {
        if (info.offset.y > 100 || info.velocity.y > 300) {
            window.history.back();
        }
    };

    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>
        );
    }

    return (
        <>
            <div className="pb-4">
                {/* 앨범 헤더 카드 */}
                <div 
                    className="mx-4 mt-4 mb-4 p-4 bg-gradient-to-r from-primary/5 to-primary/10 rounded-2xl flex items-center gap-4"
                    onClick={() => navigate(-1)}
                >
                    {album?.cover_thumb_url && (
                        <img 
                            src={album.cover_thumb_url} 
                            alt={album.title}
                            className="w-14 h-14 rounded-xl object-cover shadow-sm"
                        />
                    )}
                    <div className="flex-1 min-w-0">
                        <p className="text-xs text-primary font-medium mb-0.5">컨셉 포토</p>
                        <p className="font-bold truncate">{album?.title}</p>
                        <p className="text-xs text-gray-500">{photos.length}장의 사진</p>
                    </div>
                    <ChevronRight size={20} className="text-gray-400 rotate-180" />
                </div>

                {/* 2열 그리드 */}
                <div className="px-3 flex gap-2">
                    <div className="flex-1 flex flex-col gap-2">
                        {leftColumn.map((photo) => (
                            <motion.div
                                key={photo.id || photo.originalIndex}
                                initial={{ opacity: 0, y: 10 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: Math.min(photo.originalIndex * 0.02, 0.4) }}
                                onClick={() => openLightbox(photo.originalIndex)}
                                className="cursor-pointer overflow-hidden rounded-xl bg-gray-100"
                            >
                                <img 
                                    src={photo.thumb_url || photo.medium_url} 
                                    alt=""
                                    className="w-full h-auto object-cover"
                                    loading="lazy"
                                />
                            </motion.div>
                        ))}
                    </div>
                    <div className="flex-1 flex flex-col gap-2">
                        {rightColumn.map((photo) => (
                            <motion.div
                                key={photo.id || photo.originalIndex}
                                initial={{ opacity: 0, y: 10 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: Math.min(photo.originalIndex * 0.02, 0.4) }}
                                onClick={() => openLightbox(photo.originalIndex)}
                                className="cursor-pointer overflow-hidden rounded-xl bg-gray-100"
                            >
                                <img 
                                    src={photo.thumb_url || photo.medium_url} 
                                    alt=""
                                    className="w-full h-auto object-cover"
                                    loading="lazy"
                                />
                            </motion.div>
                        ))}
                    </div>
                </div>
            </div>

            {/* 풀스크린 라이트박스 */}
            <AnimatePresence>
                {selectedIndex !== null && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 bg-black z-[60] flex flex-col"
                    >
                        {/* 상단 헤더 - 3등분 */}
                        <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>
                            <span className="text-white/70 text-sm tabular-nums">
                                {selectedIndex + 1} / {photos.length}
                            </span>
                            <div className="flex-1 flex justify-end items-center gap-2">
                                {hasInfo && (
                                    <button onClick={openInfo} 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={selectedIndex}
                            onSwiper={(swiper) => { swiperRef.current = swiper; }}
                            onSlideChange={(swiper) => setSelectedIndex(swiper.activeIndex)}
                            className="w-full h-full"
                            spaceBetween={0}
                            slidesPerView={1}
                            resistance={true}
                            resistanceRatio={0.5}
                        >
                            {photos.map((photo, index) => (
                                <SwiperSlide key={photo.id || index} virtualIndex={index}>
                                    <div className="w-full h-full flex items-center justify-center">
                                        <img 
                                            src={photo.medium_url || photo.original_url}
                                            alt=""
                                            className="max-w-full max-h-full object-contain"
                                            loading={Math.abs(index - selectedIndex) <= 2 ? 'eager' : 'lazy'}
                                        />
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>

                        {/* 모바일용 인디케이터 (좁은 width) */}
                        <LightboxIndicator
                            count={photos.length}
                            currentIndex={selectedIndex}
                            goToIndex={(i) => swiperRef.current?.slideTo(i)}
                            width={120}
                        />

                        {/* 정보 바텀시트 */}
                        <AnimatePresence>
                            {showInfo && hasInfo && (
                                <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={handleInfoDragEnd}
                                        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>
                                            
                                            {currentPhoto?.members && (
                                                <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">{currentPhoto.members}</p>
                                                    </div>
                                                </div>
                                            )}
                                            
                                            {currentPhoto?.concept && (
                                                <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">{currentPhoto.concept}</p>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </motion.div>
                                </motion.div>
                            )}
                        </AnimatePresence>
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
}

export default MobileAlbumGallery;