import { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Calendar, ArrowRight, Music } from 'lucide-react';
import { useMembers, useAlbums, useUpcomingSchedules } from '@/hooks';
import { ScheduleCard } from '@/components/pc/public';
import { GROUP_INFO } from '@/constants';

/**
 * PC 홈 페이지
 */
function Home() {
  // 멤버 데이터
  const { data: members = [] } = useMembers();

  // 앨범 데이터 (최신 4개)
  const { data: allAlbums = [] } = useAlbums();
  const albums = allAlbums.slice(0, 4);

  // 다가오는 일정 (3개)
  const { data: upcomingSchedules = [] } = useUpcomingSchedules(3);

  // 활동 멤버 수
  const activeMemberCount = useMemo(
    () => members.filter((m) => !m.is_former).length,
    [members]
  );

  // D+Day 계산
  const dDay = useMemo(() => {
    const debutDate = new Date(GROUP_INFO.DEBUT_DATE);
    const today = new Date();
    return Math.floor((today - debutDate) / (1000 * 60 * 60 * 24)) + 1;
  }, []);

  return (
    <div>
      {/* 히어로 섹션 */}
      <section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-white"
          >
            <h1 className="text-6xl font-bold mb-4">fromis_9</h1>
            <p className="text-2xl font-light mb-2">프로미스나인</p>
            <p className="text-lg opacity-80 leading-relaxed">
              인사드리겠습니다. 둘, 셋!
              <br />
              이제는 약속해 소중히 간직해,
              <br />
              당신의 아이돌로 성장하겠습니다!
            </p>
          </motion.div>
        </div>
        {/* 장식 */}
        <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
          <div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
          <div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
        </div>
      </section>

      {/* 그룹 통계 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <motion.div
            className="grid grid-cols-4 gap-6"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.1 }}
            variants={{
              hidden: { opacity: 1 },
              visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
            }}
          >
            {[
              { value: GROUP_INFO.DEBUT_DATE_DISPLAY, label: '데뷔일' },
              { value: `D+${dDay.toLocaleString()}`, label: 'D+Day' },
              { value: String(activeMemberCount || '-'), label: '멤버 수' },
              { value: GROUP_INFO.FANDOM_NAME, label: '팬덤명' },
            ].map((stat, index) => (
              <motion.div
                key={index}
                variants={{
                  hidden: { opacity: 0, y: 20 },
                  visible: {
                    opacity: 1,
                    y: 0,
                    transition: { duration: 0.4, ease: 'easeOut' },
                  },
                }}
                className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
              >
                <p className="text-3xl font-bold mb-1">{stat.value}</p>
                <p className="text-white/70 text-sm">{stat.label}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* 멤버 미리보기 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-3xl font-bold">멤버</h2>
            <Link
              to="/members"
              className="text-primary hover:underline flex items-center gap-1"
            >
              전체보기 <ArrowRight size={16} />
            </Link>
          </div>
          <div className="grid grid-cols-5 gap-6">
            {members
              .filter((m) => !m.is_former)
              .map((member, index) => (
                <motion.div
                  key={member.id}
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{
                    delay: 0.3 + index * 0.1,
                    duration: 0.5,
                    ease: 'easeOut',
                  }}
                  className="group relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
                >
                  <div className="aspect-[3/4] overflow-hidden">
                    <img
                      src={member.image_url}
                      alt={member.name}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300" />
                  <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
                    <h3 className="font-bold text-xl drop-shadow-lg">
                      {member.name}
                    </h3>
                  </div>
                </motion.div>
              ))}
          </div>
        </div>
      </section>

      {/* 앨범 미리보기 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-3xl font-bold">앨범</h2>
            <Link
              to="/album"
              className="text-primary hover:underline flex items-center gap-1"
            >
              전체보기 <ArrowRight size={16} />
            </Link>
          </div>
          <div className="grid grid-cols-4 gap-6">
            {albums.map((album, index) => (
              <motion.div
                key={album.id}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{
                  delay: 0.3 + index * 0.1,
                  duration: 0.5,
                  ease: 'easeOut',
                }}
                className="group cursor-pointer"
                onClick={() =>
                  (window.location.href = `/album/${encodeURIComponent(album.title)}`)
                }
              >
                <div className="relative aspect-square rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                  <img
                    src={album.cover_medium_url || album.cover_original_url}
                    alt={album.title}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <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={32} className="mx-auto mb-2" />
                      <p className="text-sm">{album.tracks?.length || 0}곡 수록</p>
                    </div>
                  </div>
                </div>
                <div className="mt-3">
                  <h3 className="font-bold text-lg truncate">{album.title}</h3>
                  <p className="text-gray-500 text-sm">
                    {album.release_date?.slice(0, 4)}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* 일정 미리보기 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-3xl font-bold">다가오는 일정</h2>
            <Link
              to="/schedule"
              className="text-primary hover:underline flex items-center gap-1"
            >
              전체보기 <ArrowRight size={16} />
            </Link>
          </div>
          {upcomingSchedules.length === 0 ? (
            <div className="text-center py-12 text-gray-400">
              <Calendar size={48} className="mx-auto mb-4 opacity-30" />
              <p>예정된 일정이 없습니다</p>
            </div>
          ) : (
            <motion.div
              className="space-y-4"
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.1 }}
              variants={{
                hidden: { opacity: 1 },
                visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
              }}
            >
              {upcomingSchedules.map((schedule) => (
                <motion.div
                  key={schedule.id}
                  variants={{
                    hidden: { opacity: 0, x: -30 },
                    visible: {
                      opacity: 1,
                      x: 0,
                      transition: { duration: 0.4, ease: 'easeOut' },
                    },
                  }}
                >
                  <ScheduleCard schedule={schedule} />
                </motion.div>
              ))}
            </motion.div>
          )}
        </div>
      </section>
    </div>
  );
}

export default Home;
