import confetti from 'canvas-confetti';
import { dayjs } from '@/utils';

/**
 * 생일 폭죽 애니메이션
 */
export function fireBirthdayConfetti() {
  const duration = 3000;
  const animationEnd = Date.now() + duration;
  const colors = ['#ff69b4', '#ff1493', '#da70d6', '#ba55d3', '#9370db', '#8a2be2', '#ffd700', '#ff6347'];

  const randomInRange = (min, max) => Math.random() * (max - min) + min;

  const interval = setInterval(() => {
    const timeLeft = animationEnd - Date.now();

    if (timeLeft <= 0) {
      clearInterval(interval);
      return;
    }

    const particleCount = 50 * (timeLeft / duration);

    // 왼쪽에서 발사
    confetti({
      particleCount: Math.floor(particleCount),
      startVelocity: 30,
      spread: 60,
      origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
      colors,
      shapes: ['circle', 'square'],
      gravity: 1.2,
      scalar: randomInRange(0.8, 1.2),
      drift: randomInRange(-0.5, 0.5),
    });

    // 오른쪽에서 발사
    confetti({
      particleCount: Math.floor(particleCount),
      startVelocity: 30,
      spread: 60,
      origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
      colors,
      shapes: ['circle', 'square'],
      gravity: 1.2,
      scalar: randomInRange(0.8, 1.2),
      drift: randomInRange(-0.5, 0.5),
    });
  }, 250);

  // 초기 대형 폭죽
  confetti({
    particleCount: 100,
    spread: 100,
    origin: { x: 0.5, y: 0.6 },
    colors,
    shapes: ['circle', 'square'],
    startVelocity: 45,
  });
}

/**
 * PC용 생일 카드 컴포넌트
 */
function BirthdayCard({ schedule, showYear = false, onClick }) {
  const scheduleDate = dayjs(schedule.date);
  const formatted = {
    year: scheduleDate.year(),
    month: scheduleDate.month() + 1,
    day: scheduleDate.date(),
  };

  return (
    <div
      onClick={onClick}
      className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
    >
      {/* 배경 장식 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full" />
        <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-white/10 rounded-full" />
        <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-white/5 rounded-full" />
        <div className="absolute bottom-4 left-12 text-xl animate-pulse">🎉</div>
      </div>

      <div className="relative flex items-center p-4 gap-4">
        {/* 멤버 사진 */}
        {schedule.member_image && (
          <div className="flex-shrink-0">
            <div className="w-20 h-20 rounded-full border-4 border-white/50 shadow-lg overflow-hidden bg-white">
              <img
                src={schedule.member_image}
                alt={schedule.member_names}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        )}

        {/* 내용 */}
        <div className="flex-1 text-white flex items-center gap-3">
          <span className="text-4xl">🎂</span>
          <h3 className="font-bold text-2xl tracking-wide">{schedule.title}</h3>
        </div>

        {/* 날짜 뱃지 */}
        <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
          {showYear && (
            <div className="text-white/70 text-xs font-medium">{formatted.year}</div>
          )}
          <div className="text-white/70 text-xs font-medium">{formatted.month}월</div>
          <div className="text-white text-2xl font-bold">{formatted.day}</div>
        </div>
      </div>
    </div>
  );
}

/**
 * Mobile용 생일 카드 컴포넌트
 */
export function MobileBirthdayCard({ schedule, showYear = false, onClick }) {
  const scheduleDate = dayjs(schedule.date);
  const formatted = {
    year: scheduleDate.year(),
    month: scheduleDate.month() + 1,
    day: scheduleDate.date(),
  };

  return (
    <div
      onClick={onClick}
      className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-xl shadow-md hover:shadow-lg transition-shadow cursor-pointer"
    >
      {/* 배경 장식 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-2 -right-2 w-16 h-16 bg-white/10 rounded-full" />
        <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-white/10 rounded-full" />
        <div className="absolute bottom-2 left-8 text-base animate-pulse">🎉</div>
      </div>

      <div className="relative flex items-center p-3 gap-3">
        {/* 멤버 사진 */}
        {schedule.member_image && (
          <div className="flex-shrink-0">
            <div className="w-14 h-14 rounded-full border-2 border-white/50 shadow-lg overflow-hidden bg-white">
              <img
                src={schedule.member_image}
                alt={schedule.member_names}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        )}

        {/* 내용 */}
        <div className="flex-1 text-white flex items-center gap-2 min-w-0">
          <span className="text-2xl">🎂</span>
          <h3 className="font-bold text-lg truncate">{schedule.title}</h3>
        </div>

        {/* 날짜 뱃지 */}
        <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-lg px-3 py-1.5 text-center">
          {showYear && (
            <div className="text-white/70 text-[10px] font-medium">{formatted.year}</div>
          )}
          <div className="text-white/70 text-[10px] font-medium">{formatted.month}월</div>
          <div className="text-white text-xl font-bold">{formatted.day}</div>
        </div>
      </div>
    </div>
  );
}

export default BirthdayCard;
