{% extends "base.html" %}
{% set _ut = update_tab|default('panel') %}

{% block title %}{% if _ut == 'xui' %}Панели 3X-UI и Xray{% elif _ut == 'mtg' %}Обновление MTG Panel{% else %}Обновление (Панель){% endif %}{% endblock %}
{% block title_header %}{% if _ut == 'xui' %}Панели 3X-UI и Xray{% elif _ut == 'mtg' %}Обновление MTG Panel{% else %}Обновление (Панель){% endif %}{% endblock %}

{% block content %}
<style>
    .upd-hero {
        border: 1px solid rgba(124, 103, 255, .34);
        border-radius: 14px;
        background: linear-gradient(120deg, rgba(99,108,232,.5), rgba(136,92,220,.45));
        padding: 16px 20px;
        box-shadow: 0 10px 30px rgba(28, 24, 84, .35);
    }
    .upd-card {
        background: radial-gradient(560px 120px at 0% 0%, rgba(67, 94, 255, .14), transparent 38%), #0a1020;
        border: 1px solid rgba(100, 116, 139, .35);
        border-radius: 12px;
        padding: 14px;
    }
    .upd-drop {
        border: 1px dashed rgba(148, 163, 184, .4);
        border-radius: 12px;
        background: rgba(30, 41, 59, .55);
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #cbd5e1;
        cursor: pointer;
        transition: all .18s ease;
    }
    .upd-drop:hover { border-color: rgba(129, 140, 248, .7); background: rgba(51, 65, 85, .65); }
    .upd-drop.drag {
        border-color: rgba(125, 211, 252, .9);
        background: rgba(30, 58, 138, .35);
        box-shadow: 0 0 0 1px rgba(56, 189, 248, .45), 0 0 20px rgba(59,130,246,.2) inset;
    }
    .upd-btn-main {
        width: 100%;
        border: 1px solid rgba(125, 211, 252, .4);
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(96,165,250,.9), rgba(167,139,250,.9));
        color: #e5e7eb;
        font-weight: 700;
        padding: 10px 12px;
    }
    .upd-log {
        white-space: pre-wrap;
        border: 1px solid rgba(71, 85, 105, .55);
        background: rgba(2, 6, 23, .65);
        border-radius: 10px;
        padding: 10px 12px;
        color: #cbd5e1;
        font-size: 12px;
        min-height: 72px;
    }
    .upd-progress-wrap {
        border: 1px solid rgba(71, 85, 105, .55);
        border-radius: 999px;
        background: rgba(15, 23, 42, .9);
        height: 12px;
        overflow: hidden;
    }
    .upd-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, rgba(96,165,250,.95), rgba(167,139,250,.95));
        transition: width .15s ease;
    }
    .upd-file-list {
        border: 1px solid rgba(71, 85, 105, .55);
        border-radius: 10px;
        background: rgba(2, 6, 23, .5);
        padding: 10px 12px;
        max-height: 220px;
        overflow: auto;
        font-size: 12px;
        color: #cbd5e1;
    }
    .upd-check-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
    .upd-check-row input[type="checkbox"] { accent-color: #60a5fa; }
    .upd-diff-title { color: #e2e8f0; font-weight: 700; margin-top: 10px; margin-bottom: 4px; }
    .upd-restart-note {
        border: 1px solid rgba(245, 158, 11, .45);
        background: rgba(180, 83, 9, .2);
        color: #fde68a;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12px;
    }
    .upd-target-btn.active {
        border-color: rgba(125, 211, 252, .85) !important;
        color: #e0f2fe !important;
        background: rgba(30, 64, 175, .45) !important;
    }
    .upd-release-link {
        border: 1px solid rgba(125, 211, 252, .35);
        color: #7dd3fc;
        background: rgba(14, 116, 144, .18);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 12px;
        text-decoration: none;
    }
    .upd-release-link:hover { color: #cffafe; border-color: rgba(165, 243, 252, .5); }
    .upd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .upd-table th, .upd-table td { border-bottom: 1px solid rgba(51, 65, 85, .65); padding: 8px 8px; text-align: left; }
    .upd-table th { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
    .upd-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        background: rgba(30, 64, 175, .35);
        border: 1px solid rgba(96, 165, 250, .45);
        color: #bfdbfe;
    }
    .upd-status {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }
    .upd-status-ok { color: #86efac; border: 1px solid rgba(22, 163, 74, .55); background: rgba(22, 101, 52, .25); }
    .upd-status-warn { color: #fde68a; border: 1px solid rgba(245, 158, 11, .55); background: rgba(146, 64, 14, .25); }
    .upd-status-err { color: #fca5a5; border: 1px solid rgba(239, 68, 68, .55); background: rgba(127, 29, 29, .25); }

    /* Блок «Панели 3X-UI на серверах» */
    #xuiRemoteCard .upd-xui-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    #xuiRemoteGithubHint.upd-xui-hint {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.5;
        color: #94a3b8;
        padding: 8px 11px;
        border-radius: 9px;
        background: rgba(15, 23, 42, .55);
        border: 1px solid rgba(51, 65, 85, .55);
        max-width: 52rem;
    }
    .upd-xui-wrap {
        border-radius: 10px;
        border: 1px solid rgba(51, 65, 85, .55);
        overflow: hidden;
        background: rgba(2, 6, 23, .35);
    }
    .upd-xui-table.upd-table { font-size: 12px; }
    .upd-xui-table.upd-table th {
        background: rgba(15, 23, 42, .75);
        border-bottom: 1px solid rgba(71, 85, 105, .55);
        padding: 10px 10px;
        white-space: nowrap;
    }
    .upd-xui-table.upd-table td {
        vertical-align: top;
        padding: 11px 10px;
        border-bottom: 1px solid rgba(51, 65, 85, .45);
    }
    .upd-xui-table.upd-table tbody tr:hover td {
        background: rgba(30, 41, 59, .28);
    }
    .upd-xui-server-name { font-weight: 600; color: #f1f5f9; letter-spacing: .01em; }
    .upd-xui-server-id {
        display: inline-block;
        margin-top: 4px;
        font-size: 10px;
        color: #64748b;
        font-family: ui-monospace, monospace;
    }
    .upd-xui-pill {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        margin-left: 4px;
        vertical-align: middle;
    }
    .upd-xui-ver-stack { display: flex; flex-direction: column; gap: 7px; min-width: 10rem; max-width: 15rem; }
    .upd-xui-ver-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 7px 9px;
        border-radius: 9px;
        background: linear-gradient(145deg, rgba(30, 41, 59, .65), rgba(15, 23, 42, .45));
        border: 1px solid rgba(71, 85, 105, .48);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    }
    .upd-xui-ver-line--empty { opacity: .75; border-style: dashed; }
    .upd-xui-ver-line--click {
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }
    .upd-xui-ver-line--click:hover {
        border-color: rgba(96, 165, 250, .55);
        background: linear-gradient(145deg, rgba(51, 65, 85, .78), rgba(30, 41, 59, .58));
        box-shadow: 0 0 0 1px rgba(59, 130, 246, .22);
    }
    .upd-xui-ver-line--click:focus {
        outline: none;
        border-color: rgba(147, 197, 253, .65);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, .35);
    }
    .upd-xui-ver-tag {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        font-weight: 600;
        color: #f8fafc;
        letter-spacing: .03em;
    }
    .upd-xui-chip {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        padding: 2px 7px;
        border-radius: 5px;
    }
    .upd-xui-chip-latest {
        color: #bfdbfe;
        background: rgba(30, 64, 175, .35);
        border: 1px solid rgba(59, 130, 246, .4);
    }
    .upd-xui-chip-pre {
        color: #fde68a;
        background: rgba(146, 64, 14, .35);
        border: 1px solid rgba(245, 158, 11, .38);
    }
    .upd-xui-chip-panel {
        color: #e0e7ff;
        background: rgba(67, 56, 202, .32);
        border: 1px solid rgba(129, 140, 248, .42);
    }
    .upd-xui-chip-panel-muted {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 2px 7px;
        border-radius: 5px;
        color: #94a3b8;
        background: rgba(51, 65, 85, .35);
        border: 1px solid rgba(71, 85, 105, .45);
    }
    .upd-xui-sync {
        margin-left: auto;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .04em;
        padding: 2px 7px;
        border-radius: 999px;
        flex-shrink: 0;
    }
    .upd-xui-sync-ok {
        color: #6ee7b7;
        background: rgba(6, 78, 59, .4);
        border: 1px solid rgba(52, 211, 153, .35);
    }
    .upd-xui-sync-up {
        color: #fcd34d;
        background: rgba(120, 53, 15, .45);
        border: 1px solid rgba(251, 191, 36, .45);
    }
    .upd-xui-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 9rem;
    }
    .upd-xui-act {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        font-size: 11px !important;
        padding: 6px 11px !important;
        border-radius: 8px !important;
        line-height: 1.2;
    }
    .upd-xui-act > i { opacity: .88; font-size: 14px; flex-shrink: 0; }
    .upd-xui-act:disabled {
        opacity: .42;
        cursor: not-allowed;
        filter: grayscale(0.25);
    }
    /* Ячейки «установлена / установлен»: центр и крупнее (перебиваем .upd-table td { text-align:left }) */
    .upd-xui-table.upd-table td.upd-xui-td-installed {
        text-align: center !important;
        vertical-align: middle !important;
    }
    .upd-xui-installed-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px 0;
    }
    .upd-xui-table.upd-table td.upd-xui-td-installed .upd-xui-installed-ver {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .04em;
        color: #f1f5f9;
    }
</style>

<div class="max-w-5xl xl:max-w-6xl space-y-4">
    <div class="upd-hero">
        {% if _ut == 'xui' %}
        <h3 class="text-white text-2xl font-semibold mb-1"><i class="bi bi-cloud-download me-2 text-sky-300/90"></i>Панели 3X-UI и Xray на серверах</h3>
        <p class="text-indigo-100 text-sm m-0">Версии с API панелей и GitHub; клики по плашкам запускают обновление на выбранном сервере.</p>
        {% elif _ut == 'mtg' %}
        <h3 class="text-white text-2xl font-semibold mb-1"><i class="bi bi-box-seam me-2"></i>Обновление MTG Panel</h3>
        <p class="text-indigo-100 text-sm m-0">ZIP в папку mtg-adminpanel, upstream (git + docker) и ноды MTG.</p>
        {% else %}
        <h3 class="text-white text-2xl font-semibold mb-1"><i class="bi bi-upload me-2"></i>Обновление панели</h3>
        <p class="text-indigo-100 text-sm m-0">Загрузка и применение обновления кода основного проекта (.zip)</p>
        {% endif %}
    </div>

    <div id="updSectionZip" class="space-y-4 {% if _ut == 'xui' %}hidden{% endif %}">
    <div id="uploadCard" class="upd-card space-y-3">
        {% if _ut == 'mtg' %}
        <div class="text-gray-400 text-[11px] uppercase tracking-wide">MTG Panel</div>
        {% else %}
        <div class="text-gray-400 text-[11px] uppercase tracking-wide">Основной проект</div>
        {% endif %}
        <div class="flex flex-wrap gap-2 items-center">
            {# d-none: Bootstrap, перебивает .btn; Tailwind hidden на кнопках не скрывал из-за display у .btn #}
            <button type="button" id="targetPanelBtn" class="btn btn-secondary upd-target-btn {% if _ut == 'panel' %}active{% endif %} {% if _ut != 'panel' %}d-none{% endif %}">Обновление панели (v{{ current_version }})</button>
            <button type="button" id="targetMtgBtn" class="btn btn-secondary upd-target-btn {% if _ut == 'mtg' %}active{% endif %} {% if _ut != 'mtg' %}d-none{% endif %}">Обновление MTG Panel (v{{ mtg_version }})</button>
            <a id="mtgReleaseLink" class="upd-release-link {% if _ut != 'mtg' %}d-none{% endif %}" href="https://github.com/MaksimTMB/mtg-adminpanel/releases" target="_blank" rel="noopener noreferrer">Releases</a>
        </div>
        <div id="targetHint" class="text-xs text-gray-400 {% if _ut == 'mtg' or _ut == 'panel' %}d-none{% endif %}">Сейчас выбрано: Панель (основной проект)</div>
    </div>

    <div class="upd-card space-y-3">
        <h4 id="uploadCardTitle" class="text-white text-base font-semibold m-0"><i class="bi bi-cloud-arrow-up me-2"></i>Загрузить обновление (<span id="targetTitle">Панель</span>)</h4>
        <div id="uploadControlsWrap">
        <input id="updateFileInput" type="file" accept=".zip" class="hidden">
        <button type="button" id="updateDropBtn" class="upd-drop w-full">
            <div>
                <div class="text-2xl mb-1"><i class="bi bi-file-earmark-zip"></i></div>
                <div id="selectedFileName" class="font-semibold">Нажмите для выбора файла</div>
                <div class="text-xs text-gray-400 mt-1">Поддерживается только формат .zip (или перетащите сюда)</div>
            </div>
        </button>
        <button id="previewBtn" class="btn btn-secondary w-full"><i class="bi bi-search me-1"></i>Предпросмотр файлов (dry-run)</button>
        <div class="upd-progress-wrap">
            <div id="uploadProgressBar" class="upd-progress-bar"></div>
        </div>
        <div id="uploadProgressText" class="text-xs text-gray-400">Прогресс: 0%</div>
        <div id="previewActions" class="hidden flex flex-wrap gap-2">
            <button type="button" id="selectAllPreviewBtn" class="btn btn-secondary btn-sm">Выбрать все</button>
            <button type="button" id="clearAllPreviewBtn" class="btn btn-secondary btn-sm">Снять все</button>
            <span class="text-xs text-gray-400 self-center">Чекбоксы влияют на кнопку «Загрузить и обновить код»</span>
        </div>
        <div id="previewOut" class="upd-file-list hidden"></div>
        <label class="inline-flex items-center gap-2 text-xs text-gray-300 mt-1">
            <input id="autoRestartAfterUpload" type="checkbox" class="form-check-input" checked>
            Автоматически перезапустить бота и веб-админку после применения
        </label>
        <button id="uploadApplyBtn" class="upd-btn-main"><i class="bi bi-upload me-1"></i>Загрузить и обновить код</button>
        </div>
        <button id="mtgUpstreamUpdateBtn" class="btn btn-secondary w-full hidden"><i class="bi bi-arrow-repeat me-1"></i>Обновить MTG Panel (git pull + docker compose)</button>
        <div id="updateOut" class="upd-log"></div>
    </div>

    <div id="mtgNodesCard" class="upd-card hidden">
        <div class="flex items-center justify-between mb-2">
            <div>
                <div class="text-white text-base font-semibold"><i class="bi bi-hdd-network me-2"></i>MTG Proxy On Nodes</div>
                <div class="text-xs text-gray-400 mt-1">
                    Панель:
                    <span id="mtgCurrentVersion" class="upd-badge">v{{ mtg_version }}</span>
                    <span id="mtgLatestBadge" class="upd-status upd-status-ok hidden">up-to-date</span>
                </div>
            </div>
        </div>
        <div class="overflow-auto">
            <table class="upd-table">
                <thead>
                    <tr>
                        <th>Нода</th>
                        <th>Host</th>
                        <th>MTG образ</th>
                        <th>Собран</th>
                        <th>Агент</th>
                        <th>Статус</th>
                        <th style="text-align:right;">Обновить</th>
                    </tr>
                </thead>
                <tbody id="mtgNodesBody">
                    <tr><td colspan="7" class="text-gray-400">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
        <div class="flex flex-wrap gap-2 mt-3">
            <button id="mtgCheckVersionsBtn" class="btn btn-ghost"><i class="bi bi-arrow-clockwise me-1"></i>Проверить версии</button>
            <button id="mtgPullAllBtn" class="btn btn-secondary"><i class="bi bi-download me-1"></i>Обновить все ноды</button>
        </div>
    </div>

    <div id="releaseNotesCard" class="upd-card">
        <div class="flex items-center justify-between mb-2">
            <h4 class="text-white text-base font-semibold m-0"><i class="bi bi-stars me-2"></i>Что нового в этой версии</h4>
            <label class="inline-flex items-center gap-2 text-xs text-gray-300">
                <input id="autoUpdateToggle" type="checkbox" class="form-check-input" {% if auto_update_on_start %}checked{% endif %}>
                AUTO_UPDATE_ON_START
            </label>
        </div>
        <div class="upd-log">{{ release_notes }}</div>
    </div>

    <div class="upd-restart-note" id="updRestartNote">
        Если галочка «Автоматически перезапустить» включена — перезапуск выполнится сам после загрузки.
        Иначе нажмите «Перезапустить всё» вручную.
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <button id="restartBotBtn" class="btn btn-secondary w-full"><i class="bi bi-arrow-clockwise me-1"></i>Перезапустить только бота</button>
        <button id="restartAllBtn" class="btn btn-danger w-full"><i class="bi bi-arrow-repeat me-1"></i>Перезапустить всё</button>
    </div>

    </div>{# updSectionZip: zip / MTG / release / restart #}

    <div id="xuiRemoteCard" class="upd-card space-y-3 {% if _ut != 'xui' %}hidden{% endif %}">
        <div class="upd-xui-toolbar">
            <div class="flex-1 min-w-[220px]">
                <h4 class="text-white text-base font-semibold m-0 tracking-tight"><i class="bi bi-cloud-download me-2 text-sky-300/90"></i>Панели 3X-UI на серверах</h4>
                <p class="text-xs text-gray-400 mt-1.5 mb-0 max-w-3xl leading-relaxed">
                    Данные с API панели (<code class="text-gray-300">getPanelUpdateInfo</code>, Xray). При отсутствии методов — подстановка с GitHub и страницы <code class="text-gray-300">/panel/</code>.
                    <strong class="text-gray-300">Панель (последняя):</strong> клик по активной плашке запускает на VPS тот же сценарий, что и <code class="text-gray-300">x-ui update</code> в консоли (скрипт x-ui / systemd): скачивание версии, остановка сервиса, миграция БД без потери данных, SSL и <code class="text-gray-300">webBasePath</code> сохраняются, после установки панель снова запускается. Если на плашке <strong class="text-gray-300">API нет</strong> — обновляйте вручную по SSH (<code class="text-gray-300">x-ui update</code>).
                    <strong class="text-gray-300">Xray (последний):</strong> клик по <strong class="text-gray-300">Latest</strong> или <strong class="text-gray-300">Pre-release</strong>
                    (<a class="upd-release-link inline-block mt-0.5" href="https://github.com/XTLS/Xray-core/releases" target="_blank" rel="noopener">XTLS/Xray-core</a>) ставит выбранный тег на этот сервер.
                </p>
                <div id="xuiRemoteGithubHint" class="upd-xui-hint mt-2"></div>
            </div>
            <button type="button" id="xuiRemoteRefreshBtn" class="btn btn-secondary btn-sm whitespace-nowrap shrink-0 shadow-sm">
                <i class="bi bi-arrow-clockwise me-1"></i>Проверить все серверы
            </button>
        </div>
        <div class="upd-xui-wrap overflow-auto">
            <table class="upd-table upd-xui-table">
                <thead>
                    <tr>
                        <th>Сервер</th>
                        <th>Панель (установлена)</th>
                        <th>Панель (последняя)</th>
                        <th>Xray (установлен)</th>
                        <th>Xray (последний)</th>
                        <th style="text-align:right;">Лог</th>
                    </tr>
                </thead>
                <tbody id="xuiRemoteBody">
                    <tr><td colspan="6" class="text-gray-400">Нажмите «Проверить все серверы».</td></tr>
                </tbody>
            </table>
        </div>
        <div>
            <label class="text-xs text-gray-400 block mb-1">Лог действий / журнал панели</label>
            <textarea id="xuiRemoteLogOut" class="upd-log w-full font-mono text-[11px]" rows="10" readonly placeholder="Ответы API и строки лога появятся здесь…"></textarea>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const fileInput = document.getElementById('updateFileInput');
const dropBtn = document.getElementById('updateDropBtn');
const selectedFileName = document.getElementById('selectedFileName');
const out = document.getElementById('updateOut');
const previewOut = document.getElementById('previewOut');
const previewActions = document.getElementById('previewActions');
const progressBar = document.getElementById('uploadProgressBar');
const progressText = document.getElementById('uploadProgressText');
const targetPanelBtn = document.getElementById('targetPanelBtn');
const targetMtgBtn = document.getElementById('targetMtgBtn');
const mtgReleaseLink = document.getElementById('mtgReleaseLink');
const mtgUpstreamUpdateBtn = document.getElementById('mtgUpstreamUpdateBtn');
const mtgNodesCard = document.getElementById('mtgNodesCard');
const mtgNodesBody = document.getElementById('mtgNodesBody');
const uploadCard = document.getElementById('uploadCard');
const uploadCardTitle = document.getElementById('uploadCardTitle');
const uploadControlsWrap = document.getElementById('uploadControlsWrap');
const releaseNotesCard = document.getElementById('releaseNotesCard');
const mtgCurrentVersion = document.getElementById('mtgCurrentVersion');
const mtgLatestBadge = document.getElementById('mtgLatestBadge');
const targetHint = document.getElementById('targetHint');
const targetTitle = document.getElementById('targetTitle');
let selectedTarget = 'panel';
let mtgLatestReleaseTag = '';

function normalizeVer(v) {
    return String(v || '').trim().replace(/^v/i, '');
}

async function loadMtgLatestRelease() {
    try {
        const resp = await fetch('https://api.github.com/repos/MaksimTMB/mtg-adminpanel/releases/latest');
        const data = await resp.json().catch(() => ({}));
        mtgLatestReleaseTag = String(data.tag_name || '').trim();
    } catch {
        mtgLatestReleaseTag = '';
    }
    if (!mtgLatestBadge) return;
    const current = normalizeVer(mtgCurrentVersion?.textContent || '');
    const latest = normalizeVer(mtgLatestReleaseTag);
    mtgLatestBadge.classList.remove('hidden', 'upd-status-ok', 'upd-status-warn', 'upd-status-err');
    if (!latest) {
        mtgLatestBadge.classList.add('upd-status-err');
        mtgLatestBadge.textContent = 'error';
    } else if (current === latest) {
        mtgLatestBadge.classList.add('upd-status-ok');
        mtgLatestBadge.textContent = 'up-to-date';
    } else {
        mtgLatestBadge.classList.add('upd-status-warn');
        mtgLatestBadge.textContent = `update available: v${mtgLatestReleaseTag}`;
    }
}

function setTarget(t) {
    selectedTarget = (t === 'mtg') ? 'mtg' : 'panel';
    targetPanelBtn?.classList.toggle('active', selectedTarget === 'panel');
    targetMtgBtn?.classList.toggle('active', selectedTarget === 'mtg');
    if (targetHint) {
        targetHint.textContent = selectedTarget === 'mtg'
            ? 'Сейчас выбрано: MTG Panel (папка mtg-adminpanel-main)'
            : 'Сейчас выбрано: Панель (основной проект)';
    }
    if (targetTitle) targetTitle.textContent = selectedTarget === 'mtg' ? 'MTG Panel' : 'Панель';
    if (mtgReleaseLink) mtgReleaseLink.classList.toggle('d-none', selectedTarget !== 'mtg');
    if (mtgUpstreamUpdateBtn) mtgUpstreamUpdateBtn.classList.toggle('hidden', selectedTarget !== 'mtg');
    if (mtgNodesCard) mtgNodesCard.classList.toggle('hidden', selectedTarget !== 'mtg');
    if (uploadCard) uploadCard.classList.remove('hidden');
    if (uploadControlsWrap) uploadControlsWrap.classList.toggle('hidden', selectedTarget === 'mtg');
    if (uploadCardTitle) uploadCardTitle.classList.toggle('hidden', selectedTarget === 'mtg');
    if (releaseNotesCard) releaseNotesCard.classList.toggle('hidden', selectedTarget === 'mtg');
    if (selectedTarget === 'mtg' && previewActions) previewActions.classList.add('hidden');
    if (previewOut) previewOut.classList.add('hidden');
    if (selectedTarget === 'mtg') {
        loadMtgLatestRelease();
        loadMtgNodesStatus();
    }
}
targetPanelBtn?.addEventListener('click', () => setTarget('panel'));
targetMtgBtn?.addEventListener('click', () => setTarget('mtg'));

dropBtn?.addEventListener('click', () => fileInput?.click());
fileInput?.addEventListener('change', () => {
    const f = fileInput.files && fileInput.files[0];
    selectedFileName.textContent = f ? f.name : 'Нажмите для выбора файла';
    if (previewOut) previewOut.classList.add('hidden');
    if (previewActions) previewActions.classList.add('hidden');
});

['dragenter', 'dragover'].forEach((evt) => {
    dropBtn?.addEventListener(evt, (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropBtn.classList.add('drag');
    });
});
['dragleave', 'drop'].forEach((evt) => {
    dropBtn?.addEventListener(evt, (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropBtn.classList.remove('drag');
    });
});
dropBtn?.addEventListener('drop', (e) => {
    const files = e.dataTransfer?.files;
    if (!files || !files.length) return;
    const dt = new DataTransfer();
    dt.items.add(files[0]);
    fileInput.files = dt.files;
    selectedFileName.textContent = files[0].name || 'Нажмите для выбора файла';
    if (previewOut) previewOut.classList.add('hidden');
    if (previewActions) previewActions.classList.add('hidden');
});

function setProgress(value) {
    const n = Math.max(0, Math.min(100, Number(value || 0)));
    if (progressBar) progressBar.style.width = `${n}%`;
    if (progressText) progressText.textContent = `Прогресс: ${n}%`;
}

function uploadWithProgress(url, formData) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) {
                setProgress(Math.round((e.loaded / e.total) * 100));
            }
        };
        xhr.onload = () => {
            let data = {};
            try { data = JSON.parse(xhr.responseText || '{}'); } catch {}
            if (xhr.status >= 200 && xhr.status < 300) resolve(data);
            else reject(new Error(data.error || `HTTP ${xhr.status}`));
        };
        xhr.onerror = () => reject(new Error('Ошибка сети при загрузке'));
        xhr.send(formData);
    });
}

document.getElementById('autoUpdateToggle')?.addEventListener('change', async (e) => {
    const enabled = !!e.target.checked;
    const resp = await fetch('/admin/tools/update/auto', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ enabled }),
    });
    if (!resp.ok) {
        alert('Не удалось сохранить настройку');
    }
});

function formatRestartBlock(restart) {
    if (!restart) return [];
    const parts = [];
    parts.push(`restart_ok: ${!!restart.ok}`);
    if (restart.details) parts.push(`\n--- restart ---\n${restart.details}`);
    if (restart.error) parts.push(`restart_error: ${restart.error}`);
    return parts;
}

async function requestServiceRestart(mode, { target = selectedTarget } = {}) {
    const resp = await fetch('/admin/tools/update/restart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mode, target }),
    });
    return resp.json().catch(() => ({}));
}

document.getElementById('uploadApplyBtn')?.addEventListener('click', async () => {
    const f = fileInput?.files && fileInput.files[0];
    if (!f) {
        alert('Выберите .zip файл обновления');
        return;
    }
    if (!String(f.name || '').toLowerCase().endsWith('.zip')) {
        alert('Поддерживается только .zip');
        return;
    }
    out.textContent = 'Загрузка и применение обновления...';
    try {
        setProgress(0);
        const form = new FormData();
        form.append('file', f);
        form.append('target', selectedTarget);
        if (document.getElementById('autoRestartAfterUpload')?.checked) {
            form.append('auto_restart', '1');
        }
        const selected = Array.from(document.querySelectorAll('.js-preview-file:checked'))
            .map((el) => el.getAttribute('data-path'))
            .filter(Boolean);
        if (previewActions && !previewActions.classList.contains('hidden')) {
            if (!selected.length) {
                alert('Выберите хотя бы один файл в предпросмотре');
                return;
            }
            form.append('include_paths', JSON.stringify(selected));
        }
        const data = await uploadWithProgress('/admin/tools/update/upload', form);
        const wantAutoRestart = !!document.getElementById('autoRestartAfterUpload')?.checked;
        let restart = data.restart;
        if (data.ok && wantAutoRestart && (!restart || !restart.ok)) {
            out.textContent = 'Файлы обновлены. Перезапуск сервисов...';
            restart = await requestServiceRestart('all', { target: data.target || selectedTarget });
            data.restart = restart;
        }
        const parts = [];
        parts.push(`ok: ${!!data.ok}`);
        if (data.target) parts.push(`target: ${data.target}`);
        parts.push(`auto_restart: ${wantAutoRestart}`);
        if (data.updated_files !== undefined) parts.push(`updated_files: ${data.updated_files}`);
        if (data.skipped_files !== undefined) parts.push(`skipped_files: ${data.skipped_files}`);
        if (data.code !== undefined) parts.push(`code: ${data.code}`);
        if (data.error) parts.push(`error: ${data.error}`);
        const deps = data.deps_update;
        if (deps) {
            parts.push(`deps_ok: ${!!deps.ok}`);
            if (deps.code !== undefined) parts.push(`deps_code: ${deps.code}`);
            if (deps.error) parts.push(`deps_error: ${deps.error}`);
            if (deps.stdout_tail) parts.push(`\n--- deps stdout ---\n${deps.stdout_tail}`);
            if (deps.stderr_tail) parts.push(`\n--- deps stderr ---\n${deps.stderr_tail}`);
        }
        if (data.stdout_tail) parts.push(`\n--- stdout ---\n${data.stdout_tail}`);
        if (data.stderr_tail) parts.push(`\n--- stderr ---\n${data.stderr_tail}`);
        parts.push(...formatRestartBlock(restart));
        if (data.restart_warning) {
            parts.push(`restart_warning: ${data.restart_warning}`);
        }
        if (wantAutoRestart && data.ok && restart?.ok) {
            parts.push('\nПерезапуск выполнен. Страница может обновиться через несколько секунд.');
        } else if (wantAutoRestart && data.ok && data.restart_warning) {
            parts.push('\nФайлы обновлены; перезапуск частично не удался — нажмите «Перезапустить всё».');
        }
        out.textContent = parts.join('\n');
        setProgress(100);
    } catch (e) {
        out.textContent = `ok: false\nerror: ${e.message || e}`;
        setProgress(0);
    }
});

document.getElementById('previewBtn')?.addEventListener('click', async () => {
    const f = fileInput?.files && fileInput.files[0];
    if (!f) {
        alert('Сначала выберите .zip файл');
        return;
    }
    if (!String(f.name || '').toLowerCase().endsWith('.zip')) {
        alert('Поддерживается только .zip');
        return;
    }
    previewOut.classList.remove('hidden');
    previewOut.textContent = 'Сканирование архива (dry-run)...';
    try {
        setProgress(0);
        const form = new FormData();
        form.append('file', f);
        form.append('target', selectedTarget);
        const data = await uploadWithProgress('/admin/tools/update/preview', form);
        setProgress(100);
        if (!data.ok) {
            previewOut.textContent = `Ошибка: ${data.error || 'unknown'}`;
            return;
        }
        const files = Array.isArray(data.files_to_update) ? data.files_to_update : [];
        const skipped = Array.isArray(data.skipped_files) ? data.skipped_files : [];
        const diff = data.diff || {};
        const changed = Array.isArray(diff.changed) ? diff.changed : [];
        const created = Array.isArray(diff.new) ? diff.new : [];
        const deleted = Array.isArray(diff.deleted) ? diff.deleted : [];
        const unchanged = Array.isArray(diff.unchanged) ? diff.unchanged : [];
        const esc = (s) => String(s)
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;');
        const listChecks = (arr) => arr.length
            ? arr.map((x, i) => `<label class="upd-check-row"><input class="js-preview-file" type="checkbox" data-path="${esc(x)}" checked><span>${esc(x)}</span></label>`).join('')
            : '<div>• (нет)</div>';
        const listPlain = (arr) => arr.length
            ? arr.map((x) => `<div>• ${esc(x)}</div>`).join('')
            : '<div>• (нет)</div>';
        previewOut.innerHTML = `
            <div>К обновлению: ${data.update_count ?? files.length}</div>
            <div>Пропущено: ${data.skip_count ?? skipped.length}</div>
            <div>Цель: ${data.target || selectedTarget}</div>
            <br>
            <div><b>Diff preview</b></div>
            <div>Изменится: ${changed.length}</div>
            <div>Новый: ${created.length}</div>
            <div>Удалён: ${deleted.length}</div>
            <div>Без изменений: ${unchanged.length}</div>
            <br>
            <div><b>Изменится (выберите для применения)</b></div>
            ${listChecks(changed)}
            <br>
            <div><b>Новый (выберите для применения)</b></div>
            ${listChecks(created)}
            <br>
            <div><b>Удалён (в архиве отсутствует)</b></div>
            ${listPlain(deleted)}
            <br>
            <div><b>Без изменений</b></div>
            ${listPlain(unchanged)}
            ${skipped.length ? `<br><div><b>Пропущены</b></div>${listPlain(skipped)}` : ''}
        `;
        if (previewActions) previewActions.classList.remove('hidden');
    } catch (e) {
        previewOut.textContent = `Ошибка dry-run: ${e.message || e}`;
        setProgress(0);
        if (previewActions) previewActions.classList.add('hidden');
    }
});

document.getElementById('selectAllPreviewBtn')?.addEventListener('click', () => {
    document.querySelectorAll('.js-preview-file').forEach((el) => { el.checked = true; });
});
document.getElementById('clearAllPreviewBtn')?.addEventListener('click', () => {
    document.querySelectorAll('.js-preview-file').forEach((el) => { el.checked = false; });
});

document.getElementById('mtgUpstreamUpdateBtn')?.addEventListener('click', async () => {
    if (!confirm('Запустить обновление MTG Panel как в update.sh: git pull + docker compose up -d --build ?')) return;
    out.textContent = 'Запуск обновления MTG Panel (upstream-механизм)...';
    setProgress(0);
    try {
        const resp = await fetch('/admin/tools/update/mtg/run-now', { method: 'POST' });
        const data = await resp.json().catch(() => ({}));
        const parts = [];
        parts.push(`ok: ${!!data.ok}`);
        if (data.target) parts.push(`target: ${data.target}`);
        if (data.code !== undefined) parts.push(`code: ${data.code}`);
        if (data.error) parts.push(`error: ${data.error}`);
        if (data.stdout_tail) parts.push(`\n--- stdout ---\n${data.stdout_tail}`);
        if (data.stderr_tail) parts.push(`\n--- stderr ---\n${data.stderr_tail}`);
        out.textContent = parts.join('\n');
        setProgress(data.ok ? 100 : 0);
    } catch (e) {
        out.textContent = `ok: false\nerror: ${e.message || e}`;
        setProgress(0);
    }
});

async function loadMtgNodesStatus() {
    if (!mtgNodesBody) return;
    mtgNodesBody.innerHTML = `<tr><td colspan="7" class="text-gray-400">Проверка версий...</td></tr>`;
    try {
        const resp = await fetch('/admin/tools/update/mtg/nodes-status');
        const data = await resp.json().catch(() => ({}));
        if (!resp.ok || !data.ok) {
            mtgNodesBody.innerHTML = `<tr><td colspan="7" class="text-red-300">Ошибка: ${data.error || 'failed'}</td></tr>`;
            return;
        }
        const items = Array.isArray(data.items) ? data.items : [];
        if (!items.length) {
            mtgNodesBody.innerHTML = `<tr><td colspan="7" class="text-gray-400">Нет подключённых MTG нод</td></tr>`;
            return;
        }
        const cur = normalizeVer(mtgCurrentVersion?.textContent || '');
        const latest = normalizeVer(mtgLatestReleaseTag);
        mtgNodesBody.innerHTML = items.map((it) => `
            <tr>
                <td><div class="font-semibold text-white">${it.name || ''}</div></td>
                <td class="text-gray-400">${it.host || ''}</td>
                <td><span class="upd-badge">${it.mtg_image || 'unknown'}</span></td>
                <td class="text-gray-300">${it.mtg_built || '—'}</td>
                <td><span class="upd-badge">${it.agent_version || '—'}</span></td>
                <td>${(() => {
                    const img = String(it.mtg_image || '').toLowerCase();
                    const ag = String(it.agent_version || '').trim();
                    if (!img || img === 'unknown' || img === 'error' || ag === '—') return '<span class="upd-status upd-status-err">error</span>';
                    if (latest && cur !== latest) return '<span class="upd-status upd-status-warn">update available</span>';
                    return '<span class="upd-status upd-status-ok">up-to-date</span>';
                })()}</td>
                <td style="text-align:right;">
                    <button class="btn btn-ghost btn-sm js-mtg-pull-one" data-node-id="${it.id}"><i class="bi bi-download me-1"></i>pull</button>
                </td>
            </tr>
        `).join('');
    } catch (e) {
        mtgNodesBody.innerHTML = `<tr><td colspan="6" class="text-red-300">Ошибка: ${e.message || e}</td></tr>`;
    }
}

document.getElementById('mtgCheckVersionsBtn')?.addEventListener('click', loadMtgNodesStatus);

document.getElementById('mtgPullAllBtn')?.addEventListener('click', async () => {
    if (!confirm('Обновить MTG образ на всех подключённых нодах?')) return;
    out.textContent = 'Обновление всех MTG нод...';
    const resp = await fetch('/admin/tools/update/mtg/nodes/pull-all', { method: 'POST' });
    const data = await resp.json().catch(() => ({}));
    const items = Array.isArray(data.items) ? data.items : [];
    out.textContent = `ok: ${!!data.ok}\nupdated: ${items.filter(x => x.ok).length}/${items.length}\n` +
        items.map((x) => `${x.name}: ${x.ok ? 'ok' : ('error: ' + (x.error || 'unknown'))}`).join('\n');
    await loadMtgNodesStatus();
});

document.addEventListener('click', async (e) => {
    const btn = e.target.closest('.js-mtg-pull-one');
    if (!btn) return;
    const nid = btn.getAttribute('data-node-id');
    if (!nid) return;
    btn.disabled = true;
    out.textContent = `Обновление ноды ${nid}...`;
    try {
        const resp = await fetch(`/admin/tools/update/mtg/nodes/${nid}/pull`, { method: 'POST' });
        const data = await resp.json().catch(() => ({}));
        out.textContent = `ok: ${!!data.ok}\nnode_id: ${nid}\n` + (data.error ? `error: ${data.error}` : 'pull done');
    } catch (err) {
        out.textContent = `ok: false\nnode_id: ${nid}\nerror: ${err.message || err}`;
    } finally {
        btn.disabled = false;
        await loadMtgNodesStatus();
    }
});

async function restartMode(mode) {
    const map = {
        panel: { bot: 'только бота', all: 'бот и веб-админку' },
        mtg: { bot: 'только MTG backend', all: 'все сервисы MTG Panel' },
    };
    const targetMap = map[selectedTarget] || map.panel;
    if (!confirm(`Перезапустить ${targetMap[mode] || mode}?`)) return;
    out.textContent = `Перезапуск (${mode})...`;
    const data = await requestServiceRestart(mode);
    const parts = [];
    parts.push(`ok: ${!!data.ok}`);
    if (data.target) parts.push(`target: ${data.target}`);
    if (data.code !== undefined) parts.push(`code: ${data.code}`);
    parts.push(...formatRestartBlock(data));
    if (data.ok && mode === 'all' && selectedTarget === 'panel') {
        parts.push('\nВеб-админка перезапускается с задержкой — страница может обновиться.');
    }
    out.textContent = parts.join('\n');
}
document.getElementById('restartBotBtn')?.addEventListener('click', () => restartMode('bot'));
document.getElementById('restartAllBtn')?.addEventListener('click', () => restartMode('all'));

const xuiRemoteBody = document.getElementById('xuiRemoteBody');
const xuiRemoteLogOut = document.getElementById('xuiRemoteLogOut');
const xuiRemoteGithubHint = document.getElementById('xuiRemoteGithubHint');

function escHtml(s) {
    return String(s ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;');
}

function escAttr(s) {
    return String(s ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('"', '&quot;')
        .replaceAll('<', '&lt;');
}

function appendXuiRemoteLog(line) {
    if (!xuiRemoteLogOut) return;
    const ts = new Date().toLocaleTimeString('ru-RU', { hour12: false });
    xuiRemoteLogOut.value += (xuiRemoteLogOut.value ? '\n' : '') + `[${ts}] ${line}`;
    xuiRemoteLogOut.scrollTop = xuiRemoteLogOut.scrollHeight;
}

/** Установка Xray — тот же API, что у кликабельных плашек Latest / Pre-release. */
async function runXrayInstall(sid, ver, kind) {
    const resp = await fetch(`/admin/tools/update/xui-server/${encodeURIComponent(sid)}/xray-update`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ version: ver, xray_kind: kind || '' }),
    });
    const data = await resp.json().catch(() => ({}));
    appendXuiRemoteLog(`Xray id=${sid}: ${data.ok ? 'ok' : 'fail'} ${data.message || data.error || ''}`);
}

const PANEL_SSH_JOBS_KEY = 'xui_panel_ssh_jobs_v1';
const _panelPollSeen = {};

function rememberPanelSshJob(sid, jobId) {
    try {
        const o = JSON.parse(sessionStorage.getItem(PANEL_SSH_JOBS_KEY) || '{}');
        o[String(sid)] = jobId;
        sessionStorage.setItem(PANEL_SSH_JOBS_KEY, JSON.stringify(o));
    } catch (_) { /* ignore */ }
}

function forgetPanelSshJob(sid) {
    try {
        const o = JSON.parse(sessionStorage.getItem(PANEL_SSH_JOBS_KEY) || '{}');
        delete o[String(sid)];
        sessionStorage.setItem(PANEL_SSH_JOBS_KEY, JSON.stringify(o));
    } catch (_) { /* ignore */ }
}

function pollPanelSshJob(sid, jobId, fromResume) {
    let lastLen = _panelPollSeen[jobId] || 0;
    if (fromResume) appendXuiRemoteLog(`[SSH] Возобновление лога job=${jobId} (сервер id=${sid})…`);
    const tick = async () => {
        try {
            const r = await fetch(`/admin/tools/update/xui-server/${encodeURIComponent(sid)}/panel-update-job/${encodeURIComponent(jobId)}`);
            const d = await r.json().catch(() => ({}));
            if (!r.ok || !d.ok) {
                appendXuiRemoteLog(`[SSH] Статус задачи: ${d.error || r.status}`);
                forgetPanelSshJob(sid);
                delete _panelPollSeen[jobId];
                return;
            }
            const lines = Array.isArray(d.lines) ? d.lines : [];
            if (lines.length > lastLen) {
                lines.slice(lastLen).forEach((ln) => appendXuiRemoteLog(String(ln)));
                lastLen = lines.length;
                _panelPollSeen[jobId] = lastLen;
            }
            const st = d.status || '';
            if (st === 'running') {
                setTimeout(tick, 1500);
                return;
            }
            appendXuiRemoteLog(`[SSH] Конец задачи: ${st}${d.exit_code != null ? ` (код ${d.exit_code})` : ''}${d.error ? ` — ${d.error}` : ''}`);
            forgetPanelSshJob(sid);
            delete _panelPollSeen[jobId];
            loadXuiRemoteTable();
        } catch (err) {
            appendXuiRemoteLog(`[SSH] Опрос: ${err.message || err}`);
            setTimeout(tick, 2500);
        }
    };
    tick();
}

/** Обновление панели: API updatePanel или фоновый SSH «x-ui update». */
async function runPanelUpdate(sid) {
    const resp = await fetch(`/admin/tools/update/xui-server/${encodeURIComponent(sid)}/panel-update`, { method: 'POST' });
    const data = await resp.json().catch(() => ({}));
    if (data.ok && data.mode === 'ssh' && data.job_id) {
        appendXuiRemoteLog(`Панель id=${sid}: ${data.message || 'SSH…'}`);
        rememberPanelSshJob(sid, data.job_id);
        pollPanelSshJob(sid, data.job_id, false);
        return;
    }
    appendXuiRemoteLog(`Панель id=${sid}: ${data.ok ? 'ok' : 'fail'} ${data.message || data.error || ''}`);
}

function formatPanelLatestCell(it, serverId) {
    const sid = Number(serverId) || 0;
    const blocked = it.panel_remote_update_supported === false;
    const skipReason = String(it.panel_skip_reason || '').trim();
    const pvRaw = String(it.panel_latest || '').trim();
    const up = !!it.panel_update_available;
    const syncCls = up ? 'upd-xui-sync-up' : 'upd-xui-sync-ok';
    const syncTxt = up ? '↑' : 'OK';
    const syncTitle = up
        ? 'Есть более новая версия панели на GitHub'
        : 'Совпадает с последним известным тегом или обновление не требуется';
    const skipNote = skipReason
        ? `<div class="text-[10px] text-amber-200/85 mt-1.5 max-w-[14rem] leading-snug">${escHtml(skipReason)}</div>`
        : '';
    if (blocked) {
        const sshOk = !!it.panel_ssh_update_available;
        const t = escAttr(
            skipReason || (sshOk
                ? 'Запуск на сервере x-ui update по SSH из БД: подтверждение y и Enter в меню'
                : 'Нет API updatePanel и нет SSH в БД — обновление только вручную на VPS'),
        );
        if (pvRaw && sshOk) {
            return `<div class="upd-xui-ver-stack"><div class="upd-xui-ver-line upd-xui-ver-line--click js-xui-panel-pick" role="button" tabindex="0" data-server-id="${sid}" title="Обновить по SSH (как x-ui update), лог — внизу страницы"><span class="upd-xui-ver-tag">${escHtml(pvRaw)}</span><span class="upd-xui-chip upd-xui-chip-panel-muted">SSH</span><span class="upd-xui-sync ${syncCls}" title="${escAttr(syncTitle)}">${syncTxt}</span></div>${skipNote}</div>`;
        }
        if (pvRaw) {
            return `<div class="upd-xui-ver-stack"><div class="upd-xui-ver-line upd-xui-ver-line--empty" title="${t}"><span class="upd-xui-ver-tag">${escHtml(pvRaw)}</span><span class="upd-xui-chip upd-xui-chip-panel-muted">нет API</span><span class="upd-xui-sync ${syncCls}" title="${escAttr(syncTitle)}">${syncTxt}</span></div>${skipNote}</div>`;
        }
        return `<div class="upd-xui-ver-stack"><div class="upd-xui-ver-line upd-xui-ver-line--empty" title="${t}"><span class="text-[11px] text-slate-500">—</span><span class="upd-xui-chip upd-xui-chip-panel-muted">нет API</span></div>${skipNote}</div>`;
    }
    if (!pvRaw) {
        return `<div class="upd-xui-ver-stack"><div class="upd-xui-ver-line upd-xui-ver-line--empty"><span class="text-[11px] text-slate-500">—</span></div>${skipNote}</div>`;
    }
    return `<div class="upd-xui-ver-stack"><div class="upd-xui-ver-line upd-xui-ver-line--click js-xui-panel-pick" role="button" tabindex="0" data-server-id="${sid}" title="Запустить обновление панели 3X-UI на сервере (Linux-скрипт)"><span class="upd-xui-ver-tag">${escHtml(pvRaw)}</span><span class="upd-xui-chip upd-xui-chip-panel">Панель</span><span class="upd-xui-sync ${syncCls}" title="${escAttr(syncTitle)}">${syncTxt}</span></div>${skipNote}</div>`;
}

function formatXrayLatestCells(it, ordered, serverId) {
    const sid = Number(serverId) || 0;
    const ord = Array.isArray(ordered) ? ordered : [];
    if (!ord.length) {
        return '<span class="text-slate-500 text-xs">—</span>';
    }
    const rowsHtml = ord.map((row) => {
        const tag = row.kind === 'stable'
            ? String(it.xray_latest_stable || '').trim()
            : String(it.xray_latest_prerelease || '').trim();
        const chipClass = row.kind === 'stable' ? 'upd-xui-chip-latest' : 'upd-xui-chip-pre';
        const lab = row.kind === 'stable' ? 'Latest' : 'Pre-release';
        const kindAttr = row.kind === 'stable' ? 'stable' : 'prerelease';
        const behind = row.kind === 'stable' ? it.xray_behind_stable : it.xray_behind_prerelease;
        const syncCls = behind ? 'upd-xui-sync-up' : 'upd-xui-sync-ok';
        const syncTxt = behind ? '↑' : 'OK';
        const syncTitle = behind ? 'На GitHub есть новее, чем на сервере' : 'Не ниже этой версии';
        if (!tag) {
            return `<div class="upd-xui-ver-line upd-xui-ver-line--empty"><span class="upd-xui-chip ${chipClass}">${escHtml(lab)}</span><span class="text-[11px] text-slate-500">—</span></div>`;
        }
        const tagAttr = tag.replace(/\\/g, '').replace(/"/g, '');
        return `<div class="upd-xui-ver-line upd-xui-ver-line--click js-xui-xray-pick" role="button" tabindex="0" data-server-id="${sid}" data-xray-ver="${escAttr(tagAttr)}" data-xray-kind="${kindAttr}" title="Установить Xray ${escHtml(tag)} на этот сервер"><span class="upd-xui-ver-tag">${escHtml(tag)}</span><span class="upd-xui-chip ${chipClass}">${escHtml(lab)}</span><span class="upd-xui-sync ${syncCls}" title="${escHtml(syncTitle)}">${syncTxt}</span></div>`;
    }).join('');
    return `<div class="upd-xui-ver-stack">${rowsHtml}</div>`;
}

async function loadXuiRemoteTable() {
    if (!xuiRemoteBody) return;
    xuiRemoteBody.innerHTML = `<tr><td colspan="6" class="text-gray-400">Проверка серверов…</td></tr>`;
    const ctrl = new AbortController();
    const fetchTimer = setTimeout(() => ctrl.abort(), 90000);
    try {
        const resp = await fetch('/admin/tools/update/xui-servers-status', { signal: ctrl.signal });
        const data = await resp.json().catch(() => ({}));
        if (!resp.ok || data.ok === false) {
            xuiRemoteBody.innerHTML = `<tr><td colspan="6" class="text-red-300">Ошибка: ${escHtml(data.error || 'failed')}</td></tr>`;
            return;
        }
        const xStableG = String(data.xray_latest_stable_global || '').trim();
        const xPreG = String(data.xray_latest_prerelease_global || '').trim();
        const xOrdered = Array.isArray(data.xray_ordered_display) ? data.xray_ordered_display : [];
        const pg = String(data.panel_latest_global || '').trim();
        const pr = String(data.panel_github_repo || 'hydraponique/3x-ui').trim();
        const xr = String(data.xray_github_repo || 'XTLS/Xray-core').trim();
        if (xuiRemoteGithubHint) {
            const parts = [];
            if (xStableG || xPreG) {
                parts.push(`Xray (${xr}): Latest ${xStableG || '—'} · Pre-release ${xPreG || '—'}`);
            }
            if (pg) parts.push(`3X-UI (${pr}): ${pg}`);
            xuiRemoteGithubHint.textContent = parts.length
                ? parts.join(' · ')
                : 'Не удалось получить теги последних релизов с GitHub.';
        }
        const items = Array.isArray(data.items) ? data.items : [];
        if (!items.length) {
            xuiRemoteBody.innerHTML = `<tr><td colspan="6" class="text-gray-400">Нет включённых серверов в базе.</td></tr>`;
            return;
        }
        xuiRemoteBody.innerHTML = items.map((it) => {
            const sid = Number(it.server_id) || 0;
            const err = (it.error || '').trim();
            if (!it.ok && err) {
                return `<tr class="bg-red-950/20">
                    <td colspan="6" class="text-red-300">
                        <span class="font-semibold text-white">${escHtml(it.name || '')}</span>
                        <span class="text-gray-500"> (#${sid})</span> — ${escHtml(err)}
                    </td>
                </tr>`;
            }
            const xBadge = it.xray_update_available
                ? '<span class="upd-status upd-status-warn upd-xui-pill ms-1">есть</span>'
                : '<span class="upd-status upd-status-ok upd-xui-pill ms-1">нет</span>';
            const xLatestHtml = formatXrayLatestCells(it, xOrdered, sid);
            const panelLatestHtml = formatPanelLatestCell(it, sid);
            return `
            <tr>
                <td>
                    <div class="upd-xui-server-name">${escHtml(it.name || '')}</div>
                    <div class="upd-xui-server-id">id ${sid}</div>
                </td>
                <td class="upd-xui-td-installed"><div class="upd-xui-installed-inner"><span class="upd-xui-installed-ver">${escHtml(it.panel_current || '—')}</span></div></td>
                <td class="align-top">${panelLatestHtml}</td>
                <td class="upd-xui-td-installed"><div class="upd-xui-installed-inner"><span class="upd-xui-installed-ver">${escHtml(it.xray_current_raw || it.xray_current || '—')}</span>${xBadge}</div></td>
                <td class="align-top">${xLatestHtml}</td>
                <td class="align-top text-right">
                    <div class="upd-xui-actions ms-auto">
                    <button type="button" class="btn btn-ghost btn-sm upd-xui-act js-xui-logs" data-server-id="${sid}" title="Журнал панели"><i class="bi bi-journal-text"></i><span>Лог</span></button>
                    </div>
                </td>
            </tr>`;
        }).join('');
    } catch (e) {
        const msg = (e && e.name === 'AbortError')
            ? 'Превышено время ожидания (90 с). Проверьте недоступные серверы или уменьшите PROBE_XUI_SERVER_TIMEOUT_SEC.'
            : (e.message || String(e));
        xuiRemoteBody.innerHTML = `<tr><td colspan="6" class="text-red-300">Ошибка: ${escHtml(msg)}</td></tr>`;
    } finally {
        clearTimeout(fetchTimer);
    }
}

document.getElementById('xuiRemoteRefreshBtn')?.addEventListener('click', () => {
    appendXuiRemoteLog('Запрос проверки версий…');
    loadXuiRemoteTable().then(() => appendXuiRemoteLog('Таблица обновлена.'));
});

document.addEventListener('keydown', (e) => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    const pick = e.target.closest('.js-xui-xray-pick, .js-xui-panel-pick');
    if (!pick || e.target !== pick) return;
    e.preventDefault();
    pick.click();
});

document.addEventListener('click', async (e) => {
    const panelPill = e.target.closest('.js-xui-panel-pick');
    if (panelPill) {
        const sid = panelPill.getAttribute('data-server-id');
        if (!sid) return;
        if (!confirm('Запустить обновление панели? Сначала запрос к API панели; если недоступно — по SSH будет выполнено «x-ui update» (нужны учётные данные SSH в БД). Лог идёт внизу; процесс не останавливается при переходе в другой раздел (опрос можно возобновить, вернувшись сюда).')) return;
        const pe = panelPill.style.pointerEvents;
        const op = panelPill.style.opacity;
        panelPill.style.pointerEvents = 'none';
        panelPill.style.opacity = '0.65';
        appendXuiRemoteLog(`Панель: запрос обновления сервер id=${sid} (плашка)…`);
        try {
            await runPanelUpdate(sid);
        } catch (err) {
            appendXuiRemoteLog(`Панель id=${sid}: ошибка ${err.message || err}`);
        } finally {
            panelPill.style.pointerEvents = pe;
            panelPill.style.opacity = op;
        }
        return;
    }
    const xPill = e.target.closest('.js-xui-xray-pick');
    if (xPill) {
        const sid = xPill.getAttribute('data-server-id');
        const ver = (xPill.getAttribute('data-xray-ver') || '').trim();
        const kind = (xPill.getAttribute('data-xray-kind') || '').trim();
        if (!sid || !ver) return;
        if (!confirm(`Установить на сервере Xray ${ver}? Кратковременный обрыв соединений возможен.`)) return;
        const pe = xPill.style.pointerEvents;
        const op = xPill.style.opacity;
        xPill.style.pointerEvents = 'none';
        xPill.style.opacity = '0.65';
        appendXuiRemoteLog(`Xray: установка ${ver} на сервер id=${sid} (плашка)…`);
        try {
            await runXrayInstall(sid, ver, kind);
        } catch (err) {
            appendXuiRemoteLog(`Xray id=${sid}: ошибка ${err.message || err}`);
        } finally {
            xPill.style.pointerEvents = pe;
            xPill.style.opacity = op;
        }
        return;
    }
    const lBtn = e.target.closest('.js-xui-logs');
    if (lBtn) {
        const sid = lBtn.getAttribute('data-server-id');
        if (!sid) return;
        lBtn.disabled = true;
        appendXuiRemoteLog(`Лог панели: загрузка id=${sid}…`);
        try {
            const resp = await fetch(`/admin/tools/update/xui-server/${encodeURIComponent(sid)}/logs?count=150`);
            const data = await resp.json().catch(() => ({}));
            const lines = Array.isArray(data.lines) ? data.lines : [];
            appendXuiRemoteLog(`— Лог панели id=${sid} (${lines.length} строк) —`);
            lines.slice(-80).forEach((ln) => appendXuiRemoteLog(String(ln)));
        } catch (err) {
            appendXuiRemoteLog(`Лог id=${sid}: ошибка ${err.message || err}`);
        } finally {
            lBtn.disabled = false;
        }
    }
});

const UPDATE_TAB = {{ _ut|tojson }};
if (UPDATE_TAB === 'mtg') {
    setTarget('mtg');
} else if (UPDATE_TAB === 'panel') {
    setTarget('panel');
}
if (UPDATE_TAB === 'xui') {
    appendXuiRemoteLog('Запрос проверки версий…');
    loadXuiRemoteTable().then(() => appendXuiRemoteLog('Таблица обновлена.'));
    try {
        const o = JSON.parse(sessionStorage.getItem(PANEL_SSH_JOBS_KEY) || '{}');
        Object.entries(o).forEach(([sid, jid]) => {
            if (sid && jid) pollPanelSshJob(Number(sid), jid, true);
        });
    } catch (_) { /* ignore */ }
}
</script>
{% endblock %}