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

/**
 * 데뷔/주년 축하 다이얼로그
 * @param {boolean} isOpen - 다이얼로그 표시 여부
 * @param {function} onClose - 닫기 핸들러
 * @param {boolean} isDebut - 데뷔일 여부 (false면 주년)
 * @param {number} anniversaryYear - 주년 수 (isDebut이 false일 때)
 */
const DebutCelebrationDialog = memo(function DebutCelebrationDialog({
  isOpen,
  onClose,
  isDebut = false,
  anniversaryYear = 0,
}) {
  // ESC 키로 닫기
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isOpen, onClose]);

  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-[#7a99c8] via-[#98b0d8] to-[#b8c8e8] 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-4 left-8 text-yellow-200 text-2xl animate-pulse">✦</div>
              <div className="absolute top-12 right-16 text-yellow-200/80 text-xl animate-pulse delay-100">✦</div>
              <div className="absolute bottom-20 left-12 text-yellow-200/60 text-3xl animate-pulse delay-200">✦</div>
              <div className="absolute bottom-12 right-8 text-yellow-200 text-xl animate-pulse delay-150">✦</div>
              <div className="absolute top-1/3 left-4 text-white/40 text-lg animate-pulse delay-300">✦</div>
              <div className="absolute top-1/2 right-4 text-white/30 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">
                {isDebut ? (
                  <Fromis9Logo size={56} fill="white" className="drop-shadow-lg" />
                ) : (
                  <div className="text-center" style={{ textShadow: '0 2px 4px rgba(0,0,0,0.2)' }}>
                    <div className="text-white font-black text-4xl leading-none">{anniversaryYear}</div>
                    <div className="text-white/80 text-xs font-bold tracking-wider">YEARS</div>
                  </div>
                )}
              </div>

              {/* 텍스트 */}
              <h2
                className="text-white font-bold text-2xl mb-2"
                style={{ textShadow: '0 2px 4px rgba(0,0,0,0.2)' }}
              >
                {isDebut ? '프로미스나인 데뷔' : `프로미스나인 데뷔 ${anniversaryYear}주년`}
              </h2>
              <p
                className="text-white/80 text-base"
                style={{ textShadow: '0 1px 2px rgba(0,0,0,0.2)' }}
              >
                2018. 01. 24
              </p>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
});

export default DebutCelebrationDialog;
