<div id="tab-config" class="tab-content">
    <div class="grid">
        <!-- Configuración de Discord (Rifts & TTS) -->
        <div class="card" style="grid-column: span 2; border-left-color: #5865F2;">
            <h2>⚙️ Conexión Discord</h2>
            <form action="/config/discord" method="POST">
                <input type="hidden" name="form_type" value="connection">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Servidor (Guild):</label>
                        <select name="guild_id" id="guild-select" onchange="updateChannels(); updateTimerGuildId(this.value);" required>
                            <option value="">-- Selecciona un Servidor --</option>
                            <!-- Se llena con JS -->
                        </select>
                    </div>
                    <div>
                        <label>Canal de Voz (Alertas):</label>
                        <select name="voice_channel_id" id="channel-select" required>
                            <option value="">-- Primero selecciona Servidor --</option>
                        </select>
                    </div>
                    <div>
                        <label>Canal de Texto (Auto-TTS):</label>
                        <select name="text_channel_id" id="text-channel-select">
                            <option value="">-- Opcional (Desactivado) --</option>
                        </select>
                        <small style="color: #666; font-size: 0.8rem;">Todo lo escrito aquí será leído automáticamente.</small>
                    </div>
                </div>

                <!-- Selector de Voces -->
                <div style="margin-top: 1rem;">
                    <label>Voz del Bot (TTS):</label>
                    <select name="selected_voice">
                        <option value="es-MX" <%= discordConfig.selected_voice === 'es-MX' ? 'selected' : '' %>>🇲🇽/🇺🇸 Latino - Neural Mujer (A)</option>
                        <option value="es-US-Male-B" <%= discordConfig.selected_voice === 'es-US-Male-B' ? 'selected' : '' %>>🇲🇽/🇺🇸 Latino - Neural Hombre (B)</option>
                        <option value="es-US-Male-C" <%= discordConfig.selected_voice === 'es-US-Male-C' ? 'selected' : '' %>>🇲🇽/🇺🇸 Latino - Neural Hombre (C)</option>
                        <option value="es-ES" <%= discordConfig.selected_voice === 'es-ES' ? 'selected' : '' %>>🇪🇸 España - Neural Mujer</option>
                        <option value="es-ES-Male" <%= discordConfig.selected_voice === 'es-ES-Male' ? 'selected' : '' %>>🇪🇸 España - Neural Hombre</option>
                        <option value="en-US" <%= discordConfig.selected_voice === 'en-US' ? 'selected' : '' %>>🇺🇸 USA - Neural Mujer</option>
                        <option value="en-US-Male" <%= discordConfig.selected_voice === 'en-US-Male' ? 'selected' : '' %>>🇺🇸 USA - Neural Hombre</option>
                    </select>
                </div>

                <!-- Opción Auto-TTS Externo -->
                <div style="margin-top: 1rem; padding: 10px; background: #1a1a1a; border: 1px solid #333; border-radius: 4px;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: #D4AF37; font-weight: bold;">
                        <input type="checkbox" name="external_tts_enabled" <%= discordConfig.external_tts_enabled ? 'checked' : '' %> style="width: 20px; height: 20px; margin: 0; accent-color: #D4AF37;">
                        <span>🔊 Leer Chat de Twitch/Kick en Voz de Discord</span>
                    </label>
                    <small style="color: #888; display: block; margin-top: 5px; margin-left: 34px;">Si desactivas esto, el chat solo se escuchará en el TTS Player Web (OBS), no en el canal de voz.</small>
                </div>

                <!-- Botones de Control -->
                <div style="margin-top: 1rem;">
                    <label>Texto de Prueba TTS:</label>
                    <div style="display: flex; gap: 10px;">
                        <!-- NUEVO: Selector rápido para probar voces sin guardar -->
                        <select id="tts-test-voice" style="width: 180px; margin-bottom: 0; background: #111; border: 1px solid #444;">
                            <option value="">(Usar Configurada)</option>
                            <option value="es-MX">Mujer (A)</option>
                            <option value="es-US-Male-B">Hombre (B) ✨</option>
                            <option value="es-US-Male-C">Hombre (C)</option>
                        </select>
                        <input type="text" id="tts-test-text" placeholder="Escribe algo para probar..." value="Esta es una prueba de audio." style="margin-bottom: 0;">
                        <button type="button" onclick="testTTS()" class="btn-save" style="width: auto; background: #333; border: 1px solid #D4AF37; color: #D4AF37;"><i class="fas fa-volume-up"></i></button>
                    </div>
                </div>
                <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #333; display: flex; gap: 10px;">
                    <button type="button" onclick="resetDiscord()" class="btn-save" style="background: #333; border: 1px solid #ff4444; color: #ff4444;"><i class="fab fa-discord"></i> Reset Discord</button>
                    <button type="button" onclick="resetKick()" class="btn-save" style="background: #333; border: 1px solid #00ff00; color: #00ff00;"><b>K</b> Reset Kick</button>
                    <button type="button" onclick="resetTwitch()" class="btn-save" style="background: #333; border: 1px solid #9146FF; color: #9146FF;"><i class="fab fa-twitch"></i> Reset Twitch</button>
                </div>

                <button type="submit" class="btn-save" style="margin-top: 1rem;">💾 Guardar Configuración</button>
            </form>
        </div>

        <!-- Monitor TTS & Cola -->
        <div class="card" style="grid-column: span 2;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h2>🗣️ Monitor de Cola TTS</h2>
            </div>
            
            <div id="tts-guilds-container" style="margin-top: 1rem;">
                <p style="color: #666; text-align: center;">Cargando estado...</p>
            </div>
        </div>

        <!-- Terminal de Logs (Movida aquí) -->
        <div class="card" style="grid-column: 1 / -1;">
            <h2>📟 Terminal del Sistema</h2>
            <div class="terminal" id="log-terminal-config">
                <% 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>