{% extends 'admin/base.html.twig' %}

{% block title %}Notificaciones{% endblock %}

{% block page_title %}Notificaciones Telegram{% endblock %}

{% block body %}
<div class="admin-show-layout">
    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Enviar mensaje</h2>
        </div>

        {% if grupos|length == 0 %}
            <p class="admin-empty">No hay grupos con Telegram conectado.</p>
        {% else %}
            <form method="post" action="{{ path('app_admin_notificacion_enviar') }}" class="admin-notif-form">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_notificacion_enviar') }}">

                <div class="admin-form-group">
                    <label class="admin-form-label" for="destino">Destinatario</label>
                    <select name="destino" id="destino" class="admin-form-select">
                        <option value="todos">— Todos los grupos ({{ grupos|length }}) —</option>
                        {% for tg in grupos %}
                            <option value="{{ tg.id }}">{{ tg.grupo.nombre }} ({{ tg.nombreIdentificativo }})</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="admin-form-group">
                    <label class="admin-form-label" for="mensaje">
                        Mensaje
                        <span class="admin-form-hint">Admite HTML básico de Telegram: &lt;b&gt;, &lt;i&gt;, &lt;a&gt;, &lt;code&gt;</span>
                    </label>
                    <textarea name="mensaje" id="mensaje" rows="6" maxlength="4096"
                              class="admin-form-textarea" placeholder="Escribe el mensaje aquí…" required></textarea>
                    <div class="admin-form-charcount"><span id="charCount">0</span> / 4096</div>
                </div>

                <button type="submit" class="btn btn-primary"
                        onclick="return confirm('¿Enviar este mensaje a los grupos seleccionados?')">
                    Enviar notificación
                </button>
            </form>
        {% endif %}
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <h2 class="admin-card-title">Grupos conectados</h2>
        </div>
        {% if grupos|length == 0 %}
            <p class="admin-empty">Ningún grupo tiene Telegram vinculado todavía.</p>
        {% else %}
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Grupo</th>
                        <th>Identificativo</th>
                        <th>Chat ID</th>
                        <th>Conectado el</th>
                    </tr>
                </thead>
                <tbody>
                {% for tg in grupos %}
                    <tr>
                        <td>
                            <a href="{{ path('app_admin_grupo_show', {id: tg.grupo.id}) }}" class="admin-link">
                                {{ tg.grupo.nombre }}
                            </a>
                        </td>
                        <td class="admin-muted">{{ tg.nombreIdentificativo }}</td>
                        <td class="admin-muted"><code>{{ tg.chatId }}</code></td>
                        <td class="admin-muted">{{ tg.fechaConexion|date('d/m/Y') }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</div>

<script>
const ta = document.getElementById('mensaje');
const counter = document.getElementById('charCount');
if (ta && counter) {
    ta.addEventListener('input', () => { counter.textContent = ta.value.length; });
}
</script>
{% endblock %}