<div id="tab-overview" class="tab-content active">
    <div class="grid">
        <!-- Estado -->
        <div class="card">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h2>Estado del Bot <span id="live-indicator" class="live-indicator" title="Verde: Conectado | Rojo: Error de API"></span></h2>
                <button onclick="killBot()" class="btn-remove" style="padding: 4px 8px; font-size: 0.8rem;" title="Reinicio Forzado (Kill)">
                    <i class="fas fa-skull"></i> KILL
                </button>
            </div>
            <p><span class="status-dot"></span> Online</p>
            <small>Uptime: <span id="status-uptime"><%= Math.floor(botStatus.uptime / 60) %></span> min</small>
            
            <!-- GRÁFICO DE RECURSOS -->
            <div style="height: 120px; margin-top: 15px; width: 100%;"><canvas id="resourceChart"></canvas></div>

            <div style="margin-top: 15px; display: flex; gap: 5px;">
                <button onclick="resetDiscord()" class="btn-save" style="flex: 1; padding: 5px; font-size: 0.8rem; background: #333; border: 1px solid #5865F2; color: #5865F2;" title="Reiniciar Discord"><i class="fab fa-discord"></i></button>
                <button onclick="resetTwitch()" class="btn-save" style="flex: 1; padding: 5px; font-size: 0.8rem; background: #333; border: 1px solid #9146FF; color: #9146FF;" title="Reiniciar Twitch"><i class="fab fa-twitch"></i></button>
                <button onclick="resetKick()" class="btn-save" style="flex: 1; padding: 5px; font-size: 0.8rem; background: #333; border: 1px solid #00ff00; color: #00ff00;" title="Reiniciar Kick"><b>K</b></button>
                <button onclick="resetYouTube()" class="btn-save" style="flex: 1; padding: 5px; font-size: 0.8rem; background: #333; border: 1px solid #FF0000; color: #FF0000;" title="Reiniciar YouTube"><i class="fab fa-youtube"></i></button>
                <button onclick="openTTSPlayer()" class="btn-save" style="flex: 1; padding: 5px; font-size: 0.8rem; background: #333; border: 1px solid #D4AF37; color: #D4AF37;" title="Abrir TTS Player"><i class="fas fa-bullhorn"></i></button>
            </div>
        </div>
        <div class="card">
            <h2>Multistream</h2>
            <p>
                <i class="fab fa-twitch" style="color: #9146FF; width: 20px;"></i> Twitch: <span id="status-twitch" class="<%= botStatus.twitch ? 'text-online' : 'text-offline' %>"><%= botStatus.twitch ? 'Conectado' : 'Desconectado' %></span><br>
                <b style="color: #00ff00; display: inline-block; width: 20px; text-align: center;">K</b> Kick: <span id="status-kick" class="<%= botStatus.kick ? 'text-online' : 'text-offline' %>"><%= botStatus.kick ? 'Conectado' : 'Desconectado' %></span><br>
                <i class="fab fa-youtube" style="color: #FF0000; width: 20px;"></i> YouTube: <span id="status-youtube" class="<%= botStatus.youtube ? 'text-online' : 'text-offline' %>"><%= botStatus.youtube_status || 'Desconectado' %></span><br>
                <i class="fab fa-discord" style="color: #5865F2; width: 20px;"></i> Discord: <span id="status-discord" class="<%= botStatus.discord ? 'text-online' : 'text-offline' %>"><%= botStatus.discord_status %></span><br>
                <i class="fas fa-layer-group" style="color: #D4AF37; width: 20px;"></i> Overlay: <span id="status-overlay" class="<%= (locals.botStatus && botStatus.overlay) ? 'text-online' : 'text-offline' %>"><%= (locals.botStatus && botStatus.overlay) ? 'Conectado (' + botStatus.overlay_count + ')' : 'Desconectado' %></span><br>
                <i class="fas fa-bullhorn" style="color: #D4AF37; width: 20px;"></i> TTS Player: <span id="status-tts" class="<%= botStatus.tts_connected ? 'text-online' : 'text-offline' %>"><%= botStatus.tts_connected ? 'Conectado' : 'Desconectado' %></span>
            </p>
        </div>

        <!-- Solicitudes de Acceso -->
        <% if (pendingUsers && pendingUsers.length > 0) { %>
        <div class="card" style="grid-column: span 2; border-left-color: #ff4444;">
            <h2 style="color: #ff4444;">🔔 Solicitudes de Acceso Pendientes</h2>
            <ul class="user-list">
                <% pendingUsers.forEach(function(pUser) { %>
                    <li class="user-item">
                        <span><strong><%= pUser.email %></strong> <small>(<%= new Date(pUser.created_at).toLocaleDateString() %>)</small></span>
                        <form action="/admin/approve" method="POST" style="display:inline;">
                            <input type="hidden" name="user_id" value="<%= pUser.id %>">
                            <button type="submit" name="action" value="approve" class="btn-approve">✅ Aprobar</button>
                            <button type="submit" name="action" value="reject" class="btn-remove">❌ Rechazar</button>
                        </form>
                    </li>
                <% }); %>
            </ul>
        </div>
        <% } %>

        <div class="card">
            <h2>👥 Últimos Usuarios</h2>
            <% if (users && users.length > 0) { %>
                <ul class="user-list">
                    <% users.forEach(function(user) { %>
                        <li class="user-item" oncontextmenu="showContextMenu(event, '<%= user.username %>')" style="cursor: context-menu;" title="Click derecho para gestionar rol">
                            <span>
                                <strong><%= user.display_name || user.username %></strong>
                                <br><small style="color: #666">Hace <%= Math.floor((new Date() - new Date(user.last_seen)) / 60000) %> min</small>
                            </span>
                            <span class="role-badge"><%= user.roles ? user.roles.nombre : 'Viewer' %></span>
                        </li>
                    <% }); %>
                </ul>
            <% } else { %>
                <p style="color: #666;">No hay actividad reciente.</p>
            <% } %>
        </div>
        
        <!-- Monitor TTS (Vista General - Restaurado) -->
        <div class="card">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h2>🗣️ Cola TTS en Vivo</h2>
            </div>
            <div id="tts-guilds-overview" style="margin-top: 1rem; max-height: 300px; overflow-y: auto;">
                <p style="color: #666; text-align: center;">Cargando...</p>
            </div>
        </div>

        <!-- Terminal de Logs (Vista General) -->
        <div class="card" style="grid-column: 1 / -1;">
            <h2>📟 Terminal del Sistema</h2>
            <div class="terminal" id="log-terminal-overview">
                <% if (logs && logs.length > 0) { %>
                    <% logs.reverse().forEach(function(log) { %>
                        <% 
                            let logClass = '';
                            if (log.type === 'error') logClass = 'log-error';
                            else if (log.message.toLowerCase().includes('discord')) logClass = 'log-discord';
                            else if (log.message.toLowerCase().includes('twitch')) logClass = 'log-twitch';
                        %>
                        <div class="log-entry <%= logClass %>">
                            <span class="log-time">[<%= new Date(log.created_at).toLocaleTimeString() %>]</span>
                            <span><%= log.message %></span>
                        </div>
                    <% }); %>
                <% } else { %>
                    <div class="log-entry">Esperando logs del sistema...</div>
                <% } %>
            </div>
        </div>
    </div>
</div>