import { motion } from 'framer-motion';
import { ChevronRight } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useMembers, useAlbums, useUpcomingSchedules } from '@/hooks';
import { ScheduleCard as MobileScheduleCard } from '@/components/mobile';

/**
 * Mobile 홈 페이지
 */
function MobileHome() {
  const navigate = useNavigate();

  // 멤버 데이터 (활동 중인 멤버만)
  const { data: allMembers = [] } = useMembers();
  const members = allMembers.filter((m) => !m.is_former);

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

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

  return (
    <div>
      {/* 히어로 섹션 */}
      <motion.section
        className="relative bg-gradient-to-br from-primary to-primary-dark py-12 px-4 overflow-hidden"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        <div className="absolute inset-0 bg-black/10" />
        <motion.div
          className="relative text-center text-white"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.5 }}
        >
          <h1 className="text-3xl font-bold mb-1">fromis_9</h1>
          <p className="text-lg font-light mb-3">프로미스나인</p>
          <p className="text-sm opacity-80 leading-relaxed">
            인사드리겠습니다. 둘, 셋!
            <br />
            이제는 약속해 소중히 간직해,
            <br />
            당신의 아이돌로 성장하겠습니다!
          </p>
        </motion.div>
        {/* 장식 */}
        <div className="absolute right-0 top-0 w-32 h-32 rounded-full bg-white/10 -translate-y-1/2 translate-x-1/2" />
        <div className="absolute left-0 bottom-0 w-24 h-24 rounded-full bg-white/5 translate-y-1/2 -translate-x-1/2" />
      </motion.section>

      {/* 멤버 섹션 */}
      <motion.section
        className="px-4 py-6"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3, duration: 0.5 }}
      >
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold">멤버</h2>
          <button
            onClick={() => navigate('/members')}
            className="text-primary text-sm flex items-center gap-1"
          >
            전체보기 <ChevronRight size={16} />
          </button>
        </div>
        <div className="grid grid-cols-5 gap-2">
          {members.map((member, index) => (
            <motion.div
              key={member.id}
              className="text-center"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.4 + index * 0.05, duration: 0.3 }}
              whileTap={{ scale: 0.95 }}
            >
              <div className="aspect-square rounded-full overflow-hidden bg-gray-200 mb-1">
                {member.image_url && (
                  <img
                    src={member.image_url}
                    alt={member.name}
                    className="w-full h-full object-cover"
                  />
                )}
              </div>
              <p className="text-xs font-medium truncate">{member.name}</p>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* 앨범 섹션 */}
      <motion.section
        className="px-4 py-6"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5, duration: 0.5 }}
      >
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold">앨범</h2>
          <button
            onClick={() => navigate('/album')}
            className="text-primary text-sm flex items-center gap-1"
          >
            전체보기 <ChevronRight size={16} />
          </button>
        </div>
        <div className="grid grid-cols-2 gap-3">
          {albums.map((album, index) => (
            <motion.div
              key={album.id}
              onClick={() => navigate(`/album/${album.folder_name}`)}
              className="bg-white rounded-xl overflow-hidden shadow-md"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6 + index * 0.1, duration: 0.3 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="aspect-square bg-gray-200">
                {album.cover_thumb_url && (
                  <img
                    src={album.cover_thumb_url}
                    alt={album.title}
                    className="w-full h-full object-cover"
                  />
                )}
              </div>
              <div className="p-3">
                <p className="font-medium text-sm truncate">{album.title}</p>
                <p className="text-xs text-gray-400">
                  {album.release_date?.slice(0, 4)}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* 일정 섹션 */}
      <motion.section
        className="px-4 py-4"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.7, duration: 0.5 }}
      >
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold">다가오는 일정</h2>
          <button
            onClick={() => navigate('/schedule')}
            className="text-primary text-sm flex items-center gap-1"
          >
            전체보기 <ChevronRight size={16} />
          </button>
        </div>
        {schedules.length > 0 ? (
          <div className="space-y-3">
            {schedules.map((schedule, index) => (
              <motion.div
                key={schedule.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.8 + index * 0.1, duration: 0.3 }}
                whileTap={{ scale: 0.98 }}
              >
                <MobileScheduleCard
                  schedule={schedule}
                  onClick={() => navigate('/schedule')}
                />
              </motion.div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 text-gray-400">
            <p>다가오는 일정이 없습니다</p>
          </div>
        )}
      </motion.section>
    </div>
  );
}

export default MobileHome;
