import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

// Socket 'badge' / 'avatar' olaylarını kutlama olarak gösterir
export function BadgeCelebration({ badgeEvent, avatarEvent }) {
  const [toast, setToast] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    if (badgeEvent && badgeEvent._n) {
      const badge = badgeEvent.badge || { title: 'Rozet kazanıldı', icon: '🏅', tier: '' };
      setToast({
        key: Date.now() + 'b',
        icon: badge.icon || '🏅',
        title: 'Yeni Rozet Kazandın!',
        sub: `${badge.title}${badge.tier ? ` · Seviye ${badge.tier}` : ''}`,
        cta: 'Rozetlerimi Gör',
        to: '/nations',
      });
    }
  }, [badgeEvent]);

  useEffect(() => {
    if (avatarEvent && avatarEvent._n) {
      setToast({
        key: Date.now() + 'a',
        icon: '🏆',
        title: 'AVATAR OLDU!',
        sub: 'Tüm rozetleri tamamladın. Dört ulusun dengesini sen sağladın.',
        cta: 'Kutlamayı Gör',
        to: '/nations/avatar',
        big: true,
      });
    }
  }, [avatarEvent]);

  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 9000);
    return () => clearTimeout(t);
  }, [toast]);

  if (!toast) return null;

  return (
    <div key={toast.key} className={`celebrate-toast ${toast.big ? 'big' : ''} anim-pop`}>
      <div className="celebrate-confetti" aria-hidden="true" />
      <div className="celebrate-icon">{toast.icon}</div>
      <div className="celebrate-body">
        <div className="celebrate-title">{toast.title}</div>
        <div className="celebrate-sub small">{toast.sub}</div>
        <button className="btn btn-sm btn-gold" onClick={() => { setToast(null); navigate(toast.to); }}>
          {toast.cta}
        </button>
      </div>
      <button className="celebrate-close" onClick={() => setToast(null)} aria-label="Kapat">
        ✕
      </button>
    </div>
  );
}