Update cointube.jsx

cointube.jsx

@@ -22,11 +22,8 @@ import {
     limit
 } from 'firebase/firestore';
 
-// --- Variables Globales ---
-// Se definen fuera para que mantengan su valor, pero se inicializan dentro
 let app, auth, db; 
 
-// --- Constantes del Sistema ---
 const ADMIN_EMAIL = "photonicsupernova@gmail.com";
 const VIDEO_COST = 10000; 
 const DEFAULT_VIDEO_ID = "UtEhewStfMA";
@@ -34,11 +31,9 @@ const DEFAULT_VIDEO_TITLE = "Pelicula Completa";
 
 export default function App() {
     
-    // --- Estados 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);
@@ -54,8 +49,6 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
 
-    // --- 1. OBTENER CONFIGURACIÓN DEL SERVIDOR ---
-    // Esto reemplaza a las credenciales hardcodeadas
     useEffect(() => {
         const initFirebase = async () => {
             try {
@@ -68,19 +61,17 @@ export default function App() {
                     app = initializeApp(config);
                     auth = getAuth(app);
                     db = getFirestore(app);
-                    console.log("Firebase conectado con éxito.");
                 }
                 setFirebaseReady(true);
 
             } catch (error) {
-                console.error("Error inicializando:", error);
+                console.error(error);
                 setConfigError("Error de conexión con el servidor.");
             }
         };
         initFirebase();
     }, []);
     
-    // --- 2. Auth ---
     useEffect(() => {
         if (!firebaseReady || !auth) return;
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
@@ -97,7 +88,6 @@ export default function App() {
         return () => unsubscribeAuth();
     }, [firebaseReady]);
 
-    // --- 3. Perfil de Usuario ---
     useEffect(() => {
         if (!firebaseReady || !userId || !db) return;
         const profileRef = doc(db, 'users', userId);
@@ -110,14 +100,13 @@ export default function App() {
                     coins: 0, 
                     watchedDefaultVideo: false 
                 };
-                setDoc(profileRef, newProfile).catch(e => console.error("Error creating profile:", e));
+                setDoc(profileRef, newProfile).catch(e => console.error(e));
                 setUserProfile(newProfile);
             }
-        }, (error) => console.error("Error listening to profile:", error));
+        }, (error) => console.error(error));
         return () => unsubscribeProfile();
     }, [userId, user, firebaseReady]);
 
-    // --- 4. Cargar Videos ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(20));
@@ -132,7 +121,6 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
-    // --- 5. Leaderboard ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(20));
@@ -143,7 +131,6 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
-    // --- 6. YouTube API ---
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
@@ -156,7 +143,6 @@ export default function App() {
         }
     }, []);
 
-    // --- Lógica de Monedas ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId && db) {
             const coinsToSave = localCoinBufferRef.current;
@@ -183,7 +169,6 @@ export default function App() {
         }
     }, [saveCoinBuffer]);
 
-    // --- Player Events ---
     const onPlayerReady = useCallback((event) => {
         playerRef.current = event.target;
         playerRef.current.playVideo();
@@ -225,7 +210,6 @@ export default function App() {
         if (playerRef.current) playerRef.current.loadVideoById(video.videoId);
     };
 
-    // --- Handlers ---
     const handleGoogleLogin = async () => {
         if (!auth) return;
         const provider = new GoogleAuthProvider();
@@ -242,27 +226,55 @@ export default function App() {
         await signOut(auth);
     };
 
-    // --- Render Views ---
     if (configError) {
         return <div className="flex justify-center items-center h-full text-red-500">{configError}</div>;
     }
 
     if (!firebaseReady || !authReady) {
         return (
-            <div className="flex justify-center items-center h-full">
+            <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>
             </div>
         );
     }
 
     if (authReady && !user) {
         return (
-            <div className="flex flex-col items-center justify-center h-full bg-gray-900 p-4">
-                <div className="bg-gray-800 p-8 rounded-2xl shadow-xl text-center max-w-md w-full border border-gray-700">
-                    <h1 className="text-3xl font-bold text-white mb-4">CoinTube</h1>
-                    <button onClick={handleGoogleLogin} className="w-full py-3 bg-white text-gray-900 font-bold rounded-lg hover:bg-gray-100">
-                        Entrar con Google
-                    </button>
+            <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.<br/><br/>
+                        <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"
+                        >
+                            <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>
+                    </div>
+                    <p className="mt-6 text-xs text-gray-500">
+                        Al continuar, aceptas nuestros términos de servicio.
+                    </p>
                 </div>
             </div>
         );
@@ -286,7 +298,6 @@ export default function App() {
                 <button onClick={() => setCurrentTab('promocionar')} className={`flex-1 py-2 rounded ${currentTab === 'promocionar' ? 'bg-blue-600 text-white' : 'text-gray-400'}`}>Subir Video</button>
             </nav>
 
-            {/* TAB: GANAR */}
             <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6`}>
                 <div className="lg:w-2/3">
                     <div className="aspect-video bg-black rounded-lg overflow-hidden shadow-xl">
@@ -308,12 +319,14 @@ export default function App() {
                         </div>
                     </div>
                     <div className="bg-gray-800 rounded p-4 flex-1 flex flex-col min-h-[200px]">
-                        <h3 className="text-yellow-500 text-sm uppercase font-bold mb-2">Ranking</h3>
+                        <h3 className="text-yellow-500 text-sm uppercase font-bold mb-2">Ranking Global</h3>
                         <div className="overflow-y-auto flex-1 pr-2 custom-scrollbar space-y-2">
                             {leaderboard.map((u, i) => (
                                 <div key={u.id || i} className="flex justify-between p-2 bg-gray-700 rounded text-sm">
-                                    <span className="text-white">#{i+1} {u.email?.split('@')[0]}</span>
-                                    <span className="text-yellow-400">{Math.floor(u.coins)}</span>
+                                    <span className="text-white text-xs md:text-sm truncate mr-2" title={u.email}>
+                                        #{i+1} {u.email}
+                                    </span>
+                                    <span className="text-yellow-400 font-mono whitespace-nowrap">{Math.floor(u.coins)}</span>
                                 </div>
                             ))}
                         </div>
@@ -321,8 +334,6 @@ export default function App() {
                 </aside>
             </main>
 
-            {/* TAB: PROMOCIONAR */}
-            {/* Aquí pasamos 'db' como prop, que es lo que fallaba antes */}
             <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 items-center justify-center`}>
                 <PromoCheck 
                     user={user} 
@@ -337,8 +348,6 @@ export default function App() {
     );
 }
 
-// --- Componentes Hijos ---
-
 function PromoCheck({ user, userProfile, userId, adminEmail, videoCost, db }) {
     const isAdmin = user?.email === adminEmail;
     const coins = userProfile?.coins || 0;
@@ -361,6 +370,7 @@ function PromoCheck({ user, userProfile, userId, adminEmail, videoCost, db }) {
 
 function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
     const [url, setUrl] = useState('');
+    const [title, setTitle] = useState('');
     const [message, setMessage] = useState({ text: '', type: '' });
     const [loading, setLoading] = useState(false);
 
@@ -375,27 +385,28 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
         const videoId = extractYouTubeID(url);
         
         if (!videoId) {
-            setMessage({ text: "Enlace no válido", type: 'error' });
+            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;
         }
 
-        // Validación extra para asegurar que db existe
         if (!db) {
             setMessage({ text: "Error: Base de datos no conectada", type: 'error' });
             return;
         }
 
         setLoading(true);
-        const title = isAdmin ? `Recomendado (Admin)` : `Video de Usuario`;
 
         try {
-            // 1. Descontar monedas (si no es admin)
             if (!isAdmin) {
                 const userRef = doc(db, 'users', userId);
                 await updateDoc(userRef, { coins: increment(-videoCost) });
             }
 
-            // 2. Guardar video en Firestore
             const videosRef = collection(db, 'videos');
             await addDoc(videosRef, {
                 title: title,
@@ -405,8 +416,9 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
                 isPromoted: !isAdmin
             });
 
-            setMessage({ text: "¡Video agregado!", type: 'success' });
+            setMessage({ text: "¡Video agregado con éxito!", type: 'success' });
             setUrl('');
+            setTitle('');
         } catch (error) {
             console.error("Error al subir:", error);
             if (error.code === 'permission-denied') {
@@ -421,16 +433,31 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
 
     return (
         <div className="bg-gray-800 p-8 rounded-lg shadow-xl max-w-md w-full border border-green-900">
-            <h2 className="text-2xl font-bold text-white mb-4 text-center">{isAdmin ? "Admin Panel" : "¡Meta Alcanzada!"}</h2>
+            <h2 className="text-2xl font-bold text-white mb-4 text-center">{isAdmin ? "Panel Admin" : "¡Meta Alcanzada!"}</h2>
             <form onSubmit={handleSubmit} className="space-y-4">
-                <input 
-                    type="url" 
-                    placeholder="Enlace de YouTube..." 
-                    className="w-full p-3 bg-gray-700 text-white rounded border border-gray-600 focus:border-blue-500 outline-none"
-                    value={url}
-                    onChange={(e) => setUrl(e.target.value)}
-                    required
-                />
+                <div>
+                    <label className="block text-sm text-gray-400 mb-1">Enlace del Video</label>
+                    <input 
+                        type="url" 
+                        placeholder="https://youtube.com/watch?v=..." 
+                        className="w-full p-3 bg-gray-700 text-white rounded border border-gray-600 focus:border-blue-500 outline-none"
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                        required
+                    />
+                </div>
+                <div>
+                    <label className="block text-sm text-gray-400 mb-1">Título del Video</label>
+                    <input 
+                        type="text" 
+                        placeholder="Ej: Mi Gameplay Épico" 
+                        className="w-full p-3 bg-gray-700 text-white rounded border border-gray-600 focus:border-blue-500 outline-none"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        required
+                        maxLength={50}
+                    />
+                </div>
                 <button disabled={loading} className="w-full py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded transition-colors disabled:opacity-50">
                     {loading ? 'Procesando...' : (isAdmin ? 'Subir Gratis' : `Pagar ${videoCost} y Subir`)}
                 </button>