import { useParams, Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { ChevronRight } from 'lucide-react';
import { fetchApi } from '@/api/client';
import { MEMBER_ENGLISH_NAMES } from '@/constants';

/**
 * PC 생일 페이지
 */
function PCBirthday() {
  const { memberName, year } = useParams();

  // URL 디코딩
  const decodedMemberName = decodeURIComponent(memberName || '');
  const englishName = MEMBER_ENGLISH_NAMES[decodedMemberName];

  // 멤버 정보 조회
  const {
    data: member,
    isLoading: memberLoading,
    error,
  } = useQuery({
    queryKey: ['member', decodedMemberName],
    queryFn: () => fetchApi(`/members/${encodeURIComponent(decodedMemberName)}`),
    enabled: !!decodedMemberName,
  });

  if (!decodedMemberName || error) {
    return (
      <div className="min-h-[calc(100vh-64px)] flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-2">멤버를 찾을 수 없습니다</h1>
          <Link to="/schedule" className="text-primary hover:underline">
            일정으로 돌아가기
          </Link>
        </div>
      </div>
    );
  }

  if (memberLoading) {
    return (
      <div className="min-h-[calc(100vh-64px)] flex items-center justify-center">
        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  // 생일 계산
  const birthDate = member?.birth_date ? new Date(member.birth_date) : null;
  const birthdayThisYear = birthDate ? new Date(parseInt(year), birthDate.getMonth(), birthDate.getDate()) : null;

  return (
    <div className="min-h-[calc(100vh-64px)] bg-gradient-to-b from-pink-50 to-purple-50">
      <div className="max-w-4xl mx-auto px-6 py-8">
        {/* 네비게이션 */}
        <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
          <Link to="/schedule" className="hover:text-primary transition-colors">
            일정
          </Link>
          <ChevronRight size={14} />
          <span className="font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
            HAPPY {englishName} DAY
          </span>
        </div>

        {/* 헤더 카드 */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-3xl shadow-xl mb-8"
        >
          {/* 배경 장식 */}
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
            <div className="absolute -bottom-10 -left-10 w-48 h-48 bg-white/10 rounded-full" />
            <div className="absolute top-1/3 right-1/4 w-20 h-20 bg-white/5 rounded-full" />
            <div className="absolute top-6 right-12 text-4xl">✨</div>
            <div className="absolute bottom-6 left-16 text-3xl">🎉</div>
            <div className="absolute top-1/2 right-8 text-2xl">🎈</div>
          </div>

          <div className="relative flex items-center p-8 gap-8">
            {/* 멤버 사진 */}
            {member?.image_url && (
              <div className="flex-shrink-0">
                <div className="w-32 h-32 rounded-full border-4 border-white/50 shadow-xl overflow-hidden bg-white">
                  <img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
                </div>
              </div>
            )}

            {/* 내용 */}
            <div className="flex-1 text-white">
              <div className="flex items-center gap-3 mb-2">
                <span className="text-5xl">🎂</span>
                <h1 className="font-bold text-4xl tracking-wide">HAPPY {englishName} DAY</h1>
              </div>
              <p className="text-white/80 text-lg mt-2">
                {year}년 {birthdayThisYear?.getMonth() + 1}월 {birthdayThisYear?.getDate()}일
              </p>
            </div>

            {/* 년도 뱃지 */}
            <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-2xl px-6 py-4 text-center">
              <div className="text-white/70 text-sm font-medium">YEAR</div>
              <div className="text-white text-4xl font-bold">{year}</div>
            </div>
          </div>
        </motion.div>

        {/* 생일카페 섹션 */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white rounded-2xl shadow-lg p-8"
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
            <span>☕</span>
            생일카페
          </h2>

          {/* 준비 중 메시지 */}
          <div className="text-center py-12">
            <div className="text-6xl mb-4">🎁</div>
            <p className="text-gray-500 text-lg">
              {year}년 {decodedMemberName} 생일카페 정보가 준비 중입니다
            </p>
            <p className="text-gray-400 text-sm mt-2">생일카페 정보가 등록되면 이곳에 표시됩니다</p>
          </div>
        </motion.div>
      </div>
    </div>
  );
}

export default PCBirthday;