fromis_9/frontend/src/pages/pc/public/ScheduleDetail.jsx

import { useParams, Link } from 'react-router-dom';
import { useQuery, keepPreviousData } from '@tanstack/react-query';
import { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { Clock, Calendar, ExternalLink, ChevronRight, Link2, MapPin, Navigation } from 'lucide-react';
import { getSchedule, getXProfile } from '../../../api/public/schedules';

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

// 카테고리 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 추출
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용 날짜/시간 포맷팅 (오후 2:30 · 2026년 1월 15일)
const formatXDateTime = (dateStr, timeStr) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    let result = `${year}년 ${month}월 ${day}일`;

    if (timeStr) {
        const [hours, minutes] = timeStr.split(':').map(Number);
        const period = hours < 12 ? '오전' : '오후';
        const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
        result = `${period} ${hour12}:${String(minutes).padStart(2, '0')} · ${result}`;
    }

    return result;
};

// 영상 정보 컴포넌트 (공통)
function VideoInfo({ schedule, isShorts }) {
    const members = schedule.members || [];
    const isFullGroup = members.length === 5;

    return (
        <div className={`bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-2xl p-6 ${isShorts ? 'flex-1' : ''}`}>
            {/* 제목 */}
            <h1 className={`font-bold text-gray-900 mb-4 leading-relaxed ${isShorts ? 'text-lg' : 'text-xl'}`}>
                {decodeHtmlEntities(schedule.title)}
            </h1>

            {/* 메타 정보 */}
            <div className={`flex flex-wrap items-center gap-4 text-sm ${isShorts ? 'gap-3' : ''}`}>
                {/* 날짜 */}
                <div className="flex items-center gap-1.5 text-gray-500">
                    <Calendar size={14} />
                    <span>{formatFullDate(schedule.date)}</span>
                </div>

                {/* 시간 */}
                {schedule.time && (
                    <>
                        <div className="w-px h-4 bg-gray-300" />
                        <div className="flex items-center gap-1.5 text-gray-500">
                            <Clock size={14} />
                            <span>{formatTime(schedule.time)}</span>
                        </div>
                    </>
                )}

                {/* 채널명 */}
                {schedule.source_name && (
                    <>
                        <div className="w-px h-4 bg-gray-300" />
                        <div className="flex items-center gap-2 text-gray-500">
                            <Link2 size={14} className="opacity-60" />
                            <span className="font-medium">{schedule.source_name}</span>
                        </div>
                    </>
                )}
            </div>

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

            {/* 유튜브에서 보기 버튼 */}
            <div className="mt-6 pt-5 border-t border-gray-200">
                <a
                    href={schedule.source_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl font-medium transition-colors shadow-lg shadow-red-500/20"
                >
                    <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>
            </div>
        </div>
    );
}

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

    if (!videoId) return null;

    // 숏츠: 가로 레이아웃 (영상 + 정보)
    if (isShorts) {
        return (
            <div className="flex gap-6 items-start">
                {/* 영상 임베드 */}
                <motion.div
                    initial={{ opacity: 0, scale: 0.98 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: 0.1 }}
                    className="w-[420px] flex-shrink-0"
                >
                    <div className="relative aspect-[9/16] bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
                        <iframe
                            src={`https://www.youtube.com/embed/${videoId}?rel=0`}
                            title={schedule.title}
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowFullScreen
                            className="absolute inset-0 w-full h-full"
                        />
                    </div>
                </motion.div>

                {/* 영상 정보 카드 */}
                <motion.div
                    initial={{ opacity: 0, x: 10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.2 }}
                    className="flex-1"
                >
                    <VideoInfo schedule={schedule} isShorts={true} />
                </motion.div>
            </div>
        );
    }

    // 일반 영상: 세로 레이아웃 (영상 위, 정보 아래)
    return (
        <div className="space-y-6">
            {/* 영상 임베드 */}
            <motion.div
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.1 }}
                className="w-full"
            >
                <div className="relative aspect-video bg-gray-900 rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
                    <iframe
                        src={`https://www.youtube.com/embed/${videoId}?rel=0`}
                        title={schedule.title}
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        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 }}
            >
                <VideoInfo schedule={schedule} isShorts={false} />
            </motion.div>
        </div>
    );
}

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

// X(트위터) 섹션 컴포넌트
function XSection({ schedule }) {
    const username = extractXUsername(schedule.source_url);

    // 프로필 정보 조회
    const { data: profile } = useQuery({
        queryKey: ['x-profile', username],
        queryFn: () => getXProfile(username),
        enabled: !!username,
        staleTime: 1000 * 60 * 60, // 1시간
    });

    const displayName = profile?.displayName || schedule.source_name || username || 'Unknown';
    const avatarUrl = profile?.avatarUrl;

    return (
        <div className="max-w-2xl mx-auto">
            {/* X 스타일 카드 */}
            <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
                className="bg-white rounded-2xl border border-gray-200 overflow-hidden"
            >
                {/* 헤더 */}
                <div className="p-5 pb-0">
                    <div className="flex items-center gap-3">
                        {/* 프로필 이미지 */}
                        {avatarUrl ? (
                            <img
                                src={avatarUrl}
                                alt={displayName}
                                className="w-12 h-12 rounded-full object-cover"
                            />
                        ) : (
                            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
                                <span className="text-white font-bold text-lg">
                                    {displayName.charAt(0).toUpperCase()}
                                </span>
                            </div>
                        )}
                        <div className="flex-1">
                            <div className="flex items-center gap-2">
                                <span className="font-bold text-gray-900">
                                    {displayName}
                                </span>
                                <svg className="w-5 h-5 text-blue-500" 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>
                            {username && (
                                <span className="text-sm text-gray-500">@{username}</span>
                            )}
                        </div>
                    </div>
                </div>

                {/* 본문 */}
                <div className="p-5">
                    <p className="text-gray-900 text-[17px] leading-relaxed whitespace-pre-wrap">
                        {decodeHtmlEntities(schedule.description || schedule.title)}
                    </p>
                </div>

                {/* 이미지 */}
                {schedule.image_url && (
                    <div className="px-5 pb-3">
                        <img
                            src={schedule.image_url}
                            alt=""
                            className="w-full rounded-2xl border border-gray-100"
                        />
                    </div>
                )}

                {/* 날짜/시간 */}
                <div className="px-5 py-4 border-t border-gray-100">
                    <span className="text-gray-500 text-[15px]">
                        {formatXDateTime(schedule.date, schedule.time)}
                    </span>
                </div>

                {/* X에서 보기 버튼 */}
                <div className="px-5 py-4 border-t border-gray-100 bg-gray-50/50">
                    <a
                        href={schedule.source_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover: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>
        </div>
    );
}

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

    useEffect(() => {
        // API 키가 없으면 에러
        if (!KAKAO_MAP_KEY) {
            setMapError(true);
            return;
        }

        // 카카오맵 SDK 동적 로드
        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:8px 12px;font-size:13px;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/to/${encodeURIComponent(name)},${lat},${lng}`}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full h-80 rounded-2xl bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center hover:from-gray-200 hover:to-gray-300 transition-all group"
            >
                <div className="text-center">
                    <Navigation size={32} className="mx-auto text-gray-400 group-hover:text-blue-500 transition-colors mb-2" />
                    <p className="text-gray-600 font-medium">{name}</p>
                    <p className="text-sm text-gray-400 mt-1">클릭하여 길찾기</p>
                </div>
            </a>
        );
    }

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

// 콘서트 섹션 컴포넌트
function ConcertSection({ schedule }) {
    const hasLocation = schedule.location_lat && schedule.location_lng;
    const hasPoster = schedule.images?.length > 0;
    const relatedDates = schedule.related_dates || [];
    const hasMultipleDates = relatedDates.length > 1;

    // 개별 날짜 포맷팅
    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="space-y-8">
            {/* 상단: 포스터 + 정보 카드 (가로 배치) */}
            <div className={`flex gap-8 ${hasPoster ? '' : 'justify-center'}`}>
                {/* 포스터 이미지 */}
                {hasPoster && (
                    <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.1 }}
                        className="flex-shrink-0"
                    >
                        <div className="relative group">
                            <img
                                src={schedule.images[0]}
                                alt={schedule.title}
                                className="w-80 rounded-2xl shadow-2xl shadow-black/20"
                            />
                            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 rounded-2xl transition-colors" />
                        </div>
                    </motion.div>
                )}

                {/* 정보 카드 */}
                <motion.div
                    initial={{ opacity: 0, x: hasPoster ? 20 : 0, y: hasPoster ? 0 : 20 }}
                    animate={{ opacity: 1, x: 0, y: 0 }}
                    transition={{ delay: 0.2 }}
                    className={`flex-1 ${hasPoster ? '' : 'max-w-xl'}`}
                >
                    <div className="bg-white rounded-3xl shadow-xl shadow-black/5 overflow-hidden h-full flex flex-col">
                        {/* 헤더 */}
                        <div className="bg-gradient-to-r from-primary to-primary/80 p-6 text-white">
                            <h1 className="text-2xl font-bold leading-tight">
                                {decodeHtmlEntities(schedule.title)}
                            </h1>
                        </div>

                        {/* 정보 목록 */}
                        <div className="p-6 space-y-5 flex-1">
                            {/* 공연 일정 목록 */}
                            <div className="flex items-start gap-4">
                                <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                                    <Calendar size={22} className="text-primary" />
                                </div>
                                <div className="flex-1">
                                    {hasMultipleDates ? (
                                        <div className="space-y-2">
                                            {relatedDates.map((item, index) => {
                                                const isCurrentDate = item.id === schedule.id;
                                                return (
                                                    <Link
                                                        key={item.id}
                                                        to={`/schedule/${item.id}`}
                                                        className={`block px-4 py-2.5 rounded-xl transition-all ${
                                                            isCurrentDate
                                                                ? 'bg-primary text-white font-bold shadow-lg shadow-primary/20'
                                                                : 'bg-gray-50 hover:bg-gray-100 text-gray-700'
                                                        }`}
                                                    >
                                                        <span className="text-sm opacity-60 mr-2">
                                                            {index + 1}회차
                                                        </span>
                                                        {formatSingleDate(item.date, item.time)}
                                                    </Link>
                                                );
                                            })}
                                        </div>
                                    ) : (
                                        <div>
                                            <p className="text-gray-900 font-bold text-lg">
                                                {formatSingleDate(schedule.date, schedule.time)}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* 장소 */}
                            {schedule.location_name && (
                                <div className="flex items-center gap-4">
                                    <div className="w-12 h-12 rounded-2xl bg-rose-50 flex items-center justify-center flex-shrink-0">
                                        <MapPin size={22} className="text-rose-500" />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <p className="text-gray-900 font-bold text-lg truncate">{schedule.location_name}</p>
                                        {schedule.location_address && (
                                            <p className="text-gray-500 text-sm truncate">{schedule.location_address}</p>
                                        )}
                                    </div>
                                </div>
                            )}

                            {/* 설명 */}
                            {schedule.description && (
                                <div className="pt-4 border-t border-gray-100">
                                    <p className="text-gray-600 text-sm leading-relaxed line-clamp-4">
                                        {decodeHtmlEntities(schedule.description)}
                                    </p>
                                </div>
                            )}
                        </div>

                        {/* 버튼 영역 */}
                        {schedule.source_url && (
                            <div className="p-6 pt-0">
                                <a
                                    href={schedule.source_url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-gray-900 hover:bg-black text-white rounded-2xl font-semibold transition-all hover:shadow-lg"
                                >
                                    <ExternalLink size={18} />
                                    상세 정보 보기
                                </a>
                            </div>
                        )}
                    </div>
                </motion.div>
            </div>

            {/* 하단: 지도 */}
            {schedule.location_name && hasLocation && (
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 }}
                    className="bg-white rounded-3xl shadow-xl shadow-black/5 overflow-hidden"
                >
                    <div className="p-5 border-b border-gray-100 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                                <Navigation size={18} className="text-blue-500" />
                            </div>
                            <div>
                                <h3 className="font-bold text-gray-900">위치 안내</h3>
                                <p className="text-sm text-gray-500">{schedule.location_name}</p>
                            </div>
                        </div>
                        <a
                            href={`https://map.kakao.com/link/to/${encodeURIComponent(schedule.location_name)},${schedule.location_lat},${schedule.location_lng}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-xl transition-colors"
                        >
                            <Navigation size={14} />
                            길찾기
                        </a>
                    </div>
                    <div className="p-5">
                        <KakaoMap
                            lat={parseFloat(schedule.location_lat)}
                            lng={parseFloat(schedule.location_lng)}
                            name={schedule.location_name}
                        />
                    </div>
                </motion.div>
            )}

            {/* 해외 공연 등 좌표 없는 경우 */}
            {schedule.location_name && !hasLocation && (
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 }}
                    className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl p-8 text-center"
                >
                    <div className="w-16 h-16 rounded-full bg-white shadow-lg mx-auto mb-4 flex items-center justify-center">
                        <MapPin size={28} className="text-gray-400" />
                    </div>
                    <p className="text-xl font-bold text-gray-800 mb-1">{schedule.location_name}</p>
                    {schedule.location_address && (
                        <p className="text-gray-500">{schedule.location_address}</p>
                    )}
                    {schedule.location_detail && (
                        <p className="text-sm text-gray-400 mt-2">{schedule.location_detail}</p>
                    )}
                </motion.div>
            )}
        </div>
    );
}

// 기본 섹션 컴포넌트 (다른 카테고리용)
function DefaultSection({ schedule }) {
    return (
        <div className="space-y-6">
            {/* 제목 */}
            <h1 className="text-2xl font-bold text-gray-900 leading-relaxed">
                {decodeHtmlEntities(schedule.title)}
            </h1>

            {/* 메타 정보 */}
            <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                <div className="flex items-center gap-1.5">
                    <Calendar size={16} />
                    <span>{formatFullDate(schedule.date)}</span>
                </div>
                {schedule.time && (
                    <div className="flex items-center gap-1.5">
                        <Clock size={16} />
                        <span>{formatTime(schedule.time)}</span>
                    </div>
                )}
            </div>

            {/* 설명 */}
            {schedule.description && (
                <div className="bg-gray-50 rounded-2xl p-6">
                    <p className="text-gray-700 whitespace-pre-wrap leading-relaxed">
                        {decodeHtmlEntities(schedule.description)}
                    </p>
                </div>
            )}

            {/* 원본 링크 */}
            {schedule.source_url && (
                <a
                    href={schedule.source_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white rounded-xl font-medium transition-colors"
                >
                    <ExternalLink size={16} />
                    원본 보기
                </a>
            )}
        </div>
    );
}

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

    const { data: schedule, isLoading, error, isFetching } = useQuery({
        queryKey: ['schedule', id],
        queryFn: () => getSchedule(id),
        placeholderData: keepPreviousData,
        retry: false, // 404 등 에러 시 재시도하지 않음
    });

    if (isLoading) {
        return (
            <div className="min-h-[calc(100vh-64px)] flex items-center justify-center bg-gray-50">
                <div className="w-10 h-10 border-3 border-primary border-t-transparent rounded-full animate-spin" />
            </div>
        );
    }

    if (error || !schedule) {
        return (
            <div className="min-h-[calc(100vh-64px)] flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
                <div className="text-center px-6">
                    {/* 아이콘 */}
                    <motion.div
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
                        className="mb-8"
                    >
                        <div className="w-32 h-32 mx-auto bg-gradient-to-br from-primary/10 to-primary/5 rounded-3xl flex items-center justify-center">
                            <Calendar size={64} 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-8"
                    >
                        <h2 className="text-2xl font-bold text-gray-800 mb-3">
                            일정을 찾을 수 없습니다
                        </h2>
                        <p className="text-gray-500 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-2 mb-10"
                    >
                        {[...Array(5)].map((_, i) => (
                            <motion.div
                                key={i}
                                className="w-2 h-2 rounded-full bg-primary"
                                animate={{
                                    y: [0, -8, 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 justify-center gap-4"
                    >
                        <button
                            onClick={() => window.history.back()}
                            className="flex items-center gap-2 px-6 py-3 border-2 border-primary text-primary rounded-full font-medium hover:bg-primary hover:text-white transition-colors duration-200"
                        >
                            <ChevronRight size={18} className="rotate-180" />
                            이전 페이지
                        </button>
                        <Link
                            to="/schedule"
                            className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium hover:shadow-lg hover:shadow-primary/30 transition-all duration-200"
                        >
                            <Calendar size={18} />
                            일정 목록
                        </Link>
                    </motion.div>
                </div>
            </div>
        );
    }

    // 카테고리별 섹션 렌더링
    const renderCategorySection = () => {
        switch (schedule.category_id) {
            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} />;
        }
    };

    const isYoutube = schedule.category_id === CATEGORY_ID.YOUTUBE;
    const isX = schedule.category_id === CATEGORY_ID.X;
    const isConcert = schedule.category_id === CATEGORY_ID.CONCERT;
    const hasCustomLayout = isYoutube || isX || isConcert;

    return (
        <div className="min-h-[calc(100vh-64px)] bg-gray-50">
            <div className={`${isYoutube || isConcert ? 'max-w-5xl' : 'max-w-3xl'} mx-auto px-6 py-8`}>
                {/* 브레드크럼 네비게이션 */}
                <motion.div
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="flex items-center gap-2 text-sm text-gray-500 mb-8"
                >
                    <Link to="/schedule" className="hover:text-primary transition-colors">
                        일정
                    </Link>
                    <ChevronRight size={14} />
                    <span
                        className="hover:text-primary transition-colors"
                        style={{ color: schedule.category_color }}
                    >
                        {schedule.category_name}
                    </span>
                    <ChevronRight size={14} />
                    <span className="text-gray-700 font-medium truncate max-w-md">
                        {decodeHtmlEntities(schedule.title)}
                    </span>
                </motion.div>

                {/* 메인 컨텐츠 */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.05 }}
                    className={`${hasCustomLayout ? '' : 'bg-white rounded-3xl shadow-sm p-8'}`}
                >
                    {renderCategorySection()}
                </motion.div>
            </div>
        </div>
    );
}

export default ScheduleDetail;