import { memo } from 'react';
import { motion } from 'framer-motion';
import { Clover } from 'lucide-react';
import { dayjs } from '@/utils';
import { Fromis9Logo } from '@/components/common';

/**
 * Mobile용 데뷔/주년 카드 컴포넌트
 * @param {Object} schedule - 일정 데이터
 * @param {boolean} showYear - 년도 표시 여부
 * @param {number} delay - 애니메이션 딜레이 (초)
 */
const DebutCard = memo(function DebutCard({ schedule, showYear = false, delay = 0 }) {
  const scheduleDate = dayjs(schedule.date);
  const formatted = {
    year: scheduleDate.year(),
    month: scheduleDate.month() + 1,
    day: scheduleDate.date(),
  };

  const isDebut = schedule.is_debut;
  const anniversaryYear = schedule.anniversary_year;

  const CardContent = (
    <div className="relative overflow-hidden bg-gradient-to-br from-[#7a99c8] via-[#98b0d8] to-[#b8c8e8] rounded-xl shadow-md">
      {/* 배경 별 장식 */}
      <div className="absolute inset-0 overflow-hidden">
        {/* 반짝이는 별들 */}
        <div className="absolute top-2 right-4 text-white/60 text-xs animate-pulse">✦</div>
        <div className="absolute top-4 right-12 text-white/40 text-[10px] animate-pulse delay-100">✦</div>
        <div className="absolute bottom-3 right-6 text-white/50 text-sm animate-pulse delay-200">✦</div>
        <div className="absolute top-1/2 right-1/4 text-white/30 text-xs animate-pulse delay-300">✦</div>
        <div className="absolute bottom-4 left-4 text-white/40 text-[10px] animate-pulse delay-150">✦</div>
        {/* 원형 장식 */}
        <div className="absolute -top-6 -left-6 w-20 h-20 bg-white/10 rounded-full" />
        <div className="absolute -bottom-8 -right-8 w-24 h-24 bg-white/10 rounded-full" />
      </div>

      <div className="relative flex items-center p-4 gap-3">
        {/* 아이콘 영역 */}
        <div className="flex-shrink-0">
          <div className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center shadow-inner">
            {isDebut ? (
              <div className="text-center" style={{ textShadow: '0 1px 2px rgba(0,0,0,0.2)' }}>
                <div className="text-white font-black text-[11px] tracking-wider">DEBUT</div>
              </div>
            ) : (
              <div className="text-center" style={{ textShadow: '0 1px 2px rgba(0,0,0,0.2)' }}>
                <div className="text-white font-black text-xl leading-none">{anniversaryYear}</div>
                <div className="text-white/80 text-[8px] font-bold">YEARS</div>
              </div>
            )}
          </div>
        </div>

        {/* 내용 */}
        <div className="flex-1 text-white min-w-0">
          <h3
            className="font-bold text-base tracking-wide truncate flex items-center gap-1.5"
            style={{ textShadow: '0 1px 2px rgba(0,0,0,0.2)' }}
          >
            {isDebut ? (
              <Fromis9Logo size={18} fill="white" className="flex-shrink-0 drop-shadow" />
            ) : (
              <Clover size={18} className="flex-shrink-0 drop-shadow" strokeWidth={2.5} />
            )}
            {schedule.title}
          </h3>
        </div>

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

  // delay가 있으면 motion 사용
  if (delay > 0) {
    return (
      <motion.div
        initial={{ opacity: 0, x: -10 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ delay, type: 'spring', stiffness: 300, damping: 30 }}
      >
        {CardContent}
      </motion.div>
    );
  }

  return CardContent;
});

export default DebutCard;
