import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { Clock, User, Music, Mic2, Play, ExternalLink, ChevronRight } from 'lucide-react';
import { getTrack } from '../../../api/public/albums';
import { formatDate } from '../../../utils/date';

// PC 곡 상세 페이지
function TrackDetail() {
    const { name: albumName, trackTitle } = useParams();
    const navigate = useNavigate();

    // useQuery로 트랙 데이터 로드
    const { data: track, isLoading: loading, error } = useQuery({
        queryKey: ['track', albumName, trackTitle],
        queryFn: () => getTrack(albumName, trackTitle),
        enabled: !!albumName && !!trackTitle,
    });

    if (loading) {
        return (
            <motion.div 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="py-16 flex justify-center items-center min-h-[60vh]"
            >
                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
            </motion.div>
        );
    }

    if (error || !track) {
        return (
            <div className="py-16 text-center">
                <p className="text-gray-500">트랙을 찾을 수 없습니다.</p>
            </div>
        );
    }

    return (
        <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
            className="py-16"
        >
            <div className="max-w-5xl mx-auto px-6">
                {/* 브레드크럼 네비게이션 */}
                <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
                    <Link to="/album" className="hover:text-primary transition-colors">
                        앨범
                    </Link>
                    <span>/</span>
                    <Link 
                        to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
                        className="hover:text-primary transition-colors"
                    >
                        {track.album?.title}
                    </Link>
                    <span>/</span>
                    <span className="text-gray-700">{track.title}</span>
                </div>

                {/* 트랙 정보 헤더 */}
                <div className="flex gap-8 mb-10">
                    {/* 앨범 커버 */}
                    <motion.div
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.4 }}
                        className="w-56 h-56 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
                        onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
                    >
                        <img
                            src={track.album?.cover_medium_url}
                            alt={track.album?.title}
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                    </motion.div>

                    {/* 트랙 정보 */}
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.1, duration: 0.4 }}
                        className="flex-1"
                    >
                        <div className="flex items-center gap-3 mb-3">
                            {track.is_title_track === 1 && (
                                <span className="px-3 py-1 bg-primary text-white text-sm font-medium rounded-full">
                                    TITLE
                                </span>
                            )}
                            <span className="text-sm text-gray-500">
                                Track {String(track.track_number).padStart(2, '0')}
                            </span>
                        </div>
                        
                        <h1 className="text-4xl font-bold mb-4">{track.title}</h1>
                        
                        {/* 메타 정보 */}
                        <div className="flex items-center gap-6 text-gray-500 mb-6">
                            <Link 
                                to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
                                className="flex items-center gap-2 hover:text-primary transition-colors"
                            >
                                <Music size={18} />
                                <span>{track.album?.title}</span>
                            </Link>
                            {track.duration && (
                                <div className="flex items-center gap-2">
                                    <Clock size={18} />
                                    <span>{track.duration}</span>
                                </div>
                            )}
                        </div>

                        {/* 뮤직비디오 링크 */}
                        {track.music_video_url && (
                            <a
                                href={track.music_video_url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
                            >
                                <Play size={18} fill="currentColor" />
                                뮤직비디오 보기
                                <ExternalLink size={14} />
                            </a>
                        )}
                    </motion.div>
                </div>

                {/* 크레딧 & 가사 영역 */}
                <div className="grid grid-cols-3 gap-8">
                    {/* 왼쪽: 크레딧 + 수록곡 */}
                    <div className="col-span-1 space-y-6">
                        {/* 크레딧 */}
                        {(track.lyricist || track.composer || track.arranger) && (
                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 0.2, duration: 0.4 }}
                                className="bg-gray-50 rounded-2xl p-6"
                            >
                                <h2 className="text-lg font-bold mb-4">크레딧</h2>
                                <div className="space-y-4">
                                    {track.lyricist && (
                                        <div className="flex items-start gap-3">
                                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                                <Mic2 size={14} className="text-primary" />
                                            </div>
                                            <div>
                                                <p className="text-xs text-gray-400 mb-0.5">작사</p>
                                                <p className="text-sm text-gray-700">{track.lyricist}</p>
                                            </div>
                                        </div>
                                    )}
                                    {track.composer && (
                                        <div className="flex items-start gap-3">
                                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                                <Music size={14} className="text-primary" />
                                            </div>
                                            <div>
                                                <p className="text-xs text-gray-400 mb-0.5">작곡</p>
                                                <p className="text-sm text-gray-700">{track.composer}</p>
                                            </div>
                                        </div>
                                    )}
                                    {track.arranger && (
                                        <div className="flex items-start gap-3">
                                            <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
                                                <User size={14} className="text-gray-500" />
                                            </div>
                                            <div>
                                                <p className="text-xs text-gray-400 mb-0.5">편곡</p>
                                                <p className="text-sm text-gray-700">{track.arranger}</p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </motion.div>
                        )}

                        {/* 수록곡 */}
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.3, duration: 0.4 }}
                            className="bg-white border border-gray-100 rounded-2xl p-6"
                        >
                            <h2 className="text-lg font-bold mb-4">수록곡</h2>
                            <div className="space-y-1">
                                {track.otherTracks?.map((t) => (
                                    <Link
                                        key={t.id}
                                        to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
                                        className={`flex items-center gap-3 p-2.5 rounded-lg transition-colors ${
                                            t.title === track.title 
                                                ? 'bg-primary/10 text-primary' 
                                                : 'hover:bg-gray-50'
                                        }`}
                                    >
                                        <span className="w-6 text-center text-sm text-gray-400 tabular-nums">
                                            {String(t.track_number).padStart(2, '0')}
                                        </span>
                                        <span className={`flex-1 text-sm truncate ${
                                            t.title === track.title ? 'font-medium' : ''
                                        }`}>
                                            {t.title}
                                        </span>
                                        {t.is_title_track === 1 && (
                                            <span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded">
                                                T
                                            </span>
                                        )}
                                    </Link>
                                ))}
                            </div>
                        </motion.div>
                    </div>

                    {/* 오른쪽: 가사 */}
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.25, duration: 0.4 }}
                        className="col-span-2"
                    >
                        <div className="bg-white border border-gray-100 rounded-2xl p-8">
                            <h2 className="text-lg font-bold mb-6">가사</h2>
                            {track.lyrics ? (
                                <div className="text-gray-700 leading-loose whitespace-pre-line">
                                    {track.lyrics}
                                </div>
                            ) : (
                                <div className="text-center py-12 text-gray-400">
                                    <Music size={48} className="mx-auto mb-4 opacity-30" />
                                    <p>가사 정보가 없습니다</p>
                                </div>
                            )}
                        </div>
                    </motion.div>
                </div>
            </div>
        </motion.div>
    );
}

export default TrackDetail;