{% extends "base.html" %}
{% 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" onclick="openSubscriptions()">Мои подписки</button>
                <a href="/channels/import" class="btn btn-outline-secondary">Импорт</a>
            </div>
        </form>
    </div>
</div>

{% if channels or show_all %}
<div class="d-flex gap-2 align-items-center flex-wrap mb-3">
    <a href="/channels" class="btn btn-sm {{ 'btn-primary' if not show_all else 'btn-outline-primary' }}">Активные</a>
    <a href="/channels?view=all" class="btn btn-sm {{ 'btn-primary' if show_all else 'btn-outline-primary' }}">Все каналы</a>
    <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">
            <button type="submit" class="btn btn-secondary btn-sm">Собрать все каналы</button>
        </form>
    </span>
</div>
<!-- Desktop: table -->
<div class="table-responsive d-none d-md-block">
<table class="table table-striped table-hover table-sm channels-table">
    <thead>
        <tr>
            <th>ID канала</th>
            <th>Название</th>
            <th>Username</th>
            <th>Тип</th>
            <th>Статус</th>
            <th>Сообщений</th>
            <th>Подписчики</th>
            <th>Фильтр</th>
            <th>Действия</th>
        </tr>
    </thead>
    <tbody>
        {% for ch in channels %}
        {% set st = latest_stats.get(ch.channel_id) if latest_stats else None %}
        <tr{% if ch.is_filtered %} class="opacity-50"{% endif %}>
            <td>{{ ch.channel_id }}</td>
            <td>{{ ch.title or "—" }}</td>
            <td>{% if ch.username %}<a href="https://t.me/{{ ch.username }}" target="_blank" rel="noopener">@{{ ch.username }}</a>{% else %}—{% endif %}</td>
            <td>{% if ch.channel_type == "channel" %}{% if not ch.username %}Канал <span title="Приватный">&#128274;</span>{% else %}Канал{% endif %}{% elif ch.channel_type == "supergroup" %}{% if not ch.username %}Супергруппа <span title="Приватная">&#128274;</span>{% else %}Супергруппа{% endif %}{% elif ch.channel_type == "gigagroup" %}{% if not ch.username %}Гигагруппа <span title="Приватная">&#128274;</span>{% else %}Гигагруппа{% endif %}{% elif ch.channel_type == "group" %}{% if not ch.username %}Группа <span title="Приватная">&#128274;</span>{% else %}Группа{% endif %}{% elif ch.channel_type == "forum" %}{% if not ch.username %}Форум <span title="Приватный">&#128274;</span>{% else %}Форум{% endif %}{% elif ch.channel_type == "monoforum" %}Монофорум{% elif ch.channel_type == "restricted" %}<span class="text-danger">Ограничен</span>{% elif ch.channel_type == "scam" %}<span class="text-danger">Скам &#9888;&#65039;</span>{% elif ch.channel_type == "fake" %}<span class="text-danger">Фейк &#9888;&#65039;</span>{% elif ch.channel_type == "unavailable" %}<span class="text-muted">Недоступен</span>{% else %}<span class="text-muted">Непроверен</span>{% endif %}</td>
            <td>
              {% if ch.is_filtered %}<span class="badge-filtered" title="Отфильтрован">&#9679;</span>
              {% elif ch.is_active %}<span class="badge-active">&#9679;</span>
              {% else %}<span class="badge-inactive">&#9679;</span>{% endif %}
            </td>
            <td>{{ ch.message_count }}</td>
            <td>{{ st.subscriber_count if st and st.subscriber_count is not none else "—" }}</td>
            <td>
                {% if ch.is_filtered %}
                    {% set flag_emoji = {
                        "low_uniqueness": ("&#128424;&#65039;", "Низкая уникальность контента"),
                        "low_subscriber_ratio": ("&#128201;", "Мало подписчиков"),
                        "low_subscriber_manual": ("&#9995;", "Мало подписчиков (абс.)"),
                        "manual": ("&#128683;", "Ручная фильтрация"),
                        "cross_channel_spam": ("&#128226;", "Кросс-канальный спам"),
                        "non_cyrillic": ("&#127760;", "Не кириллический контент"),
                        "chat_noise": ("&#128172;", "Шум чата"),
                        "username_changed": ("&#128256;", "Сменил юзернейм")
                    } %}
                    {% if ch.filter_flags %}
                        {% for flag in ch.filter_flags.split(',') %}
                            {% set f = flag.strip() %}
                            {% if f in flag_emoji %}
                                <span title="{{ flag_emoji[f][1] }}" style="cursor:default;font-size:1.1em">{{ flag_emoji[f][0] }}</span>
                            {% else %}
                                <span title="{{ f }}" style="cursor:default">&#128683;</span>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <span title="Отфильтрован" style="cursor:default">&#128683;</span>
                    {% endif %}
                {% else %}
                    —
                {% endif %}
            </td>
            <td class="text-nowrap">
                {% if ch.is_filtered %}
                <form method="post" action="/channels/{{ ch.id }}/filter-toggle" class="d-inline">
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="Вернуть">&#128257;</button>
                </form>
                {% if ch.message_count > 0 %}
                <form method="post" action="/channels/{{ ch.channel_id }}/purge-messages" class="d-inline" onsubmit="return confirm('Удалить {{ ch.message_count }} сообщений из этого канала?')">
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Очистить сообщения">&#129529;</button>
                </form>
                {% endif %}
                {% endif %}
                <span id="collect-btn-{{ ch.id }}">
                    <form action="/channels/{{ ch.id }}/collect" method="post"
                          hx-post="/channels/{{ ch.id }}/collect"
                          hx-target="#collect-btn-{{ ch.id }}"
                          hx-swap="outerHTML"
                          class="d-inline">
                        <button type="submit" class="btn btn-outline-primary btn-sm emoji-btn" title="Загрузить">&#11015;&#65039;</button>
                    </form>
                </span>
                <form method="post" action="/channels/{{ ch.id }}/stats" class="d-inline">
                    <button type="submit" class="btn btn-outline-primary btn-sm emoji-btn" title="Обновить статистику">&#128202;</button>
                </form>
                <form method="post" action="/channels/{{ ch.id }}/toggle" class="d-inline">
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="{{ 'Отключить' if ch.is_active else 'Включить' }}">
                        {{ "⏏️" if ch.is_active else "▶️" }}
                    </button>
                </form>
                <form method="post" action="/channels/{{ ch.id }}/delete" class="d-inline" onsubmit="return confirm('Вы уверены, что хотите удалить этот канал?')">
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Удалить">&#128465;&#65039;</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Mobile: cards -->
<div class="d-md-none mobile-cards">
    {% for ch in channels %}
    {% set st = latest_stats.get(ch.channel_id) if latest_stats else None %}
    <div class="card mb-2{% if ch.is_filtered %} opacity-50{% endif %}">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <div class="min-w-0 flex-fill">
                    <div class="d-flex align-items-center gap-1 mb-1">
                        {% if ch.is_filtered %}<span class="badge-filtered">&#9679;</span>
                        {% elif ch.is_active %}<span class="badge-active">&#9679;</span>
                        {% else %}<span class="badge-inactive">&#9679;</span>{% endif %}
                        <strong class="text-truncate">{{ ch.title or "—" }}</strong>
                    </div>
                    <small class="text-muted">
                        {% if ch.username %}<a href="https://t.me/{{ ch.username }}" target="_blank" rel="noopener">@{{ ch.username }}</a> &middot; {% endif %}
                        ID: {{ ch.channel_id }} &middot; {{ ch.message_count }} сообщ.
                    </small>
                </div>
            </div>
            <div class="card-actions">
                {% if ch.is_filtered %}
                <form method="post" action="/channels/{{ ch.id }}/filter-toggle" class="d-inline">
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="Вернуть">&#128257;</button>
                </form>
                {% if ch.message_count > 0 %}
                <form method="post" action="/channels/{{ ch.channel_id }}/purge-messages" class="d-inline" onsubmit="return confirm('Удалить {{ ch.message_count }} сообщений из этого канала?')">
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Очистить сообщения">&#129529;</button>
                </form>
                {% endif %}
                {% endif %}
                <span id="collect-btn-m-{{ ch.id }}">
                    <form action="/channels/{{ ch.id }}/collect" method="post"
                          hx-post="/channels/{{ ch.id }}/collect"
                          hx-target="#collect-btn-m-{{ ch.id }}"
                          hx-swap="outerHTML"
                          class="d-inline">
                        <button type="submit" class="btn btn-outline-primary btn-sm emoji-btn" title="Загрузить">&#11015;&#65039;</button>
                    </form>
                </span>
                <form method="post" action="/channels/{{ ch.id }}/stats" class="d-inline">
                    <button type="submit" class="btn btn-outline-primary btn-sm emoji-btn" title="Обновить статистику">&#128202;</button>
                </form>
                <form method="post" action="/channels/{{ ch.id }}/toggle" class="d-inline">
                    <button type="submit" class="btn btn-outline-secondary btn-sm emoji-btn" title="{{ 'Отключить' if ch.is_active else 'Включить' }}">
                        {{ "⏏️" if ch.is_active else "▶️" }}
                    </button>
                </form>
                <form method="post" action="/channels/{{ ch.id }}/delete" class="d-inline" onsubmit="return confirm('Вы уверены, что хотите удалить этот канал?')">
                    <button type="submit" class="btn btn-outline-danger btn-sm emoji-btn" title="Удалить">&#128465;&#65039;</button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<p>Нет добавленных каналов.</p>
{% endif %}

<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" onclick="addSelected()">Добавить выбранные</button>
            </div>
        </div>
    </div>
</div>

<script>
function openSubscriptions() {
    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>";
        });
}

function addSelected() {
    var form = document.getElementById("bulk-form");
    if (form) {
        form.submit();
    }
}
</script>
{% endblock %}