<?php
session_start();
require_once __DIR__ . '/../includes/session_check.php';
require_once __DIR__ . '/../includes/url_helper.php';
require_once __DIR__ . '/../includes/i18n.php';

handleLanguageChange();

$currentPage = basename($_SERVER['PHP_SELF']);
$theme = $_COOKIE['theme'] ?? 'light';
$currentLang = getCurrentLanguage();
$activeLanguages = getActiveLanguages();
?>
<!DOCTYPE html>
<html lang="es" data-bs-theme="<?= $theme ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $pageTitle ?? 'Sistema de Mensajería' ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <style>
        :root {
            --military-dark: #1a1f16;
            --military-olive: #3d4a32;
            --military-green: #5a6b4a;
            --military-tan: #8b7355;
            --military-sand: #c4b998;
            --accent-orange: #d4652f;
            --accent-red: #8b3a3a;
            --hud-cyan: #4a9c8c;
            --discord-color: #5865F2;
            --telegram-color: #0088cc;
            --navbar-height: 56px;
        }
        
        * {
            font-family: 'Rajdhani', sans-serif;
        }
        
        [data-bs-theme="dark"] {
            --bs-body-bg: #12150f;
            --bs-body-color: #e8e4d9;
            --bs-card-bg: #1a1f16;
            --bs-border-color: #3d4a32;
            --navbar-bg: linear-gradient(180deg, #1a1f16 0%, #0f120c 100%);
        }
        
        [data-bs-theme="light"] {
            --bs-body-bg: #e8e4d9;
            --bs-body-color: #1a1f16;
            --bs-card-bg: #f5f3ed;
            --bs-border-color: #8b7355;
            --navbar-bg: linear-gradient(180deg, #3d4a32 0%, #2a3024 100%);
            --military-dark: #2a3024;
            --military-sand: #e8e4d9;
        }
        
        [data-bs-theme="light"] .nav-link-main,
        [data-bs-theme="light"] .dropdown-toggle-military {
            color: var(--military-sand) !important;
        }
        
        [data-bs-theme="light"] .nav-link-main:hover,
        [data-bs-theme="light"] .nav-link-main.active,
        [data-bs-theme="light"] .dropdown-toggle-military:hover,
        [data-bs-theme="light"] .dropdown-toggle-military.show {
            color: #fff !important;
        }
        
        [data-bs-theme="light"] .navbar-brand small {
            color: var(--military-sand);
        }
        
        [data-bs-theme="light"] .dropdown-menu-military {
            background: var(--bs-card-bg);
        }
        
        [data-bs-theme="light"] .dropdown-menu-military .dropdown-item {
            color: var(--bs-body-color);
        }
        
        [data-bs-theme="light"] .dropdown-menu-military .dropdown-item:hover {
            background: rgba(61, 74, 50, 0.3);
        }
        
        [data-bs-theme="light"] #theme-toggle {
            color: var(--military-sand);
            border-color: rgba(255,255,255,0.3);
        }
        
        [data-bs-theme="light"] .text-muted {
            color: #5a6b4a !important;
        }
        
        [data-bs-theme="light"] .table thead th {
            background-color: rgba(61, 74, 50, 0.2);
            color: var(--bs-body-color);
        }
        
        [data-bs-theme="light"] .card-header {
            background-color: rgba(61, 74, 50, 0.15);
            color: var(--bs-body-color);
        }
        
        [data-bs-theme="light"] .alert-danger {
            background-color: rgba(139, 58, 58, 0.15);
            color: #8b3a3a;
        }
        
        [data-bs-theme="light"] .alert-success {
            background-color: rgba(74, 156, 140, 0.15);
            color: #2d6b61;
        }
        
        [data-bs-theme="light"] ::-webkit-scrollbar-track {
            background: #d4d0c5;
        }
        
        [data-bs-theme="light"] ::-webkit-scrollbar-thumb {
            background: #8b7355;
        }
        
        [data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-orange);
        }
        
        body {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            padding-top: var(--navbar-height);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .main-content {
            flex: 1;
            padding: 1.5rem;
            width: 100%;
        }
        
        footer {
            margin-top: auto;
        }
        
        .navbar-military {
            background: var(--navbar-bg);
            border-bottom: 2px solid var(--military-green);
            min-height: var(--navbar-height);
            padding: 0 1rem;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }
        
        .navbar-military::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--accent-orange) 20%, 
                var(--accent-orange) 80%, 
                transparent 100%);
        }
        
        .navbar-brand {
            font-family: 'Share Tech Mono', monospace;
            font-size: 1.3rem;
            color: var(--accent-orange) !important;
            letter-spacing: 2px;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .navbar-brand small {
            font-size: 0.65rem;
            color: var(--military-sand);
            letter-spacing: 3px;
            font-family: 'Rajdhani', sans-serif;
        }
        
        .nav-link-main {
            color: var(--military-sand) !important;
            padding: 8px 12px !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
            font-size: 0.8rem;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .nav-link-main:hover,
        .nav-link-main.active {
            color: #fff !important;
            border-bottom-color: var(--accent-orange);
            background: rgba(90, 107, 74, 0.3);
        }
        
        .nav-link-main i {
            font-size: 0.9rem;
        }
        
        .nav-divider {
            width: 1px;
            height: 24px;
            background: var(--military-green);
            margin: 0 8px;
        }
        
        .nav-section-label {
            color: var(--accent-orange);
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 0 8px;
            font-family: 'Share Tech Mono', monospace;
        }
        
        .dropdown-menu-military {
            background: var(--military-dark);
            border: 1px solid var(--military-green);
            border-radius: 0;
            min-width: 200px;
            padding: 0.5rem 0;
        }
        
        .dropdown-menu-military .dropdown-item {
            color: var(--military-sand);
            padding: 8px 16px;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .dropdown-menu-military .dropdown-item:hover {
            background: rgba(90, 107, 74, 0.4);
            color: #fff;
        }
        
        .dropdown-menu-military .dropdown-item i {
            width: 20px;
        }
        
        .dropdown-menu-military .dropdown-divider {
            border-color: var(--military-green);
        }
        
        .dropdown-toggle-military {
            color: var(--military-sand) !important;
            padding: 8px 12px !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
            font-size: 0.8rem;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .dropdown-toggle-military:hover,
        .dropdown-toggle-military.show {
            color: #fff !important;
            border-bottom-color: var(--accent-orange);
            background: rgba(90, 107, 74, 0.3);
        }
        
        #theme-toggle {
            color: var(--military-sand);
            border: 1px solid var(--military-green);
            background: transparent;
            border-radius: 0;
            padding: 4px 8px;
        }
        
        #theme-toggle:hover {
            color: #fff;
            background: var(--military-olive);
            border-color: var(--accent-orange);
        }
        
        .navbar-toggler-military {
            border: 1px solid var(--military-green);
            border-radius: 0;
            padding: 4px 8px;
        }
        
        .navbar-toggler-military .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(196, 185, 152, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        .card {
            background-color: var(--bs-card-bg);
            border: 1px solid var(--military-green);
            border-radius: 0;
            position: relative;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, 
                var(--military-green) 0%, 
                var(--accent-orange) 50%, 
                var(--military-green) 100%);
        }
        
        .card-header {
            background-color: rgba(61, 74, 50, 0.3);
            border-bottom: 1px solid var(--military-green);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }
        
        [data-bs-theme="dark"] .card-header.bg-white,
        [data-bs-theme="dark"] .bg-white:not(.btn):not(.nav-link):not(.dropdown-menu) {
            background-color: var(--bs-card-bg) !important;
        }
        
        [data-bs-theme="dark"] .bg-light {
            background-color: rgba(61, 74, 50, 0.2) !important;
        }
        
        .btn-primary {
            background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
            border: 1px solid var(--military-green);
            color: var(--military-sand);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            border-radius: 0;
        }
        
        .btn-primary:hover {
            background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
            border-color: var(--accent-orange);
            color: #fff;
        }
        
        .btn-outline-secondary {
            border: 1px solid var(--military-green);
            color: var(--military-sand);
            border-radius: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }
        
        .btn-outline-secondary:hover {
            background: var(--military-olive);
            border-color: var(--accent-orange);
            color: #fff;
        }
        
        .btn-outline-danger {
            border-color: var(--accent-red);
            color: var(--accent-red);
            border-radius: 0;
        }
        
        .btn-outline-danger:hover {
            background: var(--accent-red);
            color: #fff;
        }
        
        .btn-outline-warning {
            border-color: var(--accent-orange);
            color: var(--accent-orange);
            border-radius: 0;
        }
        
        .btn-outline-warning:hover {
            background: var(--accent-orange);
            color: #fff;
        }
        
        .btn-outline-success {
            border-color: var(--hud-cyan);
            color: var(--hud-cyan);
            border-radius: 0;
        }
        
        .btn-outline-success:hover {
            background: var(--hud-cyan);
            color: #fff;
        }
        
        .btn-outline-info {
            border-color: var(--telegram-color);
            color: var(--telegram-color);
            border-radius: 0;
        }
        
        .btn-outline-info:hover {
            background: var(--telegram-color);
            color: #fff;
        }
        
        .form-control, .form-select {
            background-color: rgba(26, 31, 22, 0.8);
            border: 1px solid var(--military-green);
            color: var(--bs-body-color);
            border-radius: 0;
        }
        
        .form-control:focus, .form-select:focus {
            background-color: rgba(26, 31, 22, 0.9);
            border-color: var(--accent-orange);
            color: var(--bs-body-color);
            box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.2);
        }
        
        [data-bs-theme="light"] .form-control,
        [data-bs-theme="light"] .form-select {
            background-color: #fff;
        }
        
        .badge {
            border-radius: 0;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 1px;
            font-weight: 600;
            padding: 4px 8px;
        }
        
        .badge.bg-warning {
            background-color: var(--accent-orange) !important;
            color: #fff;
        }
        
        .badge.bg-success {
            background-color: var(--hud-cyan) !important;
        }
        
        .badge.bg-danger {
            background-color: var(--accent-red) !important;
        }
        
        .badge.bg-info {
            background-color: var(--telegram-color) !important;
        }
        
        .table {
            color: var(--bs-body-color);
        }
        
        .table thead th {
            background-color: rgba(61, 74, 50, 0.4);
            border-bottom: 2px solid var(--military-green);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
            font-weight: 600;
        }
        
        .table-hover tbody tr:hover {
            background-color: rgba(90, 107, 74, 0.2);
        }
        
        .alert {
            border-radius: 0;
            border-left: 3px solid;
        }
        
        .alert-danger {
            background-color: rgba(139, 58, 58, 0.2);
            border-color: var(--accent-red);
            color: #ff8a8a;
        }
        
        .alert-success {
            background-color: rgba(74, 156, 140, 0.2);
            border-color: var(--hud-cyan);
            color: #7ce0d0;
        }
        
        .platform-discord { color: var(--discord-color); }
        .platform-telegram { color: var(--telegram-color); }
        .status-pending { color: var(--accent-orange); }
        .status-sent { color: var(--hud-cyan); }
        .status-failed { color: var(--accent-red); }
        .status-processing { color: var(--telegram-color); }
        
        .stat-card-icon {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid;
            position: relative;
        }
        
        .stat-card-icon::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: currentColor;
            top: -2px;
            left: -2px;
        }
        
        .stat-card-icon::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: currentColor;
            bottom: -2px;
            right: -2px;
        }
        
        h2, h3, h4, h5 {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
        }
        
        h2 i, h3 i, h4 i, h5 i {
            color: var(--accent-orange);
        }
        
        .border-top {
            border-color: var(--military-green) !important;
        }
        
        .dropdown-menu {
            background-color: var(--bs-card-bg);
            border: 1px solid var(--military-green);
            border-radius: 0;
        }
        
        .dropdown-item:hover {
            background-color: rgba(90, 107, 74, 0.3);
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--military-dark);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--military-green);
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-orange);
        }
        
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: var(--military-dark);
                border: 1px solid var(--military-green);
                margin-top: 8px;
                padding: 10px;
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .navbar-collapse .nav-link-main,
            .navbar-collapse .dropdown-toggle-military {
                padding: 10px 12px !important;
                border-bottom: 1px solid var(--military-green);
            }
            
            .navbar-collapse .dropdown-menu-military {
                background: transparent;
                border: none;
                padding-left: 20px;
            }
            
            .navbar-collapse .dropdown-menu-military .dropdown-item {
                padding: 8px 12px;
            }
            
            .nav-divider {
                display: none !important;
            }
            
            #theme-toggle {
                margin: 10px 0;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-military">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index.php">
                ◈ LASTWAR <small>COMMS</small>
            </a>
            
            <button class="navbar-toggler navbar-toggler-military" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'index.php' ? 'active' : '' ?>" href="/index.php">
                            <i class="bi bi-crosshair"></i> <?= t('Dashboard') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'create_message.php' ? 'active' : '' ?>" href="/create_message.php">
                            <i class="bi bi-pencil-square"></i> <?= t('Crear') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'scheduled_messages.php' ? 'active' : '' ?>" href="/scheduled_messages.php">
                            <i class="bi bi-stopwatch"></i> <?= t('Programados') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'recurrentes.php' ? 'active' : '' ?>" href="/recurrentes.php">
                            <i class="bi bi-collection"></i> <?= t('Plantillas') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'sent_messages.php' ? 'active' : '' ?>" href="/sent_messages.php">
                            <i class="bi bi-check2-all"></i> <?= t('Enviados') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'gallery.php' ? 'active' : '' ?>" href="/gallery.php">
                            <i class="bi bi-images"></i> <?= t('Galería') ?>
                        </a>
                    </li>
                    
                    <?php if (isAdmin()): ?>
                    <div class="nav-divider d-none d-lg-block"></div>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle-military dropdown-toggle" href="#" data-bs-toggle="dropdown">
                            <i class="bi bi-shield-lock"></i> <?= t('COMANDO') ?>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-military">
                            <li><a class="dropdown-item <?= $currentPage === 'users.php' ? 'active' : '' ?>" href="/admin/users.php"><i class="bi bi-people"></i> <?= t('Usuarios') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'recipients.php' ? 'active' : '' ?>" href="/admin/recipients.php"><i class="bi bi-person-check"></i> <?= t('Destinatarios') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'languages.php' ? 'active' : '' ?>" href="/admin/languages.php"><i class="bi bi-translate"></i> <?= t('Idiomas') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'comandos.php' ? 'active' : '' ?>" href="/admin/comandos.php"><i class="bi bi-terminal"></i> <?= t('Comandos') ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item <?= $currentPage === 'test_discord_connection.php' ? 'active' : '' ?>" href="/admin/test_discord_connection.php"><i class="bi bi-discord"></i> <?= t('Test Discord') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'ia_agent.php' ? 'active' : '' ?>" href="/admin/ia_agent.php"><i class="bi bi-cpu"></i> <?= t('Config IA') ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item <?= $currentPage === 'set_webhook.php' ? 'active' : '' ?>" href="/set_webhook.php"><i class="bi bi-telegram"></i> <?= t('Webhook TG') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'chat_telegram.php' ? 'active' : '' ?>" href="/chat_telegram.php"><i class="bi bi-chat-dots"></i> <?= t('Chat TG') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'telegram_bot_interactions.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_bot_interactions.php"><i class="bi bi-robot"></i> <?= t('Bot Telegram') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'telegram_welcome.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_welcome.php"><i class="bi bi-person-plus"></i> <?= t('Bienvenida') ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item <?= $currentPage === 'translate_message.php' ? 'active' : '' ?>" href="/translate_message.php"><i class="bi bi-translate"></i> <?= t('Traductor') ?></a></li>
                            <li><a class="dropdown-item <?= $currentPage === 'admin_send_message.php' ? 'active' : '' ?>" href="/admin_send_message.php"><i class="bi bi-lightning"></i> <?= t('Enviar Directo') ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item <?= $currentPage === 'system.php' ? 'active' : '' ?>" href="/admin/system.php"><i class="bi bi-hdd-stack"></i> <?= t('Sistema') ?></a></li>
                        </ul>
                    </li>
                    <?php endif; ?>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle-military dropdown-toggle lang-selector" href="#" data-bs-toggle="dropdown" title="<?= t('Idioma') ?>">
                            <?php
                            $currentLangData = array_filter($activeLanguages, fn($l) => $l['language_code'] === $currentLang);
                            $currentLangData = reset($currentLangData);
                            if ($currentLang === 'es' || !$currentLangData) {
                                echo '<span>🇲🇽</span>';
                            } else {
                                echo '<span>' . htmlspecialchars($currentLangData['flag_emoji']) . '</span>';
                            }
                            ?>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-military dropdown-menu-end">
                            <li>
                                <a class="dropdown-item <?= $currentLang === 'es' ? 'active' : '' ?>" href="?lang=es">
                                    🇲🇽 <?= t('Español') ?>
                                </a>
                            </li>
                            <?php foreach ($activeLanguages as $lang): ?>
                                <?php if ($lang['language_code'] !== 'es'): ?>
                            <li>
                                <a class="dropdown-item <?= $currentLang === $lang['language_code'] ? 'active' : '' ?>" href="?lang=<?= urlencode($lang['language_code']) ?>">
                                    <?= htmlspecialchars($lang['flag_emoji']) ?> <?= t($lang['language_name']) ?>
                                </a>
                            </li>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <button class="btn" id="theme-toggle" title="<?= t('Cambiar tema') ?>">
                            <i class="bi bi-moon-fill"></i>
                        </button>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main <?= $currentPage === 'profile.php' ? 'active' : '' ?>" href="/profile.php">
                            <i class="bi bi-person"></i> <?= t('Perfil') ?>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-main" href="/logout.php">
                            <i class="bi bi-box-arrow-left"></i> <?= t('Salir') ?>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <main class="main-content">
