import { memo, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';

/**
 * 생일 축하 다이얼로그
 * @param {boolean} isOpen - 다이얼로그 표시 여부
 * @param {function} onClose - 닫기 핸들러
 * @param {string} title - 제목 (예: HAPPY Jiwon DAY)
 * @param {string} memberImage - 멤버 이미지 URL
 * @param {string} date - 생일 날짜 (YYYY-MM-DD)
 */
const BirthdayCelebrationDialog = memo(function BirthdayCelebrationDialog({
  isOpen,
  onClose,
  title = '',
  memberImage = '',
  date = '',
}) {
  // ESC 키로 닫기
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isOpen, onClose]);

  const dateObj = date ? new Date(date) : new Date();
  const month = dateObj.getMonth() + 1;
  const day = dateObj.getDate();

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[100] flex items-center justify-center p-4"
          onClick={onClose}
        >
          {/* 배경 오버레이 */}
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />

          {/* 다이얼로그 */}
          <motion.div
            initial={{ scale: 0.8, opacity: 0, y: 20 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.8, opacity: 0, y: 20 }}
            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
            onClick={(e) => e.stopPropagation()}
            className="relative w-full max-w-md overflow-hidden rounded-3xl bg-gradient-to-br from-pink-400 via-purple-400 to-indigo-400 shadow-2xl"
          >
            {/* 닫기 버튼 */}
            <button
              onClick={onClose}
              className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
            >
              <X size={20} className="text-white" />
            </button>

            {/* 배경 장식 */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
              <div className="absolute top-6 left-10 text-2xl animate-pulse">🎉</div>
              <div className="absolute top-10 right-16 text-xl animate-pulse delay-100">🎂</div>
              <div className="absolute bottom-20 left-8 text-2xl animate-pulse delay-200">🎁</div>
              <div className="absolute bottom-10 right-10 text-xl animate-pulse delay-150">🎉</div>
              <div className="absolute top-1/3 left-4 text-white/30 text-lg animate-pulse delay-300">✦</div>
              <div className="absolute top-1/2 right-4 text-white/20 text-sm animate-pulse delay-250">✦</div>
              <div className="absolute -top-16 -left-16 w-48 h-48 bg-white/10 rounded-full" />
              <div className="absolute -bottom-20 -right-20 w-56 h-56 bg-white/10 rounded-full" />
            </div>

            {/* 컨텐츠 */}
            <div className="relative flex flex-col items-center py-12 px-8 text-center">
              {/* 멤버 사진 */}
              <div className="w-28 h-28 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center shadow-lg border-4 border-white/30 mb-6 overflow-hidden">
                {memberImage ? (
                  <img
                    src={memberImage}
                    alt={title}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <span className="text-5xl">🎂</span>
                )}
              </div>

              {/* 텍스트 */}
              <h2
                className="text-white font-bold text-2xl mb-2"
                style={{ textShadow: '0 2px 4px rgba(0,0,0,0.2)' }}
              >
                {title}
              </h2>
              <p
                className="text-white/80 text-base"
                style={{ textShadow: '0 1px 2px rgba(0,0,0,0.2)' }}
              >
                🎂 {month}월 {day}일
              </p>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
});

export default BirthdayCelebrationDialog;
