<?php
require_once '../config/db.php';
require_once 'layout.php';

// Override default JSON header for HTML output
header('Content-Type: text/html; charset=utf-8');

// Fetch Stats
try {
    $total_users = $pdo->query("SELECT COUNT(*) FROM users")->fetchColumn();
    $total_messages = $pdo->query("SELECT COUNT(*) FROM messages")->fetchColumn();
    // Assuming transactions and chats tables exist or mock for now
    $total_diamonds = $pdo->query("SELECT SUM(diamonds) FROM users")->fetchColumn() ?: 0;
    
    // Mock for charts if tables empty
    $total_chats = 5; // Placeholder
} catch (PDOException $e) {
    die("Error DB: " . $e->getMessage());
}

renderAdminSidebar('dashboard');
?>

<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Users Card -->
    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group hover:border-brand-500 transition-colors duration-300">
        <div class="absolute -right-6 -top-6 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-500/20 transition-all"></div>
        <div class="flex justify-between items-start mb-4 relative">
            <div>
                <p class="text-gray-400 text-sm font-medium">Usuarios Totales</p>
                <h3 class="text-3xl font-bold text-white mt-1"><?php echo number_format($total_users); ?></h3>
            </div>
            <div class="p-3 bg-blue-500/20 rounded-xl text-blue-400">
                <i class="fas fa-users text-xl"></i>
            </div>
        </div>
        <div class="flex items-center text-sm text-green-400 font-medium relative">
            <i class="fas fa-arrow-up mr-1"></i> <span>+12%</span>
            <span class="text-gray-500 ml-2">vs. mes pasado</span>
        </div>
    </div>

    <!-- Active Chats Card -->
    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group hover:border-brand-500 transition-colors duration-300">
        <div class="absolute -right-6 -top-6 w-32 h-32 bg-green-500/10 rounded-full blur-2xl group-hover:bg-green-500/20 transition-all"></div>
        <div class="flex justify-between items-start mb-4 relative">
            <div>
                <p class="text-gray-400 text-sm font-medium">Chats Activos</p>
                <h3 class="text-3xl font-bold text-white mt-1"><?php echo number_format($total_chats); ?></h3>
            </div>
            <div class="p-3 bg-green-500/20 rounded-xl text-green-400">
                <i class="fas fa-comments text-xl"></i>
            </div>
        </div>
        <div class="flex items-center text-sm text-green-400 font-medium relative">
            <i class="fas fa-arrow-up mr-1"></i> <span>+5%</span>
            <span class="text-gray-500 ml-2">hoy</span>
        </div>
    </div>

    <!-- Diamonds Card -->
    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group hover:border-brand-500 transition-colors duration-300">
        <div class="absolute -right-6 -top-6 w-32 h-32 bg-yellow-500/10 rounded-full blur-2xl group-hover:bg-yellow-500/20 transition-all"></div>
        <div class="flex justify-between items-start mb-4 relative">
            <div>
                <p class="text-gray-400 text-sm font-medium">Economía (Diamantes)</p>
                <h3 class="text-3xl font-bold text-white mt-1"><?php echo number_format($total_diamonds); ?></h3>
            </div>
            <div class="p-3 bg-yellow-500/20 rounded-xl text-yellow-400">
                <i class="fas fa-gem text-xl"></i>
            </div>
        </div>
        <span class="text-xs text-gray-500 bg-dark-900 px-2 py-1 rounded border border-dark-700">Valor aprox: $<?php echo number_format($total_diamonds * 0.01, 2); ?> USD</span>
    </div>

    <!-- Messages Card -->
    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group hover:border-brand-500 transition-colors duration-300">
        <div class="absolute -right-6 -top-6 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl group-hover:bg-purple-500/20 transition-all"></div>
        <div class="flex justify-between items-start mb-4 relative">
            <div>
                <p class="text-gray-400 text-sm font-medium">Mensajes Globales</p>
                <h3 class="text-3xl font-bold text-white mt-1"><?php echo number_format($total_messages); ?></h3>
            </div>
            <div class="p-3 bg-purple-500/20 rounded-xl text-purple-400">
                <i class="fas fa-paper-plane text-xl"></i>
            </div>
        </div>
        <div class="w-full bg-dark-900 rounded-full h-1.5 mt-2">
            <div class="bg-purple-500 h-1.5 rounded-full" style="width: 70%"></div>
        </div>
    </div>
</div>

<!-- Quick Actions & Recent Activity -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    
    <!-- Quick Actions -->
    <div class="lg:col-span-2 bg-dark-800 rounded-2xl border border-dark-700 overflow-hidden">
        <div class="p-6 border-b border-dark-700 flex justify-between items-center">
            <h3 class="text-lg font-bold text-white">Acciones Rápidas</h3>
        </div>
        <div class="p-6 grid grid-cols-2 sm:grid-cols-4 gap-4">
            <a href="users.php" class="flex flex-col items-center justify-center p-4 bg-dark-900 rounded-xl border border-dark-700 hover:border-brand-500 hover:bg-dark-800 transition cursor-pointer group">
                <div class="w-12 h-12 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-user-plus text-xl"></i>
                </div>
                <span class="text-sm font-medium text-gray-300">Nuevo Usuario</span>
            </a>
            <a href="settings.php" class="flex flex-col items-center justify-center p-4 bg-dark-900 rounded-xl border border-dark-700 hover:border-brand-500 hover:bg-dark-800 transition cursor-pointer group">
                <div class="w-12 h-12 rounded-full bg-red-500/20 text-red-400 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-ban text-xl"></i>
                </div>
                <span class="text-sm font-medium text-gray-300">Modo Mantenimiento</span>
            </a>
            <a href="economy.php" class="flex flex-col items-center justify-center p-4 bg-dark-900 rounded-xl border border-dark-700 hover:border-brand-500 hover:bg-dark-800 transition cursor-pointer group">
                <div class="w-12 h-12 rounded-full bg-yellow-500/20 text-yellow-400 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-gift text-xl"></i>
                </div>
                <span class="text-sm font-medium text-gray-300">Enviar Bono</span>
            </a>
            <a href="streaming.php" class="flex flex-col items-center justify-center p-4 bg-dark-900 rounded-xl border border-dark-700 hover:border-brand-500 hover:bg-dark-800 transition cursor-pointer group">
                <div class="w-12 h-12 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                    <i class="fas fa-broadcast-tower text-xl"></i>
                </div>
                <span class="text-sm font-medium text-gray-300">Config. Stream</span>
            </a>
        </div>
    </div>

    <!-- Server Status -->
    <div class="bg-dark-800 rounded-2xl border border-dark-700 overflow-hidden">
        <div class="p-6 border-b border-dark-700">
            <h3 class="text-lg font-bold text-white">Estado del Servidor</h3>
        </div>
        <div class="p-6 space-y-6">
            <div>
                <div class="flex justify-between text-sm mb-2">
                    <span class="text-gray-400">CPU Load</span>
                    <span class="text-green-400 font-bold">12%</span>
                </div>
                <div class="w-full bg-dark-900 rounded-full h-2">
                    <div class="bg-green-500 h-2 rounded-full" style="width: 12%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-sm mb-2">
                    <span class="text-gray-400">Memoria RAM</span>
                    <span class="text-blue-400 font-bold">45%</span>
                </div>
                <div class="w-full bg-dark-900 rounded-full h-2">
                    <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-sm mb-2">
                    <span class="text-gray-400">Disco (Storage)</span>
                    <span class="text-purple-400 font-bold">68%</span>
                </div>
                <div class="w-full bg-dark-900 rounded-full h-2">
                    <div class="bg-purple-500 h-2 rounded-full" style="width: 68%"></div>
                </div>
            </div>
            
            <div class="pt-4 border-t border-dark-700 flex items-center gap-3">
                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                <span class="text-sm text-gray-300">Todos los sistemas operativos</span>
            </div>
        </div>
    </div>

</div>

<?php renderAdminFooter(); ?>
