import { useMemo, useLayoutEffect } 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, ChevronRight } from 'lucide-react';
import { getTrack } from '@/api';
import { getYoutubeVideoId, parseCredits } from '@/utils';

/**
 * 크레딧 텍스트를 줄바꿈으로 렌더링
 */
function formatCredit(text) {
  const credits = parseCredits(text);
  if (credits.length === 0) return null;
  return credits.map((item, index) => (
    <span key={index} className="block">
      {item}
    </span>
  ));
}

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

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

  const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.video_url), [track?.video_url]);
  const videoLabel = track?.video_type === 'special' ? '스페셜 영상' : '뮤직비디오';

  // 트랙 변경 시 스크롤 맨 위로
  useLayoutEffect(() => {
    const main = document.querySelector('main');
    if (main) {
      main.scrollTop = 0;
    }
  }, [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" />
      </motion.div>
    );
  }

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

  return (
    <motion.div
      key={trackTitle}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
      className="py-12"
    >
      <div className="max-w-7xl 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>
          <ChevronRight size={14} />
          <Link
            to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
            className="hover:text-primary transition-colors"
          >
            {track.album?.title}
          </Link>
          <ChevronRight size={14} />
          <span className="text-gray-700 font-medium">{track.title}</span>
        </div>

        {/* 트랙 정보 헤더 */}
        <div className="flex gap-8 items-start mb-10">
          {/* 앨범 커버 */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.4 }}
            className="w-48 h-48 rounded-2xl overflow-hidden shadow-lg flex-shrink-0"
          >
            <img src={track.album?.cover_medium_url} alt={track.album?.title} className="w-full h-full object-cover" />
          </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-bold rounded-full">TITLE</span>
              )}
              <span className="text-gray-500 text-sm">Track {String(track.track_number).padStart(2, '0')}</span>
            </div>

            <h1 className="text-4xl font-bold mb-3 text-gray-900">{track.title}</h1>

            {/* 앨범 정보 */}
            <Link
              to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
              className="text-gray-500 hover:text-primary transition-colors mb-3 block"
            >
              {track.album?.album_type} · {track.album?.title}
            </Link>

            {/* 재생 시간 */}
            {track.duration && (
              <div className="flex items-center gap-2 text-gray-500">
                <Clock size={16} />
                <span>{track.duration}</span>
              </div>
            )}
          </motion.div>
        </div>

        {/* 뮤직비디오 섹션 */}
        {youtubeVideoId && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.15, duration: 0.4 }}
            className="mb-10"
          >
            <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
              <div className="w-1 h-5 bg-red-500 rounded-full" />
              {videoLabel}
            </h2>
            <div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-lg bg-black">
              <iframe
                src={`https://www.youtube.com/embed/${youtubeVideoId}`}
                title={`${track.title} ${videoLabel}`}
                className="absolute inset-0 w-full h-full"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>
          </motion.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-white rounded-2xl p-6 border border-gray-100 shadow-sm"
              >
                <h2 className="text-lg font-bold mb-5 flex items-center gap-2">
                  <div className="w-1 h-5 bg-primary rounded-full" />
                  크레딧
                </h2>
                <div className="space-y-5">
                  {track.lyricist && (
                    <div className="flex items-start gap-4">
                      <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <Mic2 size={16} className="text-gray-500" />
                      </div>
                      <div className="flex-1">
                        <p className="text-xs text-gray-400 font-medium mb-1">작사</p>
                        <p className="text-sm text-gray-700 leading-relaxed">{formatCredit(track.lyricist)}</p>
                      </div>
                    </div>
                  )}
                  {track.composer && (
                    <div className="flex items-start gap-4">
                      <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <Music size={16} className="text-gray-500" />
                      </div>
                      <div className="flex-1">
                        <p className="text-xs text-gray-400 font-medium mb-1">작곡</p>
                        <p className="text-sm text-gray-700 leading-relaxed">{formatCredit(track.composer)}</p>
                      </div>
                    </div>
                  )}
                  {track.arranger && (
                    <div className="flex items-start gap-4">
                      <div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <User size={16} className="text-gray-500" />
                      </div>
                      <div className="flex-1">
                        <p className="text-xs text-gray-400 font-medium mb-1">편곡</p>
                        <p className="text-sm text-gray-700 leading-relaxed">{formatCredit(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 rounded-2xl p-6 border border-gray-100 shadow-sm"
            >
              <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
                <div className="w-1 h-5 bg-primary rounded-full" />
                수록곡
              </h2>
              <div className="space-y-0.5">
                {track.otherTracks?.map((t) => {
                  const isCurrent = t.title === track.title;
                  return (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => {
                        if (!isCurrent) {
                          navigate(
                            `/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`,
                            { replace: true }
                          );
                        }
                      }}
                      className={`w-full group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${
                        isCurrent ? 'bg-primary text-white' : 'hover:bg-gray-50'
                      }`}
                    >
                      {/* 트랙 번호 / 재생 아이콘 */}
                      <div
                        className={`w-6 text-center text-xs tabular-nums ${isCurrent ? 'text-white/80' : 'text-gray-400'}`}
                      >
                        {isCurrent ? (
                          <Music size={14} className="mx-auto text-white" />
                        ) : (
                          String(t.track_number).padStart(2, '0')
                        )}
                      </div>

                      {/* 곡 제목 + 타이틀 배지 */}
                      <div className="flex-1 flex items-center gap-2 min-w-0">
                        <span className={`text-sm truncate ${isCurrent ? 'font-semibold' : 'group-hover:text-gray-900'}`}>
                          {t.title}
                        </span>

                        {/* 타이틀 배지 */}
                        {t.is_title_track === 1 && (
                          <span
                            className={`px-2 py-0.5 text-[10px] font-bold rounded-full flex-shrink-0 ${
                              isCurrent ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary'
                            }`}
                          >
                            TITLE
                          </span>
                        )}
                      </div>

                      {/* 재생 시간 */}
                      <span className={`text-xs tabular-nums ${isCurrent ? 'text-white/70' : 'text-gray-400'}`}>
                        {t.duration || ''}
                      </span>
                    </button>
                  );
                })}
              </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 rounded-2xl p-8 border border-gray-100 shadow-sm">
              <h2 className="text-lg font-bold mb-6 flex items-center gap-2">
                <div className="w-1 h-5 bg-primary rounded-full" />
                가사
              </h2>
              {track.lyrics ? (
                <div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4">
                  {track.lyrics}
                </div>
              ) : (
                <div className="text-center py-16 text-gray-400">
                  <Mic2 size={48} className="mx-auto mb-4 opacity-20" />
                  <p>가사 정보가 없습니다</p>
                </div>
              )}
            </div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}

export default PCTrackDetail;
