{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Telegram Bots{% endblock %}

{% block extra_head %}
{% include "partials/workspace_ui_head.html" %}
{% endblock %}

{% block admin_content %}
<div id="telegram-admin-data"
     data-max-bots="{{ max_bots }}"
     data-bot-count="{{ bot_count }}">
    <p class="blocks-workspace-help mb-3">
        Maximum bots for this tenant: <strong>{{ bot_count }}</strong> / <strong>{{ max_bots }}</strong>
        (change under plugin settings). Other plugins consume inbound traffic via
        <code>telegram.message</code> and reply with <code>telegram.send</code> including <code>bot_id</code>.
    </p>
    <ol class="mb-4 list-inside list-decimal space-y-2 text-foreground">
        <li>Create a bot in Telegram with <a href="https://t.me/BotFather" target="_blank" rel="noopener">@BotFather</a> (<code>/newbot</code>) — note the <strong>@username</strong> and token.</li>
        <li>Add the bot here with that token — the webhook is registered automatically (use the row action only if you need to re-register after a domain change).</li>
        <li>Open the bot’s Telegram link (shown in the <strong>Telegram</strong> column, e.g. <code>t.me/YourBot</code>) and send any message (e.g. <code>/start</code> or <code>hello</code>).</li>
        <li>That chat appears under <strong>Active Chats</strong> and in <strong>Send test message → Recipient</strong>.</li>
        <li>New chats start as <strong>Pending</strong> when approval is required (plugin settings / per-bot): review the <strong>Conversation</strong> below, then <strong>Approve</strong> or <strong>Block</strong>. Only approved chats reach other plugins via <code>telegram.message</code>.</li>
        <li>With <strong>Self-enrollment</strong> on (plugin settings), unlinked chats get a one-time link to <code>/plugins/telegram/enroll</code>. Completing it while signed in creates a row under <a href="/plugins/telegram/user_links">Linked users</a>.</li>
    </ol>

    {{ crud::shell_open(config_url="/plugins/telegram/assets/admin/bots_list.json", mount_id="telegram-bots-list", custom_mount=true) }}
    <div class="blocks-workspace-table" role="region" aria-label="Telegram bots; scroll horizontally if needed" tabindex="0">
        <table>
            <thead></thead>
            <tbody>
                    <tr><td colspan="8" class="crud-empty-state text-center py-5 text-muted">Loading bots…</td></tr>
            </tbody>
        </table>
    </div>
    {{ crud::shell_close() }}

    <section class="blocks-workspace-panel" aria-labelledby="telegram-send-title">
            <h2 id="telegram-send-title" class="mb-4 text-lg font-semibold text-foreground">Send test message</h2>
            <form id="telegram-send-form" class="space-y-4">
                <div class="space-y-2">
                    <label for="send-bot-id">Bot</label>
                    <select id="send-bot-id" required>
                        <option value="">-- Select bot --</option>
                    </select>
                </div>
                <div class="space-y-2">
                    <label for="send-recipient">Recipient</label>
                    <select id="send-recipient" required>
                        <option value="">-- Select a chat --</option>
                    </select>
                    <p class="blocks-workspace-help">
                        People and groups that have messaged the selected bot. New chats appear after they send any message.
                    </p>
                </div>
                <div class="hidden space-y-2" id="send-custom-chat-wrap">
                    <label for="send-chat-id">Custom chat ID</label>
                    <input type="text" id="send-chat-id" placeholder="-100123456789 or 123456789" autocomplete="off">
                </div>
                <div class="space-y-2">
                    <label for="send-text">Message</label>
                    <textarea id="send-text" rows="3" required placeholder="Hello from Blocks!"></textarea>
                </div>
                <button type="submit" class="blocks-button blocks-button-primary">
                    <i class="fas fa-paper-plane"></i> Send
                </button>
            </form>
    </section>

    {{ crud::shell_open(config_url="/plugins/telegram/assets/admin/chats_list.json", mount_id="telegram-chats-list") }}
    <div class="blocks-workspace-table" role="region" aria-label="Telegram chats; scroll horizontally if needed" tabindex="0">
        <table>
            <thead></thead>
            <tbody>
                <tr><td colspan="8" class="crud-empty-state text-center py-5 text-muted">Loading chats…</td></tr>
            </tbody>
        </table>
    </div>
    {{ crud::shell_close() }}

    <section class="blocks-workspace-panel" id="telegram-thread-card" aria-labelledby="telegram-thread-title">
            <h2 id="telegram-thread-title" class="mb-2 text-lg font-semibold text-foreground">Conversation</h2>
            <p class="blocks-workspace-help mb-4">
                Consolidated inbound + outbound messages for one chat. Open via the <i class="fas fa-comments"></i> action on any chat row, or pick a chat below.
            </p>
            <div class="mb-4 space-y-2">
                <label for="thread-chat-select">Chat</label>
                <select id="thread-chat-select">
                    <option value="">-- Select a chat --</option>
                </select>
            </div>
            <div id="telegram-thread" class="max-h-[420px] min-h-24 overflow-y-auto rounded-lg border border-divider p-3" aria-live="polite">
                <p class="text-muted">No conversation selected.</p>
            </div>
    </section>
</div>

<div id="telegram-bot-modal" class="crud-modal" aria-hidden="true">
    <div class="modal-content modal-sm">
        <div class="modal-header">
            <h2 id="telegram-bot-modal-title">Add Bot</h2>
            <button type="button" class="close-modal" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="telegram-bot-form-fields"></div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/plugins/telegram/assets/js/bots_list.js"></script>
{% endblock %}