// Mini-celebración al confirmar la compra de una cripto: explota una nube de
// partículas (logo real desde CryptoCompare) desde el centro de la pantalla,
// cada una con dirección y rotación aleatorias, y se desvanecen en ~3s.
//
// Solo se dispara para criptos (las acciones y ETFs no tienen logo unificado
// gratis y la decisión de producto fue dejarla exclusiva para cripto).

// Mapa de colores brand para el glow alrededor del logo. Si una cripto no
// está en este map igual se celebra, con un verde default.
const CRYPTO_COLORS = {
  BTC:  '#f7931a',
  ETH:  '#627eea',
  SOL:  '#9945ff',
  BNB:  '#f3ba2f',
  XRP:  '#23292f',
  ADA:  '#0033ad',
  DOGE: '#c2a633',
  PEPE: '#3ec300',
  SHIB: '#ffa409',
  AVAX: '#e84142',
  LINK: '#2a5ada',
};

// Devuelve la config de celebración. Solo cripto (iconUrl viene poblado por el
// backend desde CryptoCompare). Para acciones y ETFs retorna null y no se anima.
function getCelebrationFor(ticker, iconUrl) {
  if (!ticker || !iconUrl) return null;
  const color = CRYPTO_COLORS[ticker.toUpperCase()] ?? '#26d989';
  return { iconUrl, color };
}

function AssetCelebration({ celebration, onDone }) {
  const { useEffect, useMemo } = React;

  useEffect(() => {
    if (!celebration) return;
    const t = setTimeout(onDone, 3800);
    return () => clearTimeout(t);
  }, [celebration]);

  const particles = useMemo(() => {
    if (!celebration) return [];
    const N = 34;
    return Array.from({ length: N }, (_, i) => {
      // Distribución radial con jitter, sesgo leve hacia arriba (gravedad invertida tipo fuego artificial)
      const angle = (Math.PI * 2 * i) / N + (Math.random() - 0.5) * 0.3;
      const distance = 380 + Math.random() * 380;
      const dx = Math.cos(angle) * distance;
      const dy = Math.sin(angle) * distance - 100;
      const rot = (Math.random() - 0.5) * 900;
      const size = 24 + Math.random() * 26;
      const delay = Math.random() * 180;
      return { dx, dy, rot, size, delay, key: i };
    });
  }, [celebration]);

  if (!celebration) return null;
  const { iconUrl, color } = celebration;

  return (
    <div style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 100,
      display: 'grid', placeItems: 'center', overflow: 'hidden',
    }}>
      {particles.map(p => (
        <div key={p.key} style={{
          position: 'absolute', lineHeight: 1,
          animation: 'celebrationBurst 3.4s cubic-bezier(0.16, 0.7, 0.4, 1) forwards',
          animationDelay: `${p.delay}ms`,
          // Custom CSS vars consumidas por el keyframe (definido en index.html)
          '--dx': `${p.dx}px`,
          '--dy': `${p.dy}px`,
          '--rot': `${p.rot}deg`,
          willChange: 'transform, opacity',
        }}>
          <img
            src={iconUrl}
            alt=""
            draggable={false}
            style={{
              width: p.size, height: p.size, borderRadius: '50%',
              display: 'block', objectFit: 'cover',
              boxShadow: `0 0 22px ${color}cc, 0 0 8px ${color}`,
            }}
          />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { AssetCelebration, getCelebrationFor });