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

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

renderAdminSidebar('explore');
?>

<!-- Header -->
<div class="flex justify-between items-center mb-8">
    <div>
        <h2 class="text-3xl font-bold text-white tracking-tight">Explorar & Bots IA</h2>
        <p class="text-gray-400 mt-1">Configura las inteligencias artificiales y tendencias de la app.</p>
    </div>
</div>

<div class="flex flex-col h-[calc(100vh-160px)]">
    <div class="flex border-b border-dark-700 bg-dark-900/50 rounded-t-2xl">
        <button onclick="switchTab('bots')" id="tab-bots" class="px-6 py-4 text-sm font-bold text-brand-500 border-b-2 border-brand-500 bg-dark-800 transition">
            <i class="fas fa-robot mr-2"></i> Gestión de Bots IA
        </button>
        <button onclick="switchTab('trends')" id="tab-trends" class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white hover:bg-dark-800 transition border-b-2 border-transparent">
            <i class="fas fa-fire mr-2"></i> Tendencias & Canales
        </button>
    </div>

    <div class="flex-1 bg-dark-800 rounded-b-2xl border border-t-0 border-dark-700 p-6 overflow-y-auto">
        <!-- BOTS CONTENT -->
        <div id="content-bots">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-white">Directorio de Bots</h3>
                <button class="bg-brand-600 hover:bg-brand-700 text-white font-bold py-2 px-4 rounded-xl shadow-lg transition text-sm">
                    + Nuevo Bot
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Bot 1 -->
                <div class="p-4 bg-dark-900 border border-dark-700 rounded-xl flex items-start gap-4">
                    <div class="w-12 h-12 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center text-xl">🤖</div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h4 class="text-white font-bold">Juuvix AI (Asistente)</h4>
                            <span class="px-2 py-0.5 bg-green-500/20 text-green-400 text-[10px] uppercase font-bold rounded">Activo</span>
                        </div>
                        <p class="text-gray-400 text-xs mt-1">Chatbot general. Conectado a: OpenAI GPT-4o.</p>
                        <div class="flex gap-2 mt-3">
                            <button class="text-xs px-3 py-1 bg-dark-700 text-white rounded hover:bg-dark-600">Editar Prompt</button>
                        </div>
                    </div>
                </div>

                <!-- Bot 2 -->
                <div class="p-4 bg-dark-900 border border-dark-700 rounded-xl flex items-start gap-4">
                    <div class="w-12 h-12 rounded-xl bg-pink-500/20 text-pink-400 flex items-center justify-center text-xl">🎨</div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h4 class="text-white font-bold">ImageGen X</h4>
                            <span class="px-2 py-0.5 bg-gray-500/20 text-gray-400 text-[10px] uppercase font-bold rounded">Apagado</span>
                        </div>
                        <p class="text-gray-400 text-xs mt-1">Generador de imágenes. Conexión: DALL-E 3.</p>
                        <div class="flex gap-2 mt-3">
                            <button class="text-xs px-3 py-1 bg-dark-700 text-white rounded hover:bg-dark-600">Editar Prompt</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TRENDS CONTENT -->
        <div id="content-trends" class="hidden">
            <h3 class="text-xl font-bold text-white mb-6">Trending Topics Manuales</h3>
            <p class="text-gray-400 mb-4">Aquí puedes forzar qué hashtags salen de primeros en "Tendencias".</p>
            <div class="space-y-3">
                <input type="text" value="#KLKAPP Launch" class="w-full bg-dark-900 border border-dark-700 rounded-xl px-4 py-3 text-white">
                <input type="text" value="#TechNews" class="w-full bg-dark-900 border border-dark-700 rounded-xl px-4 py-3 text-white">
                <button class="w-full py-3 bg-dark-700 text-white rounded-xl hover:bg-dark-600 border border-dark-600 border-dashed">
                    + Agregar Trending
                </button>
            </div>
            <button class="mt-4 bg-brand-600 hover:bg-brand-700 text-white font-bold py-2 px-6 rounded-xl shadow-lg transition">Guardar Tendencias</button>
        </div>
    </div>
</div>

<script>
function switchTab(tab) {
    document.getElementById('tab-bots').className = tab === 'bots' 
        ? 'px-6 py-4 text-sm font-bold text-brand-500 border-b-2 border-brand-500 bg-dark-800 transition'
        : 'px-6 py-4 text-sm font-medium text-gray-400 hover:text-white hover:bg-dark-800 transition border-b-2 border-transparent';
    
    document.getElementById('tab-trends').className = tab === 'trends'
        ? 'px-6 py-4 text-sm font-bold text-brand-500 border-b-2 border-brand-500 bg-dark-800 transition'
        : 'px-6 py-4 text-sm font-medium text-gray-400 hover:text-white hover:bg-dark-800 transition border-b-2 border-transparent';

    document.getElementById('content-bots').classList.toggle('hidden', tab !== 'bots');
    document.getElementById('content-trends').classList.toggle('hidden', tab !== 'trends');
}
</script>

<?php renderAdminFooter(); ?>
