// Componente Atómico Memoizado: Podio de Premios Oficiales "Bingo la Mami"
// Estructura: 3 Rondas + Gran Sorteo Final | Pozo Total $240.000
// R1: Bingo $100k, Línea $10k
// R2: Bingo $50k, Línea $10k
// R3: Bingo $50k, Línea $10k
// Cierre: Gran Sorteo Final N° de Cartón $10k (Al finalizar Ronda 3)
const { memo } = React;

const Premios = memo(function Premios({
  prize1Winner,
  prizeBingoWinner,
  prizeCardRaffleWinner,
  isRafflingCard = false,
  raffleDisplayCode = 'CR-?????',
  currentRound: propRound,
  roundBingoPrize: propBingoPrize,
  roundLineaPrize: propLineaPrize,
  roundCartonPrize: propCartonPrize,
  onSelectRound = null
}) {
  const room = (window.useBingoRoom && !propRound) ? window.useBingoRoom() : {};
  const currentRound = propRound || room.currentRound || 1;
  const roundBingoPrize = propBingoPrize || room.roundBingoPrize || (currentRound === 1 ? 100000 : 50000);
  const roundLineaPrize = propLineaPrize || room.roundLineaPrize || 10000;
  const roundCartonPrize = propCartonPrize || room.roundCartonPrize || 10000;

  const formatWinnerStatus = (winner, defaultPendingText) => {
    if (!winner) return defaultPendingText;
    if (winner.isShared && winner.winnersList && winner.winnersList.length > 1) {
      const names = winner.winnersList.map(w => `${w.title} (${w.cardId})`).join(', ');
      const splitFormatted = Number(winner.splitAmount || 0).toLocaleString('es-AR');
      return `✓ COMPARTIDO (${winner.winnersCount} Ganadores - $${splitFormatted} c/u): ${names} (Bola #${winner.ballNum || 'OK'})`;
    }
    return `✓ GANADOR: ${winner.title} (${winner.cardId || ''}) - Bola #${winner.ballNum || 'OK'}`;
  };

  const roundsInfo = [
    { num: 3, bingo: 50000, linea: 10000, total: 60000, label: '1°: Premio 3', fullLabel: 'Premio 3 (1° Sorteo)' },
    { num: 2, bingo: 50000, linea: 10000, total: 60000, label: '2°: Premio 2', fullLabel: 'Premio 2 (2° Sorteo)' },
    { num: 1, bingo: 100000, linea: 10000, total: 110000, label: '3°: Premio 1 (Mayor)', fullLabel: 'Premio 1 • POZO MAYOR' }
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '20px' }}>
      {/* Barra de Premios del Evento y Pozo Total */}
      <div style={{
        background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95))',
        border: '1.5px solid rgba(245, 158, 11, 0.35)',
        borderRadius: 'var(--radius-lg)',
        padding: '10px 16px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        gap: '12px',
        boxShadow: '0 4px 18px rgba(0,0,0,0.3)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{
            background: 'linear-gradient(135deg, var(--accent-cyan), #0284c7)',
            color: '#111827',
            padding: '5px 14px',
            borderRadius: 'var(--radius-full)',
            fontWeight: '900',
            fontSize: '0.85rem',
            display: 'flex',
            alignItems: 'center',
            gap: '6px'
          }}>
            <i className="fa-solid fa-trophy"></i>
            <span>3 GRANDES PREMIOS + GRAN SORTEO FINAL ($240.000)</span>
          </div>
        </div>

        {/* Indicadores de los 3 Premios en orden cronológico (3 -> 2 -> 1) + Sorteo Final */}
        <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
          {roundsInfo.map(r => {
            const isActive = currentRound === r.num;
            return (
              <div
                key={r.num}
                onClick={() => onSelectRound && onSelectRound(r.num)}
                style={{
                  background: isActive 
                    ? (r.num === 1 
                        ? 'linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.4))' 
                        : 'linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35))')
                    : 'rgba(255, 255, 255, 0.04)',
                  border: isActive 
                    ? (r.num === 1 ? '1.5px solid var(--accent-gold)' : '1.5px solid var(--accent-green)') 
                    : '1px solid rgba(255, 255, 255, 0.1)',
                  borderRadius: 'var(--radius-md)',
                  padding: '5px 12px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px',
                  fontSize: '0.78rem',
                  fontWeight: '700',
                  color: isActive ? (r.num === 1 ? 'var(--accent-gold)' : '#34d399') : 'var(--text-muted)',
                  cursor: onSelectRound ? 'pointer' : 'default',
                  transition: 'all 0.2s ease',
                  boxShadow: isActive ? (r.num === 1 ? '0 0 14px rgba(245, 158, 11, 0.4)' : '0 0 12px rgba(16, 185, 129, 0.35)') : 'none'
                }}
                title={`Premio ${r.num}: Bingo $${(r.bingo).toLocaleString('es-AR')} + Línea $10.000. Clic para situarte en este premio.`}
              >
                <span>{isActive ? '🎯' : '⚪'}</span>
                <span><strong>{r.label}:</strong> Bingo ${(r.bingo / 1000)}k</span>
                {isActive && (
                  <span style={{ 
                    backgroundColor: r.num === 1 ? 'var(--accent-gold)' : 'var(--accent-green)', 
                    color: '#111827', 
                    fontSize: '0.65rem', 
                    padding: '1px 5px', 
                    borderRadius: '3px',
                    fontWeight: '900',
                    marginLeft: '2px'
                  }}>
                    EN JUEGO
                  </span>
                )}
              </div>
            );
          })}

          <div
            style={{
              background: prizeCardRaffleWinner ? 'rgba(16, 185, 129, 0.15)' : 'rgba(0, 180, 216, 0.12)',
              border: prizeCardRaffleWinner ? '1px solid var(--accent-green)' : '1px solid rgba(0, 180, 216, 0.35)',
              borderRadius: 'var(--radius-md)',
              padding: '5px 10px',
              display: 'flex',
              alignItems: 'center',
              gap: '6px',
              fontSize: '0.76rem',
              fontWeight: '700',
              color: prizeCardRaffleWinner ? '#34d399' : 'var(--accent-cyan)'
            }}
            title="Gran Sorteo por N° de Cartón ($10.000) se realiza al finalizar los 3 premios"
          >
            <span>🎟️</span>
            <span><strong>Final:</strong> N° Cartón $10k</span>
            {prizeCardRaffleWinner && <span style={{ color: 'var(--accent-green)', fontWeight: '900' }}>✓ SORTEADO</span>}
          </div>
        </div>
      </div>

      {/* Selector de Situación Destacado: Para situarse directamente en qué premio se encuentra (3, 2, 1) */}
      <div style={{
        background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))',
        border: currentRound === 1 ? '2px solid var(--accent-gold)' : '2px solid var(--accent-green)',
        borderRadius: 'var(--radius-lg)',
        padding: '12px 18px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        gap: '12px',
        boxShadow: currentRound === 1 ? '0 0 20px rgba(245, 158, 11, 0.25)' : '0 0 16px rgba(16, 185, 129, 0.2)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{
            width: '46px',
            height: '46px',
            borderRadius: '50%',
            background: currentRound === 1 ? 'rgba(245, 158, 11, 0.25)' : 'rgba(16, 185, 129, 0.25)',
            border: currentRound === 1 ? '2px solid var(--accent-gold)' : '2px solid var(--accent-green)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '1.4rem'
          }}>
            {currentRound === 1 ? '👑' : currentRound === 2 ? '🥈' : '🥉'}
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
              <span style={{
                background: currentRound === 1 ? 'var(--accent-gold)' : 'var(--accent-green)',
                color: '#111827',
                fontWeight: '900',
                padding: '2px 8px',
                borderRadius: '4px',
                fontSize: '0.72rem',
                letterSpacing: '0.5px'
              }}>
                SORTEANDO AHORA
              </span>
              <strong style={{ fontSize: '1.1rem', color: currentRound === 1 ? 'var(--accent-gold)' : '#34d399' }}>
                {currentRound === 1 ? 'PREMIO 1 • GRAN POZO MAYOR ($100.000)' : currentRound === 2 ? 'PREMIO 2 • SEGUNDO SORTEO ($50.000)' : 'PREMIO 3 • PRIMER SORTEO ($50.000)'}
              </strong>
            </div>
            <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginTop: '2px' }}>
              Pozo en juego en este momento: <strong style={{ color: '#fff' }}>${(roundBingoPrize).toLocaleString('es-AR')} en BINGO</strong> + <strong style={{ color: '#fff' }}>${(roundLineaPrize).toLocaleString('es-AR')} en 1ª LÍNEA</strong>
            </div>
          </div>
        </div>

        {/* Botones directos para situarse en la etapa de premio actual */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
          <span style={{ fontSize: '0.76rem', color: 'var(--text-muted)', fontWeight: '700', marginRight: '4px' }}>
            {onSelectRound ? '📍 Situarme en:' : 'Etapa Actual:'}
          </span>
          <button 
            type="button" 
            onClick={() => onSelectRound && onSelectRound(3)} 
            disabled={!onSelectRound}
            className={`btn btn-sm ${currentRound === 3 ? 'btn-success' : 'btn-secondary'}`}
            style={{
              fontSize: '0.82rem',
              fontWeight: '800',
              padding: '6px 12px',
              border: currentRound === 3 ? '2px solid #34d399' : '1px solid rgba(255, 255, 255, 0.15)',
              background: currentRound === 3 ? 'linear-gradient(135deg, #10b981, #059669)' : undefined,
              boxShadow: currentRound === 3 ? '0 0 12px rgba(16, 185, 129, 0.45)' : 'none'
            }}
            title="1° en sortearse: Premio 3 (Bingo $50.000 + Línea $10.000)"
          >
            <span>🥉 1° Sorteo: Premio 3 ($50k)</span>
          </button>

          <button 
            type="button" 
            onClick={() => onSelectRound && onSelectRound(2)} 
            disabled={!onSelectRound}
            className={`btn btn-sm ${currentRound === 2 ? 'btn-success' : 'btn-secondary'}`}
            style={{
              fontSize: '0.82rem',
              fontWeight: '800',
              padding: '6px 12px',
              border: currentRound === 2 ? '2px solid #34d399' : '1px solid rgba(255, 255, 255, 0.15)',
              background: currentRound === 2 ? 'linear-gradient(135deg, #10b981, #059669)' : undefined,
              boxShadow: currentRound === 2 ? '0 0 12px rgba(16, 185, 129, 0.45)' : 'none'
            }}
            title="2° en sortearse: Premio 2 (Bingo $50.000 + Línea $10.000)"
          >
            <span>🥈 2° Sorteo: Premio 2 ($50k)</span>
          </button>

          <button 
            type="button" 
            onClick={() => onSelectRound && onSelectRound(1)} 
            disabled={!onSelectRound}
            className={`btn btn-sm ${currentRound === 1 ? 'btn-accent' : 'btn-secondary'}`}
            style={{
              fontSize: '0.82rem',
              fontWeight: '800',
              padding: '6px 14px',
              border: currentRound === 1 ? '2px solid var(--accent-gold)' : '1px solid rgba(255, 255, 255, 0.15)',
              background: currentRound === 1 ? 'linear-gradient(135deg, #f59e0b, #d97706)' : undefined,
              color: currentRound === 1 ? '#111827' : undefined,
              boxShadow: currentRound === 1 ? '0 0 14px rgba(245, 158, 11, 0.5)' : 'none'
            }}
            title="3° en sortearse: Gran Premio Mayor (Bingo $100.000 + Línea $10.000)"
          >
            <span>👑 3° Sorteo: Premio Mayor ($100k)</span>
          </button>
        </div>
      </div>
      </div>

      {/* Tarjetas de Premios de la Mesa */}
      <div className="prizes-dashboard" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', marginBottom: '14px', gap: '14px' }}>
        {/* PREMIO 1: 1 Línea */}
        <div className={`prize-card linea-card ${prize1Winner ? 'won' : ''}`}>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
              <div className="prize-badge-rank prize-linea-badge">
                <i className="fa-solid fa-medal"></i> 1ª LÍNEA • PREMIO {currentRound}
              </div>
              {prize1Winner && prize1Winner.isShared && (
                <span style={{ fontSize: '0.72rem', backgroundColor: '#10b981', color: '#ffffff', padding: '2px 8px', borderRadius: '4px', fontWeight: '800' }}>
                  COMPARTIDO ({prize1Winner.winnersCount})
                </span>
              )}
            </div>
            <div className="prize-title">1ª Fila Completa</div>
            <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>
              Primer jugador en completar 5 números en cualquier fila horizontal
            </div>
            <div className="prize-amount">
              {prize1Winner && prize1Winner.isShared ? `$${(roundLineaPrize).toLocaleString('es-AR')} ($${Number(prize1Winner.splitAmount).toLocaleString('es-AR')} c/u)` : `$${(roundLineaPrize).toLocaleString('es-AR')}`}
            </div>
          </div>
          <div className={`prize-status-text ${prize1Winner ? 'claimed' : 'pending'}`} style={{ whiteSpace: 'normal', lineHeight: '1.3' }}>
            {formatWinnerStatus(prize1Winner, `⚡ En juego en Premio ${currentRound}`)}
          </div>
        </div>

        {/* PREMIO 2: BINGO MAYOR (Cartón Lleno) */}
        <div className={`prize-card grand-bingo ${prizeBingoWinner ? 'won' : ''}`}>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
              <div className="prize-badge-rank prize-bingo-badge" style={{ fontSize: '0.78rem', padding: '5px 12px' }}>
                <i className="fa-solid fa-crown" style={{ color: '#fef08a' }}></i> BINGO MAYOR • PREMIO {currentRound}
              </div>
              {prizeBingoWinner && prizeBingoWinner.isShared ? (
                <span style={{ fontSize: '0.74rem', backgroundColor: '#f59e0b', color: '#111827', padding: '3px 8px', borderRadius: '4px', fontWeight: '900' }}>
                  COMPARTIDO ({prizeBingoWinner.winnersCount})
                </span>
              ) : (
                <span style={{ fontSize: '0.72rem', color: '#fef08a', fontWeight: '800', background: 'rgba(245, 158, 11, 0.2)', padding: '2px 8px', borderRadius: '12px', border: '1px solid rgba(245, 158, 11, 0.4)' }}>
                  ★ PREMIO PRINCIPAL
                </span>
              )}
            </div>
            <div className="prize-title" style={{ fontSize: '1.18rem', fontWeight: '900' }}>Cartón Lleno (15 Números)</div>
            <div style={{ fontSize: '0.78rem', color: '#cbd5e1', marginBottom: '4px' }}>
              Premio al primer cartón que complete los 15 números cantados
            </div>
            <div className="prize-amount">
              {prizeBingoWinner && prizeBingoWinner.isShared 
                ? `$${(roundBingoPrize).toLocaleString('es-AR')} ($${Number(prizeBingoWinner.splitAmount).toLocaleString('es-AR')} c/u)` 
                : `$${(roundBingoPrize).toLocaleString('es-AR')}`}
            </div>
          </div>
          <div className={`prize-status-text ${prizeBingoWinner ? 'claimed' : 'pending'}`} style={{ whiteSpace: 'normal', lineHeight: '1.3' }}>
            {prizeBingoWinner ? (
              prizeBingoWinner.isShared ? (
                `👑 BINGO COMPARTIDO (${prizeBingoWinner.winnersCount} Ganadores - $${Number(prizeBingoWinner.splitAmount).toLocaleString('es-AR')} c/u): ${prizeBingoWinner.summaryText}`
              ) : (
                `👑 BINGO GANADO: ${prizeBingoWinner.title} (${prizeBingoWinner.cardId || ''}) - Bola #${prizeBingoWinner.ballNum || 'OK'}`
              )
            ) : (
              `⭐ ¡BINGO MAYOR DE PREMIO ${currentRound} EN JUEGO!`
            )}
          </div>
        </div>

        {/* PREMIO 3: Gran Sorteo Final por N° de Cartón (Al Finalizar Premio 3) */}
        <div className={`prize-card raffle-card ${prizeCardRaffleWinner ? 'won' : ''}`}>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
              <div className="prize-badge-rank prize-carton-badge">
                <i className="fa-solid fa-ticket"></i> GRAN SORTEO FINAL
              </div>
              <span style={{ fontSize: '0.7rem', color: '#38bdf8', fontWeight: '800', background: 'rgba(56, 189, 248, 0.15)', padding: '2px 8px', borderRadius: '4px' }}>
                AL CIERRE
              </span>
            </div>
            <div className="prize-title">Por N° de Serie del Cartón</div>
            <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>
              Participan todos los cartones vendidos del evento al finalizar el Premio 1 Mayor
            </div>
            <div className="prize-amount">$10.000</div>
          </div>
          <div className={`prize-status-text ${prizeCardRaffleWinner ? 'claimed' : 'pending'}`} style={{ whiteSpace: 'normal', lineHeight: '1.3' }}>
            {prizeCardRaffleWinner ? (
              `🎟️ GANADOR FINAL: ${prizeCardRaffleWinner.title || 'Cartón'} (${prizeCardRaffleWinner.cardId})`
            ) : isRafflingCard ? (
              `🎰 Sorteando Serie Final: ${raffleDisplayCode}...`
            ) : (currentRound === 1 && prizeBingoWinner) ? (
              '⭐ ¡DESBLOQUEADO! Listo para realizar el Gran Sorteo Final'
            ) : currentRound === 1 ? (
              '🔒 Bloqueado: Se desbloquea al cantarse el BINGO de este Premio 1 Mayor'
            ) : (
              `🔒 Bloqueado: Se realiza luego de jugar el Premio 1 Mayor ($100k)`
            )}
          </div>
        </div>
      </div>

      {/* Ribbon de Desglose Oficial del Evento */}
      <div style={{
        background: 'rgba(15, 23, 42, 0.85)',
        border: '1px solid rgba(255, 255, 255, 0.08)',
        borderRadius: 'var(--radius-md)',
        padding: '10px 16px',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        gap: '10px',
        boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.4)'
      }}>
        <div style={{
          padding: '6px 10px',
          borderRadius: '6px',
          background: currentRound === 1 ? 'rgba(16, 185, 129, 0.15)' : 'rgba(255, 255, 255, 0.02)',
          border: currentRound === 1 ? '1px solid var(--accent-green)' : '1px solid rgba(255, 255, 255, 0.05)',
          textAlign: 'center'
        }}>
          <div style={{ color: currentRound === 1 ? '#34d399' : 'var(--text-muted)', fontWeight: '800', fontSize: '0.78rem' }}>
            {currentRound === 1 ? '▶ PREMIO 1 (EN JUEGO)' : 'PREMIO 1'}
          </div>
          <div style={{ fontSize: '0.75rem', color: '#ffffff' }}>Línea: <strong>$10.000</strong></div>
          <div style={{ fontSize: '0.82rem', color: '#fbbf24', fontWeight: '900' }}>Bingo: $100.000</div>
        </div>

        <div style={{
          padding: '6px 10px',
          borderRadius: '6px',
          background: currentRound === 2 ? 'rgba(16, 185, 129, 0.15)' : 'rgba(255, 255, 255, 0.02)',
          border: currentRound === 2 ? '1px solid var(--accent-green)' : '1px solid rgba(255, 255, 255, 0.05)',
          textAlign: 'center'
        }}>
          <div style={{ color: currentRound === 2 ? '#34d399' : 'var(--text-muted)', fontWeight: '800', fontSize: '0.78rem' }}>
            {currentRound === 2 ? '▶ PREMIO 2 (EN JUEGO)' : 'PREMIO 2'}
          </div>
          <div style={{ fontSize: '0.75rem', color: '#ffffff' }}>Línea: <strong>$10.000</strong></div>
          <div style={{ fontSize: '0.82rem', color: '#fbbf24', fontWeight: '900' }}>Bingo: $50.000</div>
        </div>

        <div style={{
          padding: '6px 10px',
          borderRadius: '6px',
          background: currentRound === 3 ? 'rgba(16, 185, 129, 0.15)' : 'rgba(255, 255, 255, 0.02)',
          border: currentRound === 3 ? '1px solid var(--accent-green)' : '1px solid rgba(255, 255, 255, 0.05)',
          textAlign: 'center'
        }}>
          <div style={{ color: currentRound === 3 ? '#34d399' : 'var(--text-muted)', fontWeight: '800', fontSize: '0.78rem' }}>
            {currentRound === 3 ? '▶ PREMIO 3 (EN JUEGO)' : 'PREMIO 3'}
          </div>
          <div style={{ fontSize: '0.75rem', color: '#ffffff' }}>Línea: <strong>$10.000</strong></div>
          <div style={{ fontSize: '0.82rem', color: '#fbbf24', fontWeight: '900' }}>Bingo: $50.000</div>
        </div>

        <div style={{
          padding: '6px 10px',
          borderRadius: '6px',
          background: 'rgba(6, 182, 212, 0.08)',
          border: '1px solid rgba(6, 182, 212, 0.25)',
          textAlign: 'center'
        }}>
          <div style={{ color: 'var(--accent-cyan)', fontWeight: '800', fontSize: '0.78rem' }}>
            🎟️ GRAN SORTEO FINAL
          </div>
          <div style={{ fontSize: '0.75rem', color: '#ffffff' }}>Por N° de Cartón</div>
          <div style={{ fontSize: '0.82rem', color: 'var(--accent-cyan)', fontWeight: '900' }}>Premio: $10.000</div>
        </div>
      </div>
    </div>
  );
});

window.Premios = Premios;