App.js

import React, { useState, useEffect } from 'react';  
import { motion } from 'framer-motion';  
import Login from './components/Login';  
import Dashboard from './components/Dashboard';  
import Logs from './components/Logs';  
import CommandInput from './components/CommandInput';  
import { mockUser } from './mock/botData';  
import { apiGetStats } from './utils/api';  

function App() {  
    const [isLoggedIn, setIsLoggedIn] = useState(false);  
    const [user, setUser] = useState(null);  
    const [botStatus, setBotStatus] = useState(false);  
    const [stats, setStats] = useState({ users: 0, servers: 0 });  
    const [loading, setLoading] = useState(true);  

    useEffect(() => {  
        // Verifica si ya está logueado (backend maneja sesión via cookies)  
        const checkAuth = async () => {  
            const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:5000';  
            if (BACKEND_URL !== 'http://localhost:5000') {  
                try {  
                    const response = await fetch(`${BACKEND_URL}/auth/check`, {  
                        credentials: 'include'  
                    });  
                    if (response.ok) {  
                        const userData = await response.json();  
                        if (userData.id === 'TU_DISCORD_ID_AQUI') {  
                            setUser(userData);  
                            setIsLoggedIn(true);  
                        }  
                    }  
                } catch (error) {  
                    console.log('No auth inicial');  
                }  
            }  
            setLoading(false);  
        };  
        checkAuth();  

        // Carga stats iniciales  
        const loadStats = async () => {  
            const data = await apiGetStats();  
            setStats(data || { users: 42, servers: 5 }); // Fallback  
            setBotStatus(data.botStatus || false);  
        };  
        loadStats();  
    }, []);  

    const handleLogin = (loggedUser) => {  
        setUser(loggedUser);  
        setIsLoggedIn(true);  
    };  

    const handleToggleBot = async () => {  
        // Llama a API real  
        const result = await apiToggleBot(!botStatus);  
        if (result.success) {  
            setBotStatus(!botStatus);  
            // Actualiza stats del backend (ajusta según respuesta)  
            const newStats = await apiGetStats();  
            setStats(newStats);  
        } else {  
            alert(`¡Ups! ${result.message || 'Error al togglear bot – ¿Backend vivo?'}`);  
        }  
    };  

    const handleSendCommand = (cmd) => {  
        console.log('✅ Comando enviado y procesado:', cmd);  
        // Backend ya lo ejecuta y emite log via socket  
    };  

    if (loading) {  
        return (  
            <div className="min-h-screen flex items-center justify-center bg-gray-900">  
                <motion.div  
                    className="text-white text-xl flex items-center gap-3"  
                    animate={{ rotate: 360 }}  
                    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}  
                >  
                    Cargando Panel...  
                    <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full" />  
                </motion.div>  
            </div>  
        );  
    }  

    if (!isLoggedIn) {  
        return <Login onLogin={handleLogin} />;  
    }  

    return (  
        <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900">  
            <div className="container mx-auto px-4 py-8 max-w-6xl">  
                <motion.header  
                    className="flex justify-between items-center mb-8 bg-gray-800/30 backdrop-blur-xl rounded-2xl p-4 border border-gray-700"  
                    initial={{ opacity: 0, y: -20 }}  
                    animate={{ opacity: 1, y: 0 }}  
                    transition={{ duration: 0.5 }}  
                >  
                    <h1 className="text-4xl font-bold bg-gradient-to-r from-indigo-400 via-purple-400 to-blue-400 bg-clip-text text-transparent">  
                        BotPanel Pro  
                    </h1>  
                    <div className="flex items-center gap-3 bg-gray-700/50 px-4 py-2 rounded-xl border border-indigo-500/50">  
                        <img src={user.avatar} alt={user.username} className="w-10 h-10 rounded-full border-2 border-indigo-500" />  
                        <span className="font-semibold text-white">{user.username}</span>  
                    </div>  
                </motion.header>  
                <main className="space-y-8">  
                    <Dashboard botStatus={botStatus} onToggleBot={handleToggleBot} stats={stats} />  
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">  
                        <Logs />  
                        <CommandInput onSendCommand={handleSendCommand} />  
                    </div>  
                </main>  
            </div>  
        </div>  
    );  
}  

export default App;