<div id="tab-timers-chat" class="tab-content">
    <div class="card">
        <h2>💬 Timers de Chat (Spam Automático)</h2>
        <p style="color: #888;">Mensajes que se envían automáticamente cada cierto tiempo (Redes, Discord, etc).</p>

        <!-- Formulario Nuevo Timer -->
        <div style="background: #1a1a1a; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; border: 1px solid #333;">
            <h3 style="margin-top: 0;">➕ Nuevo Mensaje</h3>
            <form action="/config/chat-timers" method="POST">
                <input type="text" name="name" placeholder="Nombre (ej: Redes Sociales)" required>
                
                <!-- Emoji Picker Toggle -->
                <div style="position: relative; margin-bottom: 10px;">
                    <button type="button" id="emoji-toggle" class="btn-emoji" title="Abrir Emojis">😀 Abrir Emojis</button>
                    <div id="emoji-picker-container" style="display: none; position: absolute; top: 40px; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.5);">
                        <emoji-picker class="dark"></emoji-picker>
                    </div>
                </div>

                <textarea id="timer-msg-input" name="message" placeholder="El mensaje a enviar..." rows="3" style="width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 10px; border-radius: 4px; box-sizing: border-box;" required></textarea>
                
                <div style="display: flex; gap: 1rem; align-items: center; margin-top: 10px;">
                    <div style="flex: 1;">
                        <label>Intervalo (min):</label>
                        <input type="number" name="interval_minutes" value="30" min="5" style="margin-bottom: 0;">
                    </div>
                    <div style="flex: 2; display: flex; gap: 15px; align-items: center;">
                        <label><input type="checkbox" name="platforms" value="twitch" checked> Twitch</label>
                        <label><input type="checkbox" name="platforms" value="discord"> Discord</label>
                    </div>
                </div>
                <button type="submit" class="btn-add" style="margin-top: 1rem; width: 100%;">Crear Timer</button>
            </form>
        </div>

        <!-- Lista de Timers -->
        <h3>Timers Activos</h3>
        <ul class="user-list">
            <% (chatTimers || []).forEach(function(timer) { %>
                <li class="user-item" style="align-items: center;">
                    <div>
                        <strong><%= timer.name %></strong> <small style="color: #D4AF37;">(<%= timer.interval_minutes %> min)</small><br>
                        <small style="color: #888;"><%= timer.message %></small>
                    </div>
                    <form action="/config/chat-timers/delete" method="POST" style="display:inline;">
                        <input type="hidden" name="id" value="<%= timer.id %>">
                        <button type="submit" class="btn-remove">🗑️</button>
                    </form>
                </li>
            <% }); %>
        </ul>
    </div>
</div>