{% extends "base.html" %}
{% from "_macros_ui.html" import loading %}
{% block title %}Каналы — TG Agent{% endblock %}
{% block content %}
<h1>Каналы</h1>

<div class="card mb-4">
    <div class="card-header fw-semibold">Добавить канал</div>
    <div class="card-body">
        <form method="post" action="/channels/add" data-busy>
            <div class="mb-3">
                <label class="form-label">Username или ссылка</label>
                <input type="text" class="form-control" name="identifier" required placeholder="Введите username или ссылку">
                <div class="form-text">Форматы: <code>@username</code>, <code>t.me/username</code>, <code>https://t.me/username</code>, <code>https://t.me/+invite_hash</code>, <code>числовой ID</code></div>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <button type="submit" class="btn btn-primary flex-fill">Добавить</button>
                <button type="button" class="btn btn-secondary" id="subscriptions-btn" onclick="openSubscriptions()">Мои подписки</button>
                <a href="/channels/import" class="btn btn-outline-secondary">Импорт</a>
            </div>
        </form>
    </div>
</div>

<div class="d-flex gap-2 align-items-center flex-wrap mb-3">
    <span class="flex-fill"></span>
    <form method="post" action="/channels/stats/all" class="d-inline" data-busy>
        <button type="submit" class="btn btn-outline-primary btn-sm">Обновить статистику</button>
    </form>
    <span id="collect-all-btn">
        <form method="post" action="/channels/collect-all" class="d-inline"
              hx-post="/channels/collect-all"
              hx-target="#collect-all-btn"
              hx-swap="outerHTML"
              hx-disabled-elt="find button">
            <button type="submit" class="btn btn-secondary btn-sm">Собрать все каналы</button>
        </form>
    </span>
</div>

{# Skeleton paints instantly; the channel table (heavy JOIN+COUNT) loads lazily (#756).
   Desktop table AND mobile cards live together in the fragment so the per-row collect
   buttons' OOB targets (-{pk} and -m-{pk}) both exist in the DOM. #}
<div hx-get="/channels/fragments/list{{ '?view=all' if show_all else '' }}" hx-trigger="load" hx-swap="innerHTML">
    {{ loading(class="my-4") }}
</div>

<div class="modal fade" id="subscriptions-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Мои подписки</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="subscriptions-list" class="table-responsive">Загрузка...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="add-selected-btn" onclick="addSelected()">Добавить выбранные</button>
            </div>
        </div>
    </div>
</div>

<script>
function openSubscriptions() {
    var btn = document.getElementById("subscriptions-btn");
    setAsyncButtonBusy(btn, true, 'Мои подписки');
    var modal = new bootstrap.Modal(document.getElementById("subscriptions-modal"));
    var list = document.getElementById("subscriptions-list");
    list.innerHTML = "Загрузка...";
    modal.show();
    fetch("/channels/dialogs")
        .then(function(r) { return r.json(); })
        .then(function(dialogs) {
            if (!dialogs.length) {
                list.innerHTML = "<p>Нет каналов в подписках.</p>";
                return;
            }
            var form = document.createElement('form');
            form.id = 'bulk-form';
            form.method = 'post';
            form.action = '/channels/add-bulk';

            var table = document.createElement('table');
            table.className = 'table table-sm';
            var thead = document.createElement('thead');
            var headerRow = document.createElement('tr');
            ['', 'Название', 'Username', 'ID'].forEach(function(text) {
                var th = document.createElement('th');
                th.textContent = text;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);

            var tbody = document.createElement('tbody');
            dialogs.forEach(function(d) {
                var row = document.createElement('tr');

                var cellCheck = document.createElement('td');
                var checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'form-check-input';
                checkbox.name = 'channel_ids';
                checkbox.value = String(d.channel_id);
                if (d.already_added) {
                    checkbox.disabled = true;
                    checkbox.checked = true;
                }
                cellCheck.appendChild(checkbox);
                row.appendChild(cellCheck);

                var cellTitle = document.createElement('td');
                cellTitle.textContent = (d.title || '—') + (d.already_added ? ' (добавлен)' : '');
                row.appendChild(cellTitle);

                var cellUsername = document.createElement('td');
                cellUsername.textContent = d.username ? '@' + d.username : '—';
                row.appendChild(cellUsername);

                var cellId = document.createElement('td');
                cellId.textContent = String(d.channel_id);
                row.appendChild(cellId);

                tbody.appendChild(row);
            });
            table.appendChild(tbody);
            form.appendChild(table);

            list.innerHTML = '';
            list.appendChild(form);
        })
        .catch(function() {
            list.innerHTML = "<p>Ошибка загрузки подписок.</p>";
        })
        .finally(function() {
            setAsyncButtonBusy(btn, false);
        });
}

function addSelected() {
    var form = document.getElementById("bulk-form");
    if (form) {
        var btn = document.getElementById("add-selected-btn");
        setAsyncButtonBusy(btn, true, 'Добавить выбранные');
        form.submit();
    }
}
</script>
{% endblock %}