// Componente Header con soporte de Perfil de Usuario, Modo Espectador y Cierre de Sesión
function Header({ activeTab, setActiveTab, userRole, setUserRole, currentUser, onLogout, supabaseStatus, viewersCount = 48 }) {
  let roomData = {};
  try {
    if (window.useBingoRoom) {
      roomData = window.useBingoRoom();
    }
  } catch (e) {}

  const effectiveViewers = roomData.viewersCount || viewersCount;
  const isSpectator = userRole === 'spectator';
  const isPlayer = currentUser && currentUser.role === 'player';
  const isSeller = userRole === 'seller' || (currentUser && currentUser.role === 'seller');

  return (
    <header className="app-header">
      <div className="header-inner">
        <a href="#" className="brand-logo" onClick={(e) => { e.preventDefault(); if (onLogout) onLogout(); }} title="Ir a la Pantalla Principal (Menú Completo)">
          <img 
            src="./assets/logo.png" 
            alt="Logo La Mami" 
            className="brand-logo-img" 
            style={{ 
              width: '42px', 
              height: '42px', 
              borderRadius: '50%', 
              objectFit: 'cover', 
              boxShadow: '0 0 14px rgba(244, 63, 94, 0.45)', 
              border: '2px solid rgba(244, 63, 94, 0.6)',
              flexShrink: 0
            }} 
          />
          <div>
            <span className="brand-name">LOTA FAMILIAR LA MAMI</span>
            <span className="brand-badge" style={{ backgroundColor: isSpectator ? '#f43f5e' : isPlayer ? 'var(--accent-teal)' : isSeller ? 'var(--accent-cyan)' : 'var(--accent-gold)', color: isSeller ? '#111827' : '#fff' }}>
              {isSpectator ? 'TRANSMISIÓN' : isPlayer ? 'JUGADOR' : isSeller ? 'VENDEDOR' : 'ORGANIZADOR'}
            </span>
          </div>
        </a>

        {/* Navegación para Organizador */}
        {userRole === 'admin' && (
          <nav className="nav-tabs">
            <button 
              className={`tab-btn ${activeTab === 'game' ? 'active' : ''}`}
              onClick={() => setActiveTab('game')}
            >
              <i className="fa-solid fa-gamepad"></i>
              <span>Control Sorteo</span>
            </button>

            <button 
              className={`tab-btn ${activeTab === 'admin' ? 'active' : ''}`}
              onClick={() => setActiveTab('admin')}
            >
              <i className="fa-solid fa-clipboard-check"></i>
              <span>Admin Pagos</span>
            </button>

            <button 
              className={`tab-btn ${activeTab === 'supabase' ? 'active' : ''}`}
              onClick={() => setActiveTab('supabase')}
            >
              <i className="fa-solid fa-database"></i>
              <span>Supabase</span>
            </button>
          </nav>
        )}

        {/* Navegación para Vendedor Autorizado */}
        {isSeller && (
          <nav className="nav-tabs">
            <button 
              className={`tab-btn ${activeTab === 'seller' ? 'active' : ''}`}
              onClick={() => setActiveTab('seller')}
            >
              <i className="fa-solid fa-cart-plus" style={{ color: 'var(--accent-cyan)' }}></i>
              <span>Terminal de Venta</span>
            </button>

            <button 
              className={`tab-btn ${activeTab === 'game' ? 'active' : ''}`}
              onClick={() => setActiveTab('game')}
            >
              <i className="fa-solid fa-tower-broadcast"></i>
              <span>Ver Sorteo</span>
            </button>
          </nav>
        )}

        {/* Navegación para Espectadores y Jugadores */}
        {userRole === 'spectator' && (
          <nav className="nav-tabs">
            <button 
              className={`tab-btn ${activeTab === 'game' ? 'active' : ''}`}
              onClick={() => setActiveTab('game')}
            >
              <i className="fa-solid fa-tower-broadcast"></i>
              <span>En Vivo</span>
            </button>

            {/* Guardado para futuras ocasiones: Compra directa para público general
            <button 
              className={`tab-btn ${activeTab === 'bot' || activeTab === 'showcase' ? 'active' : ''}`}
              onClick={() => setActiveTab('bot')}
            >
              <i className="fa-solid fa-cart-shopping" style={{ color: 'var(--accent-green)' }}></i>
              <span>Comprar Cartones</span>
            </button>
            */}
          </nav>
        )}

        {/* Si es Jugador con cartones cargados */}
        {isPlayer && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <div className="status-pill" style={{ borderColor: 'rgba(0, 172, 193, 0.4)', background: 'rgba(0, 131, 143, 0.15)', color: '#a5f3fc' }}>
              <i className="fa-solid fa-user-check" style={{ color: 'var(--accent-cyan)' }}></i>
              <span><strong>{currentUser.name}</strong> ({currentUser.cards?.length || 0} {currentUser.cards?.length === 1 ? 'cartón' : 'cartones'})</span>
            </div>
          </div>
        )}

        {/* Si es Espectador */}
        {isSpectator && !isPlayer && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: 'var(--radius-full)', background: 'rgba(244, 63, 94, 0.15)', border: '1px solid #f43f5e', color: '#f43f5e', fontWeight: '800', fontSize: '0.85rem' }}>
              <span className="status-dot offline" style={{ width: '8px', height: '8px', backgroundColor: '#f43f5e', boxShadow: '0 0 10px #f43f5e' }}></span>
              SALA OFICIAL EN VIVO
            </div>
          </div>
        )}

        {/* Indicadores de Espectadores, Conexión y Logout */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          {/* Contador de Espectadores en Vivo */}
          <div className="status-pill" style={{ borderColor: 'rgba(244, 63, 94, 0.4)', background: 'rgba(244, 63, 94, 0.12)', color: '#fecdd3' }} title="Personas conectadas viendo el sorteo en tiempo real">
            <i className="fa-solid fa-eye" style={{ color: '#f43f5e' }}></i>
            <span style={{ fontWeight: '800', fontFamily: 'var(--font-numbers)' }}>{effectiveViewers}</span>
            <span style={{ fontSize: '0.78rem' }}>espectadores</span>
          </div>

          <div className="status-pill" title={`Estado de Supabase: ${supabaseStatus.status}`}>
            <span className={`status-dot ${supabaseStatus.status === 'connected' ? 'online' : supabaseStatus.status === 'loading' ? 'loading' : 'offline'}`}></span>
            <span style={{ fontSize: '0.82rem' }}>
              {supabaseStatus.status === 'connected' ? 'En Vivo' : 'Desconectado'}
            </span>
          </div>

          {/* Control exclusivo para Organizadores autenticados */}
          {currentUser && (currentUser.originalRole === 'admin' || currentUser.adminPin === '1234' || currentUser.adminPin === 'LotaMami2026!') && setUserRole && (
            isSpectator ? (
              <button 
                className="btn btn-accent btn-sm" 
                style={{ padding: '6px 12px', fontSize: '0.82rem', fontWeight: '800', background: 'var(--accent-gold)', color: '#111827' }}
                onClick={() => setUserRole('admin')}
                title="Volver a la Mesa de Control del Organizador"
              >
                <i className="fa-solid fa-user-shield"></i>
                <span>Volver a Mesa de Control</span>
              </button>
            ) : (
              <button 
                className="btn btn-secondary btn-sm" 
                style={{ padding: '6px 12px', fontSize: '0.82rem', fontWeight: '700' }}
                onClick={() => setUserRole('spectator')}
                title="Previsualizar la pantalla como un espectador / jugador"
              >
                <i className="fa-solid fa-tv" style={{ color: '#f43f5e' }}></i>
                <span>Previsualizar Espectador</span>
              </button>
            )
          )}

          {/* Botón Salir / Volver al Menú Principal */}
          {onLogout && (
            <button 
              className="btn btn-secondary btn-sm" 
              style={{ padding: '6px 12px', fontSize: '0.82rem', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '6px' }}
              onClick={onLogout}
              title="Volver a la Pantalla Principal (Menú Completo de Inicio)"
            >
              <i className="fa-solid fa-house"></i>
              <span>Menú Principal</span>
            </button>
          )}
        </div>
      </div>
    </header>
  );
}

window.Header = Header;