{% extends "base.html" %}

{% block title %}Основные настройки{% endblock %}
{% block title_header %}Основные настройки{% endblock %}

{% block content %}
<style>
    .inst-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 12px;
    }
    .inst-card {
        border: 1px solid rgba(100, 116, 139, .35);
        border-radius: 12px;
        background: radial-gradient(540px 120px at 0% 0%, rgba(99, 102, 241, .13), transparent 35%), #0b1323;
        padding: 14px;
        min-height: 132px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .inst-title {
        color: #e2e8f0;
        font-size: 15px;
        font-weight: 700;
    }
    .inst-sub {
        color: #94a3b8;
        font-size: 12px;
        margin-top: 4px;
    }
    .inst-btn {
        width: 100%;
        border: 1px solid rgba(99, 102, 241, .45);
        color: #c7d2fe;
        background: rgba(79, 70, 229, .14);
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .inst-btn:hover {
        color: #e0e7ff;
        border-color: rgba(129, 140, 248, .6);
        background: rgba(99, 102, 241, .22);
    }
    .pay-method-card {
        min-height: 108px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .pay-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
    }
    .pay-toggle-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .pay-switch {
        position: relative;
        width: 40px;
        height: 22px;
        border-radius: 999px;
        background: #334155;
        border: 1px solid #475569;
        transition: all .18s ease;
        flex-shrink: 0;
    }
    .pay-switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        background: #cbd5e1;
        transition: all .18s ease;
    }
    .pay-toggle-input:checked + .pay-switch {
        background: #2563eb;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px rgba(59,130,246,.25), 0 0 14px rgba(59,130,246,.25);
    }
    .pay-toggle-input:checked + .pay-switch::after {
        left: 20px;
        background: #ffffff;
    }
    .pay-state {
        font-size: 11px;
        font-weight: 600;
        margin-right: 8px;
    }
    .pay-state.on { color: #6ee7b7; text-shadow: 0 0 12px rgba(16,185,129,.35); }
    .pay-state.off { color: #94a3b8; }
    .pay-open-link {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid rgba(125, 211, 252, .35);
        color: #7dd3fc;
        text-decoration: none;
    }
    .pay-open-link:hover {
        color: #bae6fd;
        border-color: rgba(186, 230, 253, .5);
        background: rgba(56, 189, 248, .08);
    }
</style>
<div class="space-y-3">
    {% set section = request.args.get('section', 'basic') %}

    {% if section != 'basic' %}
    <div class="bg-gray-900/80 border border-gray-700 rounded-lg p-5 text-gray-300">
        Раздел `<b>{{ section }}</b>` в разработке.
    </div>
    {% endif %}

    {% if section == 'basic' %}
    <div class="space-y-3" id="basicSettingsList">
        {% set items = [
            ('bot', 'bi-robot', 'Настройки бота'),
            ('mtproto_panel', 'bi-shield-lock', 'Панель MTProto'),
            ('mtproto_free', 'bi-gift', 'MTProto Free'),
            ('links', 'bi-link-45deg', 'Ссылки'),
            ('pay', 'bi-credit-card-2-front', 'Методы оплаты'),
            ('ref', 'bi-stars', 'Реферальная система'),
            ('partner', 'bi-gem', 'Партнёрская программа'),
            ('hosting', 'bi-cloud-fill', 'Хостинг'),
            ('system', 'bi-gear', 'Системные настройки'),
            ('security', 'bi-shield-lock', 'Безопасность'),
            ('remn', 'bi-globe', 'Remnawave'),
            ('nolimit', 'bi-file-earmark-text', 'Remnawave: NO LIMIT+'),
            ('tasks', 'bi-list-task', 'Задачи')
        ] %}

        {% for key, icon, title in items %}
        <div class="bg-gray-900/90 border border-gray-700 rounded-lg overflow-hidden">
            <div class="px-4 py-3 flex items-center justify-between">
                <div class="flex items-center gap-2 text-gray-200">
                    <i class="bi {{ icon }}"></i>
                    <span class="font-semibold">{{ title }}</span>
                </div>
                <button type="button"
                        class="text-xs px-3 py-1 rounded-md border border-gray-600 text-gray-300 hover:bg-gray-800"
                        onclick="toggleSettingsBlock('{{ key }}')">
                    Развернуть
                </button>
            </div>

            {% if key == 'bot' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <form id="botSettingsForm" class="space-y-3">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">project_name</label>
                        <input type="text" name="project_name" id="projectNameInput"
                               class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ bot_settings.get('project_name', '') if bot_settings else '' }}"
                               placeholder="3XUIStore" autocomplete="off">
                        <p class="text-xs text-gray-500 mt-1">Название проекта (страница подписки, заголовок профиля). В .env <code class="text-gray-400">PROJECT_NAME</code> имеет приоритет над этим полем.</p>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">trial_days</label>
                        <input type="number" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="3">
                        <div class="mt-2 text-sm bg-amber-900/35 border border-amber-700 rounded-md p-2 text-amber-200">
                            Важно: укажите значение 1 или выше. Это обязательный параметр первичной регистрации.
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">free_renewal_days</label>
                        <input type="number" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="3">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">trial_limit_ip</label>
                        <input type="number" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="1">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">admin_ids</label>
                        <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               id="adminId" name="admin_id" value="{{ bot_settings.admin_id if bot_settings else '' }}">
                        <div class="mt-2 text-sm bg-amber-900/35 border border-amber-700 rounded-md p-2 text-amber-200">
                            Важно: укажите Telegram ID администраторов через запятую.
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">bot_token</label>
                        <input type="text" class="w-full bg-gray-950 border border-blue-800 rounded-md px-3 py-2 text-white"
                               id="botToken" name="bot_token" value="{{ bot_settings.bot_token if bot_settings else '' }}">
                        <div class="mt-2 text-sm bg-red-900/35 border border-red-700 rounded-md p-2 text-red-200">
                            Критически важно: токен бота необходим для работы сервиса.
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">connect_page_url</label>
                        <input type="url" name="connect_page_url" id="connectPageUrlInput"
                               class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ bot_settings.get('connect_page_url', '') if bot_settings else '' }}"
                               placeholder="https://example.com/admin/users/client-area/…" autocomplete="off">
                        <p class="text-xs text-gray-500 mt-1">Публичная ссылка на страницу подключения (для подсказок и интеграций). В .env <code class="text-gray-400">CONNECT_PAGE_URL</code> перекрывает БД.</p>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">sub_page_url</label>
                        <input type="text" class="w-full bg-gray-950 border border-blue-800 rounded-md px-3 py-2 text-white" value="https://sub.yourdomain.ru">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">subscription_provider</label>
                        <select class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                            <option selected>X-UI</option>
                            <option>Remnawave</option>
                        </select>
                    </div>

                    <div class="border border-gray-700 rounded-md p-3 bg-gray-950/60">
                        <label class="inline-flex items-center gap-2 text-gray-200 mb-2">
                            <input class="rounded" type="checkbox" name="sponsor_required"
                                   {% if bot_settings and bot_settings.sponsor_required %}checked{% endif %}>
                            Требовать подписку на спонсорский канал перед выдачей ключей
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">sponsor_channel</label>
                                <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       name="sponsor_channel"
                                       value="{{ bot_settings.sponsor_channel if bot_settings else '' }}"
                                       placeholder="@my_channel">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">sponsor_join_url</label>
                                <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       name="sponsor_join_url"
                                       value="{{ bot_settings.sponsor_join_url if bot_settings else '' }}"
                                       placeholder="https://t.me/my_channel">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-300 mb-1">chat_id</label>
                            <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   id="chatId" name="chat_id" value="{{ bot_settings.chat_id if bot_settings else '' }}">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-300 mb-1">chanel_id</label>
                            <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   id="chanelId" name="chanel_id" value="{{ bot_settings.chanel_id if bot_settings else '' }}">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-300 mb-1">reg_notify</label>
                            <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   name="reg_notify" value="{{ bot_settings.reg_notify if bot_settings else '' }}">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-300 mb-1">pay_notify</label>
                            <input type="text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   name="pay_notify" value="{{ bot_settings.pay_notify if bot_settings else '' }}">
                        </div>
                    </div>

                    <label class="inline-flex items-center gap-2 text-gray-300">
                        <input class="rounded" type="checkbox" name="is_enable" {% if bot_settings and bot_settings.is_enable %}checked{% endif %}>
                        Включить бота
                    </label>

                    <div class="pt-2 flex flex-wrap items-center gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> Сохранить
                        </button>
                        <button type="button" id="restartBotBtn" disabled
                                class="btn btn-secondary opacity-50 cursor-not-allowed"
                                title="Сначала сохраните настройки бота">
                            <i class="bi bi-arrow-clockwise"></i> Перезагрузить бота
                        </button>
                    </div>
                    <p id="restartBotHint" class="text-xs text-gray-500 mt-2 hidden">
                        Настройки сохранены. При необходимости перезапустите процесс бота на сервере (systemd).
                    </p>
                </form>
            </div>
            {% elif key == 'mtproto_free' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <form id="mtprotoFreeForm" class="space-y-3">
                    <div class="border border-gray-700 rounded-md p-3 bg-gray-950/60">
                        <label class="inline-flex items-center gap-2 text-gray-200 mb-2">
                            <input id="mtprotoFreeEnabledInput" class="rounded" type="checkbox" name="mtproto_free_enabled" {% if mtproto_free_enabled %}checked{% endif %}>
                            Активировать MTProto Free
                        </label>
                        <div class="text-xs text-gray-400 leading-relaxed">
                            При включении появляется раздел <b>MTProto Free</b> в меню «Серверы и панели»,
                            работает выдача бесплатных прокси в боте и планировщик пинга.
                            При выключении меню скрывается, функционал отключается, таблица
                            <code class="text-gray-300">free_mtproto_proxy</code> очищается, флаги
                            <code class="text-gray-300">mtproto_free_used</code> у пользователей сбрасываются.
                        </div>
                    </div>
                    <div class="pt-2">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Сохранить</button>
                    </div>
                    <div id="mtprotoFreeOut" class="hidden text-xs bg-gray-950 border border-gray-700 rounded-md p-3 text-gray-300 whitespace-pre-wrap"></div>
                </form>
            </div>
            {% elif key == 'mtproto_panel' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <form id="mtprotoPanelForm" class="space-y-3">
                    <div class="border border-gray-700 rounded-md p-3 bg-gray-950/60">
                        <label class="inline-flex items-center gap-2 text-gray-200 mb-2">
                            <input id="mtprotoEnabledInput" class="rounded" type="checkbox" name="mtproto_enabled" {% if mtproto_enabled %}checked{% endif %}>
                            Активировать MTProto
                        </label>
                        <div class="text-xs text-gray-400 leading-relaxed">
                            При включении появляются разделы меню MTProto/MTProxy и запускается подготовка окружения:
                            установка Docker + docker compose и интеграция MTProto (scripts/mtg_integrate.sh install).
                        </div>
                    </div>
                    <div class="pt-2">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Сохранить</button>
                    </div>
                    <div id="mtprotoPanelOut" class="hidden text-xs bg-gray-950 border border-gray-700 rounded-md p-3 text-gray-300 whitespace-pre-wrap"></div>
                </form>
            </div>
            {% elif key == 'pay' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                {% set ps = payment_settings if payment_settings is defined else {} %}
                <form id="paymentSettingsForm" class="space-y-3">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">YooKassa</div>
                                    <div class="text-xs text-gray-500">show_payment_yookassa</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_yookassa" data-pay-target="yookassa" {% if (ps.get('show_payment_yookassa','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать метод оплаты YooKassa.</p>
                            <div class="mt-2 flex flex-wrap gap-2">
                                <a class="pay-open-link inline-flex w-fit" href="https://yookassa.ru/" target="_blank" rel="noopener noreferrer">Регистрация</a>
                                <a class="pay-open-link inline-flex w-fit" href="https://yookassa.ru/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                            </div>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">Telegram Stars</div>
                                    <div class="text-xs text-gray-500">show_payment_tgstar</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_tgstar" data-pay-target="tgstar" {% if (ps.get('show_payment_tgstar','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать оплату Telegram Stars.</p>
                            <a class="pay-open-link mt-2 inline-flex w-fit" href="https://fragment.com/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">CryptoBot</div>
                                    <div class="text-xs text-gray-500">show_payment_cryptobot</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_cryptobot" data-pay-target="cryptobot" {% if (ps.get('show_payment_cryptobot','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать оплату через CryptoBot.</p>
                            <a class="pay-open-link mt-2 inline-flex w-fit" href="https://app.crypt.bot/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">YooMoney</div>
                                    <div class="text-xs text-gray-500">show_payment_yoomoney</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_yoomoney" data-pay-target="yoomoney" {% if (ps.get('show_payment_yoomoney','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать оплату через YooMoney.</p>
                            <div class="mt-2 flex flex-wrap gap-2">
                                <a class="pay-open-link inline-flex w-fit" href="https://yoomoney.ru/" target="_blank" rel="noopener noreferrer">Регистрация</a>
                                <a class="pay-open-link inline-flex w-fit" href="https://yoomoney.ru/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                            </div>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">Оплатить кодом</div>
                                    <div class="text-xs text-gray-500">show_payment_opens_code</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_opens_code" data-pay-target="code" {% if (ps.get('show_payment_opens_code','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать метод оплаты «Оплатить кодом».</p>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">Platega</div>
                                    <div class="text-xs text-gray-500">show_payment_platega</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_platega" data-pay-target="platega" {% if (ps.get('show_payment_platega','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать оплату через Platega (СБП/QR).</p>
                            <div class="mt-2 flex flex-wrap gap-2">
                                <a class="pay-open-link inline-flex w-fit" href="https://platega.io/" target="_blank" rel="noopener noreferrer">Регистрация</a>
                                <a class="pay-open-link inline-flex w-fit" href="https://platega.io/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                            </div>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">Ручная оплата</div>
                                    <div class="text-xs text-gray-500">show_payment_manual</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="show_payment_manual" data-pay-target="manual" {% if (ps.get('show_payment_manual','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Показывать ручную оплату переводом (ссылки 30/60/90).</p>
                        </div>
                        <div class="bg-gray-950/50 border border-gray-700 rounded-md p-3 pay-method-card" data-pay-card>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-gray-100">Только СБП (YooKassa)</div>
                                    <div class="text-xs text-gray-500">yookassa_sbp_only</div>
                                </div>
                                <div class="flex items-center">
                                    <span class="pay-state js-pay-state">Выключено</span>
                                    <label class="pay-toggle">
                                    <input class="pay-toggle-input" type="checkbox" name="yookassa_sbp_only" {% if (ps.get('yookassa_sbp_only','0')|lower) in ['1','true','yes','on'] %}checked{% endif %}>
                                    <span class="pay-switch"></span>
                                    </label>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">При включении в YooKassa разрешается только СБП.</p>
                            <div class="mt-2 flex flex-wrap gap-2">
                                <a class="pay-open-link inline-flex w-fit" href="https://yookassa.ru/" target="_blank" rel="noopener noreferrer">Регистрация</a>
                                <a class="pay-open-link inline-flex w-fit" href="https://yookassa.ru/" target="_blank" rel="noopener noreferrer">Личный кабинет</a>
                            </div>
                        </div>
                    </div>

                    <div data-pay-panel="yookassa" class="hidden space-y-3 border border-gray-700 rounded-md p-3">
                        <div class="text-sm font-semibold text-gray-200">Параметры YooKassa</div>
                        <div><label class="block text-sm text-gray-300 mb-1">yookassa_shop_id</label><input data-required-on="yookassa" name="yookassa_shop_id" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('yookassa_shop_id','') }}"></div>
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="block text-sm text-gray-300">yookassa_secret_key</label>
                                <a class="pay-open-link" href="https://yookassa.ru/" target="_blank" rel="noopener noreferrer">Открыть</a>
                            </div>
                            <div class="relative">
                                <input type="password" data-secret-toggle data-required-on="yookassa" name="yookassa_secret_key" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white" value="{{ ps.get('yookassa_secret_key','') }}">
                                <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded js-toggle-secret" title="Показать / скрыть"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                    </div>
                    <div data-pay-panel="cryptobot" class="hidden space-y-3 border border-gray-700 rounded-md p-3">
                        <div class="text-sm font-semibold text-gray-200">Параметры CryptoBot</div>
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="block text-sm text-gray-300">cryptobot_token</label>
                                <a class="pay-open-link" href="https://app.crypt.bot/" target="_blank" rel="noopener noreferrer">Открыть</a>
                            </div>
                            <div class="relative">
                                <input type="password" data-secret-toggle data-required-on="cryptobot" name="cryptobot_token" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white" value="{{ ps.get('cryptobot_token','') }}">
                                <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded js-toggle-secret" title="Показать / скрыть"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                    </div>
                    <div data-pay-panel="yoomoney" class="hidden space-y-3 border border-gray-700 rounded-md p-3">
                        <div class="text-sm font-semibold text-gray-200">Параметры YooMoney</div>
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="block text-sm text-gray-300">yoomoney_token</label>
                                <a class="pay-open-link" href="https://yoomoney.ru/" target="_blank" rel="noopener noreferrer">Открыть</a>
                            </div>
                            <div class="relative">
                                <input type="password" data-secret-toggle data-required-on="yoomoney" name="yoomoney_token" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white" value="{{ ps.get('yoomoney_token','') }}">
                                <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded js-toggle-secret" title="Показать / скрыть"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                        <div><label class="block text-sm text-gray-300 mb-1">yoomoney_account</label><input data-required-on="yoomoney" name="yoomoney_account" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('yoomoney_account','') }}"></div>
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="block text-sm text-gray-300">yoomoney_notification_secret</label>
                                <a class="pay-open-link" href="https://yoomoney.ru/" target="_blank" rel="noopener noreferrer">Открыть</a>
                            </div>
                            <div class="relative">
                                <input type="password" data-secret-toggle data-required-on="yoomoney" name="yoomoney_notification_secret" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white" value="{{ ps.get('yoomoney_notification_secret','') }}">
                                <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded js-toggle-secret" title="Показать / скрыть"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                    </div>
                    <div data-pay-panel="platega" class="hidden space-y-3 border border-gray-700 rounded-md p-3">
                        <div class="text-sm font-semibold text-gray-200">Параметры Platega</div>
                        <div><label class="block text-sm text-gray-300 mb-1">platega_merchant_id</label><input data-required-on="platega" name="platega_merchant_id" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('platega_merchant_id','') }}"></div>
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="block text-sm text-gray-300">platega_api_secret</label>
                                <a class="pay-open-link" href="https://platega.io/" target="_blank" rel="noopener noreferrer">Открыть</a>
                            </div>
                            <div class="relative">
                                <input type="password" data-secret-toggle data-required-on="platega" name="platega_api_secret" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white" value="{{ ps.get('platega_api_secret','') }}">
                                <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded js-toggle-secret" title="Показать / скрыть"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                        <div><label class="block text-sm text-gray-300 mb-1">platega_enabled_methods</label><input data-required-on="platega" name="platega_enabled_methods" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('platega_enabled_methods','[2]') }}" placeholder="[2, 10]"></div>
                    </div>

                    <div class="text-xs bg-amber-900/30 border border-amber-700 rounded-md px-3 py-2 text-amber-200">
                        Внимание: набор методов Platega хранится как строка JSON (пример: [2, 10]).
                    </div>
                    <div data-pay-panel="manual" class="hidden space-y-3 border border-gray-700 rounded-md p-3">
                        <div class="text-sm font-semibold text-gray-200">Ссылки для ручной оплаты</div>
                        <div><label class="block text-sm text-gray-300 mb-1">manual_transfer_link_30</label><input data-required-on="manual" name="manual_transfer_link_30" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('manual_transfer_link_30','') }}"></div>
                        <div><label class="block text-sm text-gray-300 mb-1">manual_transfer_link_60</label><input data-required-on="manual" name="manual_transfer_link_60" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('manual_transfer_link_60','') }}"></div>
                        <div><label class="block text-sm text-gray-300 mb-1">manual_transfer_link_90</label><input data-required-on="manual" name="manual_transfer_link_90" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white" value="{{ ps.get('manual_transfer_link_90','') }}"></div>
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Сохранить</button>
                    </div>
                </form>
            </div>
            {% elif key == 'ref' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                {% set rs = referral_settings if referral_settings is defined else {} %}
                <form id="referralSettingsForm" class="space-y-3">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">ref_bonus_on_join_days</label>
                        <p class="text-xs text-gray-500 mb-1">Бонус (дней подписки) пригласившему, когда друг зарегистрировался по реферальной ссылке.</p>
                        <input type="number" name="ref_bonus_on_join_days" min="0" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ rs.get('ref_bonus_on_join_days', '3') }}">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">ref_bonus_on_payment_days</label>
                        <p class="text-xs text-gray-500 mb-1">Бонус пригласившему за <b>первую оплату</b> приглашённого (платная подписка, не пробный период).</p>
                        <input type="number" name="ref_bonus_on_payment_days" min="0" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ rs.get('ref_bonus_on_payment_days', '14') }}">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">referral_limit_per_day</label>
                        <p class="text-xs text-gray-500 mb-1">Максимум приглашённых <b>за календарный день</b>, для которых начисляется бонус за регистрацию. <code class="text-gray-400">0</code> — без лимита.</p>
                        <input type="number" name="referral_limit_per_day" min="0" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ rs.get('referral_limit_per_day', '3') }}">
                    </div>
                    <div class="text-xs bg-slate-800/80 border border-slate-600 rounded-md px-3 py-2 text-slate-200">
                        Значения хранятся в таблице <code class="text-slate-300">payment_settings</code>. Бонус продлевает активные подписки пригласившего на панели 3X-UI и в БД; если активной подписки нет, бонус не применяется.
                    </div>
                    <div class="pt-2">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Сохранить</button>
                    </div>
                </form>
            </div>
            {% elif key == 'instructions' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <div class="inst-grid">
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-shield-lock mr-2"></i>Смена секретного пути</div>
                            <div class="inst-sub">Безопасный URL входа в админку.</div>
                        </div>
                        <a class="inst-btn" href="#" onclick="toggleSettingsBlock('system'); return false;"><i class="bi bi-box-arrow-up-right"></i> Открыть раздел</a>
                    </div>
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-credit-card-2-front mr-2"></i>Методы оплаты</div>
                            <div class="inst-sub">YooKassa, Telegram Stars, Platega, CryptoBot, YooMoney.</div>
                        </div>
                        <a class="inst-btn" href="#" onclick="toggleSettingsBlock('pay'); return false;"><i class="bi bi-box-arrow-up-right"></i> Открыть раздел</a>
                    </div>
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-chat-left-text mr-2"></i>Редактирование текстов</div>
                            <div class="inst-sub">Шаблоны сообщений и пользовательские тексты.</div>
                        </div>
                        <a class="inst-btn" href="{{ url_for('settings.settings_list', section='texts') }}"><i class="bi bi-chat-left-text"></i> Открыть тексты</a>
                    </div>
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-arrow-repeat mr-2"></i>Обновление</div>
                            <div class="inst-sub">Порядок обновления и проверки после деплоя.</div>
                        </div>
                        <a class="inst-btn" href="{{ url_for('tools.update_settings_view') if has_endpoint('tools.update_settings_view') else '#' }}"><i class="bi bi-book"></i> Открыть инструкцию</a>
                    </div>
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-key mr-2"></i>Конфигуратор ключа</div>
                            <div class="inst-sub">Шаблоны ссылок и настройка выдачи ключей.</div>
                        </div>
                        <a class="inst-btn" href="{{ url_for('panels.three_xui') }}"><i class="bi bi-box-arrow-up-right"></i> Перейти в 3X-UI</a>
                    </div>
                    <div class="inst-card">
                        <div>
                            <div class="inst-title"><i class="bi bi-file-earmark-text mr-2"></i>Логи и диагностика</div>
                            <div class="inst-sub">Проверка ошибок и поиск причин сбоев.</div>
                        </div>
                        <a class="inst-btn" href="{{ url_for('tools.logs_view') }}"><i class="bi bi-box-arrow-up-right"></i> Открыть логи</a>
                    </div>
                </div>
            </div>
            {% elif key == 'hosting' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <p class="text-sm text-gray-400 mb-3">
                    Провайдеры отображаются в разделе <b>Инструкции</b> как карточки с быстрым переходом и подсказкой логин/пароль.
                </p>
                <form id="hostingProviderForm" class="space-y-3 mb-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">Название</label>
                            <input type="text" name="name" id="hostingProviderName"
                                   class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   placeholder="U1 HOST" required>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">URL</label>
                            <input type="url" name="url" id="hostingProviderUrl"
                                   class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   placeholder="https://u1host.com/" required>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">Логин (подсказка)</label>
                            <input type="text" name="login" id="hostingProviderLogin"
                                   class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   placeholder="необязательно" autocomplete="off">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">Пароль (подсказка)</label>
                            <input type="text" name="password" id="hostingProviderPassword"
                                   class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   placeholder="необязательно" autocomplete="off">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-plus-circle"></i> Добавить провайдера</button>
                </form>
                <div id="hostingProvidersList" class="space-y-2">
                    {% for hp in hosting_providers or [] %}
                    <div class="flex items-center justify-between gap-3 bg-gray-950 border border-gray-700 rounded-md px-3 py-2 hosting-provider-row" data-id="{{ hp.id }}">
                        <div class="min-w-0">
                            <div class="text-gray-100 font-medium">{{ hp.name }}</div>
                            <div class="text-xs text-gray-400 truncate">{{ hp.url }}</div>
                            {% if hp.login or hp.password %}
                            <div class="text-xs text-gray-500 mt-1">
                                Логин: <code class="text-gray-300">{{ hp.login or '—' }}</code>
                                · Пароль: <code class="text-gray-300">{{ hp.password or '—' }}</code>
                            </div>
                            {% endif %}
                        </div>
                        <button type="button" class="text-xs px-2 py-1 rounded border border-red-700 text-red-300 hover:bg-red-900/30 js-delete-hosting" data-id="{{ hp.id }}">Удалить</button>
                    </div>
                    {% else %}
                    <div class="text-sm text-gray-500" id="hostingProvidersEmpty">Провайдеры не добавлены.</div>
                    {% endfor %}
                </div>
            </div>
            {% elif key == 'security' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                {% set bs = bot_settings if bot_settings else {} %}
                <form id="securitySettingsForm" class="space-y-3">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">registration_protection_method</label>
                        <span class="inline-flex mb-2 text-[10px] px-2 py-0.5 rounded bg-cyan-500 text-white">Метод защиты при регистрации</span>
                        <p class="text-xs text-gray-500 mb-2">Выберите метод защиты для новых пользователей при регистрации.</p>
                        <select id="registrationProtectionMethod" name="registration_protection_method" class="w-full bg-gray-950 border border-blue-800 rounded-md px-3 py-2 text-white">
                            {% set rpm = (bs.registration_protection_method if bs and bs.registration_protection_method else 'none') %}
                            <option value="bot" {% if rpm == 'bot' %}selected{% endif %}>Защита от ботов</option>
                            <option value="sponsor" {% if rpm == 'sponsor' %}selected{% endif %}>Подписка на канал</option>
                            <option value="none" {% if rpm == 'none' %}selected{% endif %}>Без защиты</option>
                        </select>
                        <div class="mt-2 text-xs bg-cyan-900/35 border border-cyan-700 rounded-md p-2 text-cyan-200">
                            <b>Методы защиты при регистрации:</b><br>
                            • <b>Защита от ботов</b> — пользователь решает задачу.<br>
                            • <b>Подписка на канал</b> — обязательная подписка на спонсорский канал.<br>
                            • <b>Без защиты</b> — пробный период выдается сразу.
                        </div>
                    </div>

                    <div id="botProtectionFields" class="space-y-3">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">bot_protection_text</label>
                            <p class="text-xs text-gray-500 mb-1">Текст для защиты от ботов</p>
                            <input type="text" name="bot_protection_text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   value="{{ bs.bot_protection_text if bs and bs.bot_protection_text else '<b>Защита от ботов</b> Для продолжения решите простую задачу:<b>{question}</b>' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">bot_protection_success_text</label>
                            <p class="text-xs text-gray-500 mb-1">Текст при правильном ответе</p>
                            <input type="text" name="bot_protection_success_text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   value="{{ bs.bot_protection_success_text if bs and bs.bot_protection_success_text else '<b>Правильно!</b> Идет регистрация пробного периода, пожалуйста подождите...' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">bot_protection_wrong_text</label>
                            <p class="text-xs text-gray-500 mb-1">Текст при неправильном ответе</p>
                            <input type="text" name="bot_protection_wrong_text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   value="{{ bs.bot_protection_wrong_text if bs and bs.bot_protection_wrong_text else '❌ <b>Неправильно!</b> Попробуйте еще раз:<b>{question}</b>' }}">
                        </div>
                    </div>

                    <div class="space-y-3">
                        <div>
                            <label class="inline-flex items-center gap-2 text-gray-300">
                                <input class="rounded" type="checkbox" name="bot_rate_limit_enabled" {% if bs and bs.bot_rate_limit_enabled %}checked{% endif %}>
                                Включить ограничение частоты запросов (rate limiting) для защиты от спама
                            </label>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">bot_rate_limit_message_max</label>
                                <p class="text-xs text-gray-500 mb-1">Максимальное количество сообщений от одного пользователя за период</p>
                                <input type="number" min="1" name="bot_rate_limit_message_max" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       value="{{ bs.bot_rate_limit_message_max if bs and bs.bot_rate_limit_message_max else 10 }}">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">bot_rate_limit_message_window</label>
                                <p class="text-xs text-gray-500 mb-1">Период времени (сек) для ограничения сообщений</p>
                                <input type="number" min="1" name="bot_rate_limit_message_window" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       value="{{ bs.bot_rate_limit_message_window if bs and bs.bot_rate_limit_message_window else 60 }}">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">bot_rate_limit_callback_max</label>
                                <p class="text-xs text-gray-500 mb-1">Максимальное количество нажатий кнопок от пользователя за период</p>
                                <input type="number" min="1" name="bot_rate_limit_callback_max" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       value="{{ bs.bot_rate_limit_callback_max if bs and bs.bot_rate_limit_callback_max else 30 }}">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">bot_rate_limit_callback_window</label>
                                <p class="text-xs text-gray-500 mb-1">Период времени (сек) для ограничения нажатий кнопок</p>
                                <input type="number" min="1" name="bot_rate_limit_callback_window" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       value="{{ bs.bot_rate_limit_callback_window if bs and bs.bot_rate_limit_callback_window else 60 }}">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1">bot_rate_limit_message_text</label>
                            <p class="text-xs text-gray-500 mb-1">Текст сообщения при превышении лимита запросов</p>
                            <input type="text" name="bot_rate_limit_message_text" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   value="{{ bs.bot_rate_limit_message_text if bs and bs.bot_rate_limit_message_text else '⏳ Слишком много сообщений. Пожалуйста, подождите немного перед следующим запросом.' }}">
                        </div>
                    </div>

                    <div class="pt-2">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Сохранить</button>
                    </div>
                </form>
            </div>
            {% elif key == 'system' %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4">
                <form id="systemSettingsForm" class="space-y-3">
                    <div>
                        <label class="block text-sm text-gray-300 mb-1">admin_ids</label>
                        <p class="text-xs text-gray-500 mb-1">JSON-список ID администраторов бота (как в панели 3XUIStore), например <code class="text-gray-400">[123456789]</code>. Сохраняется в <code class="text-gray-400">bot_settings.admin_id</code> через запятую; совпадает с полем в блоке «Настройки бота».</p>
                        <textarea id="systemAdminIds" name="admin_ids" rows="2"
                                  class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white font-mono text-sm"
                                  placeholder="[123456789, 987654321]">{{ system_settings.admin_ids_json if system_settings else '[]' }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">admin_telegram_id</label>
                        <p class="text-xs text-gray-500 mb-1">Telegram ID администратора для уведомлений (пишется в <code class="text-gray-400">.env</code> как <code class="text-gray-400">ADMIN_TELEGRAM_ID</code>). Для уведомлений бота о регистрациях и оплатах по-прежнему задайте <code class="text-gray-400">reg_notify</code> / <code class="text-gray-400">pay_notify</code> в настройках бота.</p>
                        <input type="text" id="adminTelegramId" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ system_settings.admin_telegram_id if system_settings else '' }}"
                               placeholder="например 123456789">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">admin_secret_path</label>
                        <p class="text-xs text-gray-500 mb-1">Секретный путь для входа в админку</p>
                        <div class="flex items-center gap-2">
                            <input type="text" id="adminSecretPath" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                   value="{{ system_settings.admin_secret_path if system_settings else 'admin123' }}">
                            <button type="button" id="openSecretPathHelp"
                                    class="text-xs px-3 py-1.5 rounded-md border border-blue-700 text-blue-300 hover:bg-blue-900/30 whitespace-nowrap">
                                Как изменить секретный путь? Открыть инструкцию
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">admin_web_password</label>
                        <p class="text-xs text-gray-500 mb-1">Пароль для входа в веб-админку. ОБЯЗАТЕЛЬНО СМЕНИТЕ!</p>
                        <div class="relative flex items-stretch gap-2">
                            <input type="password" id="adminWebPassword" autocomplete="new-password"
                                   class="flex-1 bg-gray-950 border border-gray-700 rounded-md px-3 py-2 pr-10 text-white"
                                   placeholder="{% if system_settings and system_settings.admin_web_password %}•••••••• (введите новый, чтобы сменить){% else %}Задайте пароль{% endif %}">
                            <button type="button" id="toggleAdminWebPassword"
                                    class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white p-1 rounded"
                                    title="Показать / скрыть пароль" aria-label="Показать пароль">
                                <i class="bi bi-eye" id="toggleAdminWebPasswordIcon"></i>
                            </button>
                        </div>
                        <div class="mt-2 text-sm bg-sky-900/35 border border-sky-700/80 rounded-md p-3 text-sky-100 flex gap-2">
                            <span class="shrink-0" aria-hidden="true">💡</span>
                            <div>
                                <span class="font-semibold text-sky-200">Информация:</span>
                                При изменении пароля будет автоматически сгенерирован новый секретный ключ сессии
                                (<code class="text-xs text-sky-300">web_admin_secret_key</code>), что приведёт к выходу всех пользователей из системы.
                            </div>
                        </div>
                        {% if system_settings and system_settings.has_web_admin_secret_key %}
                        <p class="text-xs text-gray-500 mt-1">Ключ <code class="text-gray-400">web_admin_secret_key</code> задан в <code class="text-gray-400">.env</code> (не отображается).</p>
                        {% endif %}
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">email_domain</label>
                        <p class="text-xs text-gray-500 mb-1">Доменная часть для поля Email новых клиентов на панелях 3X-UI (формат: <code class="text-gray-400">tg_&lt;telegram_id&gt;@&lt;ваш_домен&gt;</code>). В <code class="text-gray-400">.env</code> — <code class="text-gray-400">EMAIL_DOMAIN</code>.</p>
                        <input type="text" id="emailDomain" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ system_settings.email_domain if system_settings else '' }}"
                               placeholder="например clients.example.com">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">web_admin_port</label>
                        <p class="text-xs text-gray-500 mb-1">Порт процесса веб-админки (<code class="text-gray-400">WEB_ADMIN_PORT</code> в <code class="text-gray-400">.env</code>). После смены перезапустите сервис и проверьте прокси (nginx).</p>
                        <input type="number" id="webAdminPort" min="1" max="65535" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ system_settings.web_admin_port if system_settings else '16389' }}">
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">web_page_link</label>
                        <p class="text-xs text-gray-500 mb-1">Публичная ссылка на клиентскую страницу / приложение (<code class="text-gray-400">PUBLIC_APP_URL</code> в <code class="text-gray-400">.env</code>).</p>
                        <input type="text" id="webPageLink" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ system_settings.web_page_link if system_settings else '' }}"
                               placeholder="https://ваш-домен">
                    </div>

                    <div class="border border-gray-700 rounded-md p-3 bg-gray-950/60 space-y-3">
                        <label class="inline-flex items-center gap-2 text-gray-200 mb-1">
                            <input id="botProxyEnabled" class="rounded" type="checkbox" {% if system_settings and system_settings.bot_proxy_enabled %}checked{% endif %}>
                            SOCKS5 для бота
                        </label>
                        <p class="text-xs text-gray-500">
                            Управляет <code class="text-gray-400">TELEGRAM_PROXY</code> / <code class="text-gray-400">TG_PROXY</code> в <code class="text-gray-400">.env</code>.
                        </p>

                        <div id="botProxyFields" class="space-y-3">
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">Источник прокси</label>
                                <select id="botProxyMode" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                                    <option value="url" {% if system_settings and system_settings.bot_proxy_mode == 'url' %}selected{% endif %}>Ссылка</option>
                                    <option value="available" {% if system_settings and system_settings.bot_proxy_mode == 'available' %}selected{% endif %}>Добавить на доступный сервер</option>
                                    <option value="custom" {% if system_settings and system_settings.bot_proxy_mode == 'custom' %}selected{% endif %}>Добавить на другой сервер</option>
                                </select>
                            </div>

                            <div id="botProxyModeUrl">
                                <label class="block text-sm text-gray-300 mb-1">socks5 ссылка</label>
                                <input type="text" id="botProxyUrl" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                       value="{{ system_settings.bot_proxy_url if system_settings else '' }}"
                                       placeholder="socks5://user:pass@host:1080">
                            </div>

                            <div id="botProxyModeAvailable" class="grid grid-cols-1 md:grid-cols-2 gap-3 hidden">
                                <div class="md:col-span-2">
                                    <label class="block text-sm text-gray-300 mb-1">Доступный сервер</label>
                                    <select id="botProxyServerId" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                                        <option value="">Выберите сервер</option>
                                        {% for s in available_servers or [] %}
                                        <option value="{{ s.id }}"
                                                data-ip="{{ s.ip }}"
                                                {% if system_settings and system_settings.bot_proxy_server_id == (s.id|string) %}selected{% endif %}>
                                            #{{ s.id }} — {{ s.name }} ({{ s.ip }}) · {% if s.is_enable %}вкл{% else %}выкл{% endif %} · ssh: {{ s.ssh_user }} · пароль: {% if s.has_ssh_password %}есть{% else %}нет{% endif %}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Порт</label>
                                    <input type="number" id="botProxyServerPort" min="1" max="65535"
                                           class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_server_port if system_settings else '1080' }}">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Логин (опционально)</label>
                                    <input type="text" id="botProxyServerUser" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_server_user if system_settings else '' }}">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="block text-sm text-gray-300 mb-1">Пароль (опционально)</label>
                                    <input type="password" id="botProxyServerPassword" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_server_password if system_settings else '' }}">
                                </div>
                            </div>

                            <div id="botProxyModeCustom" class="grid grid-cols-1 md:grid-cols-2 gap-3 hidden">
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Host/IP</label>
                                    <input type="text" id="botProxyCustomHost" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_custom_host if system_settings else '' }}"
                                           placeholder="1.2.3.4 или proxy.example.com">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Порт</label>
                                    <input type="number" id="botProxyCustomPort" min="1" max="65535"
                                           class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_custom_port if system_settings else '1080' }}">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Логин (опционально)</label>
                                    <input type="text" id="botProxyCustomUser" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_custom_user if system_settings else '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-300 mb-1">Пароль (опционально)</label>
                                    <input type="password" id="botProxyCustomPassword" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_custom_password if system_settings else '' }}">
                                </div>
                                <div class="md:col-span-2 border border-gray-700 rounded-md p-3 bg-gray-950/40">
                                    <div class="text-sm text-gray-200 mb-2">SSH для установки SOCKS5 на другой сервер</div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-sm text-gray-300 mb-1">ssh_host</label>
                                            <input type="text" id="botProxyCustomSshHost" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                                   value="{{ system_settings.bot_proxy_custom_ssh_host if system_settings else '' }}">
                                        </div>
                                        <div>
                                            <label class="block text-sm text-gray-300 mb-1">ssh_port</label>
                                            <input type="number" id="botProxyCustomSshPort" min="1" max="65535" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                                   value="{{ system_settings.bot_proxy_custom_ssh_port if system_settings else '22' }}">
                                        </div>
                                        <div>
                                            <label class="block text-sm text-gray-300 mb-1">ssh_user</label>
                                            <input type="text" id="botProxyCustomSshUser" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                                   value="{{ system_settings.bot_proxy_custom_ssh_user if system_settings else 'root' }}">
                                        </div>
                                        <div>
                                            <label class="block text-sm text-gray-300 mb-1">ssh_password</label>
                                            <input type="password" id="botProxyCustomSshPassword" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                                   value="{{ system_settings.bot_proxy_custom_ssh_password if system_settings else '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="border border-gray-700 rounded-md p-3 bg-gray-950/40">
                                <button type="button" id="botProxyInstallBtn" class="btn btn-secondary">
                                    <i class="bi bi-wrench-adjustable-circle"></i> Установить
                                </button>
                                <button type="button" id="botProxyCheckBtn" class="btn btn-secondary ml-2">
                                    <i class="bi bi-heart-pulse"></i> Проверить прокси
                                </button>
                                <label class="inline-flex items-center gap-2 text-gray-300 ml-3">
                                    <input id="botProxyAutoSave" class="rounded" type="checkbox" checked>
                                    Сохранить сразу после установки
                                </label>
                                <p class="text-xs text-gray-500 mt-2">
                                    «Установить» работает для режимов «доступный сервер» и «другой сервер».
                                </p>
                                <p id="botProxyInstallStatus" class="text-xs text-gray-300 mt-2 hidden"></p>
                                <div id="botProxyProgressWrap" class="hidden mt-2">
                                    <div class="w-full h-2 bg-gray-800 rounded overflow-hidden border border-gray-700">
                                        <div id="botProxyProgressBar" class="h-2 bg-blue-500 transition-all duration-300" style="width: 0%;"></div>
                                    </div>
                                    <div id="botProxyProgressPct" class="text-[11px] text-gray-400 mt-1">0%</div>
                                </div>
                                <pre id="botProxyInstallLogs" class="hidden mt-2 p-2 bg-gray-950 border border-gray-700 rounded text-xs text-gray-300 whitespace-pre-wrap max-h-48 overflow-auto"></pre>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-300 mb-1">Полученная ссылка SOCKS5</label>
                                <div class="flex items-center gap-2">
                                    <input type="text" id="botProxyResolvedUrl" readonly
                                           class="flex-1 bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                                           value="{{ system_settings.bot_proxy_url if system_settings else '' }}"
                                           placeholder="После установки ссылка появится здесь">
                                    <button type="button" id="botProxyCopyBtn" class="btn btn-secondary">
                                        <i class="bi bi-clipboard"></i> Копировать ссылку
                                    </button>
                                </div>
                                <p id="botProxyCopyState" class="text-xs text-emerald-300 mt-1 hidden">Скопировано</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1">web_zip_token</label>
                        <p class="text-xs text-gray-500 mb-1">Токен API Zip (необязательно)</p>
                        <input type="text" id="webZipToken" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white"
                               value="{{ system_settings.web_zip_token if system_settings else '' }}">
                    </div>

                    <div class="pt-2 flex flex-wrap items-center gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> Сохранить
                        </button>
                        <button type="button" id="restartWebAdminBtn" disabled
                                class="btn btn-secondary opacity-50 cursor-not-allowed"
                                title="Сначала сохраните системные настройки">
                            <i class="bi bi-arrow-clockwise"></i> Перезагрузить веб-админку
                        </button>
                    </div>
                    <p id="restartWebHint" class="text-xs text-gray-500 mt-2 hidden">
                        Настройки сохранены. Часть параметров (.env) применяется после перезапуска службы веб-админки.
                    </p>
                </form>
            </div>
            {% else %}
            <div id="settings-block-{{ key }}" class="hidden border-t border-gray-700 px-4 py-4 text-gray-400 text-sm">
                Раздел `{{ title }}` будет добавлен в следующем шаге.
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

<div id="secretPathHelpModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="w-full max-w-3xl bg-[#0f172a] border border-gray-700 rounded-xl shadow-xl">
        <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
            <h3 class="text-white font-semibold text-lg">
                <i class="bi bi-shield-lock mr-2"></i>Смена секретного пути входа в админку
            </h3>
            <button type="button" id="closeSecretPathHelpModal" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
        </div>
        <div class="p-4 text-sm text-gray-200 space-y-3 max-h-[70vh] overflow-y-auto">
            <p><b>1.</b> В веб-админке в разделе <b>Настройки → Основные</b> найдите параметр <code>admin_secret_path</code>.</p>
            <p><b>2.</b> Укажите желаемый путь, например: <code>GfyuoiPood</code>, затем нажмите <b>Сохранить</b>.</p>
            <p><b>3.</b> На сервере откройте конфиг nginx (<code>/etc/nginx/sites-available/buryatvpn</code> или ваш конфиг) и измените location:</p>
            <pre class="bg-gray-900 border border-gray-700 rounded p-3 text-xs overflow-x-auto">location /admin123/ {
    rewrite ^/admin123/(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:16389/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</pre>
            <p>Стало (подставьте ваш путь):</p>
            <pre class="bg-gray-900 border border-gray-700 rounded p-3 text-xs overflow-x-auto">location /GfyuoiPood/ {
    rewrite ^/GfyuoiPood/(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:16389/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</pre>
            <p><b>4.</b> Проверьте конфиг и перезагрузите nginx:</p>
            <pre class="bg-gray-900 border border-gray-700 rounded p-3 text-xs overflow-x-auto">sudo nginx -t && sudo systemctl reload nginx</pre>
            <p><b>5.</b> Входите по новому адресу: <code>https://домен/ВАШ_ПУТЬ/</code>.</p>
        </div>
        <div class="px-4 py-3 border-t border-gray-700 text-right">
            <button type="button" class="btn btn-secondary" id="closeSecretPathHelpModalBtn">Закрыть</button>
        </div>
    </div>
</div>

<div id="miniToast" class="fixed right-4 bottom-4 z-[120] hidden max-w-sm px-3 py-2 rounded-lg border text-sm shadow-lg"></div>
{% endblock %}

{% block scripts %}
<script>
function showMiniToast(message, kind = 'info') {
    const el = document.getElementById('miniToast');
    if (!el) return;
    el.textContent = message || '';
    el.className = 'fixed right-4 bottom-4 z-[120] max-w-sm px-3 py-2 rounded-lg border text-sm shadow-lg';
    if (kind === 'error') {
        el.classList.add('bg-red-900/90', 'border-red-700', 'text-red-100');
    } else if (kind === 'success') {
        el.classList.add('bg-emerald-900/90', 'border-emerald-700', 'text-emerald-100');
    } else {
        el.classList.add('bg-slate-900/90', 'border-slate-700', 'text-slate-100');
    }
    el.classList.remove('hidden');
    clearTimeout(showMiniToast._timer);
    showMiniToast._timer = setTimeout(() => el.classList.add('hidden'), 2800);
}

function setRestartButtonEnabled(btn, enabled) {
    if (!btn) return;
    btn.disabled = !enabled;
    if (enabled) {
        btn.classList.remove('opacity-50', 'cursor-not-allowed');
        btn.removeAttribute('title');
    } else {
        btn.classList.add('opacity-50', 'cursor-not-allowed');
    }
}

async function callRestartService(target) {
    const label = target === 'bot' ? 'бота' : 'веб-админки';
    if (!confirm(`Перезагрузить ${label} на сервере?\n\nБудет выполнена команда systemctl restart (через ~1 с после ответа). Соединение с панелью может прерваться.`)) {
        return;
    }
    try {
        const response = await fetch('/admin/settings/restart-service', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ target }),
        });
        const data = await response.json().catch(() => ({}));
        if (!response.ok || !data.ok) {
            throw new Error(data.error || 'Не удалось запланировать перезапуск');
        }
        alert(data.message || 'Перезапуск запланирован.');
    } catch (e) {
        alert('Ошибка: ' + (e && e.message ? e.message : e));
    }
}

function toggleSettingsBlock(key) {
    const block = document.getElementById(`settings-block-${key}`);
    if (!block) return;
    block.classList.toggle('hidden');
}

document.getElementById('botSettingsForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = {
        bot_token: this.bot_token.value,
        admin_id: this.admin_id.value,
        chat_id: this.chat_id.value,
        chanel_id: this.chanel_id.value,
        is_enable: this.is_enable.checked,
        reg_notify: this.reg_notify.value,
        pay_notify: this.pay_notify.value,
        sponsor_required: this.sponsor_required.checked,
        sponsor_channel: this.sponsor_channel.value,
        sponsor_join_url: this.sponsor_join_url.value,
        project_name: (this.project_name && this.project_name.value) ? this.project_name.value.trim() : '',
        connect_page_url: (this.connect_page_url && this.connect_page_url.value) ? this.connect_page_url.value.trim() : '',
    };
    try {
        const response = await fetch('/admin/settings/bot/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        });
        const result = await response.json();
        if (!response.ok || result.error) throw new Error(result.error || 'Ошибка сохранения');
        alert('Настройки бота успешно сохранены');
        setRestartButtonEnabled(document.getElementById('restartBotBtn'), true);
        const h = document.getElementById('restartBotHint');
        if (h) h.classList.remove('hidden');
    } catch (error) {
        alert('Ошибка при сохранении: ' + error.message);
    }
});

function initSecurityVisibility() {
    const form = document.getElementById('securitySettingsForm');
    if (!form) return;
    const methodSelect = form.querySelector('[name="registration_protection_method"]');
    const botFields = document.getElementById('botProtectionFields');
    if (!methodSelect || !botFields) return;
    const apply = () => {
        const method = String(methodSelect.value || 'none');
        botFields.classList.toggle('hidden', method !== 'bot');
    };
    methodSelect.addEventListener('change', apply);
    apply();
}

document.getElementById('securitySettingsForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const payload = {
        registration_protection_method: this.registration_protection_method.value,
        bot_protection_text: this.bot_protection_text.value,
        bot_protection_success_text: this.bot_protection_success_text.value,
        bot_protection_wrong_text: this.bot_protection_wrong_text.value,
        bot_rate_limit_enabled: !!this.bot_rate_limit_enabled.checked,
        bot_rate_limit_message_max: Number(this.bot_rate_limit_message_max.value || 10),
        bot_rate_limit_message_window: Number(this.bot_rate_limit_message_window.value || 60),
        bot_rate_limit_callback_max: Number(this.bot_rate_limit_callback_max.value || 30),
        bot_rate_limit_callback_window: Number(this.bot_rate_limit_callback_window.value || 60),
        bot_rate_limit_message_text: this.bot_rate_limit_message_text.value,
    };
    try {
        const response = await fetch('/admin/settings/security/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const result = await response.json();
        if (!response.ok || result.error) throw new Error(result.error || 'Ошибка сохранения');
        alert('Настройки безопасности сохранены');
    } catch (error) {
        alert('Ошибка при сохранении: ' + error.message);
    }
});

document.getElementById('paymentSettingsForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const fd = new FormData(this);
    const payload = {
        show_payment_yookassa: !!this.show_payment_yookassa?.checked,
        show_payment_tgstar: !!this.show_payment_tgstar?.checked,
        show_payment_cryptobot: !!this.show_payment_cryptobot?.checked,
        show_payment_yoomoney: !!this.show_payment_yoomoney?.checked,
        show_payment_opens_code: !!this.show_payment_opens_code?.checked,
        show_payment_platega: !!this.show_payment_platega?.checked,
        show_payment_manual: !!this.show_payment_manual?.checked,
        yookassa_sbp_only: !!this.yookassa_sbp_only?.checked,
    };
    for (const [k, v] of fd.entries()) {
        if (!(k in payload)) payload[k] = String(v || '');
    }
    const methodsRaw = String(payload.platega_enabled_methods || '').trim();
    if (methodsRaw) {
        try {
            const arr = JSON.parse(methodsRaw);
            if (!Array.isArray(arr)) throw new Error('not array');
            if (!arr.every((x) => Number.isInteger(x))) throw new Error('not ints');
        } catch {
            alert('platega_enabled_methods должен быть JSON-массивом целых чисел, например [2, 10]');
            return;
        }
    }
    try {
        const response = await fetch('/admin/settings/payment/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const result = await response.json();
        if (!response.ok || result.error) throw new Error(result.error || 'Ошибка сохранения');
        alert('Методы оплаты сохранены');
    } catch (error) {
        alert('Ошибка при сохранении: ' + error.message);
    }
});

document.getElementById('referralSettingsForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const payload = {
        ref_bonus_on_join_days: Number(this.ref_bonus_on_join_days?.value || 0),
        ref_bonus_on_payment_days: Number(this.ref_bonus_on_payment_days?.value || 0),
        referral_limit_per_day: Number(this.referral_limit_per_day?.value || 0),
    };
    try {
        const response = await fetch('/admin/settings/referral/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        const result = await response.json();
        if (!response.ok || result.error) throw new Error(result.error || 'Ошибка сохранения');
        alert('Реферальные настройки сохранены');
    } catch (error) {
        alert('Ошибка при сохранении: ' + error.message);
    }
});

function initPaymentVisibility() {
    const form = document.getElementById('paymentSettingsForm');
    if (!form) return;
    const toggles = form.querySelectorAll('input[type="checkbox"][data-pay-target]');
    const apply = () => {
        const enabled = {};
        toggles.forEach((cb) => { enabled[cb.dataset.payTarget] = !!cb.checked; });
        const anyEnabled = Object.values(enabled).some(Boolean);
        form.querySelectorAll('[data-pay-panel]').forEach((panel) => {
            const key = panel.getAttribute('data-pay-panel');
            const on = !!enabled[key];
            panel.classList.toggle('hidden', !on);
        });
        form.querySelectorAll('[data-required-on]').forEach((inp) => {
            const key = inp.getAttribute('data-required-on');
            inp.required = !!enabled[key];
        });
        toggles.forEach((cb) => {
            const card = cb.closest('[data-pay-card]');
            const st = card ? card.querySelector('.js-pay-state') : null;
            if (!st) return;
            const on = !!cb.checked;
            st.textContent = on ? 'Включено' : 'Выключено';
            st.classList.toggle('on', on);
            st.classList.toggle('off', !on);
        });
        void anyEnabled;
    };
    toggles.forEach((cb) => cb.addEventListener('change', apply));
    apply();
}

document.querySelectorAll('.js-toggle-secret').forEach((btn) => {
    btn.addEventListener('click', () => {
        const wrap = btn.closest('.relative');
        const input = wrap ? wrap.querySelector('input[data-secret-toggle]') : null;
        const icon = btn.querySelector('i');
        if (!input) return;
        const show = input.type === 'password';
        input.type = show ? 'text' : 'password';
        if (icon) {
            icon.classList.toggle('bi-eye', !show);
            icon.classList.toggle('bi-eye-slash', show);
        }
    });
});
initPaymentVisibility();
initSecurityVisibility();

async function submitSystemSettingsForm() {
    const form = document.getElementById('systemSettingsForm');
    if (!form) return;
    const payload = {
        admin_ids: document.getElementById('systemAdminIds')?.value || '',
        admin_telegram_id: document.getElementById('adminTelegramId')?.value || '',
        admin_secret_path: document.getElementById('adminSecretPath')?.value || '',
        admin_web_password: document.getElementById('adminWebPassword')?.value || '',
        email_domain: document.getElementById('emailDomain')?.value || '',
        web_admin_port: document.getElementById('webAdminPort')?.value || '',
        web_page_link: document.getElementById('webPageLink')?.value || '',
        web_zip_token: document.getElementById('webZipToken')?.value || '',
        bot_proxy_enabled: !!document.getElementById('botProxyEnabled')?.checked,
        bot_proxy_mode: document.getElementById('botProxyMode')?.value || 'url',
        bot_proxy_url: (document.getElementById('botProxyResolvedUrl')?.value || document.getElementById('botProxyUrl')?.value || ''),
        bot_proxy_server_id: document.getElementById('botProxyServerId')?.value || '',
        bot_proxy_server_port: document.getElementById('botProxyServerPort')?.value || '',
        bot_proxy_server_user: document.getElementById('botProxyServerUser')?.value || '',
        bot_proxy_server_password: document.getElementById('botProxyServerPassword')?.value || '',
        bot_proxy_custom_host: document.getElementById('botProxyCustomHost')?.value || '',
        bot_proxy_custom_port: document.getElementById('botProxyCustomPort')?.value || '',
        bot_proxy_custom_user: document.getElementById('botProxyCustomUser')?.value || '',
        bot_proxy_custom_password: document.getElementById('botProxyCustomPassword')?.value || '',
        bot_proxy_custom_ssh_host: document.getElementById('botProxyCustomSshHost')?.value || '',
        bot_proxy_custom_ssh_port: document.getElementById('botProxyCustomSshPort')?.value || '',
        bot_proxy_custom_ssh_user: document.getElementById('botProxyCustomSshUser')?.value || '',
        bot_proxy_custom_ssh_password: document.getElementById('botProxyCustomSshPassword')?.value || '',
    };
    const response = await fetch('/admin/settings/system/edit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
    const result = await response.json().catch(() => ({}));
    if (!response.ok || result.error) {
        throw new Error(result.error || 'Ошибка сохранения');
    }
    if (result.session_key_rotated) {
        document.getElementById('adminWebPassword').value = '';
    }
    setRestartButtonEnabled(document.getElementById('restartWebAdminBtn'), true);
    const hw = document.getElementById('restartWebHint');
    if (hw) hw.classList.remove('hidden');
    return result;
}

document.getElementById('systemSettingsForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    try {
        const result = await submitSystemSettingsForm();
        let msg = 'Системные настройки сохранены в .env.';
        if (result.session_key_rotated) {
            msg += '\n\nСгенерирован новый web_admin_secret_key — перезапустите веб-админку и войдите снова.';
        } else {
            msg += '\n\nДля применения части параметров может потребоваться перезапуск сервиса.';
        }
        alert(msg);
    } catch (error) {
        alert('Ошибка при сохранении: ' + error.message);
    }
});

function initBotProxyVisibility() {
    const enabled = document.getElementById('botProxyEnabled');
    const mode = document.getElementById('botProxyMode');
    const fields = document.getElementById('botProxyFields');
    const modeUrl = document.getElementById('botProxyModeUrl');
    const modeAvailable = document.getElementById('botProxyModeAvailable');
    const modeCustom = document.getElementById('botProxyModeCustom');
    const installBtn = document.getElementById('botProxyInstallBtn');
    const status = document.getElementById('botProxyInstallStatus');
    if (!enabled || !mode || !fields || !modeUrl || !modeAvailable || !modeCustom) return;
    const apply = () => {
        const on = !!enabled.checked;
        fields.classList.toggle('hidden', !on);
        const m = String(mode.value || 'url');
        modeUrl.classList.toggle('hidden', !on || m !== 'url');
        modeAvailable.classList.toggle('hidden', !on || m !== 'available');
        modeCustom.classList.toggle('hidden', !on || m !== 'custom');
        if (installBtn) {
            installBtn.disabled = !on || m === 'url';
            installBtn.title = (m === 'url') ? 'Для режима "Ссылка" установка не требуется' : '';
        }
        if (status && m === 'url') {
            status.classList.remove('hidden');
            status.classList.add('text-gray-300');
            status.textContent = 'Режим "Ссылка": установка не нужна.';
        }
    };
    enabled.addEventListener('change', apply);
    mode.addEventListener('change', apply);
    apply();
}

function buildProxyUrlFromCurrentMode() {
    const mode = String(document.getElementById('botProxyMode')?.value || 'url');
    if (mode === 'url') {
        return (document.getElementById('botProxyUrl')?.value || '').trim();
    }
    if (mode === 'available') {
        const sel = document.getElementById('botProxyServerId');
        const host = (sel && sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].dataset.ip : '') || '';
        const p = (document.getElementById('botProxyServerPort')?.value || '1080').trim();
        const u = encodeURIComponent((document.getElementById('botProxyServerUser')?.value || '').trim());
        const pw = encodeURIComponent((document.getElementById('botProxyServerPassword')?.value || '').trim());
        if (!host) return '';
        return u ? `socks5://${u}:${pw}@${host}:${p}` : `socks5://${host}:${p}`;
    }
    const h = (document.getElementById('botProxyCustomHost')?.value || '').trim();
    const p = (document.getElementById('botProxyCustomPort')?.value || '1080').trim();
    const u = encodeURIComponent((document.getElementById('botProxyCustomUser')?.value || '').trim());
    const pw = encodeURIComponent((document.getElementById('botProxyCustomPassword')?.value || '').trim());
    if (!h) return '';
    return u ? `socks5://${u}:${pw}@${h}:${p}` : `socks5://${h}:${p}`;
}

function syncResolvedProxyUrl() {
    const resolved = document.getElementById('botProxyResolvedUrl');
    if (!resolved) return;
    const fromCurrent = buildProxyUrlFromCurrentMode();
    const fromUrl = (document.getElementById('botProxyUrl')?.value || '').trim();
    resolved.value = fromUrl || fromCurrent;
}

async function installSocks5Now() {
    const mode = String(document.getElementById('botProxyMode')?.value || 'available');
    let sid = '';
    let port = '1080';
    let user = '';
    let pass = '';
    let payload = {};
    const status = document.getElementById('botProxyInstallStatus');
    const logsEl = document.getElementById('botProxyInstallLogs');
    const progressWrap = document.getElementById('botProxyProgressWrap');
    const progressBar = document.getElementById('botProxyProgressBar');
    const progressPct = document.getElementById('botProxyProgressPct');
    const setStatus = (text, kind = 'info', percent = null) => {
        if (!status) return;
        status.classList.remove('hidden', 'text-red-300', 'text-emerald-300', 'text-gray-300');
        status.classList.add(kind === 'error' ? 'text-red-300' : (kind === 'ok' ? 'text-emerald-300' : 'text-gray-300'));
        status.textContent = text;
        if (progressWrap && progressBar && progressPct && percent !== null) {
            const p = Math.max(0, Math.min(100, Number(percent) || 0));
            progressWrap.classList.remove('hidden');
            progressBar.style.width = `${p}%`;
            progressPct.textContent = `${Math.round(p)}%`;
            if (kind === 'error') {
                progressBar.classList.remove('bg-blue-500', 'bg-emerald-500');
                progressBar.classList.add('bg-red-500');
            } else if (kind === 'ok') {
                progressBar.classList.remove('bg-blue-500', 'bg-red-500');
                progressBar.classList.add('bg-emerald-500');
            } else {
                progressBar.classList.remove('bg-red-500', 'bg-emerald-500');
                progressBar.classList.add('bg-blue-500');
            }
        }
    };
    if (mode === 'available') {
        sid = document.getElementById('botProxyServerId')?.value || '';
        port = document.getElementById('botProxyServerPort')?.value || '1080';
        user = document.getElementById('botProxyServerUser')?.value || '';
        pass = document.getElementById('botProxyServerPassword')?.value || '';
        if (!sid) {
            setStatus('Ошибка: выберите сервер для установки SOCKS5', 'error', 100);
            return;
        }
        payload = { mode: 'available', server_id: sid, port, proxy_user: user, proxy_password: pass };
    } else if (mode === 'custom') {
        const sshHost = document.getElementById('botProxyCustomSshHost')?.value || '';
        const sshPort = document.getElementById('botProxyCustomSshPort')?.value || '22';
        const sshUser = document.getElementById('botProxyCustomSshUser')?.value || 'root';
        const sshPassword = document.getElementById('botProxyCustomSshPassword')?.value || '';
        port = document.getElementById('botProxyCustomPort')?.value || '1080';
        user = document.getElementById('botProxyCustomUser')?.value || '';
        pass = document.getElementById('botProxyCustomPassword')?.value || '';
        if (!sshHost || !sshPassword) {
            setStatus('Ошибка: для "другого сервера" укажите ssh_host и ssh_password', 'error', 100);
            return;
        }
        payload = {
            mode: 'custom',
            ssh_host: sshHost,
            ssh_port: sshPort,
            ssh_user: sshUser,
            ssh_password: sshPassword,
            port,
            proxy_user: user,
            proxy_password: pass,
        };
    } else {
        setStatus('Ошибка: установка доступна только для "доступный сервер" и "другой сервер"', 'error', 100);
        return;
    }
    const btn = document.getElementById('botProxyInstallBtn');
    let stageTimer = null;
    if (btn) btn.disabled = true;
    if (logsEl) {
        logsEl.classList.add('hidden');
        logsEl.textContent = '';
    }
    try {
        setStatus('Подключение к серверу…', 'info', 10);
        stageTimer = setTimeout(() => setStatus('Установка пакетов и запуск SOCKS5…', 'info', 45), 900);
        const response = await fetch('/admin/settings/proxy/socks5/install', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        const result = await response.json().catch(() => ({}));
        if (!response.ok || result.error || result.success === false) {
            if (logsEl && Array.isArray(result.logs) && result.logs.length) {
                logsEl.textContent = result.logs.join('\n\n');
                logsEl.classList.remove('hidden');
            }
            throw new Error(result.error || 'Не удалось установить SOCKS5');
        }
        const proxyUrl = result.proxy_url || '';
        document.getElementById('botProxyEnabled').checked = true;
        document.getElementById('botProxyMode').value = 'url';
        document.getElementById('botProxyUrl').value = proxyUrl;
        document.getElementById('botProxyResolvedUrl').value = proxyUrl;
        initBotProxyVisibility();
        if (document.getElementById('botProxyAutoSave')?.checked) {
            setStatus('SOCKS5 установлен. Сохраняю в .env…', 'info', 70);
            await submitSystemSettingsForm();
        } else {
            setStatus('SOCKS5 установлен. Проверяю доступность…', 'info', 80);
        }
        const check = await fetch('/admin/settings/proxy/socks5/test', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ proxy_url: proxyUrl }),
        });
        const checkRes = await check.json().catch(() => ({}));
        if (!check.ok || checkRes.error || checkRes.success === false) {
            throw new Error(checkRes.error || 'Установка выполнена, но проверка не пройдена');
        } else {
            setStatus(checkRes.message || 'OK, SOCKS5 доступен', 'ok', 100);
            showMiniToast(checkRes.message || 'OK, SOCKS5 доступен', 'success');
        }
    } catch (error) {
        setStatus('Ошибка: ' + (error.message || error), 'error', 100);
    } finally {
        if (stageTimer) clearTimeout(stageTimer);
        if (btn) btn.disabled = false;
    }
}

async function checkSocks5Now() {
    const btn = document.getElementById('botProxyCheckBtn');
    const status = document.getElementById('botProxyInstallStatus');
    const progressWrap = document.getElementById('botProxyProgressWrap');
    const progressBar = document.getElementById('botProxyProgressBar');
    const progressPct = document.getElementById('botProxyProgressPct');
    const setStatus = (text, kind = 'info') => {
        if (!status) return;
        status.classList.remove('hidden', 'text-red-300', 'text-emerald-300', 'text-gray-300');
        status.classList.add(kind === 'error' ? 'text-red-300' : (kind === 'ok' ? 'text-emerald-300' : 'text-gray-300'));
        status.textContent = text;
        if (progressWrap && progressBar && progressPct) {
            progressWrap.classList.remove('hidden');
            const p = kind === 'ok' || kind === 'error' ? 100 : 30;
            progressBar.style.width = `${p}%`;
            progressPct.textContent = `${p}%`;
        }
    };
    let proxyUrl = (document.getElementById('botProxyResolvedUrl')?.value || '').trim();
    if (!proxyUrl) proxyUrl = buildProxyUrlFromCurrentMode();
    if (!proxyUrl) {
        setStatus('Ошибка: сначала укажите или установите ссылку SOCKS5', 'error');
        return;
    }
    if (btn) btn.disabled = true;
    try {
        setStatus('Проверка прокси…');
        const response = await fetch('/admin/settings/proxy/socks5/test', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ proxy_url: proxyUrl }),
        });
        const result = await response.json().catch(() => ({}));
        if (!response.ok || result.error || result.success === false) {
            throw new Error(result.error || 'Прокси не прошёл проверку');
        }
        setStatus(result.message || 'Прокси работает', 'ok');
        showMiniToast('Прокси прошёл проверку', 'success');
    } catch (error) {
        setStatus('Прокси не работает: ' + (error.message || error), 'error');
        showMiniToast('Проверка не пройдена: ' + (error.message || error), 'error');
    } finally {
        if (btn) btn.disabled = false;
    }
}

async function copyResolvedProxyUrl() {
    const inp = document.getElementById('botProxyResolvedUrl');
    const state = document.getElementById('botProxyCopyState');
    const val = (inp?.value || '').trim();
    if (!val) {
        alert('Ссылка пока пустая');
        return;
    }
    try {
        await navigator.clipboard.writeText(val);
        if (state) {
            state.textContent = 'Скопировано';
            state.classList.remove('hidden');
            setTimeout(() => state.classList.add('hidden'), 1800);
        }
    } catch {
        if (inp) {
            inp.removeAttribute('readonly');
            inp.select();
            document.execCommand('copy');
            inp.setAttribute('readonly', 'readonly');
        }
        if (state) {
            state.textContent = 'Скопировано';
            state.classList.remove('hidden');
            setTimeout(() => state.classList.add('hidden'), 1800);
        }
    }
}

document.getElementById('restartBotBtn')?.addEventListener('click', () => callRestartService('bot'));
document.getElementById('restartWebAdminBtn')?.addEventListener('click', () => callRestartService('web'));

document.getElementById('mtprotoFreeForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const out = document.getElementById('mtprotoFreeOut');
    const enabled = !!document.getElementById('mtprotoFreeEnabledInput')?.checked;
    if (!enabled && !confirm('Отключить MTProto Free? Все бесплатные прокси будут удалены из базы.')) {
        return;
    }
    if (out) {
        out.classList.remove('hidden');
        out.textContent = enabled ? 'Включение MTProto Free…' : 'Отключение и очистка базы…';
    }
    try {
        const response = await fetch('/admin/settings/mtproto-free/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mtproto_free_enabled: enabled }),
        });
        const result = await response.json().catch(() => ({}));
        if (!response.ok || result.error || result.success === false) {
            throw new Error(result.error || 'Ошибка сохранения');
        }
        if (out) {
            out.textContent = `${result.message || 'Готово'}\n\n${result.details || ''}`;
        }
        showMiniToast(
            enabled ? 'MTProto Free включён. Обновите страницу для меню.' : 'MTProto Free отключён, база очищена.',
            enabled ? 'success' : 'info'
        );
    } catch (error) {
        if (out) out.textContent = `Ошибка: ${error.message || error}`;
        showMiniToast('Ошибка: ' + (error.message || error), 'error');
    }
});

document.getElementById('mtprotoPanelForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const out = document.getElementById('mtprotoPanelOut');
    const enabled = !!document.getElementById('mtprotoEnabledInput')?.checked;
    if (out) {
        out.classList.remove('hidden');
        out.textContent = enabled
            ? 'Запуск активации MTProto...\nЭто может занять несколько минут (установка docker и интеграция).'
            : 'Отключение MTProto...';
    }
    try {
        const response = await fetch('/admin/settings/mtproto-panel/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mtproto_enabled: enabled }),
        });
        const result = await response.json().catch(() => ({}));
        if (!response.ok || result.error || result.success === false) {
            throw new Error(result.error || 'Ошибка сохранения');
        }
        if (out) {
            out.textContent = `${result.message || 'Готово'}\n\n${result.details || ''}`;
        }
        if (enabled) {
            showMiniToast('MTProto активирован. Пункты меню появятся после перезагрузки страницы.', 'success');
        } else {
            showMiniToast('Пункты меню скрыты, перезагрузите страницу.', 'info');
        }
    } catch (error) {
        if (out) out.textContent = `Ошибка: ${error.message || error}`;
        showMiniToast('Ошибка при сохранении: ' + (error.message || error), 'error');
    }
});

(function initAdminPasswordToggle() {
    const inp = document.getElementById('adminWebPassword');
    const btn = document.getElementById('toggleAdminWebPassword');
    const icon = document.getElementById('toggleAdminWebPasswordIcon');
    if (!inp || !btn) return;
    btn.addEventListener('click', () => {
        const show = inp.type === 'password';
        inp.type = show ? 'text' : 'password';
        if (icon) {
            icon.classList.toggle('bi-eye', !show);
            icon.classList.toggle('bi-eye-slash', show);
        }
        btn.setAttribute('aria-label', show ? 'Скрыть пароль' : 'Показать пароль');
    });
})();

document.getElementById('openSecretPathHelp')?.addEventListener('click', () => {
    window.location.href = "{{ url_for('settings.instructions_page') }}?modal=secretPathModal";
});

function renderHostingProviders(providers) {
    const list = document.getElementById('hostingProvidersList');
    if (!list) return;
    const rows = Array.isArray(providers) ? providers : [];
    if (!rows.length) {
        list.innerHTML = '<div class="text-sm text-gray-500" id="hostingProvidersEmpty">Провайдеры не добавлены.</div>';
        return;
    }
    list.innerHTML = rows.map((hp) => {
        const creds = (hp.login || hp.password)
            ? `<div class="text-xs text-gray-500 mt-1">Логин: <code class="text-gray-300">${hp.login || '—'}</code> · Пароль: <code class="text-gray-300">${hp.password || '—'}</code></div>`
            : '';
        return `<div class="flex items-center justify-between gap-3 bg-gray-950 border border-gray-700 rounded-md px-3 py-2 hosting-provider-row" data-id="${hp.id}">
            <div class="min-w-0">
                <div class="text-gray-100 font-medium">${hp.name || ''}</div>
                <div class="text-xs text-gray-400 truncate">${hp.url || ''}</div>
                ${creds}
            </div>
            <button type="button" class="text-xs px-2 py-1 rounded border border-red-700 text-red-300 hover:bg-red-900/30 js-delete-hosting" data-id="${hp.id}">Удалить</button>
        </div>`;
    }).join('');
    bindHostingDeleteButtons();
}

function bindHostingDeleteButtons() {
    document.querySelectorAll('.js-delete-hosting').forEach((btn) => {
        btn.addEventListener('click', async () => {
            const id = btn.getAttribute('data-id');
            if (!id || !confirm('Удалить провайдера?')) return;
            try {
                const response = await fetch(`/admin/settings/hosting/delete/${id}`, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                });
                const data = await response.json().catch(() => ({}));
                if (!response.ok || !data.ok) throw new Error(data.error || 'Не удалось удалить');
                renderHostingProviders(data.providers || []);
                showMiniToast('Провайдер удалён', 'success');
            } catch (e) {
                showMiniToast('Ошибка: ' + (e.message || e), 'error');
            }
        });
    });
}

document.getElementById('hostingProviderForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const payload = {
        name: document.getElementById('hostingProviderName')?.value || '',
        url: document.getElementById('hostingProviderUrl')?.value || '',
        login: document.getElementById('hostingProviderLogin')?.value || '',
        password: document.getElementById('hostingProviderPassword')?.value || '',
    };
    try {
        const response = await fetch('/admin/settings/hosting/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await response.json().catch(() => ({}));
        if (!response.ok || !data.ok) throw new Error(data.error || 'Не удалось добавить');
        renderHostingProviders(data.providers || []);
        e.target.reset();
        showMiniToast('Провайдер добавлен', 'success');
    } catch (err) {
        showMiniToast('Ошибка: ' + (err.message || err), 'error');
    }
});

bindHostingDeleteButtons();
initBotProxyVisibility();
['botProxyMode','botProxyUrl','botProxyServerId','botProxyServerPort','botProxyServerUser','botProxyServerPassword','botProxyCustomHost','botProxyCustomPort','botProxyCustomUser','botProxyCustomPassword']
    .forEach((id) => document.getElementById(id)?.addEventListener('input', syncResolvedProxyUrl));
document.getElementById('botProxyMode')?.addEventListener('change', syncResolvedProxyUrl);
document.getElementById('botProxyServerId')?.addEventListener('change', syncResolvedProxyUrl);
syncResolvedProxyUrl();
document.getElementById('botProxyInstallBtn')?.addEventListener('click', installSocks5Now);
document.getElementById('botProxyCheckBtn')?.addEventListener('click', checkSocks5Now);
document.getElementById('botProxyCopyBtn')?.addEventListener('click', copyResolvedProxyUrl);
</script>
{% endblock %}