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

/**
 * PC용 데뷔/주년 카드 컴포넌트
 */
const DebutCard = memo(function DebutCard({ schedule, showYear = false }) {
  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;

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

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

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

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

export default DebutCard;
