Update cointube.jsx

cointube.jsx

@@ -22,8 +22,8 @@ import {
     limit
 } from 'firebase/firestore';
 
-// --- Variables Globales (se llenarán después) ---
-let app, auth, db;
+// --- Variables Globales ---
+let app, auth, db; // Se inicializan más tarde
 
 // --- Constantes del Sistema ---
 const ADMIN_EMAIL = "photonicsupernova@gmail.com";
@@ -33,7 +33,7 @@ const DEFAULT_VIDEO_TITLE = "Pelicula Completa";
 
 export default function App() {
     
-    // --- Estado de Inicialización ---
+    // --- Estados de Inicialización ---
     const [firebaseReady, setFirebaseReady] = useState(false);
     const [configError, setConfigError] = useState(null);
 
@@ -53,40 +53,34 @@ export default function App() {
     const coinIntervalRef = useRef(null);
     const localCoinBufferRef = useRef(0);
 
-    // --- EFECTO 0: OBTENER CONFIGURACIÓN DEL SERVIDOR (RUNTIME) ---
+    // --- 1. OBTENER CONFIGURACIÓN DEL SERVIDOR ---
     useEffect(() => {
         const initFirebase = async () => {
             try {
-                // 1. Pedimos la config al servidor
                 const response = await fetch('/api/config');
-                if (!response.ok) throw new Error("Falló la carga de configuración");
+                if (!response.ok) throw new Error("Error de red al cargar config");
                 
                 const config = await response.json();
                 
-                // 2. Iniciamos Firebase con los datos recibidos
                 if (!app) {
                     app = initializeApp(config);
                     auth = getAuth(app);
                     db = getFirestore(app);
-                    console.log("Firebase conectado vía Secret Runtime");
+                    console.log("Firebase conectado con éxito.");
                 }
                 setFirebaseReady(true);
 
             } catch (error) {
-                console.error("Error crítico:", error);
-                setConfigError("No se pudo conectar con el servidor de autenticación.");
+                console.error("Error inicializando:", error);
+                setConfigError("Error de conexión con el servidor.");
             }
         };
-
         initFirebase();
     }, []);
     
-    // --- Efectos (Solo corren si firebaseReady es true) ---
-
-    // 1. Auth
+    // --- 2. Auth ---
     useEffect(() => {
         if (!firebaseReady || !auth) return;
-        
         const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
             if (user) {
                 setUser(user);
@@ -101,7 +95,7 @@ export default function App() {
         return () => unsubscribeAuth();
     }, [firebaseReady]);
 
-    // 2. Perfil de Usuario
+    // --- 3. Perfil de Usuario ---
     useEffect(() => {
         if (!firebaseReady || !userId || !db) return;
         const profileRef = doc(db, 'users', userId);
@@ -121,7 +115,7 @@ export default function App() {
         return () => unsubscribeProfile();
     }, [userId, user, firebaseReady]);
 
-    // 3. Cargar Lista de Videos
+    // --- 4. Cargar Videos ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'videos'), orderBy('createdAt', 'desc'), limit(20));
@@ -130,16 +124,13 @@ export default function App() {
             if (fetchedVideos.length > 0) {
                 setVideos(fetchedVideos);
             } else {
-                setVideos([
-                    { id: '1', title: 'Pelicula Completa', videoId: 'UtEhewStfMA' }, 
-                    { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' }
-                ]);
+                setVideos([{ id: '1', title: 'Pelicula Default', videoId: DEFAULT_VIDEO_ID }]);
             }
         });
         return () => unsubscribe();
     }, [firebaseReady]);
 
-    // 4. LEADERBOARD
+    // --- 5. Leaderboard ---
     useEffect(() => {
         if (!firebaseReady || !db) return;
         const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(20));
@@ -150,7 +141,7 @@ export default function App() {
         return () => unsubscribe();
     }, [firebaseReady]);
 
-    // 5. API YouTube
+    // --- 6. YouTube API ---
     useEffect(() => {
         if (!window.YT) {
             const tag = document.createElement('script');
@@ -209,7 +200,6 @@ export default function App() {
         }
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
-    // Inicializar Player
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current) {
             playerRef.current = new window.YT.Player('player', {
@@ -233,7 +223,7 @@ export default function App() {
         if (playerRef.current) playerRef.current.loadVideoById(video.videoId);
     };
 
-    // --- FUNCIONES DE LOGIN ---
+    // --- Handlers ---
     const handleGoogleLogin = async () => {
         if (!auth) return;
         const provider = new GoogleAuthProvider();
@@ -250,140 +240,78 @@ export default function App() {
         await signOut(auth);
     };
 
-    // --- Renderizado de Carga / Error ---
+    // --- Render Views ---
     if (configError) {
-        return (
-            <div className="flex flex-col items-center justify-center h-full w-full text-red-500">
-                <p>⚠️ {configError}</p>
-            </div>
-        );
+        return <div className="flex justify-center items-center h-full text-red-500">{configError}</div>;
     }
 
     if (!firebaseReady || !authReady) {
         return (
-            <div className="flex flex-col items-center justify-center h-full w-full">
+            <div className="flex justify-center items-center h-full">
                 <div className="spinner mb-4"></div>
-                <p className="text-lg text-gray-400">
-                    {!firebaseReady ? "Obteniendo configuración segura..." : "Conectando usuario..."}
-                </p>
             </div>
         );
     }
 
-    // --- Renderizado de Login ---
     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">
-                                <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">
-                        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>
-                    <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>
+            <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>
             </div>
         );
     }
 
-    // --- 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">{user.email}</span>
-                         <span className="text-lg font-bold text-yellow-400">
-                            {Math.floor(userProfile?.coins || 0)} Monedas
-                         </span>
-                    </div>
-                    <button 
-                        onClick={handleLogout} 
-                        className="px-4 py-2 bg-gray-700 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors"
-                    >
-                        Salir
-                    </button>
+            <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>
+                    <button onClick={handleLogout} className="px-3 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600">Salir</button>
                 </div>
             </header>
 
-            <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'}`}
-                >
-                    Ganar Monedas
-                </button>
-                <button 
-                    onClick={() => setCurrentTab('promocionar')}
-                    className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'promocionar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-                >
-                    Promocionar Video
-                </button>
+            <nav className="flex gap-2 mb-6 bg-gray-800 p-1 rounded-lg max-w-md mx-auto">
+                <button onClick={() => setCurrentTab('ganar')} className={`flex-1 py-2 rounded ${currentTab === 'ganar' ? 'bg-blue-600 text-white' : 'text-gray-400'}`}>Ver Videos</button>
+                <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 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">
-                        <div className="aspect-video w-full">
-                            <div id="player" className="w-full h-full"></div>
-                        </div>
+            {/* 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">
+                        <div id="player" className="w-full h-full"></div>
                     </div>
-                    <div className="mt-4 p-4 bg-gray-800 rounded-lg">
-                        <h3 className="text-lg font-semibold text-white">{currentVideoTitle}</h3>
+                    <div className="mt-3 p-3 bg-gray-800 rounded">
+                        <h3 className="text-white font-medium">{currentVideoTitle}</h3>
                     </div>
                 </div>
-                
                 <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">
+                    <div className="bg-gray-800 rounded p-4 flex-1 flex flex-col min-h-[200px]">
+                        <h3 className="text-gray-400 text-sm uppercase font-bold mb-2">Lista de Reproducción</h3>
+                        <div className="overflow-y-auto flex-1 pr-2 custom-scrollbar space-y-2">
                             {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 key={video.id} onClick={() => loadVideo(video)} className={`w-full text-left p-2 rounded ${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">{video.title}</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 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>
+                        <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>
                                 </div>
                             ))}
                         </div>
@@ -391,66 +319,50 @@ export default function App() {
                 </aside>
             </main>
 
-            {/* TAB: PROMOCIONAR */}
-            <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-center`}>
+            {/* TAB: PROMOCIONAR (Pasamos db como prop para asegurar que llegue) */}
+            <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} 
                 />
             </main>
         </div>
     );
 }
 
-function PromoCheck({ user, userProfile, userId, adminEmail, videoCost }) {
+// --- Componentes Hijos ---
+
+function PromoCheck({ user, userProfile, userId, adminEmail, videoCost, db }) {
     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} />;
-    }
+    if (isAdmin) return <PromoUnlocked userId={userId} isAdmin={true} db={db} />;
+    if (hasEnoughCoins) return <PromoUnlocked userId={userId} isAdmin={false} videoCost={videoCost} db={db} />;
 
     return (
         <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>
+            <h2 className="text-2xl font-bold text-white mb-2">Insuficientes Monedas</h2>
+            <p className="text-gray-400 mb-4">Necesitas {videoCost} monedas para subir un video.</p>
+            <div className="w-full bg-gray-700 rounded-full h-3 mb-2">
+                <div className="bg-yellow-400 h-3 rounded-full" style={{ width: `${Math.min((coins / videoCost) * 100, 100)}%` }}></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>
-            
-            <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>
+            <p className="text-sm text-gray-500">{Math.floor(coins)} / {videoCost}</p>
         </div>
     );
 }
 
-function PromoUnlocked({ userId, isAdmin, videoCost }) {
+function PromoUnlocked({ userId, isAdmin, videoCost, db }) {
     const [url, setUrl] = useState('');
-    const [message, setMessage] = useState({ text: '', type: 'success' });
+    const [message, setMessage] = useState({ text: '', type: '' });
     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})/;
+        const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
         const match = url.match(regex);
         return match ? match[1] : null;
     };
@@ -460,7 +372,12 @@ function PromoUnlocked({ userId, isAdmin, videoCost }) {
         const videoId = extractYouTubeID(url);
         
         if (!videoId) {
-            setMessage({ text: "URL de YouTube no válida.", type: 'error' });
+            setMessage({ text: "Enlace no válido", type: 'error' });
+            return;
+        }
+
+        if (!db) {
+            setMessage({ text: "Error: Base de datos no conectada", type: 'error' });
             return;
         }
 
@@ -468,67 +385,53 @@ function PromoUnlocked({ userId, isAdmin, videoCost }) {
         const title = isAdmin ? `Recomendado (Admin)` : `Video de Usuario`;
 
         try {
-            if (!isAdmin && db) {
+            // Usamos el db que nos pasaron por PROPS
+            if (!isAdmin) {
                 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
-                });
-            }
+            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' });
+            setMessage({ text: "¡Video agregado!", type: 'success' });
             setUrl('');
         } catch (error) {
-            console.error("Error adding video:", error);
-            setMessage({ text: "Error al procesar. Intenta de nuevo.", type: 'error' });
+            console.error("Error al subir:", error);
+            // Muestra el error real en pantalla si es de permisos
+            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' });
+            }
         } finally {
             setLoading(false);
         }
     };
 
     return (
-        <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">
-                {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">
+        <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>
+            <form onSubmit={handleSubmit} className="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 placeholder-gray-500" 
-                    required
+                    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)}
-                    disabled={loading}
+                    required
                 />
-                <button 
-                    type="submit" 
-                    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'}`}
-                >
-                    {loading ? 'Procesando...' : (isAdmin ? 'Agregar Video Gratis' : `Pagar ${videoCost} Monedas y Agregar`)}
+                <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>
                 {message.text && (
-                    <p className={`text-sm font-medium ${message.type === 'success' ? 'text-green-400' : 'text-red-400'}`}>
+                    <p className={`text-center font-medium ${message.type === 'error' ? 'text-red-400' : 'text-green-400'}`}>
                         {message.text}
                     </p>
                 )}