{% extends "base.html" %}

{% block title %}3X-UI{% endblock %}
{% block title_header %}3X-UI{% endblock %}

{% block styles %}
<style>
    /* Логи SSH-установки и опроса — компактнее */
    #installLogs {
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: 0.01em;
    }
    #installLogs > div {
        font-size: 10px;
        line-height: 1.35;
    }
    #sshInstallModal .install-progress-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    #sshInstallModal .install-progress-track {
        flex: 1 1 auto;
        height: 0.625rem;
        border-radius: 9999px;
        background: rgba(31, 41, 55, 0.95);
        border: 1px solid rgba(75, 85, 99, 0.55);
        overflow: hidden;
    }
    #sshInstallModal .install-progress-fill {
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(90deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
        transition: width 0.45s ease-out;
    }
    #sshInstallModal .install-progress-pct {
        flex: 0 0 3rem;
        text-align: right;
        font-size: 0.8125rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #e5e7eb;
    }
    /* Статус «Работает» на карточке сервера */
    .server-status-neon {
        border-radius: 10px;
        padding: 0.28rem 0.65rem;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #bbf7d0;
        background: rgba(6, 78, 59, 0.5);
        border: 1px solid rgba(52, 211, 153, 0.55);
        box-shadow:
            0 0 6px rgba(52, 211, 153, 0.45),
            0 0 16px rgba(16, 185, 129, 0.35),
            0 0 28px rgba(34, 197, 94, 0.2),
            inset 0 1px 0 rgba(167, 243, 208, 0.12);
    }
    /* SSH xterm: видимая область и прокрутка без обрезания последних строк */
    #serverSshTerminalOutput {
        position: relative;
    }
    #serverSshTerminalOutput .xterm {
        position: absolute;
        inset: 0;
        padding: 4px 2px 8px 4px;
        box-sizing: border-box;
    }
    #serverSshTerminalOutput .xterm-viewport {
        overflow-y: auto !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-emerald-900/70 to-emerald-800/20 border border-emerald-700/30 rounded-xl shadow-lg p-6">
        <div class="flex flex-col md:flex-row md:items-start gap-4">
            <div class="flex items-start gap-4">
                <div class="p-3 bg-green-900 rounded-full">
                    <i class="bi bi-diagram-3 text-2xl text-green-300"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-semibold text-white">3X-UI</h2>
                    <p class="text-sm text-gray-300">Мониторинг и управление всеми серверами 3X-UI</p>
                    <p class="text-xs text-gray-400 mt-1">Переключаемые настройки серверов для оптимального подключения</p>
                </div>
            </div>

            <div class="flex gap-2 flex-wrap items-center">
                <button type="button" class="btn btn-secondary border-violet-500/40 hover:bg-violet-900/30" id="openServersJsonEditorBtn" title="Массив серверов server_settings в JSON">
                    <i class="bi bi-braces mr-1"></i>Редактировать JSON
                </button>
                <button type="button" class="btn btn-secondary" id="openSshInstallModal">Установить через SSH</button>
                <button type="button" class="btn btn-primary" id="openCreateServerModal">Добавить сервер</button>
                <button type="button" class="btn border border-emerald-500/60 bg-emerald-900/40 text-emerald-100 hover:bg-emerald-800/50" id="syncAllXuiBtn" title="Добавить на панели 3X-UI всех пользователей из БД, которых там ещё нет">
                    <i class="bi bi-arrow-repeat mr-1"></i>Синхронизация с 3X-UI
                </button>
                <button type="button" class="btn btn-secondary border-cyan-500/50 hover:bg-cyan-950/50" id="refreshAllVlessBtn" title="Пересобрать vless:// из панелей для всех пользователей (все сервера)">
                    <i class="bi bi-link-45deg mr-1"></i>Обновить все vless
                </button>
                <label class="text-xs text-gray-400 flex items-center gap-1.5 cursor-pointer select-none" title="Таблица user: vless_links + merged_subscription_b64; таблица user_subscription: vless для бота">
                    <input type="checkbox" id="syncAllRefreshLinks" class="rounded border-gray-600" checked>
                    обновить ключи и общие ссылки в БД
                </label>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-900/90 border border-gray-700 rounded-lg p-4 text-center">
                <div class="text-lg text-blue-300 mb-1"><i class="bi bi-hdd-rack"></i></div>
                <div id="totalServersStat" class="text-2xl font-semibold text-white">0</div>
                <div class="text-xs text-gray-400">Всего серверов</div>
            </div>

            <div class="bg-gray-900/90 border border-gray-700 rounded-lg p-4 text-center">
                <div class="text-lg text-emerald-300 mb-1"><i class="bi bi-check2-square"></i></div>
                <div id="activeServersStat" class="text-2xl font-semibold text-white">0</div>
                <div class="text-xs text-gray-400">Активны</div>
            </div>

            <div class="bg-gray-900/90 border border-gray-700 rounded-lg p-4 text-center">
                <div class="text-lg text-indigo-300 mb-1"><i class="bi bi-bar-chart-fill"></i></div>
                <div id="onlineUsersStat" class="text-2xl font-semibold text-white">0</div>
                <div class="text-xs text-gray-400">Онлайн пользователей</div>
            </div>
        </div>
    </div>

    <div class="space-y-8">
        <div>
            <h6 class="text-white font-medium mb-1">Автораспределение</h6>
            <p class="text-xs text-gray-500 mb-3 max-w-3xl">
                Одна основная карточка сервера здесь, если он не исключён из автораспределения (пул при <code class="text-gray-400">server_ids = *</code>). Дополнительные копии карточки в других блоках — в форме редактирования сервера («Дубликат карточки»).
            </p>
            <div id="serverCardsAuto" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"></div>
            <div id="serversEmptyAuto" class="hidden bg-gray-900 rounded-lg p-4 text-gray-400 text-sm border border-gray-700/60">
                Нет серверов в автораспределении.
            </div>
        </div>

        <div>
            <h6 class="text-white font-medium mb-1">Локации</h6>
            <p class="text-xs text-gray-500 mb-3 max-w-3xl">
                Основная секция, если у сервера включена «Локация (мульти-сервер)» и нет <code class="text-cyan-300">[Balancer]</code> в шаблоне ключа (приоритет секций: балансировка → локации → автораспределение).
            </p>
            <div id="serverCardsLocations" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"></div>
            <div id="serversEmptyLocations" class="hidden bg-gray-900 rounded-lg p-4 text-gray-400 text-sm border border-sky-900/40">
                Нет серверов в группе «Локации».
            </div>
        </div>

        <div>
            <h6 class="text-white font-medium mb-1">Балансировка</h6>
            <p class="text-xs text-gray-500 mb-3 max-w-3xl">
                Основная секция при наличии <code class="text-cyan-300">[Balancer]</code> в шаблоне ключа. Копию карточки можно вывести в других блоках через «Дубликат карточки» в настройках сервера.
            </p>
            <div id="serverCardsBalancer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"></div>
            <div id="serversEmptyBalancer" class="hidden bg-gray-900 rounded-lg p-4 text-gray-400 text-sm border border-violet-900/40">
                Нет серверов балансировки.
            </div>
        </div>

        <div id="serverSectionOther" class="hidden">
            <h6 class="text-gray-400 text-sm mb-1">Прочие</h6>
            <p class="text-xs text-gray-600 mb-3">Не попали ни в одну группу выше (исключены из автораспределения и без роли локации/балансировки).</p>
            <div id="serverCardsOther" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"></div>
        </div>
    </div>
</div>

<div id="serversJsonEditorModal" class="fixed inset-0 bg-black/60 z-[60] hidden items-center justify-center p-4">
    <div class="w-full max-w-5xl max-h-[92vh] flex flex-col bg-gray-900 border border-violet-600/40 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700 shrink-0">
            <h3 class="text-white text-lg font-semibold">
                <i class="bi bi-braces mr-2 text-violet-300"></i>
                Редактировать JSON серверов
            </h3>
            <button type="button" id="closeServersJsonEditorModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>
        <div class="px-5 py-3 text-xs text-gray-400 border-b border-gray-800 shrink-0 space-y-1">
            <p>Массив объектов серверов (как в API <code class="text-violet-300">/admin/panels/api/servers-cards</code>). Поля <code class="text-gray-300">stats</code> и <code class="text-gray-300">active_users</code> не сохраняются. Для SSH и API Token: <code class="text-gray-300">panel_api_token</code>, <code class="text-gray-300">ssh_host</code>, <code class="text-gray-300">ssh_port</code>, <code class="text-gray-300">ssh_user</code>, <code class="text-gray-300">ssh_password</code> (пароль не перезаписывается, если ключ убран из объекта).</p>
            <p>Новый сервер — объект без <code class="text-gray-300">id</code> или с <code class="text-gray-300">id: null</code>. Удаление строк из JSON не удаляет серверы в БД (удаляйте через меню карточки).</p>
        </div>
        <div class="p-4 flex-1 min-h-0 flex flex-col gap-2">
            <textarea id="serversJsonTextarea" class="w-full flex-1 min-h-[280px] bg-[#0c1222] border border-gray-700 rounded-lg px-3 py-2 text-gray-100 font-mono text-xs leading-relaxed resize-y focus:outline-none focus:ring-2 focus:ring-violet-500/50" spellcheck="false" autocomplete="off"></textarea>
            <p id="serversJsonEditorError" class="text-sm text-red-400 min-h-[1.25rem]"></p>
        </div>
        <div class="flex flex-wrap justify-end gap-2 px-5 py-4 border-t border-gray-700 shrink-0">
            <button type="button" class="btn btn-secondary" id="serversJsonFormatBtn">Форматировать</button>
            <button type="button" class="btn btn-secondary" id="serversJsonReloadBtn">Загрузить с сервера</button>
            <button type="button" class="btn border border-gray-600 text-gray-200" id="serversJsonCancelBtn">Закрыть</button>
            <button type="button" class="btn btn-primary bg-violet-600 hover:bg-violet-500 border-violet-500" id="serversJsonSaveBtn">Сохранить</button>
        </div>
    </div>
</div>

<div id="createServerModal" class="fixed inset-0 bg-transparent z-50 hidden items-center justify-center p-4">
    <div class="w-full max-w-xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700">
            <h3 class="text-white text-lg font-semibold">
                <i class="bi bi-hdd-network mr-2"></i>
                Добавить сервер
            </h3>
            <button type="button" id="closeCreateServerModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>
        <div class="p-5 space-y-4">
            <input type="hidden" id="editingServerId">
            <div>
                <label class="block text-sm text-gray-300 mb-1">Название сервера *</label>
                <input id="newServerName" type="text" placeholder="Например: dddd" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">IP/домен *</label>
                <input id="newServerHost" type="text" placeholder="1.2.3.4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Ссылка на панель</label>
                <input id="newServerPanelUrl" type="text" placeholder="https://example.com:2053/panel" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
            </div>
        </div>
        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-700">
            <button type="button" class="btn btn-secondary" id="cancelCreateServer">Отмена</button>
            <button type="button" class="btn btn-primary" id="saveServerBtn">Сохранить</button>
        </div>
    </div>
</div>

<div id="editServerModal" class="fixed inset-0 bg-transparent z-50 hidden items-center justify-center p-4">
    <div class="w-full max-w-6xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700">
            <h3 id="editServerModalTitle" class="text-white text-2xl font-semibold">
                <i class="bi bi-database mr-2"></i> Редактировать сервер
            </h3>
            <button type="button" id="closeEditServerModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>

        <div class="p-5 max-h-[82vh] overflow-y-auto space-y-4">
            <button type="button" class="btn btn-secondary" id="backFromEditToList">
                <i class="bi bi-arrow-left mr-2"></i>Назад к списку
            </button>

            <input type="hidden" id="editServerId">

            <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
                <h4 class="text-white font-semibold mb-3">Быстрое заполнение из 3X-UI</h4>
                <label class="block text-sm text-gray-300 mb-1">Вставьте вывод 3X-UI панели</label>
                <textarea id="quickFillText" rows="4" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" placeholder="[INF] current panel settings..."></textarea>
                <button type="button" class="btn btn-primary mt-3" id="quickFillBtn">Заполнить из 3X-UI</button>
            </div>

            <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
                <h4 class="text-white font-semibold mb-3">Основная информация</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Название сервера (для админки)</label>
                        <div class="relative z-[60]" id="editNameComboWrap">
                            <input type="text" id="editNameInput" autocomplete="off" role="combobox" aria-expanded="false" aria-controls="editNameDropdown"
                                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"
                                placeholder="Нажмите и введите страну или код (RU, дан…)">
                            <select id="editName" class="hidden" tabindex="-1" aria-hidden="true"></select>
                            <ul id="editNameDropdown" role="listbox" class="hidden absolute left-0 right-0 top-full mt-1 max-h-56 overflow-y-auto bg-gray-900 border border-gray-700 rounded-lg shadow-xl py-1 z-[70]"></ul>
                        </div>
                        <input type="text" id="editNameCustom" autocomplete="off"
                            class="hidden w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white mt-2"
                            placeholder="Своё название, например: LV Латвия">
                        <p class="text-xs text-gray-500 mt-1">Кликните в поле и начните вводить название или код; выберите страну (с эмодзи-флагом) или «Другое». В базу сохраняется код и название — как раньше для подписок.</p>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Inbound ID</label>
                        <input id="editInboundId" type="number" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" value="1">
                        <p class="text-xs text-gray-500 mt-1">ID инбаунда в панели, к которому бот привязывает клиентов. После создания из шаблона при необходимости обновите вручную.</p>
                    </div>
                    <div class="md:col-span-2 border border-violet-800/60 rounded-lg p-3 bg-violet-950/25">
                        <h5 class="text-sm font-semibold text-white mb-1">Создать Inbound на панели из шаблона</h5>
                        <p class="text-xs text-gray-400 mb-2">Берётся JSON из <strong>Инструменты → Шаблон Inbound</strong> (слот 1, 2, 3…). Добавляет новый инбаунд через API 3X-UI (существующие не перезаписываются).</p>
                        <div class="flex flex-wrap gap-2 items-end">
                            <div class="flex-1 min-w-[200px]">
                                <label for="editInboundTemplateSlotSelect" class="block text-xs text-gray-400 mb-1">Сохранённые шаблоны</label>
                                <select id="editInboundTemplateSlotSelect" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                                    <option value="">— загрузка списка —</option>
                                </select>
                            </div>
                            <div class="w-24">
                                <label for="editInboundTemplateSlotNum" class="block text-xs text-gray-400 mb-1">Слот 1–999</label>
                                <input type="number" id="editInboundTemplateSlotNum" min="1" max="999" value="1" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-2 text-white text-sm">
                            </div>
                            <button type="button" class="btn btn-secondary text-sm py-2 whitespace-nowrap" id="applyInboundTemplateToPanelBtn">Создать на панели</button>
                        </div>
                        <p id="applyInboundTemplateStatus" class="text-xs mt-2 text-amber-200/90"></p>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Протокол</label>
                        <select id="editProtocol" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                            <option>VLESS</option>
                            <option>VMESS</option>
                            <option>TROJAN</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Client Flow (опционально)</label>
                        <select id="editClientFlow" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                            <option value="">По умолчанию (xtls-rprx-vision)</option>
                            <option value="xtls-rprx-vision">xtls-rprx-vision</option>
                            <option value="xtls-rprx-vision-udp443">xtls-rprx-vision-udp443</option>
                        </select>
                        <p class="text-xs text-gray-500 mt-1">Используется при создании клиентов на этой панели (и в ссылках без шаблона). Пустое значение = <code class="text-gray-400">xtls-rprx-vision</code>.</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
                <h4 class="text-white font-semibold mb-3">Данные для подключения к 3X-UI панели</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">URL (без http/https и порта)</label>
                        <input id="editHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Порт панели</label>
                        <input id="editPanelPort" type="number" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" value="443">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm text-gray-300 mb-1">Секретный путь (если есть)</label>
                        <input id="editSecretPath" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Логин</label>
                        <input id="editLogin" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Пароль</label>
                        <input id="editPassword" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm text-gray-300 mb-1">API Token (3X-UI v3, Bearer)</label>
                        <div class="flex flex-wrap gap-2 items-stretch">
                            <input id="editPanelApiToken" type="text" autocomplete="off"
                                class="flex-1 min-w-[220px] bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono text-sm"
                                placeholder="Токен из Settings → Security или подтяните по SSH">
                            <button type="button" class="btn btn-secondary whitespace-nowrap" id="fetchPanelApiTokenBtn">
                                <i class="bi bi-cloud-download mr-1"></i>Подтянуть с сервера
                            </button>
                            <button type="button" class="btn btn-outline-warning whitespace-nowrap" id="regeneratePanelApiTokenBtn" title="Удалить старые токены в панели и создать новый">
                                <i class="bi bi-arrow-repeat mr-1"></i>Пересоздать
                            </button>
                        </div>
                        <p id="fetchPanelApiTokenStatus" class="text-xs mt-1 text-gray-500"></p>
                        <pre id="fetchPanelApiTokenLogs" class="hidden mt-2 text-xs text-gray-400 bg-black/30 border border-gray-800 rounded p-2 max-h-40 overflow-y-auto font-mono whitespace-pre-wrap"></pre>
                        <p class="text-xs text-gray-500 mt-1">Один и тот же токен можно использовать с бота (удалённый сервер) и с локального ПК — для одной панели 3X-UI это один секрет, не привязан к IP. Скопируйте существующий токен из панели (Настройки → Безопасность → API Tokens), вставьте сюда и нажмите «Сохранить».</p>
                        <p class="text-xs text-amber-400/90 mt-1"><strong>Не нажимайте «Пересоздать»</strong>, если токен уже работает на локальном ПК: кнопка удаляет <em>все</em> токены в панели и создаёт новый — доступ с ПК пропадёт, пока не обновите токен там.</p>
                        <p class="text-xs text-gray-500 mt-1">Пустое поле при «Сохранить» не стирает уже записанный токен в БД бота.</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
                <h4 class="text-white font-semibold mb-3">SSH на VPS (токен, терминал, установка)</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">SSH хост</label>
                        <input id="editSshHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" placeholder="как URL/IP сервера">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">SSH порт</label>
                        <input id="editSshPort" type="number" value="22" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">SSH пользователь</label>
                        <input id="editSshUser" type="text" value="root" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">SSH пароль</label>
                        <input id="editSshPassword" type="password" autocomplete="new-password" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" placeholder="для SSH и подтягивания API Token">
                    </div>
                </div>
            </div>

            <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
                <h4 class="text-white font-semibold mb-3">Данные для ссылки-подписки клиента</h4>

                <div class="flex gap-2 rounded-lg border border-sky-800/80 bg-sky-950/45 px-3 py-2.5 text-sm text-sky-100 mb-4">
                    <i class="bi bi-info-circle shrink-0 mt-0.5"></i>
                    <div>
                        Поля ниже нужно заполнить даже при выключенном конфигураторе ключа: иначе для подписки могут использоваться
                        значения по умолчанию (<strong>хост: 0</strong>, <strong>порт: 1111</strong>).
                        Для быстрой и предсказуемой выдачи подписки рекомендуем включить <strong>конфигуратор ключа</strong> и задать шаблон.
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Публичный хост (домен/IP для клиента)</label>
                        <input id="editPublicHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" value="0">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">Публичный порт (порт клиента)</label>
                        <input id="editPublicPort" type="number" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" value="1111">
                        <p class="text-xs text-gray-500 mt-1.5">Для ссылок и шаблона подписки. Порт inbound на панели 3X-UI задаётся в самой панели, а не этим полем.</p>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm text-gray-300 mb-1">Префикс пути для подписки</label>
                        <input id="editSubPath" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" value="sub">
                    </div>

                    <div class="md:col-span-2 flex flex-col gap-2 rounded-lg border border-gray-700 bg-gray-900/50 px-4 py-3">
                        <label class="inline-flex items-center gap-3 cursor-pointer">
                            <input id="editUseKeyConfigurator" type="checkbox" class="h-5 w-5 rounded border-gray-600 bg-gray-900 text-blue-600 focus:ring-blue-500 focus:ring-offset-gray-900">
                            <span class="text-gray-200 font-medium">Использовать конфигуратор ключа</span>
                        </label>
                        <p class="text-xs text-gray-500 max-w-2xl pl-8">
                            При включении запросы к <code class="text-gray-400">run.py</code> для стандартного host/port не выполняются — используется ваш шаблон ссылки.
                        </p>
                    </div>

                    <div id="keyConfiguratorDetails" class="md:col-span-2 space-y-4 hidden border border-gray-700 rounded-xl bg-gray-900/40 p-4">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                            <label class="inline-flex items-center gap-3 cursor-pointer">
                                <input id="editKeyRandom" type="checkbox" class="h-5 w-5 rounded border-gray-600 bg-gray-900 text-blue-600 focus:ring-blue-500 focus:ring-offset-gray-900">
                                <span class="text-gray-200 font-medium">Случайный выбор ключа</span>
                            </label>
                            <p class="text-xs text-gray-500 sm:max-w-md">
                                Для балансировки: случайно выбирается одна строка из шаблона (если их несколько).
                            </p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-1">Шаблон ключа для клиента</label>
                            <textarea id="editKeyTemplate" rows="5" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono text-xs" placeholder="vless://[UUID]@[URL Сервера]:[Port Публичный порт (порт клиента)]?type=tcp&encryption=none&security=reality&pbk=...&fp=edge&sni=...&sid=...&spx=%2F&flow=xtls-rprx-vision#[Email]"></textarea>
                            <p class="text-xs text-gray-500 mt-2">При оформлении подписки бот подставляет в эти плейсхолдеры UUID и email клиента, имя сервера, а также <strong>публичный хост</strong> и <strong>публичный порт</strong> из настроек этого сервера.</p>
                        </div>

                        <div class="rounded-lg border border-gray-700 bg-gray-950/60 p-3 text-sm text-gray-300">
                            <div class="font-semibold text-white mb-2">Доступные переменные <span class="text-gray-500 font-normal text-xs">(нажмите — вставится в шаблон)</span></div>
                            <ul class="space-y-2 text-xs text-gray-400">
                                <li class="flex flex-wrap items-baseline gap-2">
                                    <button type="button" data-key-token="[UUID]" class="key-template-token font-mono text-cyan-300 hover:text-cyan-100 underline decoration-dotted underline-offset-2 bg-transparent border-0 p-0 cursor-pointer">[UUID]</button>
                                    <span>- UUID клиента (заменяется автоматически при генерации ключа)</span>
                                </li>
                                <li class="flex flex-wrap items-baseline gap-2">
                                    <button type="button" data-key-token="[Email]" class="key-template-token font-mono text-cyan-300 hover:text-cyan-100 underline decoration-dotted underline-offset-2 bg-transparent border-0 p-0 cursor-pointer">[Email]</button>
                                    <span>- Email клиента (заменяется автоматически при генерации ключа)</span>
                                </li>
                                <li class="flex flex-wrap items-baseline gap-2">
                                    <button type="button" data-key-token="[Servername]" class="key-template-token font-mono text-cyan-300 hover:text-cyan-100 underline decoration-dotted underline-offset-2 bg-transparent border-0 p-0 cursor-pointer">[Servername]</button>
                                    <span>-имя сервера, URL-encoded формате (заменяетсяа автоматически)</span>
                                </li>
                                <li class="flex flex-wrap items-baseline gap-2">
                                    <button type="button" data-key-token="[Balancer]" class="key-template-token font-mono text-cyan-300 hover:text-cyan-100 underline decoration-dotted underline-offset-2 bg-transparent border-0 p-0 cursor-pointer">[Balancer]</button>
                                    <span>— маркер балансировки (в подписке не показывается)</span>
                                </li>
                            </ul>
                        </div>

                        <p class="text-xs text-gray-500 border-l-2 border-violet-500/50 pl-3">
                            <strong class="text-gray-300">Множественные ключи:</strong> каждая строка в поле шаблона — отдельный ключ.
                            Можно задать разные IP/домены; все строки попадут в список при генерации подписки.
                        </p>
                    </div>

                    <div class="md:col-span-2 flex gap-2 rounded-lg border border-sky-800/80 bg-sky-950/40 px-3 py-2 text-sm text-sky-100">
                        <i class="bi bi-info-circle shrink-0 mt-0.5"></i>
                        <div>
                            <strong class="font-semibold">Когда использовать:</strong>
                            шаблон ключа рекомендуется, если ссылка в подписке формируется некорректно или панель 3X-UI отвечает медленно.
                        </div>
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-300 mb-1">Мульти SNI (домены через запятую или построчно)</label>
                        <textarea id="editMultiSni" rows="3" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white" placeholder="google.com, yahoo.com, cloudflare.com"></textarea>
                        <p class="text-xs text-gray-500 mt-2">
                            Если заданы домены, в подписке могут быть созданы несколько вариантов одного ключа с разными SNI.
                        </p>
                    </div>

                    <div class="md:col-span-2 rounded-lg border border-gray-700 bg-gray-950/50 p-4 space-y-3">
                        <div class="text-sm font-semibold text-gray-200">Роли на странице 3X-UI</div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="editExcludeAutoAssign" class="block text-xs text-gray-400 mb-1">Исключить из автораспределения</label>
                                <select id="editExcludeAutoAssign" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                                    <option value="0">Нет — участвует в пуле *</option>
                                    <option value="1">Да — не в автораспределении</option>
                                </select>
                            </div>
                            <div>
                                <label for="editMultiServerMode" class="block text-xs text-gray-400 mb-1">Локация (мульти-сервер)</label>
                                <select id="editMultiServerMode" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                                    <option value="0">Нет</option>
                                    <option value="1">Да</option>
                                </select>
                            </div>
                            <div>
                                <label for="editAllowServerSwitch" class="block text-xs text-gray-400 mb-1">Доступен для смены пользователем</label>
                                <select id="editAllowServerSwitch" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                                    <option value="1">Да</option>
                                    <option value="0">Нет</option>
                                </select>
                            </div>
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label for="editServerPriority" class="block text-xs text-gray-400 mb-1">Приоритет (меньше = выше)</label>
                                    <input id="editServerPriority" type="number" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" value="0">
                                </div>
                                <div>
                                    <label for="editClientLimit" class="block text-xs text-gray-400 mb-1">Лимит клиентов (0 = нет)</label>
                                    <input id="editClientLimit" type="number" min="0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" value="0">
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mb-3">Группа «Балансировка»: укажите <code class="text-cyan-300">[Balancer]</code> в шаблоне ключа выше. На странице у каждого сервера одна <strong>основная</strong> секция; ниже — копии карточки в других блоках.</p>
                        <div class="rounded-lg border border-gray-600/50 bg-gray-900/40 p-3 space-y-2">
                            <div class="text-xs font-medium text-gray-300">Дубликат карточки также показывать в</div>
                            <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm text-gray-300">
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" id="editCloneAuto" class="rounded border-gray-600 bg-gray-900">
                                    <span>Автораспределение</span>
                                </label>
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" id="editCloneLocations" class="rounded border-gray-600 bg-gray-900">
                                    <span>Локации</span>
                                </label>
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" id="editCloneBalancer" class="rounded border-gray-600 bg-gray-900">
                                    <span>Балансировка</span>
                                </label>
                            </div>
                            <p class="text-xs text-gray-500" id="editClonePrimaryHint"></p>
                        </div>
                    </div>

                    <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <label class="inline-flex items-start gap-3 cursor-pointer text-gray-300 text-sm">
                            <input id="editHiddenByDefault" type="checkbox" class="mt-1 rounded bg-gray-900 border-gray-600">
                            <span>Скрыт по умолчанию (не показывать в подписке, пока не включён у пользователя)</span>
                        </label>
                        <label class="inline-flex items-start gap-3 cursor-pointer text-gray-300 text-sm">
                            <input id="editAvailableAfterPayment" type="checkbox" class="mt-1 rounded bg-gray-900 border-gray-600">
                            <span>Доступен при любой успешной оплате клиента</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-700">
            <button type="button" class="btn btn-secondary" id="cancelEditServer">Отмена</button>
            <button type="button" class="btn btn-secondary" id="openServerSshTerminalBtn">Подключение по SSH</button>
            <button type="button" class="btn btn-primary" id="saveEditServerBtn">Сохранить</button>
        </div>
    </div>
</div>

<div id="sshInstallModal" class="fixed inset-0 bg-transparent z-50 hidden items-center justify-center p-4">
    <div class="w-full max-w-3xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700">
            <h3 class="text-white text-lg font-semibold">
                <i class="bi bi-terminal mr-2"></i>
                Установка 3X-UI через SSH
            </h3>
            <button type="button" id="closeSshInstallModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>

        <div class="p-5 space-y-4 max-h-[80vh] overflow-y-auto">
            <div class="bg-yellow-900/50 border border-yellow-800 text-yellow-200 text-sm rounded-lg p-3">
                <div class="font-semibold mb-1">Внимание: Корректность установки зависит от изменений скрипта установки 3X-UI.</div>
                <div class="text-yellow-100/80">Функционал предназначен для тестирования и отладки.</div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">IP адрес сервера <span class="text-red-400">*</span></label>
                <input id="sshHost" type="text" placeholder="1.2.3.4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
                <p class="text-xs text-gray-500 mt-1">IP адрес или доменное имя сервера</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">SSH порт</label>
                <input id="sshPort" type="number" value="22" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">SSH пользователь</label>
                <input id="sshUser" type="text" value="root" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">SSH пароль <span class="text-red-400">*</span></label>
                <input id="sshPassword" type="password" placeholder="Введите пароль" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
                <p class="text-xs text-gray-500 mt-1">Пароль не сохраняется, используется только для установки. Если видите «Authentication failed», проверьте логин и пароль root на VPS (вход с того же хоста, где работает web_admin).</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Версия 3X-UI</label>
                <select id="xuiPanelVersion" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    <option value="v3">v3.x (master, API Token + Inbound)</option>
                    <option value="v2.9.4">v2.9.4 (классическая ветка)</option>
                </select>
                <p class="text-xs text-gray-500 mt-1">Для v3.x после установки читается API Token и создаётся Inbound id=1.</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Тип инбаунда</label>
                <select id="inboundType" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white">
                    <option>VLESS + Reality (TCP)</option>
                    <option>VLESS + TLS (TCP)</option>
                    <option>VMESS + WS + TLS</option>
                </select>
                <p class="text-xs text-gray-500 mt-1">Будет создан базовый инбаунд выбранного типа</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Тип SSL сертификата</label>
                <div class="flex items-center text-gray-300">
                    <input id="sslTypeIp" type="radio" checked class="mr-2">
                    <label for="sslTypeIp">IP сертификат (6 дней, автообновление)</label>
                </div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Название сервера</label>
                <div class="relative z-[60]" id="sshServerNameComboWrap">
                    <input type="text" id="sshServerNameInput" autocomplete="off" role="combobox" aria-expanded="false" aria-controls="sshServerNameDropdown"
                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white"
                        placeholder="Нажмите и введите страну или код">
                    <select id="sshServerNameSelect" class="hidden" tabindex="-1" aria-hidden="true"></select>
                    <ul id="sshServerNameDropdown" role="listbox" class="hidden absolute left-0 right-0 top-full mt-1 max-h-56 overflow-y-auto bg-gray-800 border border-gray-700 rounded-lg shadow-xl py-1 z-[70]"></ul>
                </div>
                <input id="sshServerNameCustom" type="text" placeholder="Своё название, например: DE Германия-2" class="hidden w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white mt-2">
                <p class="text-xs text-gray-500 mt-1">Кликните в поле и начните вводить; страна с эмодзи-флагом в списке или «Другое». Пусто — будет использован IP адрес</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Прогресс установки</label>
                <div class="install-progress-row">
                    <div
                        id="installProgressTrack"
                        class="install-progress-track"
                        role="progressbar"
                        aria-valuemin="0"
                        aria-valuemax="100"
                        aria-valuenow="0"
                        aria-label="Прогресс установки"
                    >
                        <div id="installProgressFill" class="install-progress-fill"></div>
                    </div>
                    <span id="installProgressText" class="install-progress-pct">0%</span>
                </div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Логи установки</label>
                <div id="installLogs" class="bg-black/40 border border-gray-800 rounded-lg p-2.5 text-green-400 font-mono h-32 overflow-y-auto"></div>
            </div>

            <div id="installFinishedBox" class="hidden bg-emerald-900/30 border border-emerald-700 rounded-lg p-4">
                <div class="text-emerald-300 font-semibold mb-1">
                    <i class="bi bi-check-circle mr-1"></i>Установка завершена!
                </div>
                <div class="text-emerald-200 text-sm">
                    Сервер успешно установлен и добавлен в систему.
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-700">
            <button type="button" class="btn btn-secondary" id="cancelSshInstall">Отмена</button>
            <button type="button" class="btn btn-primary" id="startSshInstall">Запуск...</button>
        </div>
    </div>
</div>

<div id="serverSshTerminalModal" class="fixed inset-0 bg-transparent z-50 hidden items-center justify-center p-4">
    <div class="w-full max-w-4xl max-h-[92vh] flex flex-col bg-gray-900 border border-gray-700 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700 shrink-0">
            <h3 id="serverSshTerminalTitle" class="text-white text-lg font-semibold">
                <i class="bi bi-terminal mr-2"></i> SSH терминал
            </h3>
            <button type="button" id="closeServerSshTerminalModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>
        <div class="p-5 space-y-3 flex flex-col min-h-0 flex-1 overflow-hidden">
            <div class="text-xs text-gray-400 shrink-0">Подключение выполняется автоматически по сохранённым данным сервера.</div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 shrink-0">
                <input id="sshConnectHost" type="text" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="SSH host">
                <input id="sshConnectPort" type="number" value="22" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="SSH port">
                <input id="sshConnectUser" type="text" value="root" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="SSH user">
                <input id="sshConnectPassword" type="password" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="SSH password (опц.)">
            </div>
            <div id="serverSshTerminalOutput" class="w-full min-h-[280px] h-[min(52vh,520px)] shrink-0 rounded-lg border border-gray-700 bg-black"></div>
            <div class="flex gap-2 shrink-0">
                <input id="serverSshFallbackCommand" type="text" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono text-sm" placeholder="Команда для fallback режима, например: uname -a">
                <button type="button" class="btn btn-primary" id="serverSshFallbackRunBtn">Выполнить</button>
            </div>
            <div class="text-xs text-gray-500 shrink-0">Интерактивный режим работает через WebSocket. Если он недоступен — команды выполняются кнопкой "Выполнить".</div>
        </div>
        <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-700 shrink-0">
            <button type="button" class="btn btn-secondary" id="serverSshTerminalDisconnectBtn">Отключиться</button>
            <button type="button" class="btn btn-secondary" id="serverSshTerminalCloseBtn">Закрыть</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script>
const sshModal = document.getElementById('sshInstallModal');
const openSshInstallModal = document.getElementById('openSshInstallModal');
const closeSshInstallModal = document.getElementById('closeSshInstallModal');
const cancelSshInstall = document.getElementById('cancelSshInstall');
const startSshInstall = document.getElementById('startSshInstall');
const installLogs = document.getElementById('installLogs');
const installProgressTrack = document.getElementById('installProgressTrack');
const installProgressFill = document.getElementById('installProgressFill');
const installProgressText = document.getElementById('installProgressText');
const installFinishedBox = document.getElementById('installFinishedBox');
const openCreateServerModalBtn = document.getElementById('openCreateServerModal');
const createServerModal = document.getElementById('createServerModal');
const closeCreateServerModalBtn = document.getElementById('closeCreateServerModal');
const cancelCreateServerBtn = document.getElementById('cancelCreateServer');
const saveServerBtn = document.getElementById('saveServerBtn');
const editServerModal = document.getElementById('editServerModal');
const editServerModalTitle = document.getElementById('editServerModalTitle');
const closeEditServerModalBtn = document.getElementById('closeEditServerModal');
const cancelEditServerBtn = document.getElementById('cancelEditServer');
const backFromEditToListBtn = document.getElementById('backFromEditToList');
const saveEditServerBtn = document.getElementById('saveEditServerBtn');
const openServerSshTerminalBtn = document.getElementById('openServerSshTerminalBtn');
const serverSshTerminalModal = document.getElementById('serverSshTerminalModal');
const closeServerSshTerminalModal = document.getElementById('closeServerSshTerminalModal');
const serverSshTerminalCloseBtn = document.getElementById('serverSshTerminalCloseBtn');
const serverSshTerminalDisconnectBtn = document.getElementById('serverSshTerminalDisconnectBtn');
const serverSshTerminalOutput = document.getElementById('serverSshTerminalOutput');
const serverSshTerminalTitle = document.getElementById('serverSshTerminalTitle');
const serverSshFallbackCommand = document.getElementById('serverSshFallbackCommand');
const serverSshFallbackRunBtn = document.getElementById('serverSshFallbackRunBtn');
const sshConnectHost = document.getElementById('sshConnectHost');
const sshConnectPort = document.getElementById('sshConnectPort');
const sshConnectUser = document.getElementById('sshConnectUser');
const sshConnectPassword = document.getElementById('sshConnectPassword');
const quickFillBtn = document.getElementById('quickFillBtn');
const serverCardsAuto = document.getElementById('serverCardsAuto');
const serverCardsLocations = document.getElementById('serverCardsLocations');
const serverCardsBalancer = document.getElementById('serverCardsBalancer');
const serverCardsOther = document.getElementById('serverCardsOther');
const serverSectionOther = document.getElementById('serverSectionOther');
const serversEmptyAuto = document.getElementById('serversEmptyAuto');
const serversEmptyLocations = document.getElementById('serversEmptyLocations');
const serversEmptyBalancer = document.getElementById('serversEmptyBalancer');
const totalServersStat = document.getElementById('totalServersStat');
const activeServersStat = document.getElementById('activeServersStat');
const onlineUsersStat = document.getElementById('onlineUsersStat');
const serversJsonEditorModal = document.getElementById('serversJsonEditorModal');
const openServersJsonEditorBtn = document.getElementById('openServersJsonEditorBtn');
const closeServersJsonEditorModalBtn = document.getElementById('closeServersJsonEditorModal');
const serversJsonTextarea = document.getElementById('serversJsonTextarea');
const serversJsonEditorError = document.getElementById('serversJsonEditorError');
const serversJsonFormatBtn = document.getElementById('serversJsonFormatBtn');
const serversJsonReloadBtn = document.getElementById('serversJsonReloadBtn');
const serversJsonCancelBtn = document.getElementById('serversJsonCancelBtn');
const serversJsonSaveBtn = document.getElementById('serversJsonSaveBtn');
let statusPollTimer = null;
let serversState = [];
const serverStatsById = {};
let currentSshSessionId = null;
let sshFallbackSessionId = null;
let sshTerminalWs = null;
let sshXterm = null;
let sshFitAddon = null;
let sshWsConnected = false;
/** Не вызывать fallback дважды из onerror + onclose при одном сбое WS */
let wsFallbackScheduled = false;
let _sshWindowResizeBound = false;

/** Значение v — как в БД (код + название); l — подпись с эмодзи-флагом в списке */
const SERVER_COUNTRY_OPTIONS = [
    { v: 'AE ОАЭ', l: '🇦🇪 ОАЭ' },
    { v: 'AM Армения', l: '🇦🇲 Армения' },
    { v: 'AT Австрия', l: '🇦🇹 Австрия' },
    { v: 'AU Австралия', l: '🇦🇺 Австралия' },
    { v: 'AZ Азербайджан', l: '🇦🇿 Азербайджан' },
    { v: 'BE Бельгия', l: '🇧🇪 Бельгия' },
    { v: 'BG Болгария', l: '🇧🇬 Болгария' },
    { v: 'BR Бразилия', l: '🇧🇷 Бразилия' },
    { v: 'BY Беларусь', l: '🇧🇾 Беларусь' },
    { v: 'CA Канада', l: '🇨🇦 Канада' },
    { v: 'CH Швейцария', l: '🇨🇭 Швейцария' },
    { v: 'CN Китай', l: '🇨🇳 Китай' },
    { v: 'CY Кипр', l: '🇨🇾 Кипр' },
    { v: 'CZ Чехия', l: '🇨🇿 Чехия' },
    { v: 'DE Германия', l: '🇩🇪 Германия' },
    { v: 'DK Дания', l: '🇩🇰 Дания' },
    { v: 'EE Эстония', l: '🇪🇪 Эстония' },
    { v: 'EG Египет', l: '🇪🇬 Египет' },
    { v: 'ES Испания', l: '🇪🇸 Испания' },
    { v: 'EU EC', l: '🇪🇺 EC (Европа)' },
    { v: 'FI Финляндия', l: '🇫🇮 Финляндия' },
    { v: 'FR Франция', l: '🇫🇷 Франция' },
    { v: 'GB Великобритания', l: '🇬🇧 Великобритания' },
    { v: 'GE Грузия', l: '🇬🇪 Грузия' },
    { v: 'GR Греция', l: '🇬🇷 Греция' },
    { v: 'HK Гонконг', l: '🇭🇰 Гонконг' },
    { v: 'HR Хорватия', l: '🇭🇷 Хорватия' },
    { v: 'HU Венгрия', l: '🇭🇺 Венгрия' },
    { v: 'ID Индонезия', l: '🇮🇩 Индонезия' },
    { v: 'IE Ирландия', l: '🇮🇪 Ирландия' },
    { v: 'IL Израиль', l: '🇮🇱 Израиль' },
    { v: 'IN Индия', l: '🇮🇳 Индия' },
    { v: 'IS Исландия', l: '🇮🇸 Исландия' },
    { v: 'IT Италия', l: '🇮🇹 Италия' },
    { v: 'JP Япония', l: '🇯🇵 Япония' },
    { v: 'KZ Казахстан', l: '🇰🇿 Казахстан' },
    { v: 'KR Южная Корея', l: '🇰🇷 Южная Корея' },
    { v: 'LT Литва', l: '🇱🇹 Литва' },
    { v: 'LU Люксембург', l: '🇱🇺 Люксембург' },
    { v: 'LV Латвия', l: '🇱🇻 Латвия' },
    { v: 'MD Молдова', l: '🇲🇩 Молдова' },
    { v: 'NL Нидерланды', l: '🇳🇱 Нидерланды' },
    { v: 'NO Норвегия', l: '🇳🇴 Норвегия' },
    { v: 'NZ Новая Зеландия', l: '🇳🇿 Новая Зеландия' },
    { v: 'PL Польша', l: '🇵🇱 Польша' },
    { v: 'PT Португалия', l: '🇵🇹 Португалия' },
    { v: 'RO Румыния', l: '🇷🇴 Румыния' },
    { v: 'RS Сербия', l: '🇷🇸 Сербия' },
    { v: 'RU Россия', l: '🇷🇺 Россия' },
    { v: 'SE Швеция', l: '🇸🇪 Швеция' },
    { v: 'SG Сингапур', l: '🇸🇬 Сингапур' },
    { v: 'SI Словения', l: '🇸🇮 Словения' },
    { v: 'SK Словакия', l: '🇸🇰 Словакия' },
    { v: 'TH Таиланд', l: '🇹🇭 Таиланд' },
    { v: 'TR Турция', l: '🇹🇷 Турция' },
    { v: 'TW Тайвань', l: '🇹🇼 Тайвань' },
    { v: 'UA Украина', l: '🇺🇦 Украина' },
    { v: 'US США', l: '🇺🇸 США' },
    { v: 'VN Вьетнам', l: '🇻🇳 Вьетнам' },
    { v: 'ZA ЮАР', l: '🇿🇦 ЮАР' },
];

function _countryOptionMatches(o, q) {
    if (!q) return true;
    const ql = q.toLowerCase();
    const parts = (o.v || '').trim().split(/\s+/);
    const code = (parts[0] || '').toLowerCase();
    const rest = parts.slice(1).join(' ').toLowerCase();
    return (
        (o.v || '').toLowerCase().includes(ql) ||
        (o.l || '').toLowerCase().includes(ql) ||
        code.includes(ql) ||
        rest.includes(ql)
    );
}

/** Список стран с учётом строки поиска; текущий выбор оставляем в списке, чтобы не «терять» выбранную страну при фильтре */
function _countryOptionsForFilter(query, currentValue) {
    const q = (query || '').trim();
    if (!q) return SERVER_COUNTRY_OPTIONS.slice();
    const matched = SERVER_COUNTRY_OPTIONS.filter((o) => _countryOptionMatches(o, q));
    if (currentValue && currentValue !== '__custom__') {
        const curObj = SERVER_COUNTRY_OPTIONS.find((o) => o.v === currentValue);
        if (curObj && !matched.some((o) => o.v === curObj.v)) {
            matched.unshift(curObj);
        }
    }
    return matched;
}

function buildCountrySelectOptions(sel, { includePlaceholder, includeCustom }, filterQuery = '') {
    if (!sel) return;
    const previous = sel.value;
    const opts = _countryOptionsForFilter(filterQuery, previous);
    sel.innerHTML = '';
    if (includePlaceholder) {
        const o = document.createElement('option');
        o.value = '';
        o.textContent = '— Выберите страну —';
        sel.appendChild(o);
    }
    opts.forEach(({ v, l }) => {
        const o = document.createElement('option');
        o.value = v;
        o.textContent = l;
        sel.appendChild(o);
    });
    if (includeCustom) {
        const o = document.createElement('option');
        o.value = '__custom__';
        o.textContent = '✏️ Другое (своё название)…';
        sel.appendChild(o);
    }
    if (previous === '__custom__') {
        sel.value = '__custom__';
    } else if (previous && [...sel.options].some((op) => op.value === previous)) {
        sel.value = previous;
    } else {
        sel.value = '';
    }
}

function _countryDisplayForSelectValue(val) {
    if (val === '__custom__') return '✏️ Другое (своё название)…';
    if (!val) return '';
    const o = SERVER_COUNTRY_OPTIONS.find((x) => x.v === val);
    return o ? o.l : val;
}

function syncCountryComboFromSelect(input, select, custom) {
    if (!select) return;
    if (select.value === '__custom__') {
        if (input) input.value = '✏️ Другое (своё название)…';
    } else if (select.value) {
        if (input) input.value = _countryDisplayForSelectValue(select.value);
    } else if (input) {
        input.value = '';
    }
}

/**
 * Один инпут: при фокусе сразу можно печатать — список фильтруется; выбор из ul.
 */
function initCountryCombobox(opts) {
    const input = opts.input;
    const select = opts.select;
    const list = opts.list;
    const custom = opts.custom;
    const cfg = opts.cfg;
    const itemClass = opts.itemClass || 'px-3 py-2 cursor-pointer hover:bg-gray-700 text-sm text-white truncate';
    if (!input || !select || !list) return;

    function closeList() {
        list.classList.add('hidden');
        input.setAttribute('aria-expanded', 'false');
    }
    function openList() {
        list.classList.remove('hidden');
        input.setAttribute('aria-expanded', 'true');
    }

    function renderDropdown(filterText) {
        const q = filterText !== undefined && filterText !== null ? String(filterText) : input.value;
        const prev = select.value;
        const arr = _countryOptionsForFilter(q, prev);
        list.innerHTML = '';
        const addLi = (value, label) => {
            const li = document.createElement('li');
            li.setAttribute('role', 'option');
            li.className = itemClass;
            li.dataset.value = value;
            li.textContent = label;
            li.addEventListener('mousedown', (e) => {
                e.preventDefault();
                select.value = value;
                buildCountrySelectOptions(select, cfg, '');
                if (value === '__custom__') {
                    input.value = '✏️ Другое (своё название)…';
                    if (custom) {
                        custom.classList.remove('hidden');
                        custom.focus();
                    }
                } else if (value === '') {
                    input.value = '';
                    if (custom) {
                        custom.classList.add('hidden');
                        custom.value = '';
                    }
                } else {
                    const o = SERVER_COUNTRY_OPTIONS.find((x) => x.v === value);
                    input.value = o ? o.l : value;
                    if (custom) {
                        custom.classList.add('hidden');
                        custom.value = '';
                    }
                }
                closeList();
            });
            list.appendChild(li);
        };
        if (cfg.includePlaceholder) addLi('', '— Выберите страну —');
        arr.forEach((o) => addLi(o.v, o.l));
        if (cfg.includeCustom) addLi('__custom__', '✏️ Другое (своё название)…');
    }

    input.addEventListener('focus', () => {
        renderDropdown(input.value);
        openList();
    });

    input.addEventListener('input', () => {
        renderDropdown(input.value);
        openList();
    });

    input.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeList();
            syncCountryComboFromSelect(input, select, custom);
        }
    });

    input.addEventListener('blur', () => {
        setTimeout(() => {
            closeList();
            syncCountryComboFromSelect(input, select, custom);
        }, 200);
    });
}

function setEditServerNameField(name) {
    const sel = document.getElementById('editName');
    const custom = document.getElementById('editNameCustom');
    const comboIn = document.getElementById('editNameInput');
    if (!sel) return;
    buildCountrySelectOptions(sel, { includePlaceholder: true, includeCustom: true }, '');
    if (!custom) {
        sel.value = (name || '').trim();
        syncCountryComboFromSelect(comboIn, sel, null);
        return;
    }
    const n = (name || '').trim();
    custom.classList.add('hidden');
    custom.value = '';
    if (!n) {
        sel.value = '';
        syncCountryComboFromSelect(comboIn, sel, custom);
        return;
    }
    for (let i = 0; i < sel.options.length; i++) {
        const opt = sel.options[i];
        if (opt.value && opt.value !== '__custom__' && opt.value.toLowerCase() === n.toLowerCase()) {
            sel.value = opt.value;
            syncCountryComboFromSelect(comboIn, sel, custom);
            return;
        }
    }
    sel.value = '__custom__';
    custom.value = n;
    custom.classList.remove('hidden');
    syncCountryComboFromSelect(comboIn, sel, custom);
}

function getEditServerNameValue() {
    const sel = document.getElementById('editName');
    const custom = document.getElementById('editNameCustom');
    if (!sel) return '';
    if (sel.value === '__custom__') {
        return custom ? (custom.value || '').trim() : '';
    }
    return (sel.value || '').trim();
}

function initEditServerCountryUi() {
    const sel = document.getElementById('editName');
    const custom = document.getElementById('editNameCustom');
    const input = document.getElementById('editNameInput');
    const list = document.getElementById('editNameDropdown');
    const cfg = { includePlaceholder: true, includeCustom: true };
    buildCountrySelectOptions(sel, cfg, '');
    initCountryCombobox({
        input,
        select: sel,
        list,
        custom,
        cfg,
        itemClass: 'px-3 py-2 cursor-pointer hover:bg-gray-700 text-sm text-white truncate',
    });
    syncCountryComboFromSelect(input, sel, custom);
}
initEditServerCountryUi();

function getSshInstallServerNameValue() {
    const sel = document.getElementById('sshServerNameSelect');
    const custom = document.getElementById('sshServerNameCustom');
    if (!sel) return '';
    if (sel.value === '__custom__') {
        return custom ? (custom.value || '').trim() : '';
    }
    return (sel.value || '').trim();
}

function resetSshInstallCountryUi() {
    const sel = document.getElementById('sshServerNameSelect');
    const custom = document.getElementById('sshServerNameCustom');
    const input = document.getElementById('sshServerNameInput');
    if (sel) buildCountrySelectOptions(sel, { includePlaceholder: true, includeCustom: true }, '');
    if (sel) sel.value = '';
    if (custom) {
        custom.value = '';
        custom.classList.add('hidden');
    }
    syncCountryComboFromSelect(input, sel, custom);
}

function initSshInstallCountryUi() {
    const sel = document.getElementById('sshServerNameSelect');
    const custom = document.getElementById('sshServerNameCustom');
    const input = document.getElementById('sshServerNameInput');
    const list = document.getElementById('sshServerNameDropdown');
    const cfg = { includePlaceholder: true, includeCustom: true };
    buildCountrySelectOptions(sel, cfg, '');
    initCountryCombobox({
        input,
        select: sel,
        list,
        custom,
        cfg,
        itemClass: 'px-3 py-2 cursor-pointer hover:bg-gray-600 text-sm text-white truncate',
    });
    syncCountryComboFromSelect(input, sel, custom);
}
initSshInstallCountryUi();

function _sshScrollToBottom(term) {
    const t = term || sshXterm;
    if (!t) return;
    try {
        if (typeof t.scrollToBottom === 'function') t.scrollToBottom();
        else {
            const buf = t.buffer && t.buffer.active;
            if (buf && typeof t.scrollToLine === 'function') t.scrollToLine(buf.length);
        }
    } catch (_) {}
}

function scheduleSshTerminalFit() {
    requestAnimationFrame(() => {
        try {
            if (sshFitAddon && sshXterm) sshFitAddon.fit();
            _sshScrollToBottom();
        } catch (_) {}
        if (sshTerminalWs && sshTerminalWs.readyState === WebSocket.OPEN && sshXterm) {
            try {
                sshTerminalWs.send(
                    JSON.stringify({ type: 'resize', cols: sshXterm.cols, rows: sshXterm.rows })
                );
            } catch (_) {}
        }
    });
}

function appendSshTerminal(text) {
    const line = String(text || '');
    if (sshXterm) {
        sshXterm.writeln(line);
        _sshScrollToBottom();
        return;
    }
    serverSshTerminalOutput.textContent += `${line}\n`;
}

function ensureSshXterm() {
    if (sshXterm) return sshXterm;
    if (!window.Terminal) return null;
    sshXterm = new window.Terminal({
        convertEol: true,
        cursorBlink: true,
        fontSize: 13,
        scrollback: 8000,
        theme: {
            background: '#000000',
            foreground: '#6ee7b7',
        },
    });
    const FA = window.FitAddon;
    const FitCtor = FA && (FA.FitAddon || FA.default || FA);
    if (FitCtor) {
        try {
            sshFitAddon = new FitCtor();
            sshXterm.loadAddon(sshFitAddon);
        } catch (_) {
            sshFitAddon = null;
        }
    }
    sshXterm.open(serverSshTerminalOutput);
    scheduleSshTerminalFit();
    sshXterm.onData((data) => {
        if (!sshTerminalWs || sshTerminalWs.readyState !== WebSocket.OPEN) return;
        sshTerminalWs.send(JSON.stringify({ type: 'input', data }));
    });
    if (!_sshWindowResizeBound) {
        _sshWindowResizeBound = true;
        window.addEventListener('resize', () => scheduleSshTerminalFit());
    }
    return sshXterm;
}

async function cleanupSshTransport(options) {
    const closeModal = options && options.closeModal === true;
    wsFallbackScheduled = false;
    if (sshTerminalWs) {
        try {
            if (sshTerminalWs.readyState === WebSocket.OPEN) {
                sshTerminalWs.send(JSON.stringify({ type: 'close' }));
            }
        } catch (_) {}
        try {
            sshTerminalWs.close();
        } catch (_) {}
        sshTerminalWs = null;
    }
    sshWsConnected = false;
    const sid = sshFallbackSessionId;
    if (sid) {
        try {
            await fetch('/admin/panels/api/ssh-terminal/disconnect', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ session_id: sid }),
            });
        } catch (_) {}
        sshFallbackSessionId = null;
    }
    currentSshSessionId = null;
    if (closeModal) closeServerSshModal();
}

function openServerSshModal() {
    serverSshTerminalModal.classList.remove('hidden');
    serverSshTerminalModal.classList.add('flex');
    scheduleSshTerminalFit();
    setTimeout(scheduleSshTerminalFit, 80);
    setTimeout(scheduleSshTerminalFit, 350);
}

function closeServerSshModal() {
    serverSshTerminalModal.classList.add('hidden');
    serverSshTerminalModal.classList.remove('flex');
}

function currentSshOverrides() {
    return {
        ssh_host: (sshConnectHost.value || '').trim(),
        ssh_port: (sshConnectPort.value || '').trim(),
        ssh_username: (sshConnectUser.value || '').trim(),
        ssh_password: sshConnectPassword.value || '',
    };
}

async function connectServerSshTerminal() {
    const serverId = Number(document.getElementById('editServerId').value || 0);
    if (!serverId) {
        appendLog('Сначала выберите сервер для редактирования');
        return;
    }
    await cleanupSshTransport({ closeModal: false });
    // Сначала показываем модалку — иначе у контейнера xterm нулевые размеры и FitAddon ломается.
    openServerSshModal();
    sshConnectHost.value = (document.getElementById('editHost')?.value || sshConnectHost.value || '').trim();
    const term = ensureSshXterm();
    if (!term) {
        appendLog('xterm.js не загрузился');
        return;
    }
    term.clear();
    wsFallbackScheduled = false;
    appendSshTerminal('Подключение к серверу...');
    const overrides = currentSshOverrides();
    const forceFallback = !!overrides.ssh_password;
    if (forceFallback) {
        appendSshTerminal('Используются ручные SSH-данные, WebSocket пропущен.');
        await connectServerSshFallback(serverId, overrides);
        return;
    }
    try {
        const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
        const wsUrl = `${proto}://${window.location.host}/admin/panels/ws/ssh-terminal?server_id=${encodeURIComponent(serverId)}`;
        sshTerminalWs = new WebSocket(wsUrl);
        sshTerminalWs.onopen = () => {
            sshWsConnected = true;
            currentSshSessionId = `ws-${Date.now()}`;
            scheduleSshTerminalFit();
            const cols = term.cols || 80;
            const rows = term.rows || 24;
            sshTerminalWs.send(JSON.stringify({ type: 'resize', cols, rows }));
        };
        sshTerminalWs.onmessage = (event) => {
            let payload = {};
            try {
                payload = JSON.parse(event.data || '{}');
            } catch (_) {
                appendSshTerminal(String(event.data || ''));
                return;
            }
            if (payload.type === 'connected') {
                const name = payload.server_name ? ` (${payload.server_name})` : '';
                serverSshTerminalTitle.innerHTML = `<i class="bi bi-terminal mr-2"></i> SSH терминал${name}`;
                appendSshTerminal(`Подключено: ${payload.username}@${payload.host}:${payload.port}`);
                scheduleSshTerminalFit();
                return;
            }
            if (payload.type === 'output') {
                term.write(payload.data || '');
                _sshScrollToBottom(term);
                return;
            }
            if (payload.type === 'error') {
                appendSshTerminal(`\r\nОшибка: ${payload.message || 'неизвестно'}\r\n`);
            }
        };
        sshTerminalWs.onerror = () => {
            appendSshTerminal('\r\nОшибка WebSocket подключения\r\n');
            if (!sshWsConnected && !wsFallbackScheduled) {
                wsFallbackScheduled = true;
                void connectServerSshFallback(serverId, overrides);
            }
        };
        sshTerminalWs.onclose = () => {
            appendSshTerminal('\r\nСоединение закрыто\r\n');
            if (!sshWsConnected && !wsFallbackScheduled) {
                wsFallbackScheduled = true;
                void connectServerSshFallback(serverId, overrides);
            } else if (sshWsConnected) {
                currentSshSessionId = null;
            }
            sshTerminalWs = null;
        };
    } catch (err) {
        appendSshTerminal(`Ошибка подключения: ${err.message}`);
        if (!wsFallbackScheduled) {
            wsFallbackScheduled = true;
            await connectServerSshFallback(serverId, overrides);
        }
    }
}

async function connectServerSshFallback(serverId, overrides = null) {
    try {
        const payload = { server_id: serverId, ...(overrides || currentSshOverrides()) };
        const resp = await fetch('/admin/panels/api/ssh-terminal/connect', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await resp.json();
        if (!resp.ok || !data.ok) {
            appendSshTerminal(`Ошибка fallback-подключения: ${data.message || 'неизвестно'}`);
            return;
        }
        sshFallbackSessionId = data.session_id;
        currentSshSessionId = sshFallbackSessionId;
        const name = data.server_name ? ` (${data.server_name})` : '';
        serverSshTerminalTitle.innerHTML = `<i class="bi bi-terminal mr-2"></i> SSH терминал${name}`;
        appendSshTerminal(`Fallback подключён: ${data.username}@${data.host}:${data.port}`);
        scheduleSshTerminalFit();
    } catch (err) {
        appendSshTerminal(`Ошибка fallback-сети: ${err.message}`);
    }
}

async function runServerSshFallbackCommand() {
    const cmd = (serverSshFallbackCommand.value || '').trim();
    if (!cmd) return;
    serverSshFallbackCommand.value = '';

    if (sshTerminalWs && sshTerminalWs.readyState === WebSocket.OPEN) {
        sshTerminalWs.send(JSON.stringify({ type: 'input', data: `${cmd}\n` }));
        return;
    }
    if (!sshFallbackSessionId) {
        appendSshTerminal('Нет активной SSH-сессии');
        return;
    }
    appendSshTerminal(`$ ${cmd}`);
    try {
        const resp = await fetch('/admin/panels/api/ssh-terminal/exec', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ session_id: sshFallbackSessionId, command: cmd }),
        });
        const data = await resp.json();
        if (!resp.ok || !data.ok) {
            appendSshTerminal(`Ошибка: ${data.message || 'ошибка выполнения команды'}`);
            return;
        }
        if (data.stdout) appendSshTerminal((data.stdout || '').trimEnd());
        if (data.stderr) appendSshTerminal((data.stderr || '').trimEnd());
    } catch (err) {
        appendSshTerminal(`Ошибка сети: ${err.message}`);
    }
}

async function disconnectServerSshTerminal() {
    await cleanupSshTransport({ closeModal: true });
}

function setProgress(value) {
    const v = Math.max(0, Math.min(100, Number(value) || 0));
    const rounded = Math.round(v);
    if (installProgressFill) installProgressFill.style.width = `${v}%`;
    if (installProgressText) installProgressText.textContent = `${rounded}%`;
    if (installProgressTrack) installProgressTrack.setAttribute('aria-valuenow', String(rounded));
}

/** Сброс кнопки и шкалы при новом открытии модалки (повторная установка возможна). */
function resetSshInstallModalControls() {
    if (startSshInstall) {
        startSshInstall.disabled = false;
        delete startSshInstall.dataset.installDone;
        startSshInstall.textContent = 'Запуск...';
    }
    setProgress(0);
    if (installFinishedBox) installFinishedBox.classList.add('hidden');
    stopPolling();
}

function appendLog(text) {
    if (!installLogs) return;
    const now = new Date().toLocaleTimeString('ru-RU', { hour12: false });
    const row = document.createElement('div');
    row.textContent = `[${now}] ${text}`;
    installLogs.appendChild(row);
    installLogs.scrollTop = installLogs.scrollHeight;
}

function showFetchTokenLogs(lines) {
    const el = document.getElementById('fetchPanelApiTokenLogs');
    if (!el) return;
    let items = [];
    if (Array.isArray(lines)) {
        items = lines.filter(Boolean);
    } else if (typeof lines === 'string' && lines.trim()) {
        items = [lines.trim()];
    }
    if (!items.length) {
        el.classList.add('hidden');
        el.textContent = '';
        return;
    }
    el.classList.remove('hidden');
    el.textContent = items.join('\n');
    items.forEach((line) => appendLog(`API Token: ${line}`));
}

document.getElementById('syncAllXuiBtn')?.addEventListener('click', async () => {
    const refresh = document.getElementById('syncAllRefreshLinks')?.checked;
    appendLog(`Полная синхронизация клиентов с панелями 3X-UI${refresh ? ' (ключи user + подписки бота user_subscription + merged)' : ''}…`);
    const btn = document.getElementById('syncAllXuiBtn');
    if (btn) btn.disabled = true;
    try {
        const resp = await fetch('/admin/panels/api/servers-cards/sync-all', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                refresh_links: !!refresh,
                refresh_user_subscription_vless: !!refresh,
            }),
        });
        const data = await resp.json();
        const sa = data.sync_all || {};
        const totalAdd = sa.total_added != null ? sa.total_added : '?';
        const totalSkip = sa.total_skipped != null ? sa.total_skipped : '?';
        appendLog(`Итого по всем серверам: добавлено ${totalAdd}, уже на панели (пропуск) ${totalSkip}`);
        if (sa.refresh) {
            appendLog(`Таблица user: ключи обновлены ${sa.refresh.users_updated ?? 0}, без клиента на панелях ${sa.refresh.users_failed ?? 0}`);
        }
        const subr = sa.subscription_refresh;
        if (subr) {
            appendLog(`Подписки бота (user_subscription.vless): обновлено ${subr.updated ?? 0}, пропуск/ошибок ${subr.failed ?? 0}`);
        }
        (sa.servers || []).forEach((s) => {
            const t = s.sync || {};
            const errPart = (t.errors && t.errors.length)
                ? `; ошибки: ${t.errors.slice(0, 3).map((e) => e.telegram_id).join(', ')}`
                : '';
            const ib = t.inbound1_status ? `; inbound1: ${t.inbound1_status}` : '';
            appendLog(`  ${s.name} (id ${s.server_id}): +${t.added ?? '?'} / пропуск ${t.skipped ?? '?'}${errPart}${ib}`);
        });
        if (!resp.ok || sa.ok === false) {
            appendLog('Предупреждение: на части серверов были ошибки — смотрите строки выше.');
        }
        await loadServers();
        renderServers();
    } catch (err) {
        appendLog(`Ошибка сети при полной синхронизации: ${err.message}`);
    } finally {
        if (btn) btn.disabled = false;
    }
});

document.getElementById('refreshAllVlessBtn')?.addEventListener('click', async () => {
    appendLog('Обновление vless:// для всех пользователей со всех панелей (может занять время)…');
    const btn = document.getElementById('refreshAllVlessBtn');
    if (btn) btn.disabled = true;
    try {
        const resp = await fetch('/admin/panels/api/refresh-all-vless', { method: 'POST' });
        const data = await resp.json();
        const r = data.refresh || {};
        appendLog(
            `Готово: пользователей ${r.users_total ?? '?'}, обновлено ${r.users_updated ?? '?'}, с ошибками ${r.users_failed ?? '?'}`,
        );
        if (!resp.ok || data.ok === false) {
            appendLog('Проверьте ответ сервера и логи web_admin.');
        }
    } catch (err) {
        appendLog(`Ошибка сети при обновлении vless: ${err.message}`);
    } finally {
        if (btn) btn.disabled = false;
    }
});

function stripAnsi(text) {
    return (text || '').replace(/\x1B\[[0-9;]*[A-Za-z]/g, '');
}

function parseInstallOutput(lines) {
    const parsed = {};
    for (const rawLine of lines) {
        const line = stripAnsi(rawLine);
        const mUser = line.match(/Username:\s*([^\s]+)/i);
        if (mUser) parsed.username = mUser[1];
        const mPass = line.match(/Password:\s*([^\s]+)/i);
        if (mPass) parsed.password = mPass[1];
        const mPort = line.match(/Port:\s*(\d{2,5})/i);
        if (mPort) parsed.port = mPort[1];
        const mPath = line.match(/WebBasePath:\s*([^\s]+)/i);
        if (mPath) parsed.secret_path = mPath[1] === '/' ? '/' : `/${mPath[1].replace(/^\/|\/$/g, '')}/`;
        const mUrl = line.match(/URL:\s*(https?:\/\/[^\s]+)/i);
        if (mUrl) {
            parsed.url = mUrl[1];
            try {
                const u = new URL(parsed.url);
                parsed.host = u.hostname;
                if (!parsed.port && u.port) parsed.port = u.port;
                if (!parsed.secret_path && u.pathname && u.pathname !== '/') parsed.secret_path = u.pathname;
            } catch (_) {}
        }
    }
    return parsed;
}

function applyInstallDataToServerForm(parsed, fallbackName) {
    if (!parsed || Object.keys(parsed).length === 0) return;
    openEditServerModal(null);
    if (fallbackName) setEditServerNameField(fallbackName);
    if (parsed.host) {
        document.getElementById('editHost').value = parsed.host;
        document.getElementById('editPublicHost').value = parsed.host;
    }
    if (parsed.port) document.getElementById('editPanelPort').value = parsed.port;
    if (parsed.username) document.getElementById('editLogin').value = parsed.username;
    if (parsed.password) document.getElementById('editPassword').value = parsed.password;
    if (parsed.secret_path) document.getElementById('editSecretPath').value = parsed.secret_path;
    if (parsed.inbound_id != null && parsed.inbound_id !== undefined) {
        document.getElementById('editInboundId').value = parsed.inbound_id;
    }
}

function openModal() {
    resetSshInstallCountryUi();
    resetSshInstallModalControls();
    sshModal.classList.remove('hidden');
    sshModal.classList.add('flex');
}

function closeModal() {
    stopPolling();
    sshModal.classList.add('hidden');
    sshModal.classList.remove('flex');
}

async function loadServers() {
    const resp = await fetch(`/admin/panels/api/servers-cards?ts=${Date.now()}`, { cache: 'no-store' });
    const data = await resp.json();
    if (!resp.ok || !data.ok) {
        throw new Error(data.message || 'Не удалось загрузить сервера');
    }
    serversState = (data.items || []).slice().sort((a, b) => Number(a.id) - Number(b.id));
    Object.keys(serverStatsById).forEach((k) => delete serverStatsById[k]);
    serversState.forEach((s) => {
        if (s.stats) {
            serverStatsById[s.id] = s.stats;
        }
    });
}

function asBool01(v) {
    return Number(v) === 1 || v === true;
}

function serversExportForJsonEditor() {
    return serversState.map((s) => ({
        id: s.id,
        name: s.name || '',
        host: String(s.host || s.ip || '').trim(),
        panel_url: String(s.panel_url || s.url || '').trim(),
        port: s.port != null && s.port !== '' ? String(s.port) : '443',
        secret_path: s.secret_path || '/',
        username: s.username || 'root',
        password: s.password || '',
        panel_api_token: s.panel_api_token || '',
        ssh_host: String(s.ssh_host || s.host || s.ip || '').trim(),
        ssh_port: s.ssh_port != null && s.ssh_port !== '' ? String(s.ssh_port) : '22',
        ssh_user: s.ssh_user || 'root',
        ssh_password: s.ssh_password || '',
        inbound_id: Number(s.inbound_id) || 1,
        is_enable: asBool01(s.is_enable),
        client_flow: s.client_flow || '',
        public_host: s.public_host || '',
        public_port: s.public_port != null && s.public_port !== '' ? String(s.public_port) : '',
        sub_path: s.sub_path || '',
        use_key_configurator: asBool01(s.use_key_configurator),
        key_random: asBool01(s.key_random),
        key_template: s.key_template || '',
        multi_sni: s.multi_sni || '',
        hidden_by_default: asBool01(s.hidden_by_default),
        available_after_payment: asBool01(s.available_after_payment),
        exclude_auto_assign: asBool01(s.exclude_auto_assign),
        multi_server_mode: asBool01(s.multi_server_mode),
        allow_server_switch: asBool01(s.allow_server_switch !== undefined && s.allow_server_switch !== null ? s.allow_server_switch : 1),
        client_limit: Number(s.client_limit) >= 0 ? Number(s.client_limit) : 0,
        server_priority: Number(s.server_priority) || 0,
        server_card_clones: String(s.server_card_clones || '').trim(),
    }));
}

function itemToSavePayload(item) {
    const payload = {
        name: String(item.name || '').trim(),
        host: String(item.host || '').trim(),
        panel_url: String(item.panel_url || '').trim(),
        port: String(item.port != null && item.port !== '' ? item.port : '443'),
        secret_path: String(item.secret_path || '/').trim() || '/',
        username: String(item.username || 'root').trim() || 'root',
        password: String(item.password != null ? item.password : ''),
        inbound_id: Number(item.inbound_id) > 0 ? Number(item.inbound_id) : 1,
        is_enable: !!item.is_enable,
        client_flow: String(item.client_flow || ''),
        public_host: String(item.public_host || '').trim(),
        public_port: String(item.public_port != null && item.public_port !== '' ? item.public_port : ''),
        sub_path: String(item.sub_path || '').trim(),
        use_key_configurator: !!item.use_key_configurator,
        key_random: !!item.key_random,
        key_template: String(item.key_template || ''),
        multi_sni: String(item.multi_sni || '').trim(),
        hidden_by_default: !!item.hidden_by_default,
        available_after_payment: !!item.available_after_payment,
        exclude_auto_assign: !!item.exclude_auto_assign,
        multi_server_mode: !!item.multi_server_mode,
        allow_server_switch: item.allow_server_switch !== undefined ? !!item.allow_server_switch : true,
        client_limit: Math.max(0, Number(item.client_limit) || 0),
        server_priority: Number(item.server_priority) || 0,
        server_card_clones: String(item.server_card_clones != null ? item.server_card_clones : '').trim(),
    };
    if (Object.prototype.hasOwnProperty.call(item, 'panel_api_token')) {
        payload.panel_api_token = String(item.panel_api_token || '').trim();
    }
    if (Object.prototype.hasOwnProperty.call(item, 'ssh_host')) {
        payload.ssh_host = String(item.ssh_host || payload.host || '').trim();
    }
    if (Object.prototype.hasOwnProperty.call(item, 'ssh_port')) {
        payload.ssh_port = String(item.ssh_port != null && item.ssh_port !== '' ? item.ssh_port : '22');
    }
    if (Object.prototype.hasOwnProperty.call(item, 'ssh_user')) {
        payload.ssh_user = String(item.ssh_user || 'root').trim() || 'root';
    }
    if (Object.prototype.hasOwnProperty.call(item, 'ssh_password')) {
        payload.ssh_password = String(item.ssh_password != null ? item.ssh_password : '');
    }
    return payload;
}

async function openServersJsonEditorModal() {
    serversJsonEditorError.textContent = '';
    serversJsonEditorModal.classList.remove('hidden');
    serversJsonEditorModal.classList.add('flex');
    try {
        await loadServers();
        renderServers();
    } catch (e) {
        serversJsonEditorError.textContent = e.message || 'Не удалось загрузить сервера';
    }
    fillServersJsonTextarea();
}

function closeServersJsonEditorModal() {
    serversJsonEditorModal.classList.add('hidden');
    serversJsonEditorModal.classList.remove('flex');
}

function fillServersJsonTextarea() {
    try {
        serversJsonTextarea.value = JSON.stringify(serversExportForJsonEditor(), null, 2);
    } catch (_) {
        serversJsonTextarea.value = '[]';
    }
}

function formatServersJsonTextarea() {
    serversJsonEditorError.textContent = '';
    try {
        const o = JSON.parse(serversJsonTextarea.value || '[]');
        serversJsonTextarea.value = JSON.stringify(o, null, 2);
    } catch (e) {
        serversJsonEditorError.textContent = `Ошибка JSON: ${e.message || e}`;
    }
}

async function reloadServersJsonFromServer() {
    serversJsonEditorError.textContent = '';
    try {
        await loadServers();
        fillServersJsonTextarea();
        appendLog('Список серверов для JSON обновлён с сервера');
    } catch (e) {
        serversJsonEditorError.textContent = e.message || String(e);
    }
}

async function saveServersJsonFromTextarea() {
    serversJsonEditorError.textContent = '';
    let arr;
    try {
        arr = JSON.parse(serversJsonTextarea.value || '[]');
    } catch (e) {
        serversJsonEditorError.textContent = `Некорректный JSON: ${e.message || e}`;
        return;
    }
    if (!Array.isArray(arr)) {
        serversJsonEditorError.textContent = 'Ожидается JSON-массив серверов.';
        return;
    }
    for (let i = 0; i < arr.length; i += 1) {
        const item = arr[i];
        if (!item || typeof item !== 'object') {
            serversJsonEditorError.textContent = `Элемент ${i + 1}: ожидается объект.`;
            return;
        }
        const payload = itemToSavePayload(item);
        if (!payload.name || !payload.host) {
            serversJsonEditorError.textContent = `Элемент ${i + 1}: нужны непустые name и host.`;
            return;
        }
        const sid = item.id != null && item.id !== '' ? Number(item.id) : 0;
        if (Number.isNaN(sid)) {
            serversJsonEditorError.textContent = `Элемент ${i + 1}: некорректный id.`;
            return;
        }
        try {
            let resp;
            if (sid > 0) {
                resp = await fetch(`/admin/panels/api/servers-cards/${sid}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
            } else {
                resp = await fetch('/admin/panels/api/servers-cards', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
            }
            const data = await resp.json();
            if (!resp.ok || !data.ok) {
                serversJsonEditorError.textContent = `Строка ${i + 1} («${payload.name}»): ${data.message || 'ошибка'}`;
                return;
            }
            if (data.warning) {
                appendLog(`Строка ${i + 1} («${payload.name}»), панель 3X-UI: ${data.warning}`);
            }
        } catch (e) {
            serversJsonEditorError.textContent = `Сеть (строка ${i + 1}): ${e.message || e}`;
            return;
        }
    }
    await loadServers();
    renderServers();
    appendLog('JSON серверов сохранён');
    fillServersJsonTextarea();
}

openServersJsonEditorBtn?.addEventListener('click', () => void openServersJsonEditorModal());
closeServersJsonEditorModalBtn?.addEventListener('click', () => closeServersJsonEditorModal());
serversJsonCancelBtn?.addEventListener('click', () => closeServersJsonEditorModal());
serversJsonFormatBtn?.addEventListener('click', () => formatServersJsonTextarea());
serversJsonReloadBtn?.addEventListener('click', () => reloadServersJsonFromServer());
serversJsonSaveBtn?.addEventListener('click', () => saveServersJsonFromTextarea());
serversJsonEditorModal?.addEventListener('click', (e) => {
    if (e.target === serversJsonEditorModal) closeServersJsonEditorModal();
});

(function setupEditCloneCardsListeners() {
    const onRoleChange = () => {
        syncCloneChecksWithPrimary();
        updateCloneCardsHint();
    };
    ['editKeyTemplate', 'editMultiServerMode', 'editExcludeAutoAssign'].forEach((id) => {
        document.getElementById(id)?.addEventListener('input', onRoleChange);
        document.getElementById(id)?.addEventListener('change', onRoleChange);
    });
    ['editCloneAuto', 'editCloneLocations', 'editCloneBalancer'].forEach((id) => {
        document.getElementById(id)?.addEventListener('change', () => updateCloneCardsHint());
    });
})();

function closeAllServerMenus() {
    document.querySelectorAll('.server-menu').forEach((menu) => menu.classList.add('hidden'));
}

function updateSummaryStats() {
    if (!totalServersStat || !activeServersStat || !onlineUsersStat) return;
    const total = serversState.length;
    const active = serversState.filter((s) => Number(s.is_enable) === 1 || s.is_enable === true).length;
    const online = serversState.reduce((acc, s) => {
        const stats = serverStatsById[s.id] || {};
        return acc + (Number(stats.online) || 0);
    }, 0);

    totalServersStat.textContent = String(total);
    activeServersStat.textContent = String(active);
    onlineUsersStat.textContent = String(online);
}

/** Полная ссылка на веб-панель: хост из сохранённого URL (без схемы/порта в базе), порт панели, секретный путь */
function buildPanelHref(server) {
    const raw = (server.url || server.panel_url || '').trim();
    const port = String(server.port != null && server.port !== '' ? server.port : '443').trim();
    let path = (server.secret_path || '/').trim();
    if (!path.startsWith('/')) path = `/${path}`;
    let scheme = 'https';
    let hostname = (server.ip || server.host || '').trim();
    if (raw) {
        try {
            const normalized = raw.includes('://') ? raw : `https://${raw}`;
            const u = new URL(normalized);
            scheme = (u.protocol || 'https:').replace(':', '') || 'https';
            hostname = u.hostname || hostname;
        } catch {
            const noProto = raw.replace(/^https?:\/\//i, '');
            const hostPart = noProto.split('/')[0].split(':')[0];
            if (hostPart) hostname = hostPart;
        }
    }
    if (!hostname) return '#';
    return `${scheme}://${hostname}:${port}${path}`;
}

function buildFullPanelUrlForSave() {
    const host = document.getElementById('editHost').value.trim();
    const port = document.getElementById('editPanelPort').value.trim() || '443';
    let path = document.getElementById('editSecretPath').value.trim() || '/';
    if (!path.startsWith('/')) path = `/${path}`;
    return `https://${host}:${port}${path}`;
}

function currentEditPrimarySection() {
    const kt = document.getElementById('editKeyTemplate')?.value || '';
    const multi = document.getElementById('editMultiServerMode')?.value === '1';
    const excl = document.getElementById('editExcludeAutoAssign')?.value === '1';
    if (/\[(balancer)\]/i.test(kt)) return 'balancer';
    if (multi) return 'locations';
    if (!excl) return 'auto';
    return 'other';
}

function updateCloneCardsHint() {
    const el = document.getElementById('editClonePrimaryHint');
    if (!el) return;
    const prim = currentEditPrimarySection();
    const labels = { auto: 'Автораспределение', locations: 'Локации', balancer: 'Балансировка', other: 'Прочие' };
    el.textContent = `Сейчас основная секция карточки: «${labels[prim]}». Отметьте блоки, где нужна ещё одна копия карточки (основная не дублируется).`;
}

function syncCloneChecksWithPrimary() {
    const p = currentEditPrimarySection();
    const a = document.getElementById('editCloneAuto');
    const l = document.getElementById('editCloneLocations');
    const b = document.getElementById('editCloneBalancer');
    if (p === 'auto' && a) a.checked = false;
    if (p === 'locations' && l) l.checked = false;
    if (p === 'balancer' && b) b.checked = false;
}

function fillCloneCardCheckboxes(server) {
    const set = new Set(parseCloneSections(server || {}));
    const a = document.getElementById('editCloneAuto');
    const l = document.getElementById('editCloneLocations');
    const b = document.getElementById('editCloneBalancer');
    if (a) a.checked = set.has('auto');
    if (l) l.checked = set.has('locations');
    if (b) b.checked = set.has('balancer');
    syncCloneChecksWithPrimary();
    updateCloneCardsHint();
}

function collectCloneCardsPayload() {
    const p = currentEditPrimarySection();
    const parts = [];
    if (document.getElementById('editCloneAuto')?.checked && p !== 'auto') parts.push('auto');
    if (document.getElementById('editCloneLocations')?.checked && p !== 'locations') parts.push('locations');
    if (document.getElementById('editCloneBalancer')?.checked && p !== 'balancer') parts.push('balancer');
    return parts.join(' ');
}

function isBalancerServer(server) {
    return /\[(balancer)\]/i.test(String(server.key_template || ''));
}

function isLocationServer(server) {
    return Number(server.multi_server_mode) === 1;
}

function isAutoAssignServer(server) {
    return Number(server.exclude_auto_assign) !== 1;
}

/** Основная секция карточки (без дублирования): балансировка → локации → автораспределение → прочие */
function primarySection(server) {
    if (isBalancerServer(server)) return 'balancer';
    if (isLocationServer(server)) return 'locations';
    if (isAutoAssignServer(server)) return 'auto';
    return 'other';
}

function parseCloneSections(server) {
    const raw = String((server && server.server_card_clones) || '').trim();
    if (!raw) return [];
    const out = [];
    for (const p of raw.split(/[\s,]+/)) {
        const k = p.trim().toLowerCase();
        if (['auto', 'locations', 'balancer'].includes(k) && !out.includes(k)) out.push(k);
    }
    return out;
}

function partitionServersForUi(servers) {
    const auto = [];
    const loc = [];
    const bal = [];
    const other = [];
    const push = (arr, s, isClone) => arr.push({ server: s, isClone: !!isClone });
    for (const s of servers) {
        const prim = primarySection(s);
        const clones = parseCloneSections(s);
        if (prim === 'auto') push(auto, s, false);
        else if (prim === 'locations') push(loc, s, false);
        else if (prim === 'balancer') push(bal, s, false);
        else push(other, s, false);
        for (const c of clones) {
            if (c === prim) continue;
            if (c === 'auto') push(auto, s, true);
            else if (c === 'locations') push(loc, s, true);
            else if (c === 'balancer') push(bal, s, true);
        }
    }
    return { auto, loc, bal, other };
}

function buildServerCardElement(server, index, borderClass, isClone) {
    const stats = serverStatsById[server.id] || {};
    const panelHref = encodeURI(buildPanelHref(server));
    const card = document.createElement('div');
    card.className = `server-card bg-gray-900 rounded-lg border ${borderClass} p-3 relative min-h-[205px]`;
    card.dataset.serverId = server.id;
    if (isClone) card.dataset.cardClone = '1';
    const cloneBadge = isClone
        ? '<span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-950/90 text-amber-200/95 border border-amber-600/40 shrink-0" title="Копия карточки в этом блоке">копия</span>'
        : '';
    card.innerHTML = `
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="text-white font-semibold truncate">${server.name}</div>
                    <div class="text-xs text-gray-400">ID: ${server.id || index + 1} ${formatCardTcpPing(stats)}</div>
                </div>
                <div class="flex flex-col items-end gap-1 shrink-0">
                    ${cloneBadge}
                    <div class="server-status-neon">Работает</div>
                </div>
            </div>
            <a href="${panelHref}" target="_blank" rel="noopener noreferrer" class="inline-block mt-3 text-xs border border-gray-700 rounded px-3 py-1 text-gray-300 hover:bg-gray-800">
                <i class="bi bi-box-arrow-up-right mr-1"></i> Перейти в панель
            </a>
            <div class="mt-3 text-xs text-gray-300 grid grid-cols-2 gap-y-1">
                <div>CPU: ${stats.cpu ?? '...'}%</div>
                <div>RAM: ${stats.ram ?? '...'}%</div>
                <div>Диск: ${stats.disk ?? '...'}%</div>
                <div>Онлайн: ${stats.online ?? '...'}</div>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <button type="button" class="more-server-btn text-xs border border-gray-700 rounded px-3 py-1 text-gray-300 hover:bg-gray-800" data-id="${server.id}">Подробнее</button>
                <div class="relative">
                    <button class="menu-toggle w-8 h-8 rounded-lg border border-gray-700 text-gray-300 hover:bg-gray-800" data-id="${server.id}">
                        <i class="bi bi-three-dots-vertical"></i>
                    </button>
                    <div class="server-menu hidden absolute right-0 mt-2 w-44 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-20">
                        <button class="sync-server w-full text-left px-3 py-2 text-sm text-gray-200 hover:bg-gray-700" data-id="${server.id}">
                            <i class="bi bi-arrow-repeat mr-2"></i>Синхронизация
                        </button>
                        <button class="edit-server w-full text-left px-3 py-2 text-sm text-gray-200 hover:bg-gray-700" data-id="${server.id}">
                            <i class="bi bi-pencil mr-2"></i>Редактировать
                        </button>
                        <button class="delete-server w-full text-left px-3 py-2 text-sm text-red-400 hover:bg-gray-700" data-id="${server.id}">
                            <i class="bi bi-trash mr-2"></i>Удалить
                        </button>
                    </div>
                </div>
            </div>
        `;
    return card;
}

function renderServerGroup(gridEl, emptyEl, list, borderClass) {
    if (!gridEl) return;
    gridEl.querySelectorAll('.server-card').forEach((el) => el.remove());
    if (!list.length) {
        if (emptyEl) emptyEl.classList.remove('hidden');
        return;
    }
    if (emptyEl) emptyEl.classList.add('hidden');
    list.forEach((entry, index) => {
        const srv = entry.server;
        const isClone = !!entry.isClone;
        gridEl.appendChild(buildServerCardElement(srv, index, borderClass, isClone));
    });
}

/** Жёлтая метка на карточке: время TCP connect до host:port панели (см. servers-cards). */
function formatCardTcpPing(stats) {
    const p = stats.ping;
    const err = stats.tcp_error;
    if (p != null && p !== '' && !Number.isNaN(Number(p))) {
        return `<span class="text-yellow-400 ml-2" title="TCP до панели">${Number(p)}ms</span>`;
    }
    if (err) {
        const esc = String(err).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
        const short = esc.length > 28 ? `${esc.slice(0, 26)}…` : esc;
        return `<span class="text-red-400/90 ml-2 text-[10px]" title="${esc}">TCP: ${short}</span>`;
    }
    return '<span class="text-gray-500 ml-2">…</span>';
}

function renderServers() {
    if (!serverCardsAuto || !serversEmptyAuto) return;
    const servers = serversState;
    [serverCardsAuto, serverCardsLocations, serverCardsBalancer, serverCardsOther].forEach((el) => {
        if (el) el.querySelectorAll('.server-card').forEach((c) => c.remove());
    });
    updateSummaryStats();

    if (!servers.length) {
        [serversEmptyAuto, serversEmptyLocations, serversEmptyBalancer].forEach((el) => {
            if (el) el.classList.remove('hidden');
        });
        if (serverSectionOther) serverSectionOther.classList.add('hidden');
        return;
    }

    const { auto, loc, bal, other } = partitionServersForUi(servers);

    renderServerGroup(serverCardsAuto, serversEmptyAuto, auto, 'border-emerald-700/30');
    renderServerGroup(serverCardsLocations, serversEmptyLocations, loc, 'border-sky-600/35');
    renderServerGroup(serverCardsBalancer, serversEmptyBalancer, bal, 'border-violet-600/40');

    if (serverSectionOther && serverCardsOther) {
        if (other.length) {
            serverSectionOther.classList.remove('hidden');
            renderServerGroup(serverCardsOther, null, other, 'border-gray-600/50');
        } else {
            serverSectionOther.classList.add('hidden');
        }
    }
}

function openCreateServerModal(server = null) {
    document.getElementById('editingServerId').value = server ? server.id : '';
    document.getElementById('newServerName').value = server ? server.name : '';
    document.getElementById('newServerHost').value = server ? (server.host || server.ip || '') : '';
    document.getElementById('newServerPanelUrl').value = server ? (server.panel_url || server.url || '') : '';
    createServerModal.classList.remove('hidden');
    createServerModal.classList.add('flex');
}

function closeCreateServerModal() {
    createServerModal.classList.add('hidden');
    createServerModal.classList.remove('flex');
}

function openEditServerModal(server) {
    const current = server || {};
    const isEdit = !!server;
    const serverName = (current.name || '').trim();
    editServerModalTitle.innerHTML = `<i class="bi bi-database mr-2"></i> ${isEdit ? `Редактировать сервер: ${serverName || '-'}` : 'Добавить сервер'}`;
    document.getElementById('editServerId').value = current.id || '';
    setEditServerNameField(current.name || '');
    document.getElementById('editHost').value = current.host || current.ip || '';
    document.getElementById('editPanelPort').value = current.port || 443;
    document.getElementById('editSecretPath').value = current.secret_path || '';
    document.getElementById('editLogin').value = current.username || '';
    document.getElementById('editPassword').value = current.password || '';
    document.getElementById('editPanelApiToken').value = current.panel_api_token || '';
    document.getElementById('editSshHost').value = current.ssh_host || current.host || current.ip || '';
    document.getElementById('editSshPort').value = current.ssh_port || 22;
    document.getElementById('editSshUser').value = current.ssh_user || 'root';
    document.getElementById('editSshPassword').value = current.ssh_password || '';
    const fetchTokSt = document.getElementById('fetchPanelApiTokenStatus');
    if (fetchTokSt) fetchTokSt.textContent = '';
    showFetchTokenLogs([]);
    document.getElementById('editInboundId').value = current.inbound_id || 1;
    document.getElementById('editClientFlow').value = current.client_flow != null && current.client_flow !== undefined ? String(current.client_flow) : '';
    document.getElementById('editPublicHost').value = current.public_host || current.host || current.ip || '0';
    document.getElementById('editPublicPort').value = current.public_port || 1111;
    document.getElementById('editSubPath').value = current.sub_path || 'sub';
    document.getElementById('editUseKeyConfigurator').checked = !!Number(current.use_key_configurator);
    document.getElementById('editKeyRandom').checked = !!Number(current.key_random);
    document.getElementById('editKeyTemplate').value = current.key_template || '';
    document.getElementById('editMultiSni').value = current.multi_sni || '';
    document.getElementById('editHiddenByDefault').checked = !!Number(current.hidden_by_default);
    document.getElementById('editAvailableAfterPayment').checked = !!Number(current.available_after_payment);
    document.getElementById('editExcludeAutoAssign').value = Number(current.exclude_auto_assign) ? '1' : '0';
    document.getElementById('editMultiServerMode').value = Number(current.multi_server_mode) ? '1' : '0';
    const sw = current.allow_server_switch;
    document.getElementById('editAllowServerSwitch').value = (sw === undefined || sw === null || Number(sw) === 1) ? '1' : '0';
    document.getElementById('editServerPriority').value = current.server_priority != null && current.server_priority !== '' ? String(current.server_priority) : '0';
    document.getElementById('editClientLimit').value = current.client_limit != null && current.client_limit !== '' ? String(current.client_limit) : '0';
    fillCloneCardCheckboxes(current);
    document.getElementById('quickFillText').value = '';
    const _apSt = document.getElementById('applyInboundTemplateStatus');
    if (_apSt) _apSt.textContent = '';
    syncKeyConfiguratorVisibility();
    loadInboundTemplateOptionsForServerModal();
    editServerModal.classList.remove('hidden');
    editServerModal.classList.add('flex');
}

async function loadInboundTemplateOptionsForServerModal() {
    const sel = document.getElementById('editInboundTemplateSlotSelect');
    const num = document.getElementById('editInboundTemplateSlotNum');
    if (!sel) return;
    sel.innerHTML = '<option value="">— выберите или введите номер слота —</option>';
    try {
        const res = await fetch('/admin/tools/inbound-template/list');
        const data = await res.json().catch(() => ({}));
        const items = (data && data.items) ? data.items : [];
        items.sort((a, b) => (Number(a.inbound_id) || 0) - (Number(b.inbound_id) || 0));
        for (const it of items) {
            const id = Number(it.inbound_id) || 0;
            if (id < 1) continue;
            const has = it.has_json ? 'JSON ✓' : 'пусто';
            const o = document.createElement('option');
            o.value = String(id);
            o.textContent = `Слот ${id} — ${has}`;
            sel.appendChild(o);
        }
    } catch (e) {
        const o = document.createElement('option');
        o.value = '';
        o.textContent = 'Не удалось загрузить список шаблонов';
        sel.appendChild(o);
    }
    if (num && (!num.value || Number(num.value) < 1)) num.value = '1';
}

function syncEditInboundTemplateSlotFromSelect() {
    const sel = document.getElementById('editInboundTemplateSlotSelect');
    const num = document.getElementById('editInboundTemplateSlotNum');
    if (!sel || !num) return;
    const v = sel.value;
    if (v && Number(v) >= 1) num.value = v;
}

function syncKeyConfiguratorVisibility() {
    const cb = document.getElementById('editUseKeyConfigurator');
    const details = document.getElementById('keyConfiguratorDetails');
    if (!cb || !details) return;
    details.classList.toggle('hidden', !cb.checked);
}

document.getElementById('editUseKeyConfigurator')?.addEventListener('change', syncKeyConfiguratorVisibility);

document.getElementById('regeneratePanelApiTokenBtn')?.addEventListener('click', async () => {
    const sid = (document.getElementById('editServerId')?.value || '').trim();
    const statusEl = document.getElementById('fetchPanelApiTokenStatus');
    const tokenInput = document.getElementById('editPanelApiToken');
    const btn = document.getElementById('regeneratePanelApiTokenBtn');
    if (!sid) {
        if (statusEl) {
            statusEl.textContent = 'Сначала сохраните сервер — нужен id.';
            statusEl.classList.add('text-amber-300');
        }
        return;
    }
    if (!confirm('Пересоздать API Token? Все токены в панели 3X-UI будут удалены (в т.ч. с локального ПК). Продолжить?')) {
        return;
    }
    if (btn) btn.disabled = true;
    if (statusEl) {
        statusEl.textContent = 'Пересоздание API Token…';
        statusEl.classList.remove('text-emerald-300', 'text-amber-300', 'text-red-300');
    }
    showFetchTokenLogs([]);
    try {
        const resp = await fetch(`/admin/panels/api/servers-cards/${encodeURIComponent(sid)}/regenerate-api-token`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ save: true })
        });
        const data = await resp.json().catch(() => ({}));
        showFetchTokenLogs(data.logs);
        if (data.panel_api_token && tokenInput) {
            tokenInput.value = data.panel_api_token;
        }
        if (!resp.ok || !data.ok) {
            if (statusEl) {
                statusEl.textContent = data.message || 'Не удалось пересоздать токен';
                statusEl.classList.add('text-red-300');
            }
            return;
        }
        if (statusEl) {
            statusEl.textContent = 'Токен пересоздан и сохранён в базе.';
            statusEl.classList.add('text-emerald-300');
        }
        await loadServers();
        renderServers();
    } catch (err) {
        if (statusEl) {
            statusEl.textContent = `Ошибка сети: ${err.message}`;
            statusEl.classList.add('text-red-300');
        }
    } finally {
        if (btn) btn.disabled = false;
    }
});

document.getElementById('fetchPanelApiTokenBtn')?.addEventListener('click', async () => {
    const sid = (document.getElementById('editServerId')?.value || '').trim();
    const statusEl = document.getElementById('fetchPanelApiTokenStatus');
    const tokenInput = document.getElementById('editPanelApiToken');
    const btn = document.getElementById('fetchPanelApiTokenBtn');
    if (!sid) {
        if (statusEl) {
            statusEl.textContent = 'Сначала сохраните сервер — нужен id для SSH.';
            statusEl.classList.add('text-amber-300');
        }
        return;
    }
    if (btn) btn.disabled = true;
    if (statusEl) {
        statusEl.textContent = 'Чтение API Token по SSH…';
        statusEl.classList.remove('text-emerald-300', 'text-amber-300', 'text-red-300');
    }
    showFetchTokenLogs([]);
    try {
        const resp = await fetch(`/admin/panels/api/servers-cards/${encodeURIComponent(sid)}/fetch-api-token`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ save: true })
        });
        const data = await resp.json().catch(() => ({}));
        showFetchTokenLogs(data.logs);
        if (data.panel_api_token && tokenInput) {
            tokenInput.value = data.panel_api_token;
        }
        if (!resp.ok || !data.ok) {
            if (statusEl) {
                statusEl.textContent = data.message || 'Не удалось получить токен';
                statusEl.classList.remove('text-emerald-300', 'text-amber-300');
                statusEl.classList.add('text-red-300');
            }
            return;
        }
        if (statusEl) {
            statusEl.textContent = 'Токен получен и сохранён в базе.';
            statusEl.classList.remove('text-red-300', 'text-amber-300');
            statusEl.classList.add('text-emerald-300');
        }
        await loadServers();
        renderServers();
    } catch (err) {
        if (statusEl) {
            statusEl.textContent = `Ошибка сети: ${err.message}`;
            statusEl.classList.add('text-red-300');
        }
    } finally {
        if (btn) btn.disabled = false;
    }
});

document.getElementById('editInboundTemplateSlotSelect')?.addEventListener('change', syncEditInboundTemplateSlotFromSelect);

document.getElementById('editInboundTemplateSlotNum')?.addEventListener('change', () => {
    const sel = document.getElementById('editInboundTemplateSlotSelect');
    const num = document.getElementById('editInboundTemplateSlotNum');
    if (!sel || !num) return;
    let n = Number(num.value);
    if (!Number.isFinite(n) || n < 1) n = 1;
    if (n > 999) n = 999;
    num.value = String(n);
    const opt = Array.from(sel.options).find((o) => o.value === String(n));
    sel.value = opt ? String(n) : '';
});

document.getElementById('applyInboundTemplateToPanelBtn')?.addEventListener('click', async () => {
    const sid = (document.getElementById('editServerId')?.value || '').trim();
    const statusEl = document.getElementById('applyInboundTemplateStatus');
    const slotRaw = document.getElementById('editInboundTemplateSlotNum')?.value;
    let slot = Number(slotRaw);
    if (!Number.isFinite(slot) || slot < 1) slot = 1;
    if (slot > 999) slot = 999;
    if (!sid) {
        if (statusEl) {
            statusEl.textContent = 'Сначала сохраните сервер в базе — нужен id для запроса к панели.';
            statusEl.classList.remove('text-emerald-300');
            statusEl.classList.add('text-amber-200');
        }
        return;
    }
    if (statusEl) {
        statusEl.textContent = 'Запрос к панели…';
        statusEl.classList.remove('text-emerald-300');
    }
    try {
        const res = await fetch(`/admin/panels/api/servers-cards/${encodeURIComponent(sid)}/inbound-from-template`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ template_inbound_id: slot }),
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok || !data.ok) {
            throw new Error(data.error || data.message || `HTTP ${res.status}`);
        }
        if (statusEl) {
            statusEl.textContent = data.message || `Inbound создан по шаблону слота ${slot}. Проверьте панель и при необходимости укажите новый Inbound ID выше.`;
            statusEl.classList.add('text-emerald-300');
        }
    } catch (e) {
        if (statusEl) {
            statusEl.textContent = e?.message || 'Ошибка создания inbound';
            statusEl.classList.remove('text-emerald-300');
            statusEl.classList.add('text-amber-200');
        }
    }
});

function insertAtCursorTextarea(el, text) {
    if (!el) return;
    const start = typeof el.selectionStart === 'number' ? el.selectionStart : el.value.length;
    const end = typeof el.selectionEnd === 'number' ? el.selectionEnd : el.value.length;
    const v = el.value;
    el.value = v.slice(0, start) + text + v.slice(end);
    el.focus();
    const pos = start + text.length;
    if (typeof el.setSelectionRange === 'function') {
        el.setSelectionRange(pos, pos);
    }
}

function replaceVlessFragmentAfterHash(ta, token) {
    if (!ta || !token) return;
    const lines = ta.value.split('\n');
    const out = lines.map((line) => {
        if (!/vless:\/\//i.test(line)) return line;
        if (line.includes('#')) {
            return line.replace(/#.*$/, `#${token}`);
        }
        return `${line}#${token}`;
    });
    ta.value = out.join('\n');
    ta.focus();
}

document.getElementById('keyConfiguratorDetails')?.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-key-token]');
    if (!btn) return;
    e.preventDefault();
    const tok = btn.getAttribute('data-key-token') || '';
    const ta = document.getElementById('editKeyTemplate');
    if (tok === '[UUID]' && ta && /vless:\/\//i.test(ta.value)) {
        ta.value = ta.value.replace(/vless:\/\/[^@]*@/gi, 'vless://[UUID]@');
        ta.focus();
        const pos = ta.value.length;
        if (typeof ta.setSelectionRange === 'function') {
            ta.setSelectionRange(pos, pos);
        }
        return;
    }
    if ((tok === '[Email]' || tok === '[Servername]' || tok === '[Severname]') && ta && /vless:\/\//i.test(ta.value)) {
        replaceVlessFragmentAfterHash(ta, tok);
        return;
    }
    insertAtCursorTextarea(ta, tok);
});

function closeEditServerModal() {
    editServerModal.classList.add('hidden');
    editServerModal.classList.remove('flex');
}

openSshInstallModal?.addEventListener('click', openModal);
closeSshInstallModal?.addEventListener('click', closeModal);
cancelSshInstall?.addEventListener('click', closeModal);
openCreateServerModalBtn?.addEventListener('click', () => openEditServerModal(null));
closeCreateServerModalBtn?.addEventListener('click', closeCreateServerModal);
cancelCreateServerBtn?.addEventListener('click', closeCreateServerModal);
closeEditServerModalBtn?.addEventListener('click', closeEditServerModal);
cancelEditServerBtn?.addEventListener('click', closeEditServerModal);
backFromEditToListBtn?.addEventListener('click', closeEditServerModal);
openServerSshTerminalBtn?.addEventListener('click', connectServerSshTerminal);
closeServerSshTerminalModal?.addEventListener('click', disconnectServerSshTerminal);
serverSshTerminalCloseBtn?.addEventListener('click', disconnectServerSshTerminal);
serverSshTerminalDisconnectBtn?.addEventListener('click', disconnectServerSshTerminal);
serverSshFallbackRunBtn?.addEventListener('click', runServerSshFallbackCommand);
serverSshFallbackCommand?.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        e.preventDefault();
        runServerSshFallbackCommand();
    }
});

sshModal?.addEventListener('click', (e) => {
    if (e.target === sshModal) {
        closeModal();
    }
});
createServerModal?.addEventListener('click', (e) => {
    if (e.target === createServerModal) {
        closeCreateServerModal();
    }
});
editServerModal?.addEventListener('click', (e) => {
    if (e.target === editServerModal) {
        closeEditServerModal();
    }
});
serverSshTerminalModal?.addEventListener('click', (e) => {
    if (e.target === serverSshTerminalModal) {
        disconnectServerSshTerminal();
    }
});

quickFillBtn?.addEventListener('click', () => {
    const text = (document.getElementById('quickFillText').value || '').trim();
    if (!text) return;

    const patterns = {
        username: [
            /username\s*[:=]\s*([^\s,;]+)/i,
            /user\s*[:=]\s*([^\s,;]+)/i,
            /логин\s*[:=]\s*([^\s,;]+)/i,
        ],
        password: [
            /password\s*[:=]\s*([^\s,;]+)/i,
            /pass(?:word)?\s*[:=]\s*([^\s,;]+)/i,
            /пароль\s*[:=]\s*([^\s,;]+)/i,
        ],
        secretPath: [
            /secret[_\s-]*path\s*[:=]\s*([^\s,;]+)/i,
            /web[_\s-]*base[_\s-]*path\s*[:=]\s*([^\s,;]+)/i,
            /path\s*[:=]\s*(\/[^\s,;]*)/i,
            /путь\s*[:=]\s*(\/[^\s,;]*)/i,
        ],
    };

    const getFirstMatch = (regexList, src) => {
        for (const rx of regexList) {
            const m = src.match(rx);
            if (m && m[1]) return m[1].trim();
        }
        return '';
    };

    const panelUrlCandidates = [
        /https?:\/\/[^\s"'<>]+/ig,
        /panel\s*url\s*[:=]\s*([^\s"'<>]+)/ig,
        /x-ui\s*url\s*[:=]\s*([^\s"'<>]+)/ig,
    ];

    let panelUrl = '';
    for (const rx of panelUrlCandidates) {
        const m = rx.exec(text);
        rx.lastIndex = 0;
        if (m) {
            panelUrl = (m[1] || m[0] || '').trim();
            break;
        }
    }

    const parseHostPortPath = (value) => {
        if (!value) return {};
        let input = value.trim();
        if (!/^https?:\/\//i.test(input)) {
            input = `http://${input}`;
        }
        try {
            const u = new URL(input);
            const host = u.hostname || '';
            const port = u.port || '';
            const path = u.pathname && u.pathname !== '/' ? u.pathname : '';
            return { host, port, path };
        } catch {
            return {};
        }
    };

    const explicitHost = text.match(/\b(?:host|domain|url)\s*[:=]\s*([a-z0-9.-]+\.[a-z]{2,}|(?:\d{1,3}\.){3}\d{1,3})/i);
    const explicitPort = text.match(/\b(?:port|порт)\s*[:=]\s*(\d{2,5})/i);
    const ipv4Fallback = text.match(/\b((?:\d{1,3}\.){3}\d{1,3})\b/);

    const parsedFromUrl = parseHostPortPath(panelUrl);
    const hostValue = (parsedFromUrl.host || (explicitHost && explicitHost[1]) || (ipv4Fallback && ipv4Fallback[1]) || '').trim();
    const portValue = (parsedFromUrl.port || (explicitPort && explicitPort[1]) || '').trim();

    let secretPathValue = getFirstMatch(patterns.secretPath, text);
    if (!secretPathValue && parsedFromUrl.path) secretPathValue = parsedFromUrl.path;
    if (secretPathValue && !secretPathValue.startsWith('/')) {
        secretPathValue = `/${secretPathValue}`;
    }

    const usernameValue = getFirstMatch(patterns.username, text);
    const passwordValue = getFirstMatch(patterns.password, text);

    if (hostValue) document.getElementById('editHost').value = hostValue;
    if (portValue) document.getElementById('editPanelPort').value = portValue;
    if (usernameValue) document.getElementById('editLogin').value = usernameValue;
    if (passwordValue) document.getElementById('editPassword').value = passwordValue;
    if (secretPathValue) document.getElementById('editSecretPath').value = secretPathValue;
    if (hostValue) document.getElementById('editPublicHost').value = hostValue;

    appendLog('Быстрое заполнение выполнено: данные 3X-UI распознаны');
});

saveEditServerBtn?.addEventListener('click', async () => {
    const id = document.getElementById('editServerId').value;
    const payload = {
        name: getEditServerNameValue(),
        host: document.getElementById('editHost').value.trim(),
        panel_url: buildFullPanelUrlForSave(),
        port: document.getElementById('editPanelPort').value,
        secret_path: document.getElementById('editSecretPath').value.trim(),
        username: document.getElementById('editLogin').value.trim(),
        password: document.getElementById('editPassword').value,
        panel_api_token: document.getElementById('editPanelApiToken').value.trim(),
        ssh_host: document.getElementById('editSshHost').value.trim(),
        ssh_port: document.getElementById('editSshPort').value,
        ssh_user: document.getElementById('editSshUser').value.trim(),
        ssh_password: document.getElementById('editSshPassword').value,
        inbound_id: document.getElementById('editInboundId').value,
        client_flow: document.getElementById('editClientFlow').value,
        public_host: document.getElementById('editPublicHost').value.trim(),
        public_port: document.getElementById('editPublicPort').value,
        sub_path: document.getElementById('editSubPath').value.trim(),
        use_key_configurator: document.getElementById('editUseKeyConfigurator').checked,
        key_random: document.getElementById('editKeyRandom').checked,
        key_template: document.getElementById('editKeyTemplate').value,
        multi_sni: document.getElementById('editMultiSni').value.trim(),
        hidden_by_default: document.getElementById('editHiddenByDefault').checked,
        available_after_payment: document.getElementById('editAvailableAfterPayment').checked,
        exclude_auto_assign: document.getElementById('editExcludeAutoAssign').value === '1',
        multi_server_mode: document.getElementById('editMultiServerMode').value === '1',
        allow_server_switch: document.getElementById('editAllowServerSwitch').value === '1',
        server_priority: parseInt(document.getElementById('editServerPriority').value, 10) || 0,
        client_limit: Math.max(0, parseInt(document.getElementById('editClientLimit').value, 10) || 0),
        server_card_clones: collectCloneCardsPayload()
    };
    if (!payload.name || !payload.host) {
        appendLog('Для сохранения заполните название и URL/IP');
        return;
    }
    try {
        let resp;
        if (id) {
            resp = await fetch(`/admin/panels/api/servers-cards/${id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
        } else {
            resp = await fetch('/admin/panels/api/servers-cards', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
        }
        const data = await resp.json();
        if (!resp.ok || !data.ok) {
            appendLog(`Ошибка сохранения: ${data.message || 'неизвестно'}`);
            return;
        }
        if (data.panel_api_token) {
            const tokenInput = document.getElementById('editPanelApiToken');
            if (tokenInput) tokenInput.value = data.panel_api_token;
        }
        await loadServers();
        renderServers();
        let saveMsg = id ? 'Сервер обновлен' : 'Сервер добавлен';
        if (data.panel_api_token) {
            saveMsg += `, API Token в БД (${data.panel_api_token.length} симв.)`;
        }
        appendLog(saveMsg);
        if (data.access_sync_error) {
            appendLog(`Ошибка сохранения API Token/SSH: ${data.access_sync_error}`);
        }
        if (data.warning) {
            appendLog(`Панель 3X-UI: ${data.warning}`);
        }
        closeEditServerModal();
    } catch (err) {
        appendLog(`Ошибка сети при сохранении: ${err.message}`);
    }
});

saveServerBtn?.addEventListener('click', async () => {
    const id = document.getElementById('editingServerId').value;
    const name = document.getElementById('newServerName').value.trim();
    const host = document.getElementById('newServerHost').value.trim();
    const panelUrl = document.getElementById('newServerPanelUrl').value.trim();
    if (!name || !host) {
        appendLog('Для создания сервера заполните название и IP/домен');
        return;
    }

    const payload = { name, host, panel_url: panelUrl };
    try {
        let resp;
        if (id) {
            resp = await fetch(`/admin/panels/api/servers-cards/${id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            });
        } else {
            resp = await fetch('/admin/panels/api/servers-cards', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            });
        }
        const data = await resp.json();
        if (!resp.ok || !data.ok) {
            appendLog(`Ошибка сохранения сервера: ${data.message || 'неизвестно'}`);
            return;
        }

        await loadServers();
        renderServers();
        closeCreateServerModal();
    } catch (err) {
        appendLog(`Ошибка сети при сохранении сервера: ${err.message}`);
    }
});

document.addEventListener('click', (e) => {
    const moreBtn = e.target.closest('.more-server-btn');
    const toggleBtn = e.target.closest('.menu-toggle');
    const syncBtn = e.target.closest('.sync-server');
    const editBtn = e.target.closest('.edit-server');
    const delBtn = e.target.closest('.delete-server');

    if (moreBtn) {
        const id = moreBtn.dataset.id;
        const server = serversState.find((s) => String(s.id) === String(id));
        if (server) openEditServerModal(server);
        return;
    }

    if (toggleBtn) {
        const card = toggleBtn.closest('.server-card');
        if (!card) return;
        const menu = card.querySelector('.server-menu');
        if (!menu) return;
        const shouldOpen = menu.classList.contains('hidden');
        closeAllServerMenus();
        if (shouldOpen) menu.classList.remove('hidden');
        return;
    }

    if (syncBtn) {
        const id = syncBtn.dataset.id;
        fetch(`/admin/panels/api/servers-cards/${id}/sync`, { method: 'POST' })
            .then((resp) => resp.json())
            .then((data) => {
                if (data.ok) {
                    serverStatsById[id] = data.stats || {};
                    renderServers();
                    const s = data.sync || {};
                    const add = s.added != null ? s.added : '?';
                    const skip = s.skipped != null ? s.skipped : '?';
                    const ib = s.inbound1_status ? ` Inbound1: ${s.inbound1_status}` : '';
                    appendLog(`Синхронизация: добавлено ${add}, уже было ${skip}.${ib}`);
                } else {
                    const s = data.sync || {};
                    let se = s.error || data.message || 'неизвестно';
                    if (s.errors && s.errors.length) {
                        se += ' — ' + s.errors.slice(0, 5).map((x) => `${x.telegram_id}: ${x.error || ''}`).join('; ');
                    }
                    appendLog(`Ошибка синхронизации: ${se}`);
                }
            })
            .catch((err) => appendLog(`Ошибка сети при синхронизации: ${err.message}`));
        return;
    }

    if (editBtn) {
        const id = editBtn.dataset.id;
        const server = serversState.find((s) => String(s.id) === String(id));
        if (server) openEditServerModal(server);
        closeAllServerMenus();
        return;
    }

    if (delBtn) {
        const id = delBtn.dataset.id;
        const server = serversState.find((s) => String(s.id) === String(id));
        const label = server ? `${server.name} (#${id})` : `#${id}`;
        const ok = window.confirm(
            `Удалить сервер ${label}?\n\nБудут удалены привязки в БД (подписки, тарифы, SSH и доступ к панели), id оставшихся серверов перенумеруются.`
        );
        if (!ok) {
            closeAllServerMenus();
            return;
        }
        fetch(`/admin/panels/api/servers-cards/${id}`, { method: 'DELETE' })
            .then((resp) => resp.json())
            .then(async (data) => {
                if (data.ok) {
                    await loadServers();
                    renderServers();
                    appendLog(data.message || 'Сервер удалён');
                } else {
                    appendLog(`Ошибка удаления: ${data.message || 'неизвестно'}`);
                }
                closeAllServerMenus();
            })
            .catch((err) => appendLog(`Ошибка сети при удалении: ${err.message}`));
        return;
    }

    if (!e.target.closest('.server-menu') && !e.target.closest('.menu-toggle')) {
        closeAllServerMenus();
    }
});

function stopPolling() {
    if (statusPollTimer) {
        clearInterval(statusPollTimer);
        statusPollTimer = null;
    }
}

startSshInstall?.addEventListener('click', async () => {
    if (startSshInstall.dataset.installDone === '1') {
        closeModal();
        return;
    }

    const payload = {
        host: document.getElementById('sshHost').value.trim(),
        port: document.getElementById('sshPort').value.trim(),
        username: document.getElementById('sshUser').value.trim(),
        password: document.getElementById('sshPassword').value,
        inbound_type: document.getElementById('inboundType').value,
        panel_version: document.getElementById('xuiPanelVersion').value,
        ssl_type: document.getElementById('sslTypeIp').checked ? 'ip_cert' : 'other',
        server_name: getSshInstallServerNameValue()
    };

    if (installLogs) installLogs.innerHTML = '';
    const allInstallLogLines = [];
    delete startSshInstall.dataset.installDone;
    setProgress(0);
    startSshInstall.disabled = true;
    startSshInstall.textContent = 'Установка...';
    if (installFinishedBox) installFinishedBox.classList.add('hidden');
    stopPolling();

    try {
        const response = await fetch('/admin/panels/api/install-ssh/start', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });

        const data = await response.json();
        if (!response.ok || !data.ok || !data.job_id) {
            appendLog(`Ошибка: ${data.message || 'Не удалось запустить установку'}`);
            setProgress(0);
            startSshInstall.disabled = false;
            delete startSshInstall.dataset.installDone;
            return;
        }

        let cursor = 0;
        const jobId = data.job_id;

        const pollStatus = async () => {
            try {
                const statusResp = await fetch(`/admin/panels/api/install-ssh/status/${jobId}?cursor=${cursor}`);
                const statusData = await statusResp.json();
                if (!statusResp.ok || !statusData.ok) {
                    appendLog(`Ошибка статуса: ${statusData.message || 'неизвестно'}`);
                    stopPolling();
                    startSshInstall.disabled = false;
                    delete startSshInstall.dataset.installDone;
                    return;
                }

                if (Array.isArray(statusData.logs)) {
                    statusData.logs.forEach((line) => {
                        appendLog(line);
                        allInstallLogLines.push(line);
                    });
                }
                cursor = statusData.cursor || cursor;
                setProgress(statusData.progress || 0);

                if (statusData.finished) {
                    if (!statusData.success) {
                        appendLog(`Ошибка: ${statusData.message || 'установка завершилась с ошибкой'}`);
                        startSshInstall.textContent = 'Запуск...';
                        startSshInstall.disabled = false;
                        delete startSshInstall.dataset.installDone;
                    }
                    if (statusData.success) {
                        installFinishedBox.classList.remove('hidden');
                        startSshInstall.textContent = 'Установка завершена';
                        startSshInstall.disabled = false;
                        startSshInstall.dataset.installDone = '1';
                        setProgress(100);
                        const parsed = statusData.install_parsed && Object.keys(statusData.install_parsed).length
                            ? statusData.install_parsed
                            : parseInstallOutput(allInstallLogLines);
                        if (statusData.saved_server_id) {
                            appendLog(`Сервер записан в БД панели, id: ${statusData.saved_server_id}`);
                        }
                        if (statusData.inbound_ok === false && statusData.inbound_message) {
                            appendLog(`Inbound: ${String(statusData.inbound_message).slice(0, 500)}`);
                        }
                        loadServers()
                            .then(() => {
                                renderServers();
                                const sid = statusData.saved_server_id;
                                if (sid) {
                                    const srv = serversState.find((s) => Number(s.id) === Number(sid));
                                    if (srv) {
                                        openEditServerModal(srv);
                                    } else {
                                        applyInstallDataToServerForm(parsed, payload.server_name);
                                    }
                                } else {
                                    applyInstallDataToServerForm(parsed, payload.server_name);
                                }
                            })
                            .catch(() => {
                                applyInstallDataToServerForm(parsed, payload.server_name);
                            });
                    }
                    stopPolling();
                }
            } catch (err) {
                appendLog(`Ошибка сети при получении статуса: ${err.message}`);
                stopPolling();
                startSshInstall.disabled = false;
                delete startSshInstall.dataset.installDone;
                startSshInstall.textContent = 'Запуск...';
            }
        };

        await pollStatus();
        statusPollTimer = setInterval(pollStatus, 1000);
    } catch (e) {
        appendLog(`Ошибка сети: ${e.message}`);
        setProgress(0);
        startSshInstall.disabled = false;
        delete startSshInstall.dataset.installDone;
        startSshInstall.textContent = 'Запуск...';
    }
});

async function initServersView() {
    try {
        await loadServers();
        renderServers();
    } catch (err) {
        appendLog(`Ошибка загрузки серверов из БД: ${err.message}`);
        renderServers();
    }
}

initServersView();
</script>
{% endblock %}