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

{% block title %}Bots de Telegram{% endblock %}

{% block body %}
<div class="admin-page-header">
    <h1 class="admin-page-title">Bots de Telegram</h1>
</div>

<div class="glass-card" style="margin-bottom:var(--space-6);">
    <h2 class="section-title">Añadir nuevo bot</h2>
    <form method="post" action="{{ path('app_admin_telegram_bot_nuevo') }}" style="display:flex;flex-direction:column;gap:var(--space-4);max-width:480px;">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_telegram_bot_nuevo') }}">
        <div class="form-group">
            <label class="form-label" for="bot_nombre">Nombre identificativo</label>
            <input type="text" id="bot_nombre" name="nombre" class="form-control" placeholder="Ej: Bot principal" maxlength="100" required>
        </div>
        <div class="form-group">
            <label class="form-label" for="bot_token">Token del bot</label>
            <input type="password" id="bot_token" name="token" class="form-control" placeholder="123456:ABC-DEF..." required autocomplete="new-password">
            <p class="form-hint">Obtenlo hablando con <strong>@BotFather</strong> en Telegram. Se almacena fuera del código.</p>
        </div>
        <div>
            <button type="submit" class="btn btn--primary">Crear bot</button>
        </div>
    </form>
</div>

{% if bots is empty %}
<div class="glass-card" style="text-align:center;padding:var(--space-8);color:var(--color-label-2);">
    No hay bots configurados aún.
</div>
{% else %}
<div class="glass-card">
    <h2 class="section-title">Bots configurados</h2>
    <table class="admin-table">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Username</th>
                <th>Token</th>
                <th>Estado</th>
                <th>Creado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
        {% for item in bots %}
        {% set bot = item.bot %}
        <tr>
            <td><strong>{{ bot.nombre }}</strong></td>
            <td>{% if bot.username %}@{{ bot.username }}{% else %}<span style="color:var(--color-label-2);">—</span>{% endif %}</td>
            <td>
                {% if item.hasToken %}
                    <span style="color:var(--color-success);">✓ Configurado</span>
                {% else %}
                    <span style="color:var(--color-danger);">✗ Sin token</span>
                {% endif %}
            </td>
            <td>
                {% if bot.activo %}
                    <span class="badge badge--success">Activo</span>
                {% else %}
                    <span class="badge badge--danger">Inactivo</span>
                {% endif %}
            </td>
            <td>{{ bot.creadoEn|date('d/m/Y') }}</td>
            <td style="display:flex;gap:var(--space-2);flex-wrap:wrap;">
                <button type="button" class="btn btn--ghost btn--sm"
                    onclick="document.getElementById('form-token-{{ bot.id }}').hidden = !document.getElementById('form-token-{{ bot.id }}').hidden">
                    Cambiar token
                </button>
                <form method="post" action="{{ path('app_admin_telegram_bot_toggle', {id: bot.id}) }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_telegram_bot_toggle_' ~ bot.id) }}">
                    <button type="submit" class="btn btn--ghost btn--sm">
                        {{ bot.activo ? 'Desactivar' : 'Activar' }}
                    </button>
                </form>
                <form method="post" action="{{ path('app_admin_telegram_bot_eliminar', {id: bot.id}) }}"
                    onsubmit="return confirm('¿Eliminar el bot «{{ bot.nombre }}» y su token? Los grupos conectados quedarán sin bot asignado.')">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_telegram_bot_eliminar_' ~ bot.id) }}">
                    <button type="submit" class="btn btn--danger btn--sm">Eliminar</button>
                </form>
            </td>
        </tr>
        <tr id="form-token-{{ bot.id }}" hidden>
            <td colspan="6" style="background:var(--color-bg-2);padding:var(--space-4);">
                <form method="post" action="{{ path('app_admin_telegram_bot_token', {id: bot.id}) }}"
                    style="display:flex;gap:var(--space-3);align-items:flex-end;">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_telegram_bot_token_' ~ bot.id) }}">
                    <div class="form-group" style="flex:1;margin:0;">
                        <label class="form-label" for="new-token-{{ bot.id }}">Nuevo token</label>
                        <input type="password" id="new-token-{{ bot.id }}" name="token" class="form-control"
                            placeholder="123456:ABC-DEF..." required autocomplete="new-password">
                    </div>
                    <button type="submit" class="btn btn--primary btn--sm">Guardar</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}