{% extends "base.html" %}
{% from "_macros.html" import icon %}
{% from "_macros_ui.html" import loading %}
{% block title %}Диалоги — TG Agent{% endblock %}
{% block content %}
{% if refresh_warning %}
<div class="alert alert-warning" role="alert">{{ refresh_warning }}</div>
{% endif %}
{% if refresh_command_id %}
<div id="dialog-refresh-status" class="alert alert-info" role="status">Обновление диалогов выполняется…</div>
<script>
(function () {
    var status = document.getElementById('dialog-refresh-status');
    var commandId = '{{ refresh_command_id|e }}';
    var polls = 0;
    function poll() {
        if (++polls > 70) {
            status.className = 'alert alert-warning';
            status.textContent = 'Не удалось дождаться результата обновления диалогов.';
            return;
        }
        fetch('/telegram-commands/' + encodeURIComponent(commandId))
            .then(function (response) { return response.json(); })
            .then(function (command) {
                if (command.status === 'succeeded') {
                    if (command.result_payload && command.result_payload.partial) {
                        status.className = 'alert alert-warning';
                        status.textContent = command.result_payload.warning ||
                            'Обновление диалогов завершилось частично; кеш не обновлён.';
                    } else {
                        status.remove();
                        history.replaceState(null, '', '/dialogs/?phone=' + encodeURIComponent('{{ selected_phone|e }}'));
                        var list = document.getElementById('dialogs-list');
                        if (list && window.htmx) { htmx.trigger(list, 'load'); }
                    }
                } else if (command.status === 'failed' || command.status === 'cancelled') {
                    status.className = 'alert alert-danger';
                    status.textContent = command.error || 'Обновление диалогов не удалось.';
                } else {
                    setTimeout(poll, 1000);
                }
            })
            .catch(function () { setTimeout(poll, 1000); });
    }
    setTimeout(poll, 1000);
})();
</script>
{% endif %}
<div class="d-flex align-items-center gap-3 mb-1">
    <h1 class="mb-0">Диалоги</h1>
    <a href="/dialogs/create-channel" class="btn btn-outline-primary btn-sm">+ Создать канал</a>
</div>

<div class="d-flex flex-column flex-md-row align-items-md-start gap-3 mb-4">
    {% if accounts %}
    <div class="d-flex flex-column gap-1">
        <a id="photo-loader-link" class="btn btn-outline-primary btn-sm align-self-start" href="/dialogs/photos{% if selected_phone %}?phone={{ selected_phone|urlencode }}{% endif %}">Открыть Photo Loader</a>
        <small class="text-muted">Если аккаунт не выбран, откроется первый доступный профиль.</small>
    </div>
    {% else %}
    <div class="d-flex flex-column gap-1">
        <span class="btn btn-outline-secondary btn-sm disabled" aria-disabled="true">Открыть Photo Loader</span>
        <small class="text-muted">Сначала добавьте Telegram-аккаунт в настройках.</small>
    </div>
    {% endif %}

    {% if accounts %}
    <div class="mb-0" style="max-width:400px">
        <label class="form-label">Аккаунт</label>
        {# No hx-push-url here: the address bar must keep the real /dialogs/ URL, not the
           bare /dialogs/fragments/list partial (a reload/bookmark would render chrome-less).
           The "Обновить диалоги" form lives INSIDE the swapped #dialogs-list fragment so its
           hidden phone always matches the account currently shown (see dialogs/_list.html). #}
        <select name="phone" id="account-select" class="form-select"
                hx-get="/dialogs/fragments/list"
                hx-include="this"
                hx-target="#dialogs-list"
                hx-swap="innerHTML"
                hx-trigger="change"
                hx-indicator="#dialogs-loading">
            <option value="" {% if not selected_phone %}selected{% endif %}>Выберите аккаунт</option>
            {% for acc in accounts %}
            <option value="{{ acc }}" {% if acc == selected_phone %}selected{% endif %}>{{ acc }}</option>
            {% endfor %}
        </select>
        <span id="dialogs-loading" class="htmx-indicator d-inline-block mt-2">{{ icon("loading") }} Загрузка диалогов…</span>
    </div>
    {% endif %}
</div>

{% if not accounts %}
<p>Нет подключённых аккаунтов. Добавьте аккаунт в <a href="/settings">Настройках</a>.</p>
{% else %}
{# The dialog list (a Telegram/cache fetch) loads lazily; changing the account
   above swaps only this container, not the whole page (#756). #}
<div id="dialogs-list"
     hx-get="/dialogs/fragments/list{% if selected_phone %}?phone={{ selected_phone|urlencode }}{% endif %}"
     hx-trigger="load" hx-swap="innerHTML">
    {{ loading(class="my-4") }}
</div>
{% endif %}

{% include "dialogs/_history.html" %}

{% if accounts %}
<script>
// The account selector swaps only #dialogs-list, so any account-scoped control
// OUTSIDE that fragment must be kept in sync here. The Photo Loader link is such
// a control; without this it would keep the phone from the initial page render
// and send the user to the wrong account after a switch (#878 review).
(function() {
    var sel = document.getElementById('account-select');
    var link = document.getElementById('photo-loader-link');
    if (!sel || !link) { return; }
    sel.addEventListener('change', function() {
        var phone = sel.value;
        link.href = '/dialogs/photos' + (phone ? '?phone=' + encodeURIComponent(phone) : '');
    });
})();
</script>
{% endif %}
{% endblock %}