{% extends "base.html" %}
{% from "_macros.html" import icon, filter_flags, channel_actions %}
{% from "_macros_ui.html" import status_dot %}
{% 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>

{% 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"
              hx-disabled-elt="find button">
            <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="tga-table-striped-hover channels-table">
    <thead>
        <tr>
            <th>ID канала</th>
            <th>Название</th>
            <th>Username</th>
            <th>Описание</th>
            <th>Тип</th>
            <th>Статус</th>
            <th>Сообщений</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><small>{% if ch.about %}{{ ch.about[:60] }}{% if ch.about|length > 60 %}…{% endif %}{% else %}—{% endif %}</small></td>
            <td>{% if ch.channel_type == "channel" %}{% if not ch.username %}Канал <span title="Приватный">{{ icon("private") }}</span>{% else %}Канал{% endif %}{% elif ch.channel_type == "supergroup" %}{% if not ch.username %}Супергруппа <span title="Приватная">{{ icon("private") }}</span>{% else %}Супергруппа{% endif %}{% elif ch.channel_type == "gigagroup" %}{% if not ch.username %}Гигагруппа <span title="Приватная">{{ icon("private") }}</span>{% else %}Гигагруппа{% endif %}{% elif ch.channel_type == "group" %}{% if not ch.username %}Группа <span title="Приватная">{{ icon("private") }}</span>{% else %}Группа{% endif %}{% elif ch.channel_type == "forum" %}{% if not ch.username %}Форум <span title="Приватный">{{ icon("private") }}</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">Скам {{ icon("warning") }}</span>{% elif ch.channel_type == "fake" %}<span class="text-danger">Фейк {{ icon("warning") }}</span>{% elif ch.channel_type == "unavailable" %}<span class="text-muted">Недоступен</span>{% else %}<span class="text-muted">Непроверен</span>{% endif %}{% if ch.has_comments %} <span title="Есть комментарии">{{ icon("comments") }}</span>{% endif %}</td>
            <td>
              {{ status_dot(ch) }}
            </td>
            <td>{{ ch.message_count }}</td>
            <td>
                {%- set sub = st.subscriber_count if st and st.subscriber_count is not none else none -%}
                {%- set prev_sub = prev_subscriber_counts.get(ch.channel_id) if prev_subscriber_counts else none -%}
                {%- if sub is not none -%}
                    {{ sub }}
                    {%- if prev_sub is not none -%}
                        {%- if sub > prev_sub -%}
                            <span class="text-success ms-1" title="Рост: +{{ sub - prev_sub }}">{{ icon("trend_up") }}</span>
                        {%- elif sub < prev_sub -%}
                            <span class="text-danger ms-1" title="Падение: {{ sub - prev_sub }}">{{ icon("trend_down") }}</span>
                        {%- else -%}
                            <span class="text-muted ms-1" title="Без изменений">{{ icon("trend_flat") }}</span>
                        {%- endif -%}
                    {%- endif -%}
                {%- else -%}—{%- endif -%}
            </td>
            <td>{{ "%.0f"|format(st.avg_views) if st and st.avg_views is not none else "—" }}</td>
            <td>{{ "%.0f"|format(st.avg_reactions) if st and st.avg_reactions is not none else "—" }}</td>
            <td>{{ "%.0f"|format(st.avg_forwards) if st and st.avg_forwards is not none else "—" }}</td>
            <td>
                {% if ch.is_filtered %}
                    {{ filter_flags(ch.filter_flags) }}
                {% else %}
                    —
                {% endif %}
            </td>
            <td class="text-nowrap">
                {{ channel_actions(ch) }}
            </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">
                        {{ status_dot(ch) }}
                        <strong class="text-truncate">{{ ch.title or "—" }}</strong>
                        {% if ch.has_comments %}<span title="Есть комментарии">{{ icon("comments") }}</span>{% endif %}
                    </div>
                    {% if ch.about %}<small class="d-block text-muted mb-1" title="{{ ch.about }}">{{ ch.about[:60] }}{% if ch.about|length > 60 %}…{% endif %}</small>{% endif %}
                    <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 }} сообщ.
                        {%- if st -%}
                            {%- if st.subscriber_count is not none %}
                                &middot; {{ st.subscriber_count }}
                                {%- set prev_sub = prev_subscriber_counts.get(ch.channel_id) if prev_subscriber_counts else none -%}
                                {%- if prev_sub is not none -%}
                                    {%- if st.subscriber_count > prev_sub %}<span class="text-success" title="Рост">{{ icon("trend_up") }}</span>
                                    {%- elif st.subscriber_count < prev_sub %}<span class="text-danger" title="Падение">{{ icon("trend_down") }}</span>
                                    {%- else %}<span class="text-muted">{{ icon("trend_flat") }}</span>
                                    {%- endif -%}
                                {%- endif %} подп.
                            {%- endif -%}
                            {%- if st.avg_views is not none %} &middot; {{ icon("view") }} {{ "%.0f"|format(st.avg_views) }}{%- endif -%}
                            {%- if st.avg_reactions is not none %} &middot; ❤️ {{ "%.0f"|format(st.avg_reactions) }}{%- endif -%}
                            {%- if st.avg_forwards is not none %} &middot; ↪ {{ "%.0f"|format(st.avg_forwards) }}{%- endif -%}
                        {%- endif -%}
                    </small>
                </div>
            </div>
            <div class="card-actions">
                {{ channel_actions(ch, prefix="m-") }}
            </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" 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 %}