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

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

renderAdminSidebar('status');
?>

<!-- Header -->
<div class="flex justify-between items-center mb-8">
    <div>
        <h2 class="text-3xl font-bold text-white tracking-tight">Moderación de Estados (24h)</h2>
        <p class="text-gray-400 mt-1">Revisa en tiempo real las historias publicadas por los usuarios y bórralas si incumplen las normas.</p>
    </div>
    <button class="bg-dark-700 hover:bg-dark-600 text-white font-bold py-2 px-4 rounded-xl flex items-center gap-2 transition">
        <i class="fas fa-sync"></i> Refrescar (Auto: ON)
    </button>
</div>

<div class="bg-dark-800 rounded-2xl border border-dark-700 p-6 shadow-xl mb-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-white font-bold text-lg"><i class="fas fa-shield-alt text-brand-500 mr-2"></i> Filtros de IA de Contenido</h3>
        <label class="flex items-center gap-2 cursor-pointer">
            <span class="text-sm text-gray-400">Baneo Automático NSFW</span>
            <input type="checkbox" checked class="w-4 h-4 accent-brand-500">
        </label>
    </div>
    <p class="text-sm text-gray-500">Nuestro filtro de IA detecta automáticamente contenido explícito y lo envía a revisión manual antes de publicarse.</p>
</div>

<!-- Cuadrícula de Historias (Mockup) -->
<h3 class="text-white font-bold mb-4 flex items-center"><i class="fas fa-clock text-gray-400 mr-2"></i> Estados Recientes Activos</h3>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
    <!-- Historia 1 -->
    <div class="relative group bg-dark-900 rounded-xl overflow-hidden aspect-[9/16] border border-dark-700">
        <div class="absolute inset-0 bg-gradient-to-t from-dark-900 to-transparent opacity-80 z-10"></div>
        <img src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="absolute inset-0 w-full h-full object-cover opacity-60">
        
        <div class="absolute inset-0 z-20 flex flex-col justify-between p-3 opacity-0 group-hover:opacity-100 transition bg-black/50 backdrop-blur-sm">
            <div class="text-right">
                <button class="w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-500 transition shadow-lg" title="Borrar Estado">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div>
                <p class="text-white font-bold text-xs truncate">@usuario123</p>
                <p class="text-gray-400 text-[10px]">Hace 5 min</p>
            </div>
        </div>
    </div>
    <!-- Historia 2 -->
    <div class="relative group bg-dark-900 rounded-xl overflow-hidden aspect-[9/16] border border-dark-700">
        <div class="absolute inset-0 bg-gradient-to-t from-dark-900 to-transparent z-10"></div>
        <div class="absolute inset-0 flex items-center justify-center p-4 z-0 bg-gradient-to-br from-pink-500 to-orange-400">
            <p class="text-white text-center text-sm font-bold truncate">¡Buen día a todos!</p>
        </div>
        
        <div class="absolute inset-0 z-20 flex flex-col justify-between p-3 opacity-0 group-hover:opacity-100 transition bg-black/50 backdrop-blur-sm">
            <div class="text-right">
                <button class="w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-500 transition shadow-lg" title="Borrar Estado">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div>
                <p class="text-white font-bold text-xs truncate">@maria_g</p>
                <p class="text-gray-400 text-[10px]">Hace 10 min</p>
            </div>
        </div>
    </div>
</div>

<?php renderAdminFooter(); ?>
