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

header('Content-Type: text/html; charset=utf-8');

renderAdminSidebar('streaming');
?>

<!-- Streaming Header & Actions -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
    <div>
        <h2 class="text-3xl font-bold text-white tracking-tight">Streaming Live <span class="bg-red-500 text-white text-xs px-2 py-1 rounded ml-2 uppercase font-bold animate-pulse">En Vivo</span></h2>
        <p class="text-gray-400 mt-1">Gestiona los servidores de transmisión y usuarios en vivo.</p>
    </div>
    <div class="flex gap-3">
        <button class="bg-dark-800 hover:bg-dark-700 text-white border border-dark-700 font-medium py-2 px-4 rounded-lg flex items-center gap-2 transition">
            <i class="fas fa-server"></i> Logs del Servidor
        </button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg flex items-center gap-2 shadow-lg shadow-red-500/30 transition">
            <i class="fas fa-stop-circle"></i> Apagar Emergencia
        </button>
    </div>
</div>

<!-- Server Status Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
     <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group">
        <div class="flex justify-between items-start mb-2">
            <div>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Usuarios Viendo</p>
                <h3 class="text-2xl font-bold text-white mt-1">1,245</h3>
            </div>
            <i class="fas fa-eye text-blue-500 text-xl"></i>
        </div>
        <div class="w-full bg-dark-900 rounded-full h-1 mt-2">
            <div class="bg-blue-500 h-1 rounded-full" style="width: 45%"></div>
        </div>
    </div>
    
    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group">
        <div class="flex justify-between items-start mb-2">
            <div>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Streams Activos</p>
                <h3 class="text-2xl font-bold text-white mt-1">12</h3>
            </div>
            <i class="fas fa-video text-red-500 text-xl animate-pulse"></i>
        </div>
         <div class="w-full bg-dark-900 rounded-full h-1 mt-2">
            <div class="bg-red-500 h-1 rounded-full" style="width: 12%"></div>
        </div>
    </div>

    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group">
         <div class="flex justify-between items-start mb-2">
            <div>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Ancho de Banda</p>
                <h3 class="text-2xl font-bold text-white mt-1">450 Mbps</h3>
            </div>
            <i class="fas fa-tachometer-alt text-green-500 text-xl"></i>
        </div>
         <div class="w-full bg-dark-900 rounded-full h-1 mt-2">
            <div class="bg-green-500 h-1 rounded-full" style="width: 65%"></div>
        </div>
        <p class="text-[10px] text-gray-500 mt-2">Pico: 890 Mbps</p>
    </div>

    <div class="bg-dark-800 rounded-2xl p-6 border border-dark-700 shadow-xl relative overflow-hidden group">
        <div class="flex justify-between items-start mb-2">
            <div>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-wider">Health Status</p>
                <h3 class="text-2xl font-bold text-green-400 mt-1">Optimized</h3>
            </div>
            <i class="fas fa-heartbeat text-pink-500 text-xl"></i>
        </div>
        <p class="text-[10px] text-gray-500 mt-2">Uptime: 14d 2h 20m</p>
    </div>
</div>

<!-- Active Streams Grid (Netflix Style) -->
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
    <i class="fas fa-broadcast-tower text-red-500"></i> Transmisiones en Curso
</h3>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <!-- Stream Card 1 -->
    <div class="group relative bg-dark-800 rounded-xl overflow-hidden border border-dark-700 hover:border-red-500 transition-all duration-300">
        <div class="relative aspect-video bg-black">
            <span class="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded shadow-lg animate-pulse">LIVE</span>
            <span class="absolute top-2 right-2 bg-black/50 text-white text-[10px] font-bold px-2 py-0.5 rounded backdrop-blur">👁️ 340</span>
            <img src="https://images.unsplash.com/photo-1533228876829-65c94e7b5025?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition">
            
            <!-- Overlay Play Button -->
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black/30 backdrop-blur-[2px]">
                <button class="bg-red-600 hover:bg-red-700 text-white rounded-full p-4 shadow-xl transform scale-75 group-hover:scale-100 transition">
                    <i class="fas fa-play ml-1"></i>
                </button>
            </div>
        </div>
        <div class="p-4">
            <div class="flex gap-3">
                <img src="https://ui-avatars.com/api/?name=DJ+Party&background=random" class="w-8 h-8 rounded-full border border-dark-700">
                 <div>
                    <h4 class="text-white font-bold text-sm truncate">Fiesta en Casa 🎉</h4>
                    <p class="text-xs text-gray-400">@djparty_official</p>
                </div>
            </div>
            <div class="mt-3 flex justify-between items-center text-xs text-gray-500 border-t border-dark-700 pt-3">
                <span><i class="fas fa-clock mr-1"></i> 1h 20m</span>
                <button class="text-red-400 hover:text-red-300 font-bold hover:underline">Cortar Stream</button>
            </div>
        </div>
    </div>

    <!-- Stream Card 2 -->
    <div class="group relative bg-dark-800 rounded-xl overflow-hidden border border-dark-700 hover:border-red-500 transition-all duration-300">
        <div class="relative aspect-video bg-black">
            <span class="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded shadow-lg animate-pulse">LIVE</span>
            <span class="absolute top-2 right-2 bg-black/50 text-white text-[10px] font-bold px-2 py-0.5 rounded backdrop-blur">👁️ 1.2k</span>
             <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition">
             <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black/30 backdrop-blur-[2px]">
                <button class="bg-red-600 hover:bg-red-700 text-white rounded-full p-4 shadow-xl transform scale-75 group-hover:scale-100 transition">
                    <i class="fas fa-play ml-1"></i>
                </button>
            </div>
        </div>
        <div class="p-4">
            <div class="flex gap-3">
                <img src="https://ui-avatars.com/api/?name=Gamer+Pro&background=random" class="w-8 h-8 rounded-full border border-dark-700">
                 <div>
                    <h4 class="text-white font-bold text-sm truncate">Ranked Match Final 🏆</h4>
                    <p class="text-xs text-gray-400">@gamerpro_x</p>
                </div>
            </div>
            <div class="mt-3 flex justify-between items-center text-xs text-gray-500 border-t border-dark-700 pt-3">
                <span><i class="fas fa-clock mr-1"></i> 45m</span>
                <button class="text-red-400 hover:text-red-300 font-bold hover:underline">Cortar Stream</button>
            </div>
        </div>
    </div>

     <!-- Stream Card Mock -->
     <div class="bg-dark-900 border-2 border-dashed border-dark-700 rounded-xl flex items-center justify-center p-8 opacity-50 hover:opacity-100 transition cursor-pointer">
        <div class="text-center">
            <div class="w-12 h-12 bg-dark-800 rounded-full flex items-center justify-center mx-auto mb-2 text-gray-400">
                <i class="fas fa-plus"></i>
            </div>
            <p class="text-sm font-bold text-gray-400">Inyectar Stream de Prueba</p>
        </div>
    </div>

</div>

<?php renderAdminFooter(); ?>
