Update cointube.jsx

cointube.jsx

@@ -5,8 +5,7 @@ import {
     onAuthStateChanged, 
     GoogleAuthProvider, 
     signInWithPopup, 
-    signOut,
-    signInAnonymously 
+    signOut 
 } from 'firebase/auth';
 import { 
     getFirestore, 
@@ -19,43 +18,56 @@ import {
     increment,
     serverTimestamp,
     query,
-    setLogLevel
+    orderBy,
+    limit
 } from 'firebase/firestore';
 
-// --- Constantes de Firebase ---
-const firebaseConfig = {
-    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-    appId: import.meta.env.VITE_FIREBASE_APP_ID
-};
-
+// --- CONFIGURACIÓN DE FIREBASE (JSON PARSER) ---
 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);
-    setLogLevel('debug');
+    console.log("Firebase inicializado correctamente.");
+
 } catch (error) {
-    console.error("Error inicializando Firebase:", error);
+    console.error("ERROR CRÍTICO AL INICIAR FIREBASE:", error);
 }
 
-// --- Constantes del Video (Agregadas) ---
+// --- Constantes del Sistema ---
+const ADMIN_EMAIL = "photonicsupernova@gmail.com";
+const VIDEO_COST = 10000; 
 const DEFAULT_VIDEO_ID = "UtEhewStfMA";
-const DEFAULT_VIDEO_TITLE = "Pelicula Completa"; // Usando el título de tu lista
+const DEFAULT_VIDEO_TITLE = "Pelicula Completa";
 
 export default function App() {
     
-    // --- Estado de la Lista de Videos (CORREGIDO - Dentro del componente) ---
-    const [videos, setVideos] = useState([
-        { id: '1', title: 'Pelicula Completa', videoId: 'UtEhewStfMA' }, 
-        { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' },
-        { id: '3', title: 'Cine de Arte', videoId: 'GxEx6Kgo6Es' },
-    ]);
-    
-    // --- Resto de Estados ---
+    // --- Estados ---
+    const [videos, setVideos] = useState([]); 
+    const [leaderboard, setLeaderboard] = useState([]); 
     const [user, setUser] = useState(null);
     const [userId, setUserId] = useState(null);
     const [authReady, setAuthReady] = useState(false);
@@ -73,7 +85,10 @@ export default function App() {
 
     // 1. Auth
     useEffect(() => {
-        if (!auth) return;
+        if (!auth) {
+            setAuthReady(true);
+            return;
+        }
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -85,7 +100,6 @@ export default function App() {
             }
             setAuthReady(true);
         });
-        setAuthReady(true); 
         return () => unsubscribeAuth();
     }, []);
 
@@ -97,42 +111,48 @@ export default function App() {
             if (docSnap.exists()) {
                 setUserProfile(docSnap.data());
             } else {
-                const newProfile = { coins: 0, watchedDefaultVideo: false };
+                const newProfile = { 
+                    email: user.email, 
+                    coins: 0, 
+                    watchedDefaultVideo: false 
+                };
                 setDoc(profileRef, newProfile).catch(e => console.error("Error creating profile:", e));
                 setUserProfile(newProfile);
             }
         }, (error) => console.error("Error listening to profile:", error));
         return () => unsubscribeProfile();
-    }, [userId]);
+    }, [userId, user]);
 
-    // 3. Videos de Firebase (ELIMINADO / Comentado para usar lista fija)
-    /*
+    // 3. Cargar Lista de Videos
     useEffect(() => {
         if (!db) return;
-        const videosRef = collection(db, 'videos');
-        const q = query(videosRef);
-        
-        const unsubscribeVideos = onSnapshot(q, (snapshot) => {
-            if (snapshot.empty) {
-                addDoc(videosRef, {
-                    title: DEFAULT_VIDEO_TITLE,
-                    videoId: DEFAULT_VIDEO_ID,
-                    addedBy: "system",
-                    createdAt: serverTimestamp()
-                }).catch(e => console.error("Error adding default video:", e));
+        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() }));
+            if (fetchedVideos.length > 0) {
+                setVideos(fetchedVideos);
             } else {
-                const videoList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-                // Si usas la lista fija, no hagas setVideos(videoList) aquí.
+                setVideos([
+                    { id: '1', title: 'Pelicula Completa', videoId: 'UtEhewStfMA' }, 
+                    { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' }
+                ]);
             }
-        }, (error) => {
-            console.error("Error listening to videos:", error);
         });
+        return () => unsubscribe();
+    }, []);
 
-        return () => unsubscribeVideos();
+    // 4. LEADERBOARD
+    useEffect(() => {
+        if (!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();
     }, []);
-    */
 
-    // 4. API YouTube
+    // 5. API YouTube
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
@@ -147,7 +167,7 @@ export default function App() {
 
     // --- Lógica de Monedas ---
     const saveCoinBuffer = useCallback(() => {
-        if (localCoinBufferRef.current > 0 && userId) {
+        if (localCoinBufferRef.current > 0 && userId && db) {
             const coinsToSave = localCoinBufferRef.current;
             localCoinBufferRef.current = 0;
             const profileRef = doc(db, 'users', userId);
@@ -184,14 +204,14 @@ export default function App() {
         else stopCoinInterval();
         
         if (state === window.YT.PlayerState.ENDED) {
-            if (currentVideoId === DEFAULT_VIDEO_ID && userId) {
+            if (currentVideoId === DEFAULT_VIDEO_ID && userId && db) {
                 const profileRef = doc(db, 'users', userId);
                 updateDoc(profileRef, { watchedDefaultVideo: true });
             }
         }
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
-    // 5. Inicializar Player
+    // Inicializar Player
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current) {
             playerRef.current = new window.YT.Player('player', {
@@ -217,6 +237,7 @@ export default function App() {
 
     // --- FUNCIONES DE LOGIN ---
     const handleGoogleLogin = async () => {
+        if (!auth) return;
         const provider = new GoogleAuthProvider();
         try {
             await signInWithPopup(auth, provider);
@@ -225,15 +246,8 @@ export default function App() {
         }
     };
 
-    const handleAnonymousLogin = async () => {
-        try {
-            await signInAnonymously(auth);
-        } catch (error) {
-            console.error("Error Anónimo:", error);
-        }
-    };
-
     const handleLogout = async () => {
+        if (!auth) return;
         stopCoinInterval();
         await signOut(auth);
     };
@@ -253,26 +267,19 @@ export default function App() {
         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">
-                    
-                    {/* ICONO */}
                     <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">
+                            <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <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>
-
-                    {/* TÍTULO */}
                     <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">Bienvenido a CoinTube</h1>
-                    
-                    {/* DESCRIPCIÓN */}
                     <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.
+                        Gana monedas viendo videos y promociona tu contenido. <br/>
+                        <span className="text-yellow-500 font-bold">¡Llega a 10,000 monedas para subir tu video!</span>
                     </p>
-
-                    {/* BOTONES */}
                     <div className="space-y-3">
                         <button 
                             onClick={handleGoogleLogin} 
@@ -286,18 +293,7 @@ export default function App() {
                             </svg>
                             Continuar con Google
                         </button>
-
-                        <button 
-                            onClick={handleAnonymousLogin} 
-                            className="w-full px-4 py-3 bg-gray-700 text-gray-200 font-semibold rounded-lg hover:bg-gray-600 border border-gray-600 transition-all duration-200"
-                        >
-                            Entrar como Invitado
-                        </button>
                     </div>
-                    
-                    <p className="mt-6 text-xs text-gray-500">
-                        Al continuar, aceptas nuestros términos de servicio ficticios.
-                    </p>
                 </div>
             </div>
         );
@@ -310,10 +306,9 @@ export default function App() {
                 <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">
-                         {/* Muestra 'Invitado' si no hay email */}
-                         <span className="text-sm text-gray-400">{user?.email || 'Invitado'}</span>
+                         <span className="text-sm text-gray-400">{user.email}</span>
                          <span className="text-lg font-bold text-yellow-400">
-                            {userProfile?.coins || 0} Monedas
+                            {Math.floor(userProfile?.coins || 0)} Monedas
                          </span>
                     </div>
                     <button 
@@ -340,6 +335,7 @@ export default function App() {
                 </button>
             </nav>
 
+            {/* TAB: 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">
@@ -351,51 +347,99 @@ export default function App() {
                         <h3 className="text-lg font-semibold text-white">{currentVideoTitle}</h3>
                     </div>
                 </div>
-                <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>
-                        ))}
+                
+                <aside className="lg:w-1/3 flex flex-col gap-4 h-full overflow-hidden">
+                    <div className="bg-gray-800 rounded-lg shadow-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                        <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 custom-scrollbar">
+                            {videos.map((video) => (
+                                <button 
+                                    key={video.id}
+                                    onClick={() => loadVideo(video)}
+                                    className={`w-full text-left px-4 py-3 rounded-lg transition-colors focus:outline-none ${video.videoId === currentVideoId ? 'bg-blue-900 border-l-4 border-blue-500' : 'bg-gray-700 hover:bg-gray-600'}`}
+                                >
+                                    <div className="text-sm font-medium truncate">{video.title || `Video`}</div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="bg-gray-800 rounded-lg shadow-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                        <h2 className="text-xl font-semibold mb-4 pb-2 border-b border-gray-700 text-yellow-400">Top Usuarios</h2>
+                        <div className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar">
+                            {leaderboard.map((u, index) => (
+                                <div key={u.id || index} className="flex justify-between items-center p-2 bg-gray-700 rounded hover:bg-gray-600">
+                                    <div className="flex items-center truncate">
+                                        <span className={`mr-2 font-bold ${index < 3 ? 'text-yellow-400' : 'text-gray-400'}`}>#{index + 1}</span>
+                                        <span className="text-xs md:text-sm truncate max-w-[120px]" title={u.email}>
+                                            {u.email ? u.email.split('@')[0] : 'Usuario'}
+                                        </span>
+                                    </div>
+                                    <span className="text-xs font-mono text-green-400">{Math.floor(u.coins || 0)} 🪙</span>
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 </aside>
             </main>
 
+            {/* TAB: PROMOCIONAR */}
             <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-center`}>
-                {userProfile?.watchedDefaultVideo ? (
-                    <PromoUnlocked userId={userId} />
-                ) : (
-                    <PromoLocked />
-                )}
+                <PromoCheck 
+                    user={user} 
+                    userProfile={userProfile} 
+                    userId={userId} 
+                    adminEmail={ADMIN_EMAIL}
+                    videoCost={VIDEO_COST}
+                />
             </main>
         </div>
     );
 }
 
-// --- Sub-Componentes ---
-function PromoLocked() {
+function PromoCheck({ user, userProfile, userId, adminEmail, videoCost }) {
+    const isAdmin = user?.email === adminEmail;
+    const coins = userProfile?.coins || 0;
+    const hasEnoughCoins = coins >= videoCost;
+
+    if (isAdmin) {
+        return <PromoUnlocked userId={userId} isAdmin={true} />;
+    }
+
+    if (hasEnoughCoins) {
+        return <PromoUnlocked userId={userId} isAdmin={false} videoCost={videoCost} />;
+    }
+
     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 ("{DEFAULT_VIDEO_TITLE}") por completo.
+        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg border border-gray-700">
+            <div className="mb-4 relative inline-block">
+                <svg className="w-20 h-20 text-gray-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
+                <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">Locked</div>
+            </div>
+            <h2 className="text-2xl font-bold mb-2 text-white">Necesitas más monedas</h2>
+            <p className="text-gray-300 mb-6">
+                Para agregar tu video a la lista pública necesitas acumular <span className="text-yellow-400 font-bold">10,000 monedas</span>.
             </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 className="bg-gray-900 p-4 rounded-lg mb-4">
+                <div className="flex justify-between text-sm mb-1 text-gray-400">
+                    <span>Progreso</span>
+                    <span>{Math.floor(coins)} / {videoCost}</span>
+                </div>
+                <div className="w-full bg-gray-700 rounded-full h-2.5">
+                    <div className="bg-yellow-400 h-2.5 rounded-full transition-all duration-500" style={{ width: `${Math.min((coins / videoCost) * 100, 100)}%` }}></div>
+                </div>
+            </div>
+            
+            <p className="text-gray-400 text-sm">¡Ve a "Ganar Monedas" y mira videos para sumar puntos!</p>
         </div>
     );
 }
 
-function PromoUnlocked({ userId }) {
+function PromoUnlocked({ userId, isAdmin, videoCost }) {
     const [url, setUrl] = useState('');
     const [message, setMessage] = useState({ text: '', type: 'success' });
+    const [loading, setLoading] = useState(false);
 
     const extractYouTubeID = (url) => {
         const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
@@ -411,48 +455,72 @@ function PromoUnlocked({ userId }) {
             setMessage({ text: "URL de YouTube no válida.", type: 'error' });
             return;
         }
-        const title = `Video de usuario (${videoId.substring(0, 5)}...)`;
+
+        setLoading(true);
+        const title = isAdmin ? `Recomendado (Admin)` : `Video de Usuario`;
 
         try {
-            const videosRef = collection(db, 'videos');
-            await addDoc(videosRef, {
-                title: title,
-                videoId: videoId,
-                addedBy: userId,
-                createdAt: serverTimestamp()
-            });
+            if (!isAdmin && db) {
+                const userRef = doc(db, 'users', userId);
+                await updateDoc(userRef, { coins: increment(-videoCost) });
+            }
+
+            if (db) {
+                const videosRef = collection(db, 'videos');
+                await addDoc(videosRef, {
+                    title: title,
+                    videoId: videoId,
+                    addedBy: userId,
+                    createdAt: serverTimestamp(),
+                    isPromoted: !isAdmin
+                });
+            }
+
             setMessage({ text: "¡Video agregado con éxito!", type: 'success' });
             setUrl('');
         } catch (error) {
             console.error("Error adding video:", error);
-            setMessage({ text: "Error al agregar el video.", type: 'error' });
+            setMessage({ text: "Error al procesar. Intenta de nuevo.", type: 'error' });
+        } finally {
+            setLoading(false);
         }
     };
 
     return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
-            <svg className="w-16 h-16 text-green-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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 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">¡Sección Desbloqueada!</h2>
+        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg w-full border border-green-500/30">
+            <div className="flex justify-center mb-4">
+                 <div className="bg-green-500/20 p-3 rounded-full">
+                    <svg className="w-10 h-10 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
+                 </div>
+            </div>
+            <h2 className="text-2xl font-bold mb-2 text-white">
+                {isAdmin ? "Panel de Administrador" : "¡Objetivo Logrado!"}
+            </h2>
             <p className="text-gray-300 mb-6">
-                Pega el enlace de un video de YouTube para agregarlo a la lista pública.
+                {isAdmin 
+                    ? "Como administrador, puedes agregar videos ilimitados." 
+                    : `Canjea ${videoCost} monedas para agregar tu video a la lista pública.`}
             </p>
+            
             <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
                 <input 
                     type="url" 
                     placeholder="https://www.youtube.com/watch?v=..." 
-                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-500" 
                     required
                     value={url}
                     onChange={(e) => setUrl(e.target.value)}
+                    disabled={loading}
                 />
                 <button 
                     type="submit" 
-                    className="w-full 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"
+                    disabled={loading}
+                    className={`w-full px-6 py-2 font-bold rounded-lg shadow-md transition-all ${loading ? 'bg-gray-600 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700 text-white'}`}
                 >
-                    Promocionar Video
+                    {loading ? 'Procesando...' : (isAdmin ? 'Agregar Video Gratis' : `Pagar ${videoCost} Monedas y Agregar`)}
                 </button>
                 {message.text && (
-                    <p className={`text-sm ${message.type === 'success' ? 'text-green-500' : 'text-red-500'}`}>
+                    <p className={`text-sm font-medium ${message.type === 'success' ? 'text-green-400' : 'text-red-400'}`}>
                         {message.text}
                     </p>
                 )}