Update cointube.jsx

cointube.jsx

@@ -22,41 +22,9 @@ import {
     limit
 } from 'firebase/firestore';
 
-// --- CONFIGURACIÓN DE FIREBASE (JSON PARSER) ---
+// --- Variables Globales (se llenarán después) ---
 let app, auth, db;
 
-try {
-    // 1. Intentamos leer la variable de entorno
-    const configRaw = import.meta.env.VITE_FIREBASE_CONFIG;
-    
-    let firebaseConfig;
-
-    if (configRaw) {
-        // 2. Si existe, la parseamos de JSON a Objeto
-        firebaseConfig = JSON.parse(configRaw);
-    } else {
-        // 3. Fallback de seguridad o error visible en consola
-        console.error("FALTA CONFIGURACIÓN: La variable VITE_FIREBASE_CONFIG está vacía.");
-        // Opcional: Valores por defecto hardcodeados si todo falla
-        firebaseConfig = {
-            apiKey: "AIzaSyCwJjVJGuOmA_PKRbaTnQDrK-Q07NI_utc",
-            authDomain: "insights-5c2d6.firebaseapp.com",
-            projectId: "insights-5c2d6",
-            storageBucket: "insights-5c2d6.firebasestorage.app",
-            messagingSenderId: "61805724903",
-            appId: "1:61805724903:web:0f3771dc5cd44416600e42"
-        };
-    }
-
-    app = initializeApp(firebaseConfig);
-    auth = getAuth(app);
-    db = getFirestore(app);
-    console.log("Firebase inicializado correctamente.");
-
-} catch (error) {
-    console.error("ERROR CRÍTICO AL INICIAR FIREBASE:", error);
-}
-
 // --- Constantes del Sistema ---
 const ADMIN_EMAIL = "photonicsupernova@gmail.com";
 const VIDEO_COST = 10000; 
@@ -65,7 +33,11 @@ const DEFAULT_VIDEO_TITLE = "Pelicula Completa";
 
 export default function App() {
     
-    // --- Estados ---
+    // --- Estado de Inicialización ---
+    const [firebaseReady, setFirebaseReady] = useState(false);
+    const [configError, setConfigError] = useState(null);
+
+    // --- Estados de la App ---
     const [videos, setVideos] = useState([]); 
     const [leaderboard, setLeaderboard] = useState([]); 
     const [user, setUser] = useState(null);
@@ -80,15 +52,41 @@ export default function App() {
     const playerRef = useRef(null);
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
+
+    // --- EFECTO 0: OBTENER CONFIGURACIÓN DEL SERVIDOR (RUNTIME) ---
+    useEffect(() => {
+        const initFirebase = async () => {
+            try {
+                // 1. Pedimos la config al servidor
+                const response = await fetch('/api/config');
+                if (!response.ok) throw new Error("Falló la carga de configuración");
+                
+                const config = await response.json();
+                
+                // 2. Iniciamos Firebase con los datos recibidos
+                if (!app) {
+                    app = initializeApp(config);
+                    auth = getAuth(app);
+                    db = getFirestore(app);
+                    console.log("Firebase conectado vía Secret Runtime");
+                }
+                setFirebaseReady(true);
+
+            } catch (error) {
+                console.error("Error crítico:", error);
+                setConfigError("No se pudo conectar con el servidor de autenticación.");
+            }
+        };
+
+        initFirebase();
+    }, []);
     
-    // --- Efectos ---
+    // --- Efectos (Solo corren si firebaseReady es true) ---
 
     // 1. Auth
     useEffect(() => {
-        if (!auth) {
-            setAuthReady(true);
-            return;
-        }
+        if (!firebaseReady || !auth) return;
+        
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -101,11 +99,11 @@ export default function App() {
             setAuthReady(true);
         });
         return () => unsubscribeAuth();
-    }, []);
+    }, [firebaseReady]);
 
     // 2. Perfil de Usuario
     useEffect(() => {
-        if (!userId || !db) return;
+        if (!firebaseReady || !userId || !db) return;
         const profileRef = doc(db, 'users', userId);
         const unsubscribeProfile = onSnapshot(profileRef, (docSnap) => {
             if (docSnap.exists()) {
@@ -121,11 +119,11 @@ export default function App() {
             }
         }, (error) => console.error("Error listening to profile:", error));
         return () => unsubscribeProfile();
-    }, [userId, user]);
+    }, [userId, user, firebaseReady]);
 
     // 3. Cargar Lista de Videos
     useEffect(() => {
-        if (!db) return;
+        if (!firebaseReady || !db) return;
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(20));
         const unsubscribe = onSnapshot(q, (snapshot) => {
             const fetchedVideos = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
@@ -139,18 +137,18 @@ export default function App() {
             }
         });
         return () => unsubscribe();
-    }, []);
+    }, [firebaseReady]);
 
     // 4. LEADERBOARD
     useEffect(() => {
-        if (!db) return;
+        if (!firebaseReady || !db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(20));
         const unsubscribe = onSnapshot(q, (snapshot) => {
             const usersList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
             setLeaderboard(usersList);
         });
         return () => unsubscribe();
-    }, []);
+    }, [firebaseReady]);
 
     // 5. API YouTube
     useEffect(() => {
@@ -252,12 +250,22 @@ export default function App() {
         await signOut(auth);
     };
 
-    // --- Renderizado de Carga ---
-    if (!authReady) {
+    // --- Renderizado de Carga / Error ---
+    if (configError) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full w-full text-red-500">
+                <p>⚠️ {configError}</p>
+            </div>
+        );
+    }
+
+    if (!firebaseReady || !authReady) {
         return (
             <div className="flex flex-col items-center justify-center h-full w-full">
                 <div className="spinner mb-4"></div>
-                <p className="text-lg text-gray-400">Conectando...</p>
+                <p className="text-lg text-gray-400">
+                    {!firebaseReady ? "Obteniendo configuración segura..." : "Conectando usuario..."}
+                </p>
             </div>
         );
     }