Update cointube.jsx

cointube.jsx

@@ -45,6 +45,7 @@ const DEFAULT_VIDEO_TITLE = "Cuentos de Terror";
 
 const EMAILJS_SERVICE_ID = "service_v18p188"; 
 const EMAILJS_TEMPLATE_ID = "template_wexg1ww";
+const EMAILJS_PUBLIC_KEY = "XK6EoFoAqInBoDjIe";
 
 export default function App() {
     const [videos, setVideos] = useState([]); 
@@ -79,7 +80,7 @@ export default function App() {
     }, []);
 
     useEffect(() => {
-        if (!userId) return;
+        if (!userId || !user) return;
         const profileRef = doc(db, 'users', userId);
         const unsubscribeProfile = onSnapshot(profileRef, (docSnap) => {
             if (docSnap.exists()) {
@@ -100,26 +101,31 @@ export default function App() {
     useEffect(() => {
         if (user?.email !== ADMIN_EMAIL) return;
         const checkReset = async () => {
-            const settingsRef = doc(db, 'settings', 'stats');
-            const snap = await getDocs(query(collection(db, 'settings')));
-            if (snap.empty) return;
-            
-            const data = snap.docs[0].data();
-            const lastReset = data.lastReset.toDate();
-            const now = new Date();
-            
-            if (now - lastReset >= 432000000) {
-                const batch = writeBatch(db);
-                const usersSnap = await getDocs(collection(db, 'users'));
-                usersSnap.forEach((uDoc) => {
-                    if (uDoc.data().email !== ADMIN_EMAIL) {
-                        batch.update(uDoc.ref, { coins: 0 });
-                    }
-                });
-                batch.update(settingsRef, { lastReset: serverTimestamp() });
-                await batch.commit();
-                alert("Ciclo de 5 días completado: Puntos reseteados.");
-            }
+            try {
+                const settingsRef = doc(db, 'settings', 'stats');
+                const settingsSnap = await getDocs(query(collection(db, 'settings')));
+                if (settingsSnap.empty) return;
+
+                const statsData = settingsSnap.docs[0].data();
+                const lastResetDate = statsData.lastReset.toDate();
+                const now = new Date();
+                const diffMs = now - lastResetDate;
+
+                if (diffMs >= 432000000) {
+                    const batch = writeBatch(db);
+                    const allUsers = await getDocs(collection(db, 'users'));
+                    
+                    allUsers.forEach((uDoc) => {
+                        if (uDoc.data().email !== ADMIN_EMAIL) {
+                            batch.update(uDoc.ref, { coins: 0 });
+                        }
+                    });
+
+                    batch.update(settingsRef, { lastReset: serverTimestamp() });
+                    await batch.commit();
+                    alert("SISTEMA: Ciclo de 5 días detectado. Las monedas han sido reseteadas.");
+                }
+            } catch (err) { console.error("Error Reset:", err); }
         };
         checkReset();
     }, [user]);
@@ -133,14 +139,13 @@ export default function App() {
                 fetchedVideos = fetchedVideos.sort(() => Math.random() - 0.5);
                 setVideos(fetchedVideos);
                 if (initialLoadRef.current || !currentVideoId) {
-                    const latestVideo = fetchedVideos[0];
-                    setCurrentVideoId(latestVideo.videoId);
-                    setCurrentVideoTitle(latestVideo.title);
+                    const firstVideo = fetchedVideos[0];
+                    setCurrentVideoId(firstVideo.videoId);
+                    setCurrentVideoTitle(firstVideo.title);
                     initialLoadRef.current = false;
                 }
             } else {
-                const def = [{ id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }];
-                setVideos(def);
+                setVideos([{ id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }]);
                 if (initialLoadRef.current || !currentVideoId) {
                     setCurrentVideoId(DEFAULT_VIDEO_ID);
                     setCurrentVideoTitle(DEFAULT_VIDEO_TITLE);
@@ -216,7 +221,9 @@ export default function App() {
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current && currentVideoId) {
             playerRef.current = new window.YT.Player('player', {
-                height: '100%', width: '100%', videoId: currentVideoId,
+                height: '100%',
+                width: '100%',
+                videoId: currentVideoId,
                 playerVars: { 'playsinline': 1, 'autoplay': 1, 'controls': 1, 'modestbranding': 1, 'rel': 0 },
                 events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }
             });
@@ -236,21 +243,21 @@ export default function App() {
 
     const handleDeleteVideo = async (e, vId) => {
         e.stopPropagation();
-        if (!confirm("¿Eliminar video?")) return;
-        try { await deleteDoc(doc(db, "videos", vId)); } catch (e) { console.error(e); }
+        if (!confirm("¿Deseas eliminar este video permanentemente?")) return;
+        try { await deleteDoc(doc(db, "videos", vId)); } catch (err) { console.error(err); }
     };
 
     const handleGiveCoins = async (tId, cC) => {
-        const amtStr = prompt("Monedas a sumar/restar:", "1000");
+        const amtStr = prompt("Cantidad de monedas para este usuario (puedes usar números negativos):", "1000");
         if (!amtStr) return;
         const amt = parseInt(amtStr);
         if (isNaN(amt)) return;
-        try { await updateDoc(doc(db, 'users', tId), { coins: increment(amt) }); } catch (e) { console.error(e); }
+        try { await updateDoc(doc(db, 'users', tId), { coins: increment(amt) }); alert("Monedas actualizadas"); } catch (e) { console.error(e); }
     };
 
     const handleGoogleLogin = async () => {
-        const p = new GoogleAuthProvider();
-        try { await signInWithPopup(auth, p); } catch (e) { console.error(e); }
+        const provider = new GoogleAuthProvider();
+        try { await signInWithPopup(auth, provider); } catch (e) { console.error("Login Error:", e); }
     };
 
     const handleLogout = async () => {
@@ -258,88 +265,141 @@ export default function App() {
         await signOut(auth);
     };
 
-    const handleMassEmail = async () => {
-        if (!window.emailjs) return alert("EmailJS no detectado");
-        if (!confirm("¿Enviar notificación de reseteo a todos?")) return;
+    const sendMassNotification = async () => {
+        if (!window.emailjs) return alert("EmailJS no está inicializado.");
+        if (!confirm("Esto enviará un correo a todos los usuarios registrados. ¿Continuar?")) return;
+        
         const snap = await getDocs(collection(db, 'users'));
+        let count = 0;
         snap.forEach((uDoc) => {
-            const data = uDoc.data();
-            if (data.email) {
+            const d = uDoc.data();
+            if (d.email) {
                 window.emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, {
-                    to_email: data.email,
-                    subject: "¡Reseteo de Puntos!",
-                    message: "Los puntos se han reseteado. ¡Ven a ver videos para ganar más!"
-                });
+                    to_email: d.email,
+                    subject: "¡Reseteo de Monedas en CoinTube!",
+                    message: "Hola, te informamos que los puntos se han reseteado para un nuevo ciclo de premios. ¡Vuelve a CoinTube para subir al ranking!"
+                }, EMAILJS_PUBLIC_KEY);
+                count++;
             }
         });
-        alert("Envíos iniciados.");
+        alert(`Se han enviado ${count} notificaciones.`);
     };
 
-    if (!authReady) return <div className="flex flex-col items-center justify-center h-full w-full"><div className="spinner mb-4"></div><p className="text-gray-400">Cargando...</p></div>;
-
-    if (!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 p-8 text-center border border-gray-700">
-                <h1 className="text-3xl font-bold text-white mb-8">Bienvenido a CoinTube</h1>
-                <button onClick={handleGoogleLogin} className="w-full py-3 bg-white text-gray-800 font-bold rounded-lg">Continuar con Google</button>
+    if (!authReady) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full w-full bg-gray-900">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+                <p className="text-lg text-gray-400">Sincronizando con CoinTube...</p>
             </div>
-        </div>
-    );
+        );
+    }
+
+    if (!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-3xl shadow-2xl p-10 text-center border border-gray-700">
+                    <div className="flex justify-center mb-8">
+                        <div className="bg-blue-600 p-5 rounded-full shadow-lg animate-bounce">
+                            <svg className="w-14 h-14 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>
+                    <h1 className="text-4xl font-extrabold text-white mb-4">CoinTube</h1>
+                    <p className="text-gray-400 mb-10 text-base">Gana monedas por ver contenido y promociona tus videos con nosotros.</p>
+                    <button onClick={handleGoogleLogin} className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-white text-gray-900 font-bold rounded-xl hover:bg-gray-100 transition-all shadow-xl">
+                        <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/action/google.svg" alt="G" className="w-6 h-6"/>
+                        Empezar con Google
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6">
-            <header className="flex justify-between items-center pb-4 mb-4 border-b border-gray-700">
-                <h1 className="text-2xl md:text-3xl font-bold text-white">Coin<span className="text-blue-500">Tube</span></h1>
-                <div className="flex items-center gap-4">
-                    <div className="text-right">
-                        <div className="text-xs text-gray-400">{user.email}</div>
-                        <div className="text-lg font-bold text-yellow-400">{Math.floor(userProfile?.coins || 0)} 🪙</div>
+        <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-8 bg-gray-900">
+            <header className="flex flex-col md:flex-row justify-between items-center pb-6 mb-6 border-b border-gray-800 gap-4">
+                <div className="flex items-center gap-2">
+                   <h1 className="text-3xl font-black text-white tracking-tighter">COIN<span className="text-blue-500">TUBE</span></h1>
+                   <span className="bg-blue-500/10 text-blue-500 text-[10px] px-2 py-0.5 rounded-full font-bold border border-blue-500/20">BETA v2</span>
+                </div>
+
+                <div className="flex items-center gap-5">
+                    <div className="flex flex-col items-end">
+                        <span className="text-[10px] text-gray-500 font-mono">{user.email}</span>
+                        <span className="text-2xl font-black text-yellow-400 drop-shadow-md">
+                            {Math.floor(userProfile?.coins || 0)} <span className="text-sm">🪙</span>
+                        </span>
                     </div>
-                    <button onClick={handleLogout} className="px-3 py-1 bg-gray-700 text-white text-sm rounded">Salir</button>
+                    <button onClick={handleLogout} className="p-2 bg-gray-800 hover:bg-red-900/30 hover:text-red-400 rounded-lg transition-colors">
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                    </button>
                 </div>
             </header>
 
-            <nav className="flex justify-center gap-2 mb-6 bg-gray-800 p-1 rounded-lg w-fit mx-auto">
-                <button onClick={() => setCurrentTab('ganar')} className={`w-[120px] md:w-[250px] py-2 rounded ${currentTab === 'ganar' ? 'bg-blue-600 text-white' : 'text-gray-400'}`}>Ver Videos</button>
-                <button onClick={() => setCurrentTab('promocionar')} className={`w-[120px] md:w-[250px] py-2 rounded ${currentTab === 'promocionar' ? 'bg-blue-600 text-white' : 'text-gray-400'}`}>Subir Video</button>
+            <nav className="flex justify-center gap-3 mb-8 bg-gray-800/50 p-1.5 rounded-2xl w-fit mx-auto border border-gray-700">
+                <button onClick={() => setCurrentTab('ganar')} className={`flex items-center gap-2 px-8 py-3 rounded-xl font-bold transition-all ${currentTab === 'ganar' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-gray-400 hover:bg-gray-700'}`}>
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+                    Ver Videos
+                </button>
+                <button onClick={() => setCurrentTab('promocionar')} className={`flex items-center gap-2 px-8 py-3 rounded-xl font-bold transition-all ${currentTab === 'promocionar' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-gray-400 hover:bg-gray-700'}`}>
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+                    Subir Video
+                </button>
                 {user.email === ADMIN_EMAIL && (
-                    <button onClick={handleMassEmail} className="px-4 py-2 bg-indigo-600 text-white rounded text-xs font-bold">📧 Notificar</button>
+                    <button onClick={sendMassNotification} className="flex items-center gap-2 px-8 py-3 rounded-xl font-bold bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-600/20 transition-all">
+                        📧 Notificar
+                    </button>
                 )}
             </nav>
 
-            <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6`}>
+            <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-8`}>
                 <div className="lg:w-2/3">
-                    <div className="aspect-video bg-black rounded-lg overflow-hidden shadow-xl flex items-center justify-center">
+                    <div className="aspect-video bg-black rounded-3xl overflow-hidden shadow-2xl border border-gray-800">
                         <div id="player" className="w-full h-full"></div>
                     </div>
-                    <div className="mt-3 p-3 bg-gray-800 rounded">
-                        <h3 className="text-white font-medium">{currentVideoTitle}</h3>
+                    <div className="mt-5 p-5 bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-700">
+                        <h3 className="text-xl font-bold text-white mb-1">{currentVideoTitle}</h3>
+                        <p className="text-xs text-blue-400 font-bold uppercase tracking-widest">En reproducción</p>
                     </div>
                 </div>
-                <aside className="lg:w-1/3 flex flex-col gap-4 h-full overflow-hidden">
-                    <div className="bg-gray-800 rounded p-4 flex-1 flex flex-col min-h-[200px]">
-                        <h3 className="text-gray-400 text-sm font-bold mb-2">Lista Aleatoria</h3>
-                        <div className="overflow-y-auto flex-1 space-y-2 custom-scrollbar">
+
+                <aside className="lg:w-1/3 flex flex-col gap-6">
+                    <div className="bg-gray-800 rounded-3xl p-6 flex-1 flex flex-col min-h-[300px] border border-gray-700 shadow-xl">
+                        <div className="flex justify-between items-center mb-4">
+                            <h3 className="text-gray-400 text-xs font-black uppercase tracking-tighter">Playlist Aleatoria</h3>
+                            <span className="text-[10px] bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded font-mono">SHUFFLE ON</span>
+                        </div>
+                        <div className="overflow-y-auto flex-1 space-y-3 pr-2 custom-scrollbar">
                             {videos.map((v) => (
-                                <button key={v.id} onClick={() => loadVideo(v)} className={`w-full text-left p-2 rounded flex justify-between items-center ${v.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">{v.title}</div>
+                                <button key={v.id} onClick={() => loadVideo(v)} className={`w-full text-left p-3 rounded-xl flex justify-between items-center group transition-all border ${v.videoId === currentVideoId ? 'bg-blue-600/20 border-blue-500/50' : 'bg-gray-700/50 border-transparent hover:border-gray-600'}`}>
+                                    <div className={`text-sm truncate flex-1 font-medium ${v.videoId === currentVideoId ? 'text-blue-400' : 'text-gray-300'}`}>{v.title}</div>
                                     {user?.email === ADMIN_EMAIL && (
-                                        <span onClick={(e) => handleDeleteVideo(e, v.id)} className="ml-2 text-red-500 font-bold px-2 py-1 rounded bg-red-900/50">X</span>
+                                        <div onClick={(e) => handleDeleteVideo(e, v.id)} className="ml-2 opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-300 p-1">
+                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd"/></svg>
+                                        </div>
                                     )}
                                 </button>
                             ))}
                         </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 font-bold mb-2">Ranking</h3>
-                        <div className="overflow-y-auto flex-1 space-y-2 custom-scrollbar">
+
+                    <div className="bg-gray-800 rounded-3xl p-6 flex-1 flex flex-col min-h-[300px] border border-gray-700 shadow-xl">
+                        <h3 className="text-yellow-500 text-xs font-black uppercase tracking-tighter mb-4">Top Usuarios (Ranking)</h3>
+                        <div className="overflow-y-auto flex-1 space-y-2 pr-2 custom-scrollbar">
                             {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">{u.email?.split('@')[0]}</span>
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-yellow-400 font-mono text-sm">{Math.floor(u.coins || 0)}</span>
+                                <div key={u.id} className="flex justify-between items-center p-3 bg-gray-700/30 rounded-xl border border-gray-600/30">
+                                    <div className="flex items-center gap-3">
+                                        <span className="text-[10px] font-bold text-gray-500 font-mono">#{i+1}</span>
+                                        <span className="text-sm text-gray-200 font-medium truncate w-32">{u.email?.split('@')[0]}</span>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                        <span className="text-yellow-400 font-bold text-sm font-mono">{Math.floor(u.coins || 0)}</span>
                                         {user?.email === ADMIN_EMAIL && (
-                                            <button onClick={() => handleGiveCoins(u.id, u.coins)} className="bg-green-600 text-white text-xs px-2 rounded">+</button>
+                                            <button onClick={() => handleGiveCoins(u.id, u.coins)} className="bg-green-600/20 text-green-500 hover:bg-green-600 hover:text-white p-1 rounded-md transition-all">
+                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M12 4v16m8-8H4"/></svg>
+                                            </button>
                                         )}
                                     </div>
                                 </div>
@@ -361,13 +421,21 @@ function PromoCheck({ user, userProfile, userId, adminEmail, videoCost, db }) {
     const coins = userProfile?.coins || 0;
     const hasEnoughCoins = coins >= videoCost;
     if (isAdmin || hasEnoughCoins) return <PromoUnlocked userId={userId} isAdmin={isAdmin} videoCost={videoCost} db={db} />;
+
     return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg max-w-lg border border-gray-700">
-            <h2 className="text-2xl font-bold text-white mb-2">Faltan Monedas</h2>
-            <div className="w-full bg-gray-700 rounded-full h-3 mb-4">
-                <div className="bg-yellow-400 h-3 rounded-full" style={{ width: `${Math.min((coins / videoCost) * 100, 100)}%` }}></div>
+        <div className="text-center p-12 bg-gray-800 rounded-3xl shadow-2xl max-w-xl border border-gray-700">
+            <h2 className="text-3xl font-black text-white mb-2">Puntos Insuficientes</h2>
+            <p className="text-gray-400 mb-8">Necesitas acumular {videoCost.toLocaleString()} monedas para subir tu video.</p>
+            <div className="w-full bg-gray-700 rounded-full h-4 mb-3 overflow-hidden p-1">
+                <div className="bg-gradient-to-r from-blue-600 to-blue-400 h-2 rounded-full transition-all duration-1000" style={{ width: `${Math.min((coins / videoCost) * 100, 100)}%` }}></div>
+            </div>
+            <p className="text-sm font-bold text-yellow-500 mb-8 font-mono">{Math.floor(coins).toLocaleString()} / {videoCost.toLocaleString()}</p>
+            <div className="bg-gray-900/50 p-6 rounded-2xl border border-dashed border-gray-600">
+                <p className="text-sm text-gray-400 mb-4 italic">Sigue viendo videos para completar tu meta automáticamente.</p>
+                <div className="flex justify-center gap-4 text-[10px] font-bold text-gray-500 uppercase">
+                    <span>1 minuto ≈ 60 monedas</span>
+                </div>
             </div>
-            <p className="text-gray-500">{Math.floor(coins)} / {videoCost}</p>
         </div>
     );
 }
@@ -380,26 +448,44 @@ function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
     const handleSubmit = async (e) => {
         e.preventDefault();
         const vId = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/)?.[1];
-        if (!vId || !title.trim()) return alert("Enlace no válido");
+        if (!vId) return alert("Error: No parece ser un enlace de YouTube válido.");
+        if (!title.trim()) return alert("Error: Por favor escribe un título.");
+        
         setLoading(true);
         try {
-            if (!isAdmin) await updateDoc(doc(db, 'users', userId), { coins: increment(-videoCost) });
+            if (!isAdmin) {
+                const userRef = doc(db, 'users', userId);
+                await updateDoc(userRef, { coins: increment(-videoCost) });
+            }
             await addDoc(collection(db, 'videos'), {
-                title, videoId: vId, addedBy: userId, createdAt: serverTimestamp(), isPromoted: !isAdmin
+                title: title,
+                videoId: vId,
+                addedBy: userId,
+                createdAt: serverTimestamp(),
+                isPromoted: !isAdmin
             });
-            alert("¡Video subido!");
+            alert("¡ÉXITO! Tu video ha sido publicado en la red.");
             setUrl(''); setTitle('');
-        } catch (err) { console.error(err); } finally { setLoading(false); }
+        } catch (err) { console.error(err); alert("Error al subir."); } finally { setLoading(false); }
     };
 
     return (
-        <form onSubmit={handleSubmit} className="bg-gray-800 p-8 rounded-lg max-w-md w-full space-y-4 border border-green-900">
-            <h2 className="text-2xl font-bold text-white text-center">{isAdmin ? "Panel Admin" : "Subir Video"}</h2>
-            <input type="url" placeholder="URL de YouTube" className="w-full p-3 bg-gray-700 text-white rounded border border-gray-600" value={url} onChange={e => setUrl(e.target.value)} required />
-            <input type="text" placeholder="Título" className="w-full p-3 bg-gray-700 text-white rounded border border-gray-600" value={title} onChange={e => setTitle(e.target.value)} required maxLength={50} />
-            <button disabled={loading} className="w-full py-3 bg-green-600 text-white font-bold rounded">
-                {loading ? 'Subiendo...' : 'Publicar'}
-            </button>
-        </form>
+        <div className="bg-gray-800 p-10 rounded-3xl shadow-2xl max-w-md w-full border-2 border-blue-500/20">
+            <h2 className="text-3xl font-black text-white mb-2 text-center">{isAdmin ? "MODO ADMIN" : "PROMOCIONAR"}</h2>
+            <p className="text-center text-gray-400 text-sm mb-8">{isAdmin ? "Sube contenido sin costo administrativo" : "Tu video aparecerá en la playlist de todos los usuarios"}</p>
+            <form onSubmit={handleSubmit} className="space-y-5">
+                <div>
+                    <label className="text-xs font-black text-gray-500 uppercase ml-1 mb-2 block">Link de YouTube</label>
+                    <input type="url" placeholder="https://..." className="w-full p-4 bg-gray-900 text-white rounded-xl border border-gray-700 outline-none focus:border-blue-500 transition-all font-medium" value={url} onChange={e => setUrl(e.target.value)} required />
+                </div>
+                <div>
+                    <label className="text-xs font-black text-gray-500 uppercase ml-1 mb-2 block">Título del Video</label>
+                    <input type="text" placeholder="Mi Video Épico" className="w-full p-4 bg-gray-900 text-white rounded-xl border border-gray-700 outline-none focus:border-blue-500 transition-all font-medium" value={title} onChange={e => setTitle(e.target.value)} required maxLength={50} />
+                </div>
+                <button disabled={loading} className="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white font-black rounded-xl shadow-lg shadow-blue-600/20 transition-all disabled:opacity-50">
+                    {loading ? 'PUBLICANDO...' : (isAdmin ? 'SUBIR AHORA' : `CANJEAR ${videoCost.toLocaleString()} MONEDAS`)}
+                </button>
+            </form>
+        </div>
     );
 }