import { useParams, Link } from 'react-router-dom';
import { useQuery, keepPreviousData } from '@tanstack/react-query';
import { useEffect, useState, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Calendar, Clock, ChevronLeft, Check, Link2, MapPin, Navigation, ExternalLink, X, ChevronRight } from 'lucide-react';
import Linkify from 'react-linkify';
import { getSchedule } from '../../../api/public/schedules';
import { formatXDateTime } from '../../../utils/date';
import '../../../mobile.css';

// 카카오맵 SDK 키
const KAKAO_MAP_KEY = import.meta.env.VITE_KAKAO_JS_KEY;

// 카카오맵 컴포넌트
function KakaoMap({ lat, lng, name }) {
    const mapRef = useRef(null);
    const [mapLoaded, setMapLoaded] = useState(false);
    const [mapError, setMapError] = useState(false);

    useEffect(() => {
        if (!KAKAO_MAP_KEY) {
            setMapError(true);
            return;
        }

        if (!window.kakao?.maps) {
            const script = document.createElement('script');
            script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_KEY}&autoload=false`;
            script.onload = () => {
                window.kakao.maps.load(() => setMapLoaded(true));
            };
            script.onerror = () => setMapError(true);
            document.head.appendChild(script);
        } else {
            setMapLoaded(true);
        }
    }, []);

    useEffect(() => {
        if (!mapLoaded || !mapRef.current || mapError) return;

        try {
            const position = new window.kakao.maps.LatLng(lat, lng);
            const map = new window.kakao.maps.Map(mapRef.current, {
                center: position,
                level: 3,
            });

            const marker = new window.kakao.maps.Marker({
                position,
                map,
            });

            if (name) {
                const infowindow = new window.kakao.maps.InfoWindow({
                    content: `<div style="padding:6px 10px;font-size:12px;font-weight:500;">${name}</div>`,
                });
                infowindow.open(map, marker);
            }
        } catch (e) {
            setMapError(true);
        }
    }, [mapLoaded, lat, lng, name, mapError]);

    if (mapError) {
        return (
            <a
                href={`https://map.kakao.com/link/map/${encodeURIComponent(name)},${lat},${lng}`}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full h-40 rounded-xl bg-gray-100 flex items-center justify-center active:bg-gray-200 transition-colors"
            >
                <div className="text-center">
                    <Navigation size={24} className="mx-auto text-gray-400 mb-1" />
                    <p className="text-xs text-gray-500">지도에서 보기</p>
                </div>
            </a>
        );
    }

    return (
        <div
            ref={mapRef}
            className="w-full h-40 rounded-xl overflow-hidden"
        />
    );
}

// 전체화면 시 자동 가로 회전 훅 (숏츠가 아닐 때만)
function useFullscreenOrientation(isShorts) {
    useEffect(() => {
        // 숏츠는 세로 유지
        if (isShorts) return;

        const handleFullscreenChange = async () => {
            const isFullscreen = !!document.fullscreenElement;

            if (isFullscreen) {
                // 전체화면 진입 시 가로 모드로 전환 시도
                try {
                    if (screen.orientation && screen.orientation.lock) {
                        await screen.orientation.lock('landscape');
                    }
                } catch (e) {
                    // 지원하지 않는 브라우저이거나 권한이 없는 경우 무시
                }
            } else {
                // 전체화면 종료 시 세로 모드로 복귀
                try {
                    if (screen.orientation && screen.orientation.unlock) {
                        screen.orientation.unlock();
                    }
                } catch (e) {
                    // 무시
                }
            }
        };

        document.addEventListener('fullscreenchange', handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);

        return () => {
            document.removeEventListener('fullscreenchange', handleFullscreenChange);
            document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
        };
    }, [isShorts]);
}

// 카테고리 ID 상수
const CATEGORY_ID = {
    YOUTUBE: 2,
    X: 3,
    ALBUM: 4,
    FANSIGN: 5,
    CONCERT: 6,
    TICKET: 7,
};

// HTML 엔티티 디코딩 함수
const decodeHtmlEntities = (text) => {
    if (!text) return '';
    const textarea = document.createElement('textarea');
    textarea.innerHTML = text;
    return textarea.value;
};

// 유튜브 비디오 ID 추출 (YoutubeSection용)
const extractYoutubeVideoId = (url) => {
    if (!url) return null;
    const shortMatch = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
    if (shortMatch) return shortMatch[1];
    const watchMatch = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/);
    if (watchMatch) return watchMatch[1];
    const shortsMatch = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
    if (shortsMatch) return shortsMatch[1];
    return null;
};


// 날짜 포맷팅
const formatFullDate = (dateStr) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
    return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}. (${dayNames[date.getDay()]})`;
};

// 시간 포맷팅
const formatTime = (timeStr) => {
    if (!timeStr) return null;
    return timeStr.slice(0, 5);
};

// X URL에서 username 추출
const extractXUsername = (url) => {
    if (!url) return null;
    const match = url.match(/(?:twitter\.com|x\.com)\/([^/]+)/);
    return match ? match[1] : null;
};

// 유튜브 섹션 컴포넌트
function YoutubeSection({ schedule }) {
    const videoId = extractYoutubeVideoId(schedule.source?.url);
    const isShorts = schedule.source?.url?.includes('/shorts/');

    // 전체화면 시 가로 회전 (숏츠 제외)
    useFullscreenOrientation(isShorts);
    const members = schedule.members || [];
    const isFullGroup = members.length === 5;

    if (!videoId) return null;

    return (
        <div className="space-y-4">
            {/* 영상 임베드 */}
            <motion.div
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.1 }}
            >
                <div
                    className={`relative bg-gray-900 rounded-xl overflow-hidden shadow-lg ${
                        isShorts ? 'aspect-[9/16] max-w-[280px] mx-auto' : 'aspect-video'
                    }`}
                >
                    <iframe
                        src={`https://www.youtube.com/embed/${videoId}?rel=0`}
                        title={schedule.title}
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen; web-share"
                        allowFullScreen
                        className="absolute inset-0 w-full h-full"
                    />
                </div>
            </motion.div>

            {/* 영상 정보 카드 */}
            <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="bg-white rounded-xl p-4 shadow-sm"
            >
                {/* 제목 */}
                <h1 className="font-bold text-gray-900 text-base leading-relaxed mb-3">
                    {decodeHtmlEntities(schedule.title)}
                </h1>

                {/* 메타 정보 */}
                <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500 mb-3">
                    <div className="flex items-center gap-1">
                        <Calendar size={12} />
                        <span>{formatFullDate(schedule.date)}</span>
                    </div>
                    {schedule.time && (
                        <div className="flex items-center gap-1">
                            <Clock size={12} />
                            <span>{formatTime(schedule.time)}</span>
                        </div>
                    )}
                    {schedule.source?.name && (
                        <div className="flex items-center gap-1">
                            <Link2 size={12} />
                            <span>{schedule.source?.name}</span>
                        </div>
                    )}
                </div>

                {/* 멤버 목록 */}
                {members.length > 0 && (
                    <div className="flex flex-wrap gap-1.5 mb-4">
                        {isFullGroup ? (
                            <span className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
                                프로미스나인
                            </span>
                        ) : (
                            members.map((member) => (
                                <span
                                    key={member.id}
                                    className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
                                >
                                    {member.name}
                                </span>
                            ))
                        )}
                    </div>
                )}

                {/* 유튜브에서 보기 버튼 */}
                <a
                    href={schedule.source?.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2 w-full py-3 bg-red-500 active:bg-red-600 text-white rounded-xl font-medium transition-colors"
                >
                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                    </svg>
                    YouTube에서 보기
                </a>
            </motion.div>
        </div>
    );
}

// X(트위터) 섹션 컴포넌트
function XSection({ schedule }) {
    const profile = schedule.profile;
    const username = profile?.username || 'realfromis_9';
    const displayName = profile?.displayName || username;
    const avatarUrl = profile?.avatarUrl;

    // 라이트박스 상태
    const [lightboxOpen, setLightboxOpen] = useState(false);
    const [lightboxIndex, setLightboxIndex] = useState(0);

    const openLightbox = (index) => {
        setLightboxIndex(index);
        setLightboxOpen(true);
        window.history.pushState({ lightbox: true }, '');
    };

    const goToPrev = () => {
        if (schedule.imageUrls?.length > 1) {
            setLightboxIndex((lightboxIndex - 1 + schedule.imageUrls.length) % schedule.imageUrls.length);
        }
    };

    const goToNext = () => {
        if (schedule.imageUrls?.length > 1) {
            setLightboxIndex((lightboxIndex + 1) % schedule.imageUrls.length);
        }
    };

    // 라이트박스 열릴 때 body 스크롤 방지
    useEffect(() => {
        if (lightboxOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
        return () => {
            document.body.style.overflow = '';
        };
    }, [lightboxOpen]);

    // 뒤로가기 처리
    useEffect(() => {
        const handlePopState = () => {
            if (lightboxOpen) {
                setLightboxOpen(false);
            }
        };

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

    // 링크 데코레이터 (새 탭에서 열기)
    const linkDecorator = (href, text, key) => (
        <a
            key={key}
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-500"
        >
            {text}
        </a>
    );

    return (
        <>
        <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="bg-white rounded-xl border border-gray-200 overflow-hidden"
        >
            {/* 헤더 */}
            <div className="p-4 pb-0">
                <div className="flex items-center gap-3">
                    {/* 프로필 이미지 */}
                    {avatarUrl ? (
                        <img
                            src={avatarUrl}
                            alt={displayName}
                            className="w-10 h-10 rounded-full object-cover"
                        />
                    ) : (
                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
                            <span className="text-white font-bold">
                                {displayName.charAt(0).toUpperCase()}
                            </span>
                        </div>
                    )}
                    <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5">
                            <span className="font-bold text-gray-900 text-sm truncate">
                                {displayName}
                            </span>
                            <svg className="w-4 h-4 text-blue-500 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.07 4.57l-3.84-3.84 1.27-1.27 2.57 2.57 5.39-5.39 1.27 1.27-6.66 6.66z"/>
                            </svg>
                        </div>
                        <span className="text-xs text-gray-500">@{username}</span>
                    </div>
                </div>
            </div>

            {/* 본문 */}
            <div className="p-4">
                <p className="text-gray-900 text-[15px] leading-relaxed whitespace-pre-wrap">
                    <Linkify componentDecorator={linkDecorator}>
                        {decodeHtmlEntities(schedule.content || schedule.title)}
                    </Linkify>
                </p>
            </div>

            {/* 이미지 */}
            {schedule.imageUrls?.length > 0 && (
                <div className="px-4 pb-3">
                    {schedule.imageUrls.length === 1 ? (
                        <img
                            src={schedule.imageUrls[0]}
                            alt=""
                            className="w-full rounded-xl border border-gray-100 cursor-pointer active:opacity-80 transition-opacity"
                            onClick={() => openLightbox(0)}
                        />
                    ) : (
                        <div className={`grid gap-1 rounded-xl overflow-hidden border border-gray-100 ${
                            schedule.imageUrls.length === 2 ? 'grid-cols-2' : 'grid-cols-2'
                        }`}>
                            {schedule.imageUrls.slice(0, 4).map((url, i) => (
                                <img
                                    key={i}
                                    src={url}
                                    alt=""
                                    className={`w-full object-cover cursor-pointer active:opacity-80 transition-opacity ${
                                        schedule.imageUrls.length === 3 && i === 0 ? 'row-span-2 h-full' : 'aspect-square'
                                    }`}
                                    onClick={() => openLightbox(i)}
                                />
                            ))}
                        </div>
                    )}
                </div>
            )}

            {/* 날짜/시간 */}
            <div className="px-4 py-3 border-t border-gray-100">
                <span className="text-gray-500 text-sm">
                    {formatXDateTime(schedule.datetime)}
                </span>
            </div>

            {/* X에서 보기 버튼 */}
            <div className="px-4 py-3 border-t border-gray-100 bg-gray-50/50">
                <a
                    href={schedule.postUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2 w-full py-2.5 bg-gray-900 active:bg-black text-white rounded-full font-medium transition-colors"
                >
                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                    </svg>
                    X에서 보기
                </a>
            </div>
        </motion.div>

        {/* 모바일 라이트박스 */}
            <AnimatePresence>
                {lightboxOpen && schedule.imageUrls?.length > 0 && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 bg-black z-50 flex items-center justify-center"
                        onClick={() => window.history.back()}
                    >
                        {/* 닫기 버튼 */}
                        <button
                            className="absolute top-4 right-4 p-2 text-white/70 z-10"
                            onClick={() => window.history.back()}
                        >
                            <X size={28} />
                        </button>

                        {/* 이미지 */}
                        <motion.img
                            key={lightboxIndex}
                            src={schedule.imageUrls[lightboxIndex]}
                            alt=""
                            className="max-w-full max-h-full object-contain"
                            initial={{ opacity: 0, scale: 0.95 }}
                            animate={{ opacity: 1, scale: 1 }}
                            onClick={(e) => e.stopPropagation()}
                        />

                        {/* 이전/다음 버튼 */}
                        {schedule.imageUrls.length > 1 && (
                            <>
                                <button
                                    className="absolute left-2 top-1/2 -translate-y-1/2 p-2 text-white/70"
                                    onClick={(e) => { e.stopPropagation(); goToPrev(); }}
                                >
                                    <ChevronLeft size={32} />
                                </button>
                                <button
                                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-white/70"
                                    onClick={(e) => { e.stopPropagation(); goToNext(); }}
                                >
                                    <ChevronRight size={32} />
                                </button>
                            </>
                        )}

                        {/* 인디케이터 */}
                        {schedule.imageUrls.length > 1 && (
                            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
                                {schedule.imageUrls.map((_, i) => (
                                    <button
                                        key={i}
                                        className={`w-2 h-2 rounded-full transition-colors ${
                                            i === lightboxIndex ? 'bg-white' : 'bg-white/40'
                                        }`}
                                        onClick={(e) => { e.stopPropagation(); setLightboxIndex(i); }}
                                    />
                                ))}
                            </div>
                        )}
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
}

// 콘서트 섹션 컴포넌트
function ConcertSection({ schedule }) {
    // 현재 선택된 회차 ID (내부 state로 관리 - URL 변경 없음)
    const [selectedDateId, setSelectedDateId] = useState(schedule.id);
    // 다이얼로그 열림 상태
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    // 다이얼로그 목록 ref (자동 스크롤용)
    const listRef = useRef(null);
    const selectedItemRef = useRef(null);

    // 표시할 데이터 state (변경된 부분만 업데이트)
    const [displayData, setDisplayData] = useState({
        posterUrl: schedule.images?.[0] || null,
        title: schedule.title,
        date: schedule.date,
        time: schedule.time,
        locationName: schedule.location_name,
        locationAddress: schedule.location_address,
        locationLat: schedule.location_lat,
        locationLng: schedule.location_lng,
        description: schedule.description,
        sourceUrl: schedule.source?.url,
    });

    // 선택된 회차 데이터 조회
    const { data: selectedSchedule } = useQuery({
        queryKey: ['schedule', selectedDateId],
        queryFn: () => getSchedule(selectedDateId),
        placeholderData: keepPreviousData,
        enabled: selectedDateId !== schedule.id,
    });

    // 데이터 비교 후 변경된 부분만 업데이트
    useEffect(() => {
        const newData = selectedDateId === schedule.id ? schedule : selectedSchedule;
        if (!newData) return;

        setDisplayData(prev => {
            const updates = {};
            const newPosterUrl = newData.images?.[0] || null;

            if (prev.posterUrl !== newPosterUrl) updates.posterUrl = newPosterUrl;
            if (prev.title !== newData.title) updates.title = newData.title;
            if (prev.date !== newData.date) updates.date = newData.date;
            if (prev.time !== newData.time) updates.time = newData.time;
            if (prev.locationName !== newData.location_name) updates.locationName = newData.location_name;
            if (prev.locationAddress !== newData.location_address) updates.locationAddress = newData.location_address;
            if (prev.locationLat !== newData.location_lat) updates.locationLat = newData.location_lat;
            if (prev.locationLng !== newData.location_lng) updates.locationLng = newData.location_lng;
            if (prev.description !== newData.description) updates.description = newData.description;
            if (prev.sourceUrl !== newData.source?.url) updates.sourceUrl = newData.source?.url;

            // 변경된 것이 있을 때만 업데이트
            if (Object.keys(updates).length > 0) {
                return { ...prev, ...updates };
            }
            return prev;
        });
    }, [selectedDateId, schedule, selectedSchedule]);

    // 다이얼로그 열릴 때 선택된 항목으로 스크롤
    useEffect(() => {
        if (isDialogOpen && selectedItemRef.current) {
            setTimeout(() => {
                selectedItemRef.current?.scrollIntoView({ block: 'center', behavior: 'instant' });
            }, 50);
        }
    }, [isDialogOpen]);

    const relatedDates = schedule.related_dates || [];
    const hasMultipleDates = relatedDates.length > 1;
    const hasLocation = displayData.locationLat && displayData.locationLng;

    // 현재 선택된 회차 인덱스
    const selectedIndex = relatedDates.findIndex(d => d.id === selectedDateId);

    // 회차 선택 핸들러
    const handleSelectDate = (id) => {
        setSelectedDateId(id);
        setIsDialogOpen(false);
    };

    // 개별 날짜 포맷팅
    const formatSingleDate = (dateStr, timeStr) => {
        const date = new Date(dateStr);
        const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekday = dayNames[date.getDay()];

        let result = `${month}월 ${day}일 (${weekday})`;
        if (timeStr) {
            result += ` ${timeStr.slice(0, 5)}`;
        }
        return result;
    };

    return (
        <>
            <div className="-mx-4 -mt-4">
                {/* 히어로 헤더 */}
                <div className="relative overflow-hidden">
                    {/* 배경 블러 이미지 */}
                    {displayData.posterUrl ? (
                        <div className="absolute inset-0 scale-110 overflow-hidden">
                            <img
                                src={displayData.posterUrl}
                                alt=""
                                className="w-full h-full object-cover blur-[24px]"
                            />
                        </div>
                    ) : (
                        <div className="absolute inset-0 bg-gradient-to-br from-primary via-primary/90 to-primary/70" />
                    )}
                    {/* 오버레이 그라디언트 */}
                    <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/50 to-black/70" />

                    {/* 콘텐츠 */}
                    <div className="relative px-5 pt-6 pb-8">
                        <div className="flex flex-col items-center text-center">
                            {/* 포스터 */}
                            {displayData.posterUrl && (
                                <div className="mb-4 rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/20">
                                    <img
                                        src={displayData.posterUrl}
                                        alt={displayData.title}
                                        className="w-32 h-44 object-cover"
                                    />
                                </div>
                            )}
                            {/* 제목 */}
                            <h1 className="text-white font-bold text-lg leading-snug drop-shadow-lg max-w-xs">
                                {decodeHtmlEntities(displayData.title)}
                            </h1>
                        </div>
                    </div>
                </div>

            {/* 카드 섹션 */}
            <div className="px-4 pt-4 space-y-4">
                {/* 공연 일정 카드 */}
                <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.1 }}
                    className="bg-white rounded-xl p-4 shadow-sm"
                >
                    <div className="flex items-center gap-2 text-xs text-gray-500 mb-3">
                        <Calendar size={14} />
                        <span>공연 일정</span>
                    </div>
                    {/* 현재 회차 표시 */}
                    <div className="px-4 py-3 bg-primary/10 rounded-lg">
                        <p className="text-primary font-medium text-sm">
                            {hasMultipleDates && <span className="mr-1">{selectedIndex + 1}회차 ·</span>}
                            {formatSingleDate(displayData.date, displayData.time)}
                        </p>
                    </div>
                    {/* 다른 회차 선택 버튼 */}
                    {hasMultipleDates && (
                        <button
                            onClick={() => setIsDialogOpen(true)}
                            className="w-full mt-2 py-2.5 text-sm text-gray-500 font-medium active:bg-gray-50 rounded-lg transition-colors"
                        >
                            다른 회차 선택
                        </button>
                    )}
                </motion.div>

                {/* 장소 카드 */}
                {displayData.locationName && (
                    <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.15 }}
                        className="bg-white rounded-xl p-4 shadow-sm"
                    >
                        <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
                            <MapPin size={14} />
                            <span>장소</span>
                        </div>
                        <p className="text-gray-900 font-medium">{displayData.locationName}</p>
                        {displayData.locationAddress && (
                            <p className="text-gray-500 text-sm mt-0.5">{displayData.locationAddress}</p>
                        )}

                        {/* 지도 - 좌표가 있으면 카카오맵, 없으면 구글맵 */}
                        {hasLocation ? (
                            <div className="mt-3 rounded-xl overflow-hidden">
                                <KakaoMap
                                    lat={parseFloat(displayData.locationLat)}
                                    lng={parseFloat(displayData.locationLng)}
                                    name={displayData.locationName}
                                />
                            </div>
                        ) : (
                            <div className="mt-3 rounded-xl overflow-hidden">
                                <iframe
                                    src={`https://maps.google.com/maps?q=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}&output=embed&hl=ko`}
                                    className="w-full h-40 border-0"
                                    loading="lazy"
                                    referrerPolicy="no-referrer-when-downgrade"
                                    title="Google Maps"
                                />
                            </div>
                        )}
                    </motion.div>
                )}

                {/* 설명 */}
                {displayData.description && (
                    <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.2 }}
                        className="bg-white rounded-xl p-4 shadow-sm"
                    >
                        <p className="text-gray-600 text-sm leading-relaxed">
                            {decodeHtmlEntities(displayData.description)}
                        </p>
                    </motion.div>
                )}

                {/* 버튼 영역 */}
                <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.25 }}
                    className="space-y-2"
                >
                    {displayData.locationName && (
                        <a
                            href={hasLocation
                                ? `https://map.kakao.com/link/to/${encodeURIComponent(displayData.locationName)},${displayData.locationLat},${displayData.locationLng}`
                                : `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(displayData.locationAddress || displayData.locationName)}`
                            }
                            target="_blank"
                            rel="noopener noreferrer"
                            className={`flex items-center justify-center gap-2 w-full py-3.5 text-white rounded-xl font-medium transition-colors ${
                                hasLocation
                                    ? 'bg-blue-500 active:bg-blue-600'
                                    : 'bg-[#4285F4] active:bg-[#3367D6]'
                            }`}
                        >
                            <Navigation size={18} />
                            길찾기
                        </a>
                    )}
                    {displayData.sourceUrl && (
                        <a
                            href={displayData.sourceUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center justify-center gap-2 w-full py-3.5 bg-gray-100 active:bg-gray-200 text-gray-900 rounded-xl font-medium transition-colors"
                        >
                            <ExternalLink size={18} />
                            상세 정보
                        </a>
                    )}
                </motion.div>
            </div>
            </div>

            {/* 회차 선택 다이얼로그 */}
            <AnimatePresence>
                {isDialogOpen && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
                        {/* 백드롭 */}
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            transition={{ duration: 0.2 }}
                            className="absolute inset-0 bg-black/50"
                            onClick={() => setIsDialogOpen(false)}
                        />
                        {/* 다이얼로그 */}
                        <motion.div
                            initial={{ opacity: 0, scale: 0.95 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.95 }}
                            transition={{ duration: 0.2 }}
                            className="relative bg-white rounded-2xl w-full max-w-sm overflow-hidden shadow-xl"
                        >
                            {/* 헤더 */}
                            <div className="px-5 py-4 border-b border-gray-100">
                                <h3 className="text-base font-bold text-gray-900">회차 선택</h3>
                            </div>
                            {/* 회차 목록 */}
                            <div ref={listRef} className="max-h-72 overflow-y-auto">
                                {relatedDates.map((item, index) => {
                                    const isSelected = item.id === selectedDateId;
                                    return (
                                        <button
                                            key={item.id}
                                            ref={isSelected ? selectedItemRef : null}
                                            onClick={() => handleSelectDate(item.id)}
                                            className={`w-full flex items-center justify-between px-5 py-3.5 text-sm transition-colors ${
                                                isSelected
                                                    ? 'bg-primary/10'
                                                    : 'active:bg-gray-50'
                                            }`}
                                        >
                                            <span className={isSelected ? 'text-primary font-medium' : 'text-gray-700'}>
                                                {index + 1}회차 · {formatSingleDate(item.date, item.time)}
                                            </span>
                                            {isSelected && <Check size={18} className="text-primary" />}
                                        </button>
                                    );
                                })}
                            </div>
                            {/* 닫기 버튼 */}
                            <div className="px-5 py-4 border-t border-gray-100">
                                <button
                                    onClick={() => setIsDialogOpen(false)}
                                    className="w-full py-3 bg-gray-100 active:bg-gray-200 text-gray-700 rounded-xl font-medium transition-colors"
                                >
                                    닫기
                                </button>
                            </div>
                        </motion.div>
                    </div>
                )}
            </AnimatePresence>
        </>
    );
}

// 기본 섹션 컴포넌트 (다른 카테고리용 - 임시)
function DefaultSection({ schedule }) {
    return (
        <div className="bg-white rounded-xl p-4 shadow-sm">
            <h1 className="font-bold text-gray-900 text-base mb-3">
                {decodeHtmlEntities(schedule.title)}
            </h1>
            <div className="flex items-center gap-3 text-xs text-gray-500">
                <div className="flex items-center gap-1">
                    <Calendar size={12} />
                    <span>{formatFullDate(schedule.date)}</span>
                </div>
                {schedule.time && (
                    <div className="flex items-center gap-1">
                        <Clock size={12} />
                        <span>{formatTime(schedule.time)}</span>
                    </div>
                )}
            </div>
            {schedule.description && (
                <p className="mt-3 text-sm text-gray-600 whitespace-pre-wrap">
                    {decodeHtmlEntities(schedule.description)}
                </p>
            )}
        </div>
    );
}

function MobileScheduleDetail() {
    const { id } = useParams();

    // 모바일 레이아웃 활성화
    useEffect(() => {
        document.documentElement.classList.add('mobile-layout');
        return () => {
            document.documentElement.classList.remove('mobile-layout');
        };
    }, []);

    const { data: schedule, isLoading, error } = useQuery({
        queryKey: ['schedule', id],
        queryFn: () => getSchedule(id),
        placeholderData: keepPreviousData,
        retry: false,
    });

    // 이전 데이터가 없을 때만 로딩 스피너 표시
    if (isLoading && !schedule) {
        return (
            <div className="mobile-layout-container bg-gray-50">
                <div className="mobile-content flex items-center justify-center">
                    <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                </div>
            </div>
        );
    }

    if (error || !schedule) {
        return (
            <div className="mobile-layout-container bg-gradient-to-br from-gray-50 to-gray-100">
                <div className="mobile-content flex items-center justify-center px-6">
                    <div className="text-center">
                    {/* 아이콘 */}
                    <motion.div
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
                        className="mb-6"
                    >
                        <div className="w-24 h-24 mx-auto bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl flex items-center justify-center">
                            <Calendar size={48} className="text-primary/40" />
                        </div>
                    </motion.div>

                    {/* 메시지 */}
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.2, duration: 0.5 }}
                        className="mb-6"
                    >
                        <h2 className="text-xl font-bold text-gray-800 mb-2">
                            일정을 찾을 수 없습니다
                        </h2>
                        <p className="text-gray-500 text-sm leading-relaxed">
                            요청하신 일정이 존재하지 않거나
                            <br />
                            삭제되었을 수 있습니다.
                        </p>
                    </motion.div>

                    {/* 장식 요소 */}
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.4, duration: 0.5 }}
                        className="flex justify-center gap-1.5 mb-8"
                    >
                        {[...Array(5)].map((_, i) => (
                            <motion.div
                                key={i}
                                className="w-1.5 h-1.5 rounded-full bg-primary"
                                animate={{
                                    y: [0, -6, 0],
                                    opacity: [0.3, 1, 0.3],
                                }}
                                transition={{
                                    duration: 1.2,
                                    repeat: Infinity,
                                    delay: i * 0.15,
                                    ease: "easeInOut",
                                }}
                            />
                        ))}
                    </motion.div>

                    {/* 버튼들 */}
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.5, duration: 0.5 }}
                        className="flex flex-col gap-3"
                    >
                        <button
                            onClick={() => window.history.back()}
                            className="flex items-center justify-center gap-2 w-full px-6 py-3 border-2 border-primary text-primary rounded-full font-medium active:bg-primary active:text-white transition-colors"
                        >
                            <ChevronLeft size={18} />
                            이전 페이지
                        </button>
                        <Link
                            to="/schedule"
                            className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium active:opacity-90 transition-opacity"
                        >
                            <Calendar size={18} />
                            일정 목록
                        </Link>
                    </motion.div>
                    </div>
                </div>
            </div>
        );
    }

    // 카테고리별 섹션 렌더링
    const categoryId = schedule.category?.id;
    const renderCategorySection = () => {
        switch (categoryId) {
            case CATEGORY_ID.YOUTUBE:
                return <YoutubeSection schedule={schedule} />;
            case CATEGORY_ID.X:
                return <XSection schedule={schedule} />;
            case CATEGORY_ID.CONCERT:
                return <ConcertSection schedule={schedule} />;
            default:
                return <DefaultSection schedule={schedule} />;
        }
    };

    return (
        <div className="mobile-layout-container bg-gray-50">
            {/* 헤더 */}
            <div className="flex-shrink-0 bg-white border-b border-gray-100">
                <div className="flex items-center h-14 px-4">
                    <button
                        onClick={() => window.history.back()}
                        className="p-2 -ml-2 rounded-lg active:bg-gray-100"
                    >
                        <ChevronLeft size={24} />
                    </button>
                    <div className="flex-1 text-center">
                        <span
                            className="text-sm font-medium"
                            style={{ color: schedule.category?.color }}
                        >
                            {schedule.category?.name}
                        </span>
                    </div>
                    <div className="w-10" />
                </div>
            </div>

            {/* 메인 컨텐츠 */}
            <div className="mobile-content p-4">
                {renderCategorySection()}
            </div>
        </div>
    );
}

export default MobileScheduleDetail;