<?php
// admin/layout.php - Shared Layout Component
require_once '../config/db.php';

// Cargar configuración global para el Panel
try {
    $stmt_config = $pdo->query("SELECT setting_key, setting_value FROM site_config");
    $global_settings = $stmt_config->fetchAll(PDO::FETCH_KEY_PAIR);
} catch (Exception $e) {
    $global_settings = [];
}

function renderAdminSidebar($activePage = 'dashboard') {
    global $global_settings;
    $menuItems = [
        'dashboard' => ['icon' => 'fa-home', 'label' => 'Dashboard', 'link' => 'index.php'],
        'users' => ['icon' => 'fa-users', 'label' => 'Usuarios & KYC', 'link' => 'users.php'],
        'economy' => ['icon' => 'fa-coins', 'label' => 'Economía & Wallet', 'link' => 'economy.php'],
        'payments' => ['icon' => 'fa-credit-card', 'label' => 'Pagos & Retiros', 'link' => 'payments.php'],
        'gamification' => ['icon' => 'fa-gamepad', 'label' => 'Gamification & XP', 'link' => 'gamification.php'],
        'marketplace' => ['icon' => 'fa-store', 'label' => 'Marketplace', 'link' => 'marketplace.php'],
        'disputes' => ['icon' => 'fa-balance-scale', 'label' => 'Disputas (Escrow)', 'link' => 'disputes.php'],
        'chats' => ['icon' => 'fa-comments', 'label' => 'Chats', 'link' => 'chats.php'],
        'status' => ['icon' => 'fa-camera-retro', 'label' => 'Moderación Estados', 'link' => 'status_moderation.php'],
        'explore' => ['icon' => 'fa-robot', 'label' => 'Explorar & Bots IA', 'link' => 'explore_manager.php'],
        'streaming' => ['icon' => 'fa-video', 'label' => 'Streaming Live', 'link' => 'streaming.php'],
        'reports' => ['icon' => 'fa-flag', 'label' => 'Reportes & Bans', 'link' => 'reports.php'],
        'notifications' => ['icon' => 'fa-bell', 'label' => 'Notificaciones', 'link' => 'notifications.php'],
        'files' => ['icon' => 'fa-folder-open', 'label' => 'Gestor de Archivos', 'link' => 'files.php'],
        'integrations' => ['icon' => 'fa-plug', 'label' => 'Integraciones API', 'link' => 'integrations.php'],
        'settings' => ['icon' => 'fa-cogs', 'label' => 'Configuración Maestra', 'link' => 'settings.php', 'special' => true],
    ];
?>
<!DOCTYPE html>
<html lang="es" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KLKAPP Admin - Panel de Control</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        dark: {
                            900: '#0f172a', // Main background
                            800: '#1e293b', // Secondary background (cards/sidebar)
                            700: '#334155', // Borders
                            text: '#e2e8f0' // Main text
                        },
                        brand: {
                            500: '#8b5cf6', // Purple
                            600: '#7c3aed'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Custom scrollbar for dark mode */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
    </style>
</head>
<body class="bg-dark-900 text-dark-text font-sans antialiased h-screen flex overflow-hidden">
    
    <!-- Sidebar -->
    <aside class="w-72 bg-dark-800 border-r border-dark-700 flex flex-col shadow-2xl z-20">
        <!-- Brand -->
        <div class="h-28 flex items-center px-8 border-b border-dark-700 bg-gradient-to-r from-dark-800 to-dark-900">
            <div class="w-16 h-16 flex items-center justify-center mr-3 overflow-visible">
                <img src="assets_admin/logo.png?v=<?php echo time(); ?>" alt="KLKAPP Logo" class="w-full h-full object-contain rounded-2xl transform group-hover:scale-110 transition-transform duration-500 filter drop-shadow-xl">
            </div>
            <div class="ml-1">
                <h1 class="text-xl font-bold tracking-tight text-white leading-none">KLKAPP</h1>
                <p class="text-[10px] text-brand-500 font-bold uppercase tracking-widest mt-2">
                    <?php echo $global_settings['environment'] === 'production' ? 'PROD: ONLINE' : 'ADMIN V2.0'; ?>
                </p>
            </div>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 overflow-y-auto py-6 px-4 space-y-1">
            <?php foreach ($menuItems as $key => $item): 
                $isActive = $activePage === $key;
                $activeClass = $isActive 
                    ? 'bg-brand-600 text-white shadow-lg shadow-brand-500/20' 
                    : 'text-gray-400 hover:bg-dark-700 hover:text-white';
                $specialClass = isset($item['special']) ? 'mt-8 border-t border-dark-700 pt-6' : '';
            ?>
                <div class="<?php echo $specialClass; ?>">
                    <a href="<?php echo $item['link']; ?>" class="group flex items-center px-4 py-3.5 text-sm font-medium rounded-xl transition-all duration-200 <?php echo $activeClass; ?>">
                        <i class="fas <?php echo $item['icon']; ?> w-6 text-lg <?php echo $isActive ? 'text-white' : 'text-gray-500 group-hover:text-white'; ?> transition-colors"></i>
                        <span class="ml-3"><?php echo $item['label']; ?></span>
                        <?php if($isActive): ?>
                            <i class="fas fa-chevron-right ml-auto text-xs opacity-50"></i>
                        <?php endif; ?>
                    </a>
                </div>
            <?php endforeach; ?>
        </nav>

        <!-- User Profile (Bottom) -->
        <div class="p-4 border-t border-dark-700 bg-dark-900/50">
            <div class="flex items-center gap-3">
                <img src="https://ui-avatars.com/api/?name=Admin+User&background=random" class="w-10 h-10 rounded-full border-2 border-dark-700">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-white truncate">Super Admin</p>
                    <p class="text-xs text-green-400 truncate">● En línea</p>
                </div>
                <a href="#" class="text-gray-400 hover:text-white transition"><i class="fas fa-sign-out-alt"></i></a>
            </div>
        </div>
    </aside>

    <!-- Main Content Wrapper -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-dark-900 relative">
        <!-- Top Header -->
        <header class="h-20 bg-dark-800/80 backdrop-blur-md border-b border-dark-700 flex items-center justify-between px-8 z-10 sticky top-0">
            <h2 class="text-2xl font-bold text-white"><?php echo $menuItems[$activePage]['label']; ?></h2>
            <div class="flex items-center gap-4">
                <button class="p-2 text-gray-400 hover:text-white transition relative">
                    <i class="fas fa-bell text-xl"></i>
                    <span class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-dark-800"></span>
                </button>
                <div class="h-8 w-px bg-dark-700 mx-2"></div>
                <span class="text-sm text-gray-400"><?php echo date('l, d M Y'); ?></span>
            </div>
        </header>

        <!-- Main Content Area -->
        <main class="flex-1 overflow-y-auto p-8 relative">
            <div class="max-w-7xl mx-auto pb-12">
<?php } ?>

<?php
function renderAdminFooter() {
?>
            </div>
        </main>
    </div>
</body>
</html>
<?php } ?>
