// Componente Principal de la Aplicación Bingo App con Portal de Inicio / Autenticación y Sala de Juego
const { useState, useEffect, useCallback } = React;

function App() {
  const [activeTab, setActiveTab] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const tabParam = urlParams.get('tab');
      if (tabParam === 'settlement' || tabParam === 'rendicion' || tabParam === 'caja') return 'seller';
      if (tabParam) return tabParam;
      const roleParam = urlParams.get('role') || urlParams.get('mode');
      if (roleParam === 'seller' || roleParam === 'vendedor') return 'seller';
      const saved = localStorage.getItem('bingo_session_user');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (parsed && parsed.role === 'seller') return 'seller';
      }
      return 'game';
    } catch (e) {
      return 'game';
    }
  }); // 'game' | 'seller' | 'bot' | 'admin' | 'supabase'
  
  // Contador de espectadores en vivo
  const [viewersCount, setViewersCount] = useState(52);

  // Usuario autenticado / en sesión (Rol por defecto para público: Espectador en Vivo)
  const [currentUser, setCurrentUser] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const roleParam = urlParams.get('role') || urlParams.get('mode');
      if (roleParam === 'auth' || roleParam === 'portal' || roleParam === 'login' || roleParam === 'comprar' || roleParam === 'player-upload' || roleParam === 'player-lookup' || roleParam === 'sala') {
        try { localStorage.removeItem('bingo_session_user'); } catch (e) {}
        return null;
      }
      if (roleParam === 'seller' || roleParam === 'vendedor') {
        const savedSeller = localStorage.getItem('bingo_session_user');
        if (savedSeller) {
          try {
            const parsed = JSON.parse(savedSeller);
            if (parsed && parsed.role === 'seller' && parsed.id) {
              return parsed;
            }
          } catch(e) {}
        }
        // Si no tiene sesión activa de vendedor guardada, pedir login en AuthPortal
        return null;
      }
      if (roleParam === 'spectator' || roleParam === 'player' || roleParam === 'sala') {
        const savedPlayer = localStorage.getItem('bingo_session_user');
        if (savedPlayer) {
          try {
            const parsed = JSON.parse(savedPlayer);
            if (parsed && parsed.role === 'player' && parsed.cards && parsed.cards.length > 0) {
              return parsed;
            }
          } catch(e) {}
        }
        return { role: 'spectator', originalRole: 'spectator', name: 'Espectador en Vivo' };
      }
      if (roleParam === 'admin' || roleParam === 'organizer') {
        const pinParam = urlParams.get('pin') || urlParams.get('pass');
        if (pinParam === 'LotaMami2026!' || pinParam === '1234') {
          const adminObj = { role: 'admin', originalRole: 'admin', name: 'Organizador Oficial', adminPin: '1234' };
          localStorage.setItem('bingo_session_user', JSON.stringify(adminObj));
          return adminObj;
        }
        // Si ingresa con parámetro admin, verificar si tiene sesión guardada válida
        const savedAdmin = localStorage.getItem('bingo_session_user');
        if (savedAdmin) {
          try {
            const parsed = JSON.parse(savedAdmin);
            if (parsed && parsed.role === 'admin' && (parsed.adminPin === '1234' || parsed.adminPin === 'LotaMami2026!' || parsed.originalRole === 'admin')) {
              return parsed;
            }
          } catch(e) {}
        }
        // Si no tiene clave guardada, forzar portal de login para que ingrese credenciales
        return null;
      }

      // Si el usuario ya tenía una sesión activa autenticada de Organizador guardada:
      const savedUser = localStorage.getItem('bingo_session_user');
      if (savedUser) {
        try {
          const parsed = JSON.parse(savedUser);
          if (parsed && parsed.role === 'admin' && (parsed.adminPin === '1234' || parsed.adminPin === 'LotaMami2026!' || parsed.originalRole === 'admin')) {
            return parsed;
          }
        } catch (e) {}
      }

      // Por defecto para cualquier persona que ingresa por el enlace principal:
      // Situarse en la Pantalla Principal (Menú Completo con Premios y Opciones)
      return null;
    } catch (e) {
      return null;
    }
  });

  const [supabaseStatus, setSupabaseStatus] = useState({
    status: 'loading',
    message: 'Comprobando conexión con Supabase...',
    latency: null,
    url: null
  });

  const checkConnection = useCallback(async () => {
    setSupabaseStatus(prev => ({ ...prev, status: 'loading', message: 'Conectando...' }));
    if (window.checkSupabaseHealth) {
      const result = await window.checkSupabaseHealth();
      setSupabaseStatus(result);
    } else {
      setSupabaseStatus({
        status: 'offline',
        message: 'No se encontró el módulo de verificación de Supabase.',
        latency: null
      });
    }
  }, []);

  useEffect(() => {
    checkConnection();

    // Simulación dinámica y realista de espectadores en vivo
    const interval = setInterval(() => {
      setViewersCount(prev => {
        const delta = Math.floor(Math.random() * 5) - 2;
        return Math.max(35, Math.min(85, prev + delta));
      });
    }, 6000);

    return () => clearInterval(interval);
  }, [checkConnection]);

  // Manejo de inicio de sesión o entrada desde el portal
  const handleLoginSuccess = (userData) => {
    setCurrentUser(userData);
    try {
      localStorage.setItem('bingo_session_user', JSON.stringify(userData));
    } catch (e) {}
    if (userData.role === 'seller') {
      setActiveTab('seller');
    } else {
      setActiveTab('game');
    }
  };

  // Manejo de cambio de rol (Organizador <-> Espectador, protegido)
  const handleSetUserRole = (newRole) => {
    // Protección: Nadie puede cambiarse a admin a menos que tenga el PIN 1234
    if (newRole === 'admin') {
      const isAdminAuthenticated = currentUser?.adminPin === '1234' || currentUser?.originalRole === 'admin';
      if (!isAdminAuthenticated) {
        alert("Acceso denegado: Se requiere autenticación de Organizador con PIN.");
        return;
      }
    }

    const updated = {
      ...currentUser,
      role: newRole,
      name: newRole === 'admin' ? 'Organizador Oficial' : newRole === 'seller' ? 'Vendedor Oficial' : (currentUser?.name || 'Espectador en Vivo')
    };
    setCurrentUser(updated);
    try {
      localStorage.setItem('bingo_session_user', JSON.stringify(updated));
      const url = new URL(window.location.href);
      if (newRole === 'admin') {
        url.searchParams.delete('mode');
        url.searchParams.delete('role');
      } else if (newRole === 'seller') {
        url.searchParams.set('mode', 'seller');
      } else {
        url.searchParams.set('mode', 'spectator');
      }
      window.history.replaceState(null, '', url.toString());
    } catch (e) {}
    setActiveTab(newRole === 'seller' ? 'seller' : 'game');
  };

  // Manejo de cierre de sesión para volver a la pantalla de inicio
  const handleLogout = () => {
    setCurrentUser(null);
    try {
      localStorage.removeItem('bingo_session_user');
    } catch (e) {}
  };

  const [preSelectedCardsForBot, setPreSelectedCardsForBot] = useState([]);

  // Determinar rol efectivo
  const effectiveRole = currentUser 
    ? (currentUser.role === 'admin' ? 'admin' : currentUser.role === 'seller' ? 'seller' : 'spectator') 
    : 'spectator';
  const effectiveCards = currentUser && currentUser.cards ? currentUser.cards : null;

  return (
    <window.BingoRoomProvider 
      userRole={effectiveRole} 
      userName={currentUser?.name || 'Invitado'}
      adminPin={currentUser?.adminPin || (effectiveRole === 'admin' ? '1234' : '')}
    >
      <div className="app-container">
        {/* Si no hay sesión iniciada, mostrar el Portal de Inicio / Entrada */}
        {!currentUser ? (
          <main className="main-content">
            <window.AuthPortal 
              onLoginSuccess={handleLoginSuccess}
              viewersCount={viewersCount}
            />
          </main>
        ) : (
          <>
            {/* Barra de Navegación Superior con datos de usuario */}
            <window.Header 
              activeTab={activeTab} 
              setActiveTab={setActiveTab} 
              userRole={effectiveRole}
              setUserRole={handleSetUserRole}
              currentUser={currentUser}
              onLogout={handleLogout}
              supabaseStatus={supabaseStatus} 
              viewersCount={viewersCount}
            />

            {/* Contenido Principal según Pestaña y Rol */}
            <main className="main-content">
              {activeTab === 'game' && (
                <window.BingoPreview 
                  initialCards={effectiveCards} 
                  userRole={effectiveRole} 
                  viewersCount={viewersCount}
                  onSwitchRole={handleSetUserRole}
                  currentUser={currentUser}
                />
              )}
              {activeTab === 'showcase' && (
                <window.CardShowcase 
                  onSelectCardToBuy={(cards) => {
                    setPreSelectedCardsForBot(cards);
                    setActiveTab('bot');
                  }}
                  onNavigateToBot={(cards) => {
                    setPreSelectedCardsForBot(cards);
                    setActiveTab('bot');
                  }}
                />
              )}
              {activeTab === 'bot' && (
                <window.ReceiptBot 
                  initialCustomCards={preSelectedCardsForBot}
                  onCardsAssigned={(cards) => {
                    setCurrentUser(prev => ({ ...prev, cards }));
                    setActiveTab('game');
                  }} 
                />
              )}
              {activeTab === 'seller' && (
                <window.SellerView 
                  currentUser={currentUser} 
                  onLogout={handleLogout} 
                />
              )}
              {activeTab === 'admin' && effectiveRole === 'admin' && <window.AdminReceipts />}
              {activeTab === 'supabase' && effectiveRole === 'admin' && (
                <window.SupabaseStatus 
                  statusData={supabaseStatus} 
                  onRefresh={checkConnection} 
                />
              )}
            </main>

            {/* Pie de Página */}
            <footer className="app-footer">
              <div>
                <strong>Lota Familiar La Mami</strong> — Usuario activo: <strong>{currentUser.name}</strong> ({currentUser.role === 'admin' ? 'Organizador' : currentUser.role === 'seller' ? 'Vendedor Autorizado' : currentUser.role === 'player' ? 'Jugador' : 'Espectador'}) | 👁️ {viewersCount} espectadores conectados | Canal Único Realtime Conectado
              </div>
            </footer>
          </>
        )}
      </div>
    </window.BingoRoomProvider>
  );
}

// Renderizado en el DOM
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);