Update cointube.jsx

cointube.jsx

@@ -1,3 +1,5 @@
+JavaScript
+
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { initializeApp } from 'firebase/app';
 import { 
@@ -5,7 +7,9 @@ import {
     onAuthStateChanged, 
     GoogleAuthProvider, 
     signInWithPopup, 
-    signOut
+    signOut,
+    signInWithCustomToken,
+    signInAnonymously
 } from 'firebase/auth';
 import { 
     getFirestore, 
@@ -18,12 +22,9 @@ import {
     increment,
     serverTimestamp,
     query,
-    orderBy,
-    limit,
     setLogLevel
 } from 'firebase/firestore';
 
-// --- Constantes de Firebase ---
 const firebaseConfig = {
     apiKey: "AIzaSyCwJjVJGuOmA_PKRbaTnQDrK-Q07NI_utc",
     authDomain: "insights-5c2d6.firebaseapp.com",
@@ -38,27 +39,21 @@ try {
     app = initializeApp(firebaseConfig);
     auth = getAuth(app);
     db = getFirestore(app);
+    setLogLevel('debug');
 } catch (error) {
     console.error("Error inicializando Firebase:", error);
 }
 
 const DEFAULT_VIDEO_ID = "UtEhewStfMA";
-const DEFAULT_VIDEO_TITLE = "Pelicula Completa"; 
-const COIN_GOAL = 10000;
+const DEFAULT_VIDEO_TITLE = "Cómo Programar un Cohete";
 
 export default function App() {
     
-    // Lista de videos inicializada con datos fijos para el primer render
-    const [videos, setVideos] = useState([
-        { id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }, 
-        { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' },
-        { id: '3', title: 'Cine de Arte', videoId: 'GxEx6Kgo6Es' },
-    ]);
-    
     const [user, setUser] = useState(null);
     const [userId, setUserId] = useState(null);
     const [authReady, setAuthReady] = useState(false);
     const [userProfile, setUserProfile] = useState(null);
+    const [videos, setVideos] = useState([]);
     const [currentTab, setCurrentTab] = useState('ganar');
     const [currentVideoId, setCurrentVideoId] = useState(DEFAULT_VIDEO_ID);
     const [currentVideoTitle, setCurrentVideoTitle] = useState(DEFAULT_VIDEO_TITLE);
@@ -68,12 +63,9 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
     
-    // 1. Auth
     useEffect(() => {
-        if (!auth) {
-            setAuthReady(true);
-            return;
-        }
+        if (!auth) return;
+
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -85,45 +77,46 @@ export default function App() {
             }
             setAuthReady(true);
         });
+
+        setAuthReady(true); 
+
         return () => unsubscribeAuth();
     }, []);
 
-    // 2. Perfil de Usuario
     useEffect(() => {
         if (!userId || !db) return;
+
         const profileRef = doc(db, 'users', userId);
+        
         const unsubscribeProfile = onSnapshot(profileRef, (docSnap) => {
             if (docSnap.exists()) {
                 setUserProfile(docSnap.data());
             } else {
-                const name = user?.displayName || `Usuario ${userId.substring(0, 4)}`; 
-                const newProfile = { 
-                    coins: 0, 
-                    watchedDefaultVideo: false,
-                    name: name
-                };
-                setDoc(profileRef, newProfile).catch(e => console.error(e));
+                const newProfile = { coins: 0, watchedDefaultVideo: false };
+                setDoc(profileRef, newProfile).catch(e => console.error("Error creating profile:", e));
                 setUserProfile(newProfile);
             }
-        }, (error) => console.error("Error perfil:", error));
+        }, (error) => {
+            console.error("Error listening to profile:", error);
+        });
+
         return () => unsubscribeProfile();
-    }, [userId, user]); 
+    }, [userId]);
 
-    // 3. Videos de Firebase (RESTAURADO: Carga dinámica)
     useEffect(() => {
         if (!db) return;
+
         const videosRef = collection(db, 'videos');
-        const q = query(videosRef, orderBy('createdAt', 'desc'), limit(100)); // Límite para evitar sobrecarga
+        const q = query(videosRef);
         
         const unsubscribeVideos = onSnapshot(q, (snapshot) => {
             if (snapshot.empty) {
-                // Si no hay videos, se añade el por defecto solo en la base de datos
                 addDoc(videosRef, {
                     title: DEFAULT_VIDEO_TITLE,
                     videoId: DEFAULT_VIDEO_ID,
                     addedBy: "system",
                     createdAt: serverTimestamp()
-                }).catch(e => console.error(e));
+                }).catch(e => console.error("Error adding default video:", e));
             } else {
                 const videoList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                 setVideos(videoList);
@@ -134,28 +127,31 @@ export default function App() {
 
         return () => unsubscribeVideos();
     }, []);
-    
-    // 4. API YouTube
+
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
             tag.src = "https://www.youtube.com/iframe_api";
             const firstScriptTag = document.getElementsByTagName('script')[0];
             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-            window.onYouTubeIframeAPIReady = () => setYtApiReady(true);
+
+            window.onYouTubeIframeAPIReady = () => {
+                setYtApiReady(true);
+            };
         } else {
             setYtApiReady(true);
         }
     }, []);
 
-    // --- Lógica de Monedas ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId) {
             const coinsToSave = localCoinBufferRef.current;
             localCoinBufferRef.current = 0;
             const profileRef = doc(db, 'users', userId);
             updateDoc(profileRef, { coins: increment(coinsToSave) })
-                .catch(e => { localCoinBufferRef.current += coinsToSave; });
+                .catch(e => {
+                    localCoinBufferRef.current += coinsToSave;
+                });
         }
     }, [userId]);
     
@@ -163,7 +159,9 @@ export default function App() {
         if (coinIntervalRef.current) return;
         coinIntervalRef.current = setInterval(() => {
             localCoinBufferRef.current++;
-            if (localCoinBufferRef.current >= 5) saveCoinBuffer();
+            if (localCoinBufferRef.current >= 5) {
+                saveCoinBuffer();
+            }
         }, 1000);
     }, [saveCoinBuffer]);
 
@@ -175,7 +173,6 @@ export default function App() {
         }
     }, [saveCoinBuffer]);
 
-    // --- Player Events ---
     const onPlayerReady = useCallback((event) => {
         playerRef.current = event.target;
         playerRef.current.playVideo();
@@ -183,9 +180,11 @@ export default function App() {
 
     const onPlayerStateChange = useCallback((event) => {
         const state = event.data;
-        if (state === window.YT.PlayerState.PLAYING) startCoinInterval();
-        else stopCoinInterval();
-        
+        if (state === window.YT.PlayerState.PLAYING) {
+            startCoinInterval();
+        } else {
+            stopCoinInterval();
+        }
         if (state === window.YT.PlayerState.ENDED) {
             if (currentVideoId === DEFAULT_VIDEO_ID && userId) {
                 const profileRef = doc(db, 'users', userId);
@@ -194,20 +193,21 @@ export default function App() {
         }
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
-    // 5. Inicializar Player
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current) {
-            try {
-                playerRef.current = new window.YT.Player('player', {
-                    height: '100%',
-                    width: '100%',
-                    videoId: currentVideoId,
-                    playerVars: { 'playsinline': 1, 'autoplay': 1, 'controls': 1, 'modestbranding': 1, 'rel': 0 },
-                    events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }
-                });
-            } catch (e) {
-                console.error("Error iniciando player", e);
-            }
+            playerRef.current = new window.YT.Player('player', {
+                height: '100%',
+                width: '100%',
+                videoId: currentVideoId,
+                playerVars: {
+                    'playsinline': 1, 'autoplay': 1, 'controls': 1,
+                    'modestbranding': 1, 'rel': 0
+                },
+                events: {
+                    'onReady': onPlayerReady,
+                    'onStateChange': onPlayerStateChange
+                }
+            });
         }
         if (!userId && playerRef.current) {
             stopCoinInterval();
@@ -219,19 +219,17 @@ export default function App() {
         stopCoinInterval();
         setCurrentVideoId(video.videoId);
         setCurrentVideoTitle(video.title);
-        if (playerRef.current && typeof playerRef.current.loadVideoById === 'function') {
+        if (playerRef.current) {
             playerRef.current.loadVideoById(video.videoId);
         }
     };
 
-    // --- FUNCIONES DE LOGIN (SIN ANÓNIMO) ---
     const handleGoogleLogin = async () => {
         const provider = new GoogleAuthProvider();
         try {
             await signInWithPopup(auth, provider);
         } catch (error) {
-            console.error("Error login:", error);
-            alert("Error al conectar con Google. Verifica tu conexión o configuración.");
+            console.error("Error en el inicio de sesión con Google:", error);
         }
     };
 
@@ -249,66 +247,29 @@ export default function App() {
         );
     }
 
-    // --- Renderizado de Login (SIN BOTÓN ANÓNIMO) ---
     if (authReady && !user) {
         return (
-            <div className="flex flex-col items-center justify-center h-full w-full bg-gray-900 p-4">
-                <div className="max-w-md w-full bg-gray-800 rounded-2xl shadow-2xl p-8 text-center border border-gray-700">
-                    <div className="flex justify-center mb-6">
-                        <div className="bg-blue-600 p-4 rounded-full shadow-lg">
-                            <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                        </div>
-                    </div>
-                    <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">Bienvenido a CoinTube</h1>
-                    <p className="text-gray-400 mb-8 text-sm leading-relaxed">
-                        Descubre contenido increíble, gana monedas virtuales por cada minuto que ves y promociona tus propios videos.
-                    </p>
-                    <button 
-                        onClick={handleGoogleLogin} 
-                        className="w-full flex items-center justify-center px-4 py-3 bg-white text-gray-800 font-bold rounded-lg hover:bg-gray-100 transition-all duration-200 shadow-md"
-                    >
-                        <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
-                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                        </svg>
-                        Continuar con Google
-                    </button>
-                    
-                    <p className="mt-6 text-xs text-gray-500">
-                        Al continuar, aceptas nuestros términos de servicio.
-                    </p>
-                </div>
+            <div className="flex flex-col items-center justify-center h-full w-full">
+                <p className="text-lg text-gray-400 mb-6">Por favor, inicia sesión para continuar.</p>
+                <button 
+                    onClick={handleGoogleLogin} 
+                    className="px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors"
+                >
+                    Iniciar sesión con Google
+                </button>
             </div>
         );
     }
 
-    const isWatched = userProfile?.watchedDefaultVideo;
-    const hasEnoughCoins = (userProfile?.coins || 0) >= COIN_GOAL;
-    
-    let PromoComponent;
-    if (!isWatched) {
-        PromoComponent = <PromoLocked defaultTitle={DEFAULT_VIDEO_TITLE} />;
-    } else if (!hasEnoughCoins) {
-        PromoComponent = <GoalLocked coinGoal={COIN_GOAL} currentCoins={userProfile?.coins || 0} />;
-    } else {
-        PromoComponent = <PromoUnlocked userId={userId} />;
-    }
-
-    // --- App Principal ---
     return (
         <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6">
             <header className="flex flex-col md:flex-row justify-between items-center pb-4 mb-4 border-b border-gray-700">
                 <h1 className="text-3xl font-bold text-white">Coin<span className="text-blue-500">Tube</span></h1>
                 <div className="flex items-center space-x-4 mt-4 md:mt-0">
                     <div className="flex flex-col items-end">
-                         <span className="text-sm text-gray-400">{userProfile?.name || user?.email || 'Usuario'}</span>
+                         <span className="text-sm text-gray-400">{user?.email}</span>
                          <span className="text-lg font-bold text-yellow-400">
-                            {(userProfile?.coins || 0).toLocaleString()} Monedas
+                            {userProfile?.coins || 0} Monedas
                          </span>
                     </div>
                     <button 
@@ -320,7 +281,7 @@ export default function App() {
                 </div>
             </header>
 
-            <nav className="flex space-x-1 mb-6 rounded-lg bg-gray-800 p-1 max-w-lg mx-auto">
+            <nav className="flex space-x-1 mb-6 rounded-lg bg-gray-800 p-1 max-w-md mx-auto">
                 <button 
                     onClick={() => setCurrentTab('ganar')}
                     className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'ganar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
@@ -333,15 +294,8 @@ export default function App() {
                 >
                     Promocionar Video
                 </button>
-                <button 
-                    onClick={() => setCurrentTab('ranking')}
-                    className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'ranking' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-                >
-                    Ranking
-                </button>
             </nav>
 
-            {/* SECCIÓN GANAR MONEDAS */}
             <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6 overflow-hidden`}>
                 <div className="lg:w-2/3 flex flex-col">
                     <div className="w-full bg-black rounded-lg shadow-2xl overflow-hidden">
@@ -356,141 +310,42 @@ export default function App() {
                 <aside className="lg:w-1/3 flex flex-col bg-gray-800 rounded-lg shadow-lg p-4">
                     <h2 className="text-xl font-semibold mb-4 pb-2 border-b border-gray-700">Videos Disponibles</h2>
                     <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-                        {videos.map((video) => (
-                            <button 
-                                key={video.id}
-                                onClick={() => loadVideo(video)}
-                                className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
-                                disabled={video.videoId === currentVideoId}
-                            >
-                                {video.title || `Video ID: ${video.videoId}`}
-                            </button>
-                        ))}
+                        {videos.length === 0 ? (
+                            <p className="text-gray-400">Cargando videos...</p>
+                        ) : (
+                            videos.map((video) => (
+                                <button 
+                                    key={video.id}
+                                    onClick={() => loadVideo(video)}
+                                    className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+                                    disabled={video.videoId === currentVideoId}
+                                >
+                                    {video.title || `Video ID: ${video.videoId}`}
+                                </button>
+                            ))
+                        )}
                     </div>
                 </aside>
             </main>
 
-            {/* SECCIÓN PROMOCIONAR VIDEO */}
             <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-center`}>
-                {PromoComponent} 
-            </main>
-
-            {/* SECCIÓN RANKING */}
-            <main className={`${currentTab === 'ranking' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-start py-4 overflow-auto`}>
-                <Leaderboard db={db} currentUserId={userId} />
+                {userProfile?.watchedDefaultVideo ? (
+                    <PromoUnlocked userId={userId} />
+                ) : (
+                    <PromoLocked />
+                )}
             </main>
         </div>
     );
 }
 
-// --- Sub-Componentes ---
-
-function Leaderboard({ db, currentUserId }) {
-    const [ranking, setRanking] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        if (!db) return;
-        setLoading(true);
-
-        try {
-            // Consulta: top 10 usuarios ordenados por monedas
-            const q = query(
-                collection(db, 'users'),
-                orderBy('coins', 'desc'),
-                limit(10) 
-            );
-
-            const unsubscribe = onSnapshot(q, (snapshot) => {
-                const users = [];
-                snapshot.forEach((doc) => {
-                    const data = doc.data();
-                    users.push({
-                        id: doc.id,
-                        coins: data.coins || 0,
-                        name: data.name || `Usuario` 
-                    });
-                });
-                setRanking(users);
-                setLoading(false);
-                setError(null);
-            }, (err) => {
-                console.error("Error ranking:", err);
-                setError("No se pudo cargar el ranking. (Revisar consola y reglas de Firebase)");
-                setLoading(false);
-            });
-            return () => unsubscribe();
-        } catch (e) {
-            console.error("Error al iniciar consulta de ranking:", e);
-            setError("Error interno al iniciar el ranking.");
-            setLoading(false);
-        }
-    }, [db]);
-
-    if (loading) return <div className="text-center p-8 text-gray-400">Cargando ranking...</div>;
-    if (error) return <div className="text-center p-8 text-red-400">{error}</div>;
-
-    return (
-        <div className="w-full max-w-lg bg-gray-800 rounded-xl shadow-2xl p-6">
-            <h2 className="text-3xl font-bold text-white mb-6 pb-2 border-b border-gray-700 text-center">🏆 Ranking de Monedas 🏆</h2>
-            
-            {ranking.length === 0 ? (
-                <div className="text-center p-8 text-gray-400">Aún no hay usuarios en el ranking.</div>
-            ) : (
-                <ul className="space-y-3">
-                    {ranking.map((user, index) => (
-                        <li 
-                            key={user.id} 
-                            className={`flex items-center justify-between p-4 rounded-lg transition-all duration-200 ${user.id === currentUserId 
-                                ? 'bg-blue-600 shadow-lg ring-2 ring-blue-400' 
-                                : 'bg-gray-700 hover:bg-gray-600'
-                            }`}
-                        >
-                            <div className="flex items-center space-x-4">
-                                <span className={`text-xl font-extrabold w-6 text-center ${index < 3 ? 'text-yellow-400' : 'text-gray-400'}`}>
-                                    {index + 1}.
-                                </span>
-                                <span className={`text-lg font-medium truncate ${user.id === currentUserId ? 'text-white' : 'text-gray-200'}`}>
-                                    {user.id === currentUserId ? `${user.name} (Tú)` : user.name}
-                                </span>
-                            </div>
-                            <span className={`text-xl font-bold ${user.id === currentUserId ? 'text-yellow-200' : 'text-yellow-400'}`}>
-                                {(user.coins || 0).toLocaleString()} 💰
-                            </span>
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </div>
-    );
-}
-
-function GoalLocked({ coinGoal, currentCoins }) {
-    return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg">
-            <svg className="w-16 h-16 text-yellow-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c1.657 0 3 1.343 3 3s-1.343 3-3 3-1.343-3-3-3 3 1.343 3 3v4m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
-            <h2 className="text-2xl font-bold mb-2 text-yellow-400">¡Meta de Monedas!</h2>
-            <p className="text-gray-300">
-                ¡Felicidades! Desbloqueaste la promoción por ver el video, pero el servicio requiere un mínimo de monedas.
-            </p>
-            <p className="text-gray-100 text-lg mt-4 font-semibold">
-                Acumulado: {(currentCoins || 0).toLocaleString()} / {coinGoal.toLocaleString()} Monedas
-            </p>
-            <p className="text-blue-400 text-sm mt-2 font-bold">
-                ¡Debes seguir viendo videos hasta juntar {coinGoal.toLocaleString()} monedas!
-            </p>
-        </div>
-    );
-}
-
-function PromoLocked({ defaultTitle }) {
+function PromoLocked() {
     return (
         <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg">
             <svg className="w-16 h-16 text-yellow-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
             <h2 className="text-2xl font-bold mb-2">Sección Bloqueada</h2>
             <p className="text-gray-300">
-                Para poder promocionar tu propio video, primero debes ver el video predeterminado ("{defaultTitle}") por completo.
+                Para poder promocionar tu propio video, primero debes ver el video predeterminado ("{DEFAULT_VIDEO_TITLE}") por completo.
             </p>
             <p className="text-gray-400 text-sm mt-4">¡Ve a "Ganar Monedas", búscalo en la lista y míralo hasta el final!</p>
         </div>
@@ -528,7 +383,7 @@ function PromoUnlocked({ userId }) {
             setMessage({ text: "¡Video agregado con éxito!", type: 'success' });
             setUrl('');
         } catch (error) {
-            console.error(error);
+            console.error("Error adding video:", error);
             setMessage({ text: "Error al agregar el video.", type: 'error' });
         }
     };