Update cointube.jsx

cointube.jsx

@@ -50,6 +50,7 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
 
+    // --- 1. INIT ---
     useEffect(() => {
         const initFirebase = async () => {
             try {
@@ -73,6 +74,7 @@ export default function App() {
         initFirebase();
     }, []);
     
+    // --- 2. AUTH ---
     useEffect(() => {
         if (!firebaseReady || !auth) return;
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
@@ -89,6 +91,7 @@ export default function App() {
         return () => unsubscribeAuth();
     }, [firebaseReady]);
 
+    // --- 3. PROFILE ---
     useEffect(() => {
         if (!firebaseReady || !userId || !db) return;
         const profileRef = doc(db, 'users', userId);
@@ -108,6 +111,7 @@ export default function App() {
         return () => unsubscribeProfile();
     }, [userId, user, firebaseReady]);
 
+    // --- 4. VIDEOS ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(50));
@@ -122,6 +126,7 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
+    // --- 5. RANKING (FILTRO GMAIL) ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(100));
@@ -138,6 +143,7 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
+    // --- 6. YOUTUBE API ---
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
@@ -150,6 +156,7 @@ export default function App() {
         }
     }, []);
 
+    // --- LOGICA DE MONEDAS ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId && db) {
             const coinsToSave = localCoinBufferRef.current;
@@ -217,15 +224,26 @@ export default function App() {
         if (playerRef.current) playerRef.current.loadVideoById(video.videoId);
     };
 
+    // --- FUNCIONES ADMIN ---
     const handleDeleteVideo = async (e, videoId) => {
         e.stopPropagation();
-        if (!confirm("¿Estás seguro de que quieres ELIMINAR este video?")) return;
-        
+        if (!confirm("¿Eliminar video?")) return;
+        try { await deleteDoc(doc(db, "videos", videoId)); } catch (error) { console.error(error); }
+    };
+
+    const handleGiveCoins = async (targetUserId, currentCoins) => {
+        const amountStr = prompt("Cantidad de monedas a sumar (usa negativo para restar):", "1000");
+        if (!amountStr) return;
+        const amount = parseInt(amountStr);
+        if (isNaN(amount)) return;
+
         try {
-            await deleteDoc(doc(db, "videos", videoId));
+            const userRef = doc(db, 'users', targetUserId);
+            await updateDoc(userRef, { coins: increment(amount) });
+            alert("Monedas actualizadas.");
         } catch (error) {
-            console.error("Error borrando:", error);
-            alert("No tienes permisos para borrar este video.");
+            console.error("Error:", error);
+            alert("Error al dar monedas. Revisa las reglas de Firebase.");
         }
     };
 
@@ -253,9 +271,7 @@ export default function App() {
         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">
-                    {!firebaseReady ? "Cargando sistema..." : "Conectando..."}
-                </p>
+                <p className="text-lg text-gray-400">{!firebaseReady ? "Cargando..." : "Conectando..."}</p>
             </div>
         );
     }
@@ -278,10 +294,7 @@ export default function App() {
                         <span className="text-yellow-400 font-bold text-base">¡Junta 10,000 monedas para subir tu video!</span>
                     </p>
                     <div className="space-y-3">
-                        <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"
-                        >
+                        <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"/>
@@ -291,9 +304,7 @@ export default function App() {
                             Continuar con Google
                         </button>
                     </div>
-                    <p className="mt-6 text-xs text-gray-500">
-                        Al continuar, aceptas nuestros términos de servicio.
-                    </p>
+                    <p className="mt-6 text-xs text-gray-500">Al continuar, aceptas nuestros términos.</p>
                 </div>
             </div>
         );
@@ -334,13 +345,7 @@ export default function App() {
                                 <button key={video.id} onClick={() => loadVideo(video)} className={`w-full text-left p-2 rounded flex justify-between items-center group ${video.videoId === currentVideoId ? 'bg-blue-900 border-l-2 border-blue-500' : 'bg-gray-700 hover:bg-gray-600'}`}>
                                     <div className="text-sm text-white truncate flex-1">{video.title}</div>
                                     {user?.email === ADMIN_EMAIL && (
-                                        <span 
-                                            onClick={(e) => handleDeleteVideo(e, video.id)}
-                                            className="ml-2 text-red-500 hover:text-red-300 font-bold px-2 py-1 rounded bg-red-900/50 hover:bg-red-900 cursor-pointer"
-                                            title="Borrar Video"
-                                        >
-                                            X
-                                        </span>
+                                        <span onClick={(e) => handleDeleteVideo(e, video.id)} className="ml-2 text-red-500 hover:text-red-300 font-bold px-2 py-1 rounded bg-red-900/50 hover:bg-red-900 cursor-pointer" title="Borrar Video">X</span>
                                     )}
                                 </button>
                             ))}
@@ -353,18 +358,29 @@ export default function App() {
                             {leaderboard.length > 0 ? (
                                 leaderboard.map((u, i) => (
                                     <div key={u.id || i} className="flex justify-between items-center p-2 bg-gray-700 rounded">
-                                        <span className="text-xs text-gray-300 truncate mr-2" title={u.email}>
-                                            {u.email}
-                                        </span>
-                                        <span className="text-yellow-400 font-mono text-sm whitespace-nowrap">
-                                            {Math.floor(u.coins || 0)}
-                                        </span>
+                                        <div className="flex items-center truncate">
+                                            <span className="text-xs text-gray-300 truncate mr-2" title={u.email}>
+                                                {u.email ? u.email.split('@')[0] : 'Usuario'}
+                                            </span>
+                                        </div>
+                                        
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-yellow-400 font-mono text-sm whitespace-nowrap">{Math.floor(u.coins || 0)}</span>
+                                            {/* BOTÓN SOLO PARA ADMIN */}
+                                            {user?.email === ADMIN_EMAIL && (
+                                                <button 
+                                                    onClick={() => handleGiveCoins(u.id, u.coins)}
+                                                    className="bg-green-600 hover:bg-green-500 text-white text-xs font-bold px-2 py-0.5 rounded shadow"
+                                                    title="Dar Monedas"
+                                                >
+                                                    +
+                                                </button>
+                                            )}
+                                        </div>
                                     </div>
                                 ))
                             ) : (
-                                <div className="text-center text-gray-500 text-sm py-4">
-                                    Esperando usuarios...
-                                </div>
+                                <div className="text-center text-gray-500 text-sm py-4">Esperando usuarios...</div>
                             )}
                         </div>
                     </div>
@@ -372,14 +388,7 @@ export default function App() {
             </main>
 
             <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 items-center justify-center`}>
-                <PromoCheck 
-                    user={user} 
-                    userProfile={userProfile} 
-                    userId={userId} 
-                    adminEmail={ADMIN_EMAIL}
-                    videoCost={VIDEO_COST}
-                    db={db} 
-                />
+                <PromoCheck user={user} userProfile={userProfile} userId={userId} adminEmail={ADMIN_EMAIL} videoCost={VIDEO_COST} db={db} />
             </main>
         </div>
     );
@@ -425,12 +434,10 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
             setMessage({ text: "Enlace de YouTube no válido", type: 'error' });
             return;
         }
-
         if (!title.trim()) {
             setMessage({ text: "Por favor escribe un título", type: 'error' });
             return;
         }
-
         if (!db) {
             setMessage({ text: "Error: Base de datos no conectada", type: 'error' });
             return;
@@ -458,11 +465,7 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
             setTitle('');
         } catch (error) {
             console.error("Error al subir:", error);
-            if (error.code === 'permission-denied') {
-                setMessage({ text: "Permiso denegado: Revisa las reglas de Firestore", type: 'error' });
-            } else {
-                setMessage({ text: "Error al procesar. Intenta de nuevo.", type: 'error' });
-            }
+            setMessage({ text: "Error al procesar. Intenta de nuevo.", type: 'error' });
         } finally {
             setLoading(false);
         }