import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Calendar, Music } from 'lucide-react';
import { getAlbums } from '@/api';
import { formatDate } from '@/utils';

/**
 * PC 앨범 목록 페이지
 */
function PCAlbum() {
  const navigate = useNavigate();

  const { data: albums = [], isLoading: loading } = useQuery({
    queryKey: ['albums'],
    queryFn: getAlbums,
  });

  // 타이틀곡 찾기
  const getTitleTrack = (tracks) => {
    if (!tracks || tracks.length === 0) return '';
    const titleTrack = tracks.find((t) => t.is_title_track);
    return titleTrack ? titleTrack.title : tracks[0].title;
  };

  // 앨범 타입별 개수 계산
  const getAlbumType = (album) => album.album_type_short || album.album_type;
  const albumStats = {
    정규: albums.filter((a) => getAlbumType(a) === '정규').length,
    미니: albums.filter((a) => getAlbumType(a) === '미니').length,
    싱글: albums.filter((a) => getAlbumType(a) === '싱글').length,
    총: albums.length,
  };

  // 앨범 클릭
  const handleAlbumClick = (albumTitle) => {
    navigate(`/album/${encodeURIComponent(albumTitle)}`);
  };

  if (loading) {
    return (
      <div 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>
    );
  }

  return (
    <div className="py-16">
      <div className="max-w-7xl mx-auto px-6">
        {/* 헤더 */}
        <div className="text-center mb-8">
          <motion.h1
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl font-bold mb-4"
          >
            앨범
          </motion.h1>
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
            className="text-gray-500"
          >
            프로미스나인의 음악을 만나보세요
          </motion.p>
        </div>

        {/* 통계 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="mb-12 grid grid-cols-4 gap-4"
        >
          <div className="bg-gray-50 rounded-xl p-4 text-center">
            <p className="text-2xl font-bold text-primary mb-1">{albumStats.정규}</p>
            <p className="text-gray-500 text-sm">정규 앨범</p>
          </div>
          <div className="bg-gray-50 rounded-xl p-4 text-center">
            <p className="text-2xl font-bold text-primary mb-1">{albumStats.미니}</p>
            <p className="text-gray-500 text-sm">미니 앨범</p>
          </div>
          <div className="bg-gray-50 rounded-xl p-4 text-center">
            <p className="text-2xl font-bold text-primary mb-1">{albumStats.싱글}</p>
            <p className="text-gray-500 text-sm">싱글 앨범</p>
          </div>
          <div className="bg-gray-50 rounded-xl p-4 text-center">
            <p className="text-2xl font-bold text-primary mb-1">{albumStats.총}</p>
            <p className="text-gray-500 text-sm">총 앨범</p>
          </div>
        </motion.div>

        {/* 앨범 그리드 */}
        <div className="grid grid-cols-4 gap-8">
          {albums.map((album, index) => (
            <motion.div
              key={album.id}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1, duration: 0.3 }}
              className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300 cursor-pointer"
              onClick={() => handleAlbumClick(album.title)}
            >
              {/* 앨범 커버 */}
              <div className="relative aspect-square bg-gray-100 overflow-hidden">
                <img
                  src={album.cover_medium_url || album.cover_original_url}
                  alt={album.title}
                  loading="lazy"
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />

                {/* 호버 오버레이 */}
                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <div className="text-center text-white">
                    <Music size={40} className="mx-auto mb-2" />
                    <p className="text-sm">{album.tracks?.length || 0}곡 수록</p>
                  </div>
                </div>
              </div>

              {/* 앨범 정보 */}
              <div className="p-6">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-bold text-lg truncate flex-1">{album.title}</h3>
                  <span className="px-2 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full flex-shrink-0">
                    {album.album_type_short || album.album_type}
                  </span>
                </div>
                <p className="text-primary text-sm font-medium mb-3">{getTitleTrack(album.tracks)}</p>
                <div className="flex items-center gap-2 text-sm text-gray-500">
                  <Calendar size={14} />
                  <span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default PCAlbum;
