{% extends "base.html" %}

{% block title %}MTProto{% endblock %}
{% block title_header %}MTProto{% endblock %}

{% block styles %}
<style>
  .mtg-card {
    width: min(420px, 100%);
    border-radius: 14px;
    border: 1px solid rgba(100, 120, 180, .22);
    background: linear-gradient(180deg, rgba(18, 22, 38, .96) 0%, rgba(10, 14, 26, .98) 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    overflow: hidden;
  }
  .mtg-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .mtg-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .mtg-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #f0f3fa;
    margin: 0;
  }
  .mtg-badge-agent {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(124, 77, 255, .2);
    color: #c4b5ff;
    border: 1px solid rgba(147, 112, 255, .35);
  }
  .mtg-badge-status {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .mtg-badge-status .mtg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .mtg-st-online {
    background: rgba(34, 120, 72, .25);
    color: #7dffb3;
    border: 1px solid rgba(72, 200, 120, .35);
  }
  .mtg-st-online .mtg-dot { background: #3cff8f; box-shadow: 0 0 8px #3cff8f; }
  .mtg-st-offline {
    background: rgba(120, 28, 40, .28);
    color: #ff9a9a;
    border: 1px solid rgba(200, 72, 90, .4);
  }
  .mtg-st-offline .mtg-dot { background: #ff4d5c; box-shadow: 0 0 8px rgba(255, 77, 92, .6); }
  .mtg-st-unknown {
    background: rgba(80, 90, 110, .25);
    color: #b8c0d4;
    border: 1px solid rgba(120, 130, 150, .3);
  }
  .mtg-st-unknown .mtg-dot { background: #8892a8; }
  .mtg-card-ip {
    padding: 0 14px 12px;
    font-size: 13px;
    color: #8b95ab;
  }
  .mtg-badge-proxy-host {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #9bcbe3;
    background: rgba(44, 103, 140, .16);
    border: 1px solid rgba(98, 153, 186, .30);
  }
  .mtg-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .12);
  }
  .mtg-pill-total {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124, 77, 255, .18);
    color: #d4c9ff;
    border: 1px solid rgba(147, 112, 255, .3);
  }
  .mtg-pill-active {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 120, 72, .2);
    color: #9ee8c0;
    border: 1px solid rgba(72, 180, 110, .32);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .mtg-pill-active .mtg-dot { width: 6px; height: 6px; border-radius: 50%; background: #3cff8f; }
  .mtg-pill-stop {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(120, 40, 48, .22);
    color: #f0a8a8;
    border: 1px solid rgba(200, 90, 100, .35);
  }
  .mtg-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .mtg-btn-clients {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #4f7cff 0%, #7c4dff 100%);
    box-shadow: 0 4px 18px rgba(100, 120, 255, .35);
    transition: filter .15s, transform .1s;
  }
  .mtg-btn-clients:hover { color: #fff; filter: brightness(1.06); }
  .mtg-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #151b2e;
    color: #e8ecf4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, border-color .15s;
  }
  .mtg-icon-btn:hover { background: #1e2740; border-color: rgba(255, 255, 255, .2); color: #fff; }
  .mtg-icon-btn.danger { border-color: rgba(240, 107, 107, .45); color: #f06b6b; background: rgba(40, 18, 22, .35); }
  .mtg-icon-btn.danger:hover { border-color: #f06b6b; color: #ff9a9a; }
  /* Видимость без Tailwind CDN (fallback) */
  .mtproto-page { color: #e5e7eb; }
  .mtproto-page .text-gray-300 { color: #d1d5db !important; }
  .mtproto-page .text-gray-400 { color: #9ca3af !important; }
  .edit-node-shell .form-label { color: #aeb7cc; font-size: 11px; font-weight: 600; letter-spacing: .02em; margin-bottom: .28rem; }
  .edit-node-shell .form-control, .edit-node-shell .form-select {
    border-radius: 12px;
    border-color: rgba(121, 136, 198, .28) !important;
    background: #0f1528 !important;
    min-height: 39px;
    padding-top: .42rem;
    padding-bottom: .42rem;
    font-size: 13px;
  }
  .edit-node-shell .form-control:focus, .edit-node-shell .form-select:focus {
    border-color: #6e7dff !important;
    box-shadow: 0 0 0 .2rem rgba(103, 118, 255, .18) !important;
  }
  .edit-agent-row {
    margin-top: .62rem;
    border: 1px solid rgba(121, 136, 198, .22);
    border-radius: 12px;
    padding: .52rem .62rem;
    background: rgba(9, 14, 28, .72);
  }
  .edit-agent-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: .15rem .6rem;
    border: 1px solid transparent;
  }
  .edit-agent-status.ok { color: #7dffb3; background: rgba(36, 120, 78, .25); border-color: rgba(72, 200, 120, .35); }
  .edit-agent-status.bad { color: #ff9a9a; background: rgba(120, 35, 48, .25); border-color: rgba(220, 92, 108, .4); }
  .edit-agent-status.neutral { color: #ccd4ea; background: rgba(97, 110, 143, .22); border-color: rgba(130, 142, 173, .3); }
  .edit-agent-actions { display:flex; gap:.45rem; flex-wrap:wrap; }
  .edit-agent-actions .btn {
    border-radius: 10px;
    font-weight: 600;
    min-height: 34px;
    padding-top: .28rem;
    padding-bottom: .28rem;
    transition: box-shadow .16s, transform .1s, filter .14s;
  }
  .edit-agent-actions .btn:active { transform: translateY(1px); }
  #editMtgCheckAgentBtn {
    border-color: rgba(99, 214, 255, .75) !important;
    color: #b9f0ff !important;
    box-shadow: 0 0 0 1px rgba(80, 188, 255, .18), 0 0 14px rgba(74, 188, 255, .22);
  }
  #editMtgCheckAgentBtn:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 0 1px rgba(80, 188, 255, .35), 0 0 18px rgba(74, 188, 255, .35);
  }
  #editMtgUpdateAgentBtn {
    border-color: rgba(154, 168, 255, .7) !important;
    color: #dde4ff !important;
    box-shadow: 0 0 0 1px rgba(124, 141, 255, .18), 0 0 14px rgba(112, 126, 255, .18);
  }
  #editMtgUpdateAgentBtn:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 0 1px rgba(124, 141, 255, .34), 0 0 18px rgba(112, 126, 255, .3);
  }
  #editMtgInstallAgentBtn {
    border-color: rgba(109, 239, 164, .7) !important;
    color: #b8ffd7 !important;
    box-shadow: 0 0 0 1px rgba(103, 228, 154, .2), 0 0 14px rgba(94, 228, 147, .2);
  }
  #editMtgInstallAgentBtn:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(103, 228, 154, .38), 0 0 19px rgba(94, 228, 147, .34);
  }
  .edit-auth-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .2rem;
  }
  .edit-auth-btn {
    border-radius: 10px;
    border: 1px solid rgba(121, 136, 198, .32);
    background: rgba(12, 17, 33, .9);
    color: #c7d0e7;
    font-size: 13px;
    font-weight: 600;
    height: 36px;
  }
  .edit-auth-btn.active {
    border-color: rgba(111, 129, 255, .8);
    color: #fff;
    background: linear-gradient(90deg, rgba(75, 99, 255, .42) 0%, rgba(102, 80, 255, .42) 100%);
    box-shadow: inset 0 0 0 1px rgba(141, 160, 255, .28);
  }
  .edit-auth-pane.d-none { display: none !important; }
  .edit-modal-content {
    border-color: rgba(109, 124, 184, .4) !important;
    background: radial-gradient(1200px 400px at 15% -10%, rgba(96, 113, 255, .14), transparent 30%),
                linear-gradient(180deg, #0c1222 0%, #0a1020 100%) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .edit-modal-header { border-bottom-color: rgba(121,136,198,.22) !important; padding-top: .8rem; padding-bottom: .62rem; }
  .edit-modal-footer {
    border-top-color: rgba(121,136,198,.22) !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
  }
  .edit-modal-title { font-weight: 700; letter-spacing: .01em; font-size: 1.15rem; }
  .btn-edit-primary {
    border: none;
    border-radius: 11px;
    background: linear-gradient(90deg, #4f7cff 0%, #41c0ff 100%);
    color: #fff;
    min-width: 128px;
    height: 40px;
    box-shadow: 0 8px 18px rgba(76, 122, 255, .35);
  }
  .btn-edit-primary:hover { filter: brightness(1.06); color:#fff; }
  .btn-edit-muted { border-radius: 11px; min-width: 116px; height: 40px; }
  .edit-flag-wrap {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: stretch;
    gap: .45rem;
  }
  .edit-flag-preview {
    border-radius: 11px;
    border: 1px solid rgba(121, 136, 198, .3);
    background: #0f1528;
    color: #d9e1f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    min-height: 42px;
    user-select: none;
    overflow: hidden;
  }
  .edit-flag-preview img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
  }
  .edit-flag-preview.empty {
    color: #7f8aa6;
    font-size: 12px;
    font-weight: 700;
  }
  #mtprotoEditNodeModal ~ .modal-backdrop.show {
    background-color: rgba(8, 12, 26, .52);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
  }
  .edit-agent-log {
    margin-top: .5rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    border: 1px solid rgba(121,136,198,.25);
    background: rgba(6,10,20,.75);
    color: #9cc7ff;
    font-size: 12px;
    min-height: 1.8rem;
    white-space: pre-wrap;
  }
</style>
{% endblock %}

{% block content %}
<div class="space-y-4 mtproto-page w-100 text-light">
    <div class="bg-gray-800 rounded-lg shadow-lg p-4 text-gray-200">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <div>
                <h2 class="text-xl font-semibold mb-1">MTProto AdminPanel</h2>
                <div class="text-sm text-gray-400">
                    Полная интеграция MTProto в текущую панель: добавление нод на уже подключенные серверы.
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span id="mtprotoStatus" class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-200">Проверка...</span>
            </div>
        </div>
    </div>

    <div class="bg-gray-900 rounded-lg border border-gray-700 p-4">
        <div class="mb-4">
            <div class="text-sm text-gray-300 mb-2">Ноды (плашки)</div>
            <div id="mtprotoNodesCards" class="d-flex flex-wrap gap-3"></div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="text-sm text-gray-300">Серверы из `server_settings` + SSH из `server_xui_access`.</div>
            <button type="button" class="btn btn-sm btn-outline-light" id="reloadMtprotoServersBtn">Обновить</button>
        </div>
        <div class="table-responsive">
            <table class="table table-dark table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Сервер</th>
                        <th>SSH</th>
                        <th>MTG Node</th>
                        <th style="width: 240px;">Действие</th>
                    </tr>
                </thead>
                <tbody id="mtprotoServersBody">
                    <tr><td colspan="5" class="text-center text-muted py-4">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="mtprotoAddNodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content bg-dark text-light border border-secondary">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title">Добавить ноду MTProto</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body edit-node-shell">
                    <input type="hidden" id="mtprotoServerId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Название</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgName">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Host / IP</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgHost">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Host / IP для proxy-ссылок (URL если есть)</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgProxyHost" placeholder="например proxy.example.com">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Домен</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgTelemtDomain" value="petrovich.ru" placeholder="например google.com или petrovich.ru" autocomplete="off">
                            <div class="form-text text-secondary">Домен для <strong>fake TLS</strong> в telemt (параметр установщика <code>-d</code>). Не путать с IP сервера выше.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Язык установщика telemt</label>
                            <select class="form-select bg-dark text-white border-secondary" id="mtgTelemtLang">
                                <option value="ru" selected>Русский</option>
                                <option value="en">English</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SSH пользователь</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgSshUser">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SSH порт</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgSshPort" value="22">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SSH пароль</label>
                            <input type="password" class="form-control bg-dark text-white border-secondary" id="mtgSshPassword">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">SSH ключ (путь на сервере web-admin)</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgSshKey">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Рабочий каталог</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgBaseDir" value="/opt/mtg/users">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Начальный порт (MTG + telemt)</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgStartPort" value="4433">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Порт агента</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgAgentPort" value="8081">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Флаг страны</label>
                            <input class="form-control bg-dark text-white border-secondary" id="mtgFlag" placeholder="fi">
                        </div>
                    </div>
                    <div class="mt-2 small text-secondary">
                        <strong>telemt</strong> ставится неинтерактивно (язык — из поля выше, по умолчанию <code>-l ru</code>) и слушает <strong>тот же порт</strong>, что «Начальный порт».
                        Если на сервере уже занят <strong>443</strong> (Xray и т.п.), оставьте, например, <strong>4433</strong> — иначе установка завершится ошибкой «Port is already in use».
                    </div>
                    <div class="mt-3 small text-secondary">
                        Кнопка ниже выполнит по SSH на целевом сервере:
                        <code>telemt install.sh</code>, при необходимости установит <strong>Docker</strong> и плагин <code>docker compose</code> (через apt или загрузку plugin), затем <code>mtg-agent/install-agent.sh</code> и добавит ноду в MTG.
                        Отключить автоустановку Docker: переменная окружения <code>MTG_SKIP_REMOTE_DOCKER_INSTALL=1</code> на машине web-admin.
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0">Прогресс установки</label>
                            <span id="mtprotoInstallProgressText" class="small text-info">0%</span>
                        </div>
                        <div class="progress bg-secondary-subtle border border-secondary mb-3" style="height: 10px;">
                            <div id="mtprotoInstallProgressBar" class="progress-bar bg-info" role="progressbar" style="width: 0%;"></div>
                        </div>
                        <label class="form-label">Live лог установки</label>
                        <pre id="mtprotoInstallLog" class="bg-black text-success p-2 rounded border border-secondary" style="height:220px; overflow:auto; white-space:pre-wrap;">Ожидание запуска...</pre>
                    </div>
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Отмена</button>
                    <button type="button" class="btn btn-info" id="mtprotoInstallAddBtn">Установить и добавить</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mtprotoEditNodeModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-dark text-light border border-secondary edit-modal-content">
                <div class="modal-header border-secondary edit-modal-header">
                    <h5 class="modal-title edit-modal-title"><i class="bi bi-pencil-square me-2"></i>Редактировать ноду</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body edit-node-shell">
                    <input type="hidden" id="editMtgNodeId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Название</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgName">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Host / IP</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgHost">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Host / IP для proxy-ссылок (URL если есть)</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgProxyHost" placeholder="например proxy.example.com">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SSH пользователь</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgSshUser">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SSH порт</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgSshPort">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Флаг</label>
                            <div class="edit-flag-wrap">
                                <span id="editMtgFlagPreview" class="edit-flag-preview empty">--</span>
                                <input class="form-control bg-dark text-white border-secondary" id="editMtgFlag" placeholder="se">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Рабочий каталог</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgBaseDir">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Начальный порт</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgStartPort">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Порт агента</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgAgentPort">
                        </div>
                        <div class="col-12">
                            <label class="form-label">SSH авторизация</label>
                            <div class="edit-auth-toggle">
                                <button type="button" class="edit-auth-btn active" id="editAuthModePasswordBtn"><i class="bi bi-key me-1"></i>Пароль</button>
                                <button type="button" class="edit-auth-btn" id="editAuthModeKeyBtn"><i class="bi bi-lock me-1"></i>SSH ключ</button>
                            </div>
                        </div>
                        <div class="col-12 edit-auth-pane" id="editAuthPasswordPane">
                            <label class="form-label">Пароль</label>
                            <input type="password" class="form-control bg-dark text-white border-secondary" id="editMtgSshPassword" autocomplete="new-password">
                        </div>
                        <div class="col-12 edit-auth-pane d-none" id="editAuthKeyPane">
                            <label class="form-label">SSH ключ (путь на сервере панели)</label>
                            <input class="form-control bg-dark text-white border-secondary" id="editMtgSshKey" placeholder="/root/.ssh/id_rsa">
                        </div>
                    </div>
                    <div class="edit-agent-row">
                        <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                            <div>
                                <div class="small text-secondary">MTG Agent</div>
                                <div id="editMtgAgentState" class="edit-agent-status neutral">не проверен</div>
                            </div>
                            <div class="edit-agent-actions">
                                <button type="button" class="btn btn-sm btn-outline-info" id="editMtgCheckAgentBtn"><i class="bi bi-wifi"></i> Проверить</button>
                                <button type="button" class="btn btn-sm btn-outline-light" id="editMtgUpdateAgentBtn"><i class="bi bi-arrow-clockwise"></i> Обновить</button>
                                <button type="button" class="btn btn-sm btn-outline-success" id="editMtgInstallAgentBtn"><i class="bi bi-download"></i> Установить</button>
                            </div>
                        </div>
                        <div id="editMtgAgentLog" class="edit-agent-log d-none"></div>
                    </div>
                    <div id="editMtgNodeErr" class="text-danger small mt-2 d-none"></div>
                </div>
                <div class="modal-footer border-secondary edit-modal-footer">
                    <button type="button" class="btn btn-outline-light btn-edit-muted" data-bs-dismiss="modal">Отмена</button>
                    <button type="button" class="btn btn-info btn-edit-primary" id="mtprotoEditNodeSaveBtn"><i class="bi bi-check-lg me-1"></i>Сохранить</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mtprotoDelNodeModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-dark text-light border border-secondary">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title">Удалить ноду из MTG</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Удалить ноду <strong id="delMtgNodeLabel"></strong> из панели MTG? Сначала будет выполнен SSH-cleanup на сервере (telemt/agent/panel), затем удаление ноды из MTG.
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Отмена</button>
                    <button type="button" class="btn btn-danger" id="mtprotoDelNodeConfirmBtn">Удалить</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

async function parseJsonOrExplain(r) {
    const text = await r.text();
    try {
        return JSON.parse(text);
    } catch {
        const hint = text.replace(/\s+/g, ' ').trim().slice(0, 160);
        throw new Error(
            r.status === 404
                ? 'Маршрут API не найден (перезапустите web-admin после обновления).'
                : `Ответ не JSON (HTTP ${r.status}): ${hint || 'пусто'}`
        );
    }
}

function deriveFlagFromServerName(name) {
    const raw = String(name || '').trim();
    if (!raw) return '';
    const m = raw.match(/(?:^[^\w]*)([A-Za-z]{2})(?:\s|$)/);
    if (m && m[1]) return m[1].toLowerCase();
    return '';
}

function normalizeFlagCode(raw) {
    const code = String(raw || '').trim().slice(0, 2).toLowerCase();
    return /^[a-z]{2}$/.test(code) ? code : '';
}

function updateEditFlagPreview() {
    const inp = document.getElementById('editMtgFlag');
    const out = document.getElementById('editMtgFlagPreview');
    if (!inp || !out) return;
    const code = normalizeFlagCode(inp.value);
    if (code) {
        const upper = code.toUpperCase();
        out.innerHTML = `<img src="/static/flag/${code}.svg" alt="${upper}" loading="lazy" decoding="async" onerror="this.onerror=null; this.src='https://flagcdn.com/24x18/${code}.png'; this.onerror=function(){ this.remove(); const p=this.parentElement; if(!p) return; p.textContent='${upper}'; p.classList.remove('empty'); };">`;
        out.classList.remove('empty');
    } else {
        out.textContent = '--';
        out.classList.add('empty');
    }
}

function setInstallProgress(v) {
    const n = Math.max(0, Math.min(100, Number(v || 0)));
    const bar = document.getElementById('mtprotoInstallProgressBar');
    const txt = document.getElementById('mtprotoInstallProgressText');
    bar.style.width = `${n}%`;
    txt.textContent = `${n}%`;
}

async function refreshMtprotoStatus() {
    const el = document.getElementById('mtprotoStatus');
    try {
        const r = await fetch('/admin/panels/api/mtproto/status', { cache: 'no-store' });
        const data = await r.json();
        if (data.ok) {
            el.textContent = `Доступно (${data.status || 200})`;
            el.className = 'text-xs px-2 py-1 rounded bg-emerald-700/40 text-emerald-300';
        } else {
            el.textContent = 'Недоступно';
            el.title = data.error || 'Не удалось подключиться';
            el.className = 'text-xs px-2 py-1 rounded bg-red-700/40 text-red-300';
        }
    } catch (e) {
        el.textContent = 'Ошибка проверки';
        el.className = 'text-xs px-2 py-1 rounded bg-red-700/40 text-red-300';
    }
}

async function addNode(serverId, btn) {
    const row = window._mtprotoServersById[String(serverId)];
    if (!row) {
        alert('Не удалось получить данные сервера');
        return;
    }
    document.getElementById('mtprotoServerId').value = String(serverId);
    document.getElementById('mtgName').value = row.name || '';
    document.getElementById('mtgHost').value = row.host || '';
    document.getElementById('mtgProxyHost').value = row.proxy_host_override || row.host || '';
    document.getElementById('mtgSshUser').value = row.ssh_user || 'root';
    document.getElementById('mtgSshPort').value = row.ssh_port || '22';
    document.getElementById('mtgSshPassword').value = '';
    document.getElementById('mtgSshKey').value = '';
    document.getElementById('mtgBaseDir').value = '/opt/mtg/users';
    document.getElementById('mtgStartPort').value = '4433';
    document.getElementById('mtgAgentPort').value = '8081';
    document.getElementById('mtgFlag').value = deriveFlagFromServerName(row.name || '');
    document.getElementById('mtgTelemtDomain').value = 'petrovich.ru';
    document.getElementById('mtgTelemtLang').value = 'ru';
    document.getElementById('mtprotoInstallLog').textContent = 'Ожидание запуска...';
    setInstallProgress(0);
    window._mtprotoCurrentButton = btn;
    if (window._mtprotoModal) window._mtprotoModal.show();
    else alert('Модальное окно не инициализировано. Обновите страницу.');
}

async function loadMtprotoServers() {
    const body = document.getElementById('mtprotoServersBody');
    body.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">Загрузка...</td></tr>';
    try {
        const r = await fetch('/admin/panels/api/mtproto/servers', { cache: 'no-store' });
        const data = await r.json();
        if (!r.ok || !data.ok) {
            body.innerHTML = `<tr><td colspan="5" class="text-center text-danger py-4">${esc(data.error || 'Ошибка загрузки')}</td></tr>`;
            return;
        }
        const items = Array.isArray(data.items) ? data.items : [];
        window._mtprotoServersById = {};
        const cards = document.getElementById('mtprotoNodesCards');
        cards.innerHTML = '';
        if (!items.length) {
            body.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">Серверов нет</td></tr>';
            cards.innerHTML = '<div class="text-muted small">Нод пока нет.</div>';
            return;
        }
        body.innerHTML = '';
        items.forEach((s) => {
            window._mtprotoServersById[String(s.server_id)] = s;
            const hasSsh = s.host && s.ssh_user && (s.has_password || s.has_key);
            const proxyHost = String((s.proxy_host_override ?? (s.mtg_node && s.mtg_node.proxy_host_override) ?? '') || '').trim();
            const hasProxyOverride = !!proxyHost && proxyHost !== String(s.host || '').trim();
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${esc(s.server_id)}</td>
                <td>
                    ${esc(s.name || '-')}
                    <div class="small text-secondary">${esc(s.host || '-')}</div>
                    ${hasProxyOverride ? `<div class="small mt-1"><span class="mtg-badge-proxy-host"><i class="bi bi-link-45deg"></i> proxy host: ${esc(proxyHost)}</span></div>` : ''}
                </td>
                <td class="small">${esc(s.ssh_user || '-')}@${esc(s.host || '-')} : ${esc(s.ssh_port || '22')}</td>
                <td>${s.mtg_node_id ? `<span class="text-success">#${esc(s.mtg_node_id)} ${esc(s.mtg_node_name || '')}</span>` : '<span class="text-muted">нет</span>'}</td>
                <td class="small">
                    ${hasSsh ? `<button type="button" class="btn btn-sm btn-outline-info add-node-btn" data-id="${esc(s.server_id)}" ${s.mtg_node_id ? 'disabled' : ''}>${s.mtg_node_id ? 'Уже добавлено' : 'Добавить ноду в MTG'}</button>` : '<span class="text-warning">Нет SSH данных</span>'}
                </td>
            `;
            body.appendChild(tr);

            if (s.mtg_node_id) {
                const nid = s.mtg_node_id;
                const online = s.mtg_agent_online;
                const tot = s.mtg_users_total;
                const act = s.mtg_users_active;
                const stp = s.mtg_users_stopped;
                let statusClass = 'mtg-st-unknown';
                let statusText = 'нет данных';
                if (online === true) {
                    statusClass = 'mtg-st-online';
                    statusText = 'онлайн';
                } else if (online === false) {
                    statusClass = 'mtg-st-offline';
                    statusText = 'офлайн';
                }
                const totL = tot != null ? `${tot} всего` : '— всего';
                const actL = act != null ? `${act} активных` : '— активных';
                const stpL = stp != null ? `${stp} остановлен` : '— остановлен';
                const card = document.createElement('div');
                card.className = 'mtg-card';
                card.innerHTML = `
                    <div class="mtg-card-top">
                        <div>
                            <div class="mtg-card-title-row">
                                <span class="mtg-card-title">${esc(s.name || '')}</span>
                                <span class="mtg-badge-agent">Agent</span>
                            </div>
                        </div>
                        <span class="mtg-badge-status ${statusClass}"><span class="mtg-dot"></span>${esc(statusText)}</span>
                    </div>
                    <div class="mtg-card-ip">
                        ${esc(s.host || '')}
                        ${hasProxyOverride ? `<div><span class="mtg-badge-proxy-host"><i class="bi bi-link-45deg"></i> proxy host: ${esc(proxyHost)}</span></div>` : ''}
                    </div>
                    <div class="mtg-card-stats">
                        <span class="mtg-pill-total">${esc(totL)}</span>
                        <span class="mtg-pill-active"><span class="mtg-dot"></span>${esc(actL)}</span>
                        <span class="mtg-pill-stop">${esc(stpL)}</span>
                    </div>
                    <div class="mtg-card-foot">
                        <a class="mtg-btn-clients" href="/admin/users/mtproxy?node=${encodeURIComponent(String(nid))}"><i class="bi bi-people-fill"></i> Клиенты</a>
                        <button type="button" class="mtg-icon-btn js-mtg-card-edit" data-server-id="${esc(String(s.server_id))}" title="Изменить"><i class="bi bi-pencil"></i></button>
                        <button type="button" class="mtg-icon-btn danger js-mtg-card-del" data-server-id="${esc(String(s.server_id))}" title="Удалить"><i class="bi bi-trash"></i></button>
                    </div>
                `;
                cards.appendChild(card);
            }
        });
        if (!cards.children.length) {
            cards.innerHTML = '<div class="text-muted small">После добавления ноды появятся карточки как в MTG.</div>';
        }
        body.querySelectorAll('.add-node-btn').forEach((btn) => {
            btn.addEventListener('click', () => addNode(btn.dataset.id, btn));
        });
    } catch (e) {
        body.innerHTML = '<tr><td colspan="5" class="text-center text-danger py-4">Ошибка сети</td></tr>';
    }
}

document.getElementById('reloadMtprotoServersBtn').addEventListener('click', loadMtprotoServers);
window._mtprotoServersById = {};
window._mtprotoCurrentButton = null;
window._delMtgTarget = null;
window._mtprotoInstallPollTimer = null;
(function initMtprotoModals() {
    function safeModal(id) {
        const el = document.getElementById(id);
        if (!el || typeof bootstrap === 'undefined' || !bootstrap.Modal) return null;
        try {
            return new bootstrap.Modal(el);
        } catch (e) {
            console.error('MTProto modal:', id, e);
            return null;
        }
    }
    window._mtprotoModal = safeModal('mtprotoAddNodeModal');
    window._mtprotoEditModal = safeModal('mtprotoEditNodeModal');
    window._mtprotoDelModal = safeModal('mtprotoDelNodeModal');
})();

function openEditMtgNode(serverId) {
    const row = window._mtprotoServersById[String(serverId)];
    if (!row || !row.mtg_node_id) return;
    const m = row.mtg_node || {};
    document.getElementById('editMtgNodeId').value = String(row.mtg_node_id);
    document.getElementById('editMtgName').value = m.name != null ? m.name : (row.name || '');
    document.getElementById('editMtgHost').value = m.host != null ? m.host : (row.host || '');
    document.getElementById('editMtgProxyHost').value = m.proxy_host_override != null ? String(m.proxy_host_override) : (row.proxy_host_override || row.host || '');
    document.getElementById('editMtgSshUser').value = m.ssh_user != null ? m.ssh_user : '';
    document.getElementById('editMtgSshPort').value = m.ssh_port != null ? String(m.ssh_port) : '22';
    document.getElementById('editMtgFlag').value = m.flag != null ? String(m.flag) : '';
    document.getElementById('editMtgBaseDir').value = m.base_dir != null ? String(m.base_dir) : '/opt/mtg/users';
    document.getElementById('editMtgStartPort').value = m.start_port != null ? String(m.start_port) : '4433';
    document.getElementById('editMtgAgentPort').value = m.agent_port != null ? String(m.agent_port) : '8081';
    document.getElementById('editMtgSshPassword').value = '';
    document.getElementById('editMtgSshKey').value = '';
    document.getElementById('editMtgNodeErr').classList.add('d-none');
    setEditAuthMode('password');
    updateEditFlagPreview();
    setEditAgentState(row.mtg_agent_online === true ? 'online' : (row.mtg_agent_online === false ? 'offline' : 'neutral'), '');
    const log = document.getElementById('editMtgAgentLog');
    log.classList.add('d-none');
    log.textContent = '';
    if (window._mtprotoEditModal) window._mtprotoEditModal.show();
}

function setEditAuthMode(mode) {
    const isKey = mode === 'key';
    const pwdBtn = document.getElementById('editAuthModePasswordBtn');
    const keyBtn = document.getElementById('editAuthModeKeyBtn');
    const pwdPane = document.getElementById('editAuthPasswordPane');
    const keyPane = document.getElementById('editAuthKeyPane');
    if (pwdBtn) pwdBtn.classList.toggle('active', !isKey);
    if (keyBtn) keyBtn.classList.toggle('active', isKey);
    if (pwdPane) pwdPane.classList.toggle('d-none', isKey);
    if (keyPane) keyPane.classList.toggle('d-none', !isKey);
}

function setEditAgentState(state, text) {
    const el = document.getElementById('editMtgAgentState');
    if (!el) return;
    el.classList.remove('ok', 'bad', 'neutral');
    if (state === 'online') {
        el.classList.add('ok');
        el.textContent = text || 'доступен';
    } else if (state === 'offline') {
        el.classList.add('bad');
        el.textContent = text || 'недоступен';
    } else {
        el.classList.add('neutral');
        el.textContent = text || 'не проверен';
    }
}

function showEditAgentLog(message) {
    const log = document.getElementById('editMtgAgentLog');
    if (!log) return;
    const txt = String(message || '').trim();
    if (!txt) {
        log.textContent = '';
        log.classList.add('d-none');
        return;
    }
    log.textContent = txt;
    log.classList.remove('d-none');
}

function openDelMtgNode(serverId) {
    const row = window._mtprotoServersById[String(serverId)];
    if (!row || !row.mtg_node_id) return;
    window._delMtgTarget = row;
    document.getElementById('delMtgNodeLabel').textContent = row.mtg_node_name || row.name || ('#' + row.mtg_node_id);
    if (window._mtprotoDelModal) window._mtprotoDelModal.show();
}

document.getElementById('mtprotoNodesCards').addEventListener('click', (e) => {
    const editBtn = e.target.closest('.js-mtg-card-edit');
    const delBtn = e.target.closest('.js-mtg-card-del');
    if (editBtn) {
        openEditMtgNode(editBtn.getAttribute('data-server-id'));
        return;
    }
    if (delBtn) {
        openDelMtgNode(delBtn.getAttribute('data-server-id'));
    }
});

document.getElementById('mtprotoEditNodeSaveBtn').addEventListener('click', async function () {
    const errEl = document.getElementById('editMtgNodeErr');
    errEl.classList.add('d-none');
    const id = document.getElementById('editMtgNodeId').value.trim();
    if (!id) return;
    const body = {
        name: document.getElementById('editMtgName').value.trim(),
        host: document.getElementById('editMtgHost').value.trim(),
        proxy_host_override: document.getElementById('editMtgProxyHost').value.trim(),
        ssh_user: document.getElementById('editMtgSshUser').value.trim(),
        ssh_port: parseInt(document.getElementById('editMtgSshPort').value.trim(), 10) || 22,
        base_dir: document.getElementById('editMtgBaseDir').value.trim(),
        start_port: parseInt(document.getElementById('editMtgStartPort').value.trim(), 10) || 4433,
        agent_port: parseInt(document.getElementById('editMtgAgentPort').value.trim(), 10) || 8081,
        // Обновление update.sh только вручную кнопкой "Обновить".
        run_update_script: false,
    };
    const fl = document.getElementById('editMtgFlag').value.trim();
    body.flag = fl || null;
    const pw = document.getElementById('editMtgSshPassword').value;
    if (pw) body.ssh_password = pw;
    const key = document.getElementById('editMtgSshKey').value.trim();
    if (key) body.ssh_key = key;
    this.disabled = true;
    try {
        const r = await fetch(`/admin/panels/api/mtproto/mtg-node/${encodeURIComponent(id)}`, {
            method: 'PUT',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(body),
        });
        const data = await parseJsonOrExplain(r);
        if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка сохранения');
        if (data.warning) {
            showEditAgentLog(`Сохранено. ${String(data.warning).trim()}`);
        }
        if (window._mtprotoEditModal) window._mtprotoEditModal.hide();
        await loadMtprotoServers();
    } catch (e) {
        errEl.textContent = e.message || String(e);
        errEl.classList.remove('d-none');
    } finally {
        this.disabled = false;
    }
});

document.getElementById('editAuthModePasswordBtn').addEventListener('click', () => setEditAuthMode('password'));
document.getElementById('editAuthModeKeyBtn').addEventListener('click', () => setEditAuthMode('key'));
document.getElementById('editMtgFlag').addEventListener('input', updateEditFlagPreview);

document.getElementById('editMtgCheckAgentBtn').addEventListener('click', async function () {
    const id = document.getElementById('editMtgNodeId').value.trim();
    if (!id) return;
    this.disabled = true;
    setEditAgentState('neutral', 'проверка...');
    showEditAgentLog('');
    try {
        const r = await fetch(`/admin/panels/api/mtproto/mtg-node/${encodeURIComponent(id)}/check-agent`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' },
        });
        const data = await parseJsonOrExplain(r);
        if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка проверки агента');
        const ok = !!data.available;
        setEditAgentState(ok ? 'online' : 'offline');
        showEditAgentLog(ok ? 'Agent доступен.' : (data.data?.reason || 'Agent недоступен.'));
    } catch (e) {
        setEditAgentState('offline');
        showEditAgentLog(e.message || String(e));
    } finally {
        this.disabled = false;
    }
});

document.getElementById('editMtgUpdateAgentBtn').addEventListener('click', async function () {
    const id = document.getElementById('editMtgNodeId').value.trim();
    if (!id) return;
    this.disabled = true;
    setEditAgentState('neutral', 'обновление...');
    showEditAgentLog('');
    try {
        const r = await fetch(`/admin/panels/api/mtproto/mtg-node/${encodeURIComponent(id)}/update-agent`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' },
        });
        const data = await parseJsonOrExplain(r);
        if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка обновления агента');
        setEditAgentState('online', 'обновлен');
        showEditAgentLog((data.data && data.data.output) ? String(data.data.output).trim() : 'Обновление выполнено.');
    } catch (e) {
        setEditAgentState('offline', 'ошибка');
        showEditAgentLog(e.message || String(e));
    } finally {
        this.disabled = false;
    }
});

document.getElementById('editMtgInstallAgentBtn').addEventListener('click', async function () {
    // В MTG backend update-agent выполняет install/update сценарий.
    const id = document.getElementById('editMtgNodeId').value.trim();
    if (!id) return;
    this.disabled = true;
    setEditAgentState('neutral', 'установка...');
    showEditAgentLog('');
    try {
        const r = await fetch(`/admin/panels/api/mtproto/mtg-node/${encodeURIComponent(id)}/update-agent`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' },
        });
        const data = await parseJsonOrExplain(r);
        if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка установки агента');
        setEditAgentState('online', 'установлен');
        showEditAgentLog((data.data && data.data.output) ? String(data.data.output).trim() : 'Установка выполнена.');
    } catch (e) {
        setEditAgentState('offline', 'ошибка');
        showEditAgentLog(e.message || String(e));
    } finally {
        this.disabled = false;
    }
});

document.getElementById('mtprotoDelNodeConfirmBtn').addEventListener('click', async function () {
    const row = window._delMtgTarget;
    if (!row || !row.mtg_node_id) return;
    this.disabled = true;
    async function doDelete(force) {
        const q = force ? '?force=true' : '';
        const r = await fetch(`/admin/panels/api/mtproto/mtg-node/${encodeURIComponent(String(row.mtg_node_id))}${q}`, {
            method: 'DELETE',
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' },
        });
        const data = await parseJsonOrExplain(r);
        return { r, data };
    }
    try {
        let { r, data } = await doDelete(false);
        if (!r.ok || !data.ok) {
            const msg = data.error || 'Ошибка удаления';
            const canForce = !String(msg).toLowerCase().includes('маршрут api не найден');
            if (canForce && confirm(`${msg}\n\nПовторить удаление принудительно (force=true) без SSH-cleanup?`)) {
                ({ r, data } = await doDelete(true));
            }
        }
        if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка удаления');
        if (window._mtprotoDelModal) window._mtprotoDelModal.hide();
        window._delMtgTarget = null;
        await loadMtprotoServers();
    } catch (e) {
        alert(e.message || e);
    } finally {
        this.disabled = false;
    }
});

function appendInstallLog(text) {
    const pre = document.getElementById('mtprotoInstallLog');
    pre.textContent += (pre.textContent ? '\n' : '') + text;
    pre.scrollTop = pre.scrollHeight;
}

document.getElementById('mtprotoInstallAddBtn').addEventListener('click', async function() {
    const btn = this;
    const old = btn.innerHTML;
    const serverId = document.getElementById('mtprotoServerId').value;
    const payload = {
        name: document.getElementById('mtgName').value.trim(),
        host: document.getElementById('mtgHost').value.trim(),
        proxy_host_override: document.getElementById('mtgProxyHost').value.trim(),
        ssh_user: document.getElementById('mtgSshUser').value.trim(),
        ssh_port: document.getElementById('mtgSshPort').value.trim(),
        ssh_password: document.getElementById('mtgSshPassword').value,
        ssh_key: document.getElementById('mtgSshKey').value.trim(),
        base_dir: document.getElementById('mtgBaseDir').value.trim(),
        start_port: document.getElementById('mtgStartPort').value.trim(),
        agent_port: document.getElementById('mtgAgentPort').value.trim(),
        flag: document.getElementById('mtgFlag').value.trim(),
        domain: document.getElementById('mtgTelemtDomain').value.trim(),
        telemt_tls_domain: document.getElementById('mtgTelemtDomain').value.trim(),
        telemt_lang: document.getElementById('mtgTelemtLang').value,
    };
    const pre = document.getElementById('mtprotoInstallLog');
    pre.textContent = 'Запуск задачи...';
    setInstallProgress(0);
    btn.disabled = true;
    btn.textContent = 'Установка...';
    try {
        const r = await fetch(`/admin/panels/api/mtproto/install-and-add-node/start/${serverId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await r.json();
        if (!r.ok || !data.ok || !data.job_id) {
            const msg = data.error || 'Ошибка запуска установки';
            appendInstallLog(`ERROR: ${msg}`);
            return;
        }
        const jobId = data.job_id;
        let cursor = 0;
        if (window._mtprotoInstallPollTimer) clearInterval(window._mtprotoInstallPollTimer);
        window._mtprotoInstallPollTimer = setInterval(async () => {
            try {
                const rs = await fetch(`/admin/panels/api/mtproto/install-and-add-node/status/${jobId}?cursor=${cursor}`, { cache: 'no-store' });
                const st = await rs.json();
                if (!rs.ok || !st.ok) {
                    appendInstallLog(`ERROR: ${st.message || 'ошибка чтения статуса'}`);
                    clearInterval(window._mtprotoInstallPollTimer);
                    window._mtprotoInstallPollTimer = null;
                    btn.disabled = false;
                    btn.innerHTML = old;
                    return;
                }
                cursor = Number(st.cursor || cursor);
                setInstallProgress(Number(st.progress || 0));
                (st.logs || []).forEach((ln) => appendInstallLog(String(ln)));
                if (st.finished) {
                    clearInterval(window._mtprotoInstallPollTimer);
                    window._mtprotoInstallPollTimer = null;
                    setInstallProgress(st.success ? 100 : Number(st.progress || 0));
                    appendInstallLog(st.success ? 'Готово.' : `ERROR: ${st.message || 'неудача'}`);
                    btn.disabled = false;
                    btn.innerHTML = old;
                    if (st.success) {
                        await loadMtprotoServers();
                    }
                }
            } catch (e) {
                appendInstallLog('ERROR: сеть при чтении статуса');
                clearInterval(window._mtprotoInstallPollTimer);
                window._mtprotoInstallPollTimer = null;
                btn.disabled = false;
                btn.innerHTML = old;
            }
        }, 1200);
    } catch (e) {
        appendInstallLog('ERROR: сетевая ошибка');
        btn.disabled = false;
        btn.innerHTML = old;
    }
});

document.getElementById('mtgName').addEventListener('input', function() {
    const flagInput = document.getElementById('mtgFlag');
    if (!flagInput.value.trim()) {
        flagInput.value = deriveFlagFromServerName(this.value);
    }
});

refreshMtprotoStatus();
loadMtprotoServers();
</script>
{% endblock %}