{% extends "base.html" %}

{% block title %}Клиенты VPN{% endblock %}
{% block title_header %}Клиенты VPN{% endblock %}

{% block styles %}
<style>
    .clients-hero {
        background: linear-gradient(105deg, #312e81 0%, #5b21b6 45%, #1e3a5f 100%);
        border-radius: 1rem;
        border: 1px solid rgba(99, 102, 241, 0.35);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    }
    .btn-violet {
        background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
        color: #fff;
        border: 1px solid rgba(167, 139, 250, 0.4);
    }
    .btn-violet:hover { filter: brightness(1.08); color: #fff; }
    .traffic-pill {
        background: rgba(59, 130, 246, 0.25);
        border: 1px solid rgba(59, 130, 246, 0.45);
        color: #93c5fd;
        font-size: 0.75rem;
        padding: 0.15rem 0.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 0 14px rgba(59, 130, 246, 0.2);
    }
    .tg-id { color: #f87171; font-weight: 600; }
    .offline-badge {
        background: #374151;
        color: #d1d5db;
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
        border-radius: 0.35rem;
    }
    .clients-table-wrap {
        border: 1px solid #303b4f;
        border-radius: 0.75rem;
        overflow: hidden;
    }
    #userDrawerOverlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.6);
        z-index: 11970;
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s;
    }
    #userDrawerOverlay.open { opacity: 1; pointer-events: auto; }
    #userDrawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        max-width: 400px;
        background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
        border-right: 1px solid rgba(51, 65, 85, 0.85);
        z-index: 11980;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: 16px 0 48px rgba(0,0,0,.55);
    }
    #userDrawer.open { transform: translateX(0); }
    .drawer-tab-btn {
        flex: 1;
        min-width: 2.75rem;
        padding: 0.5rem 0.35rem;
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.92);
        border: 1px solid rgba(71, 85, 105, 0.65);
        color: #94a3b8;
        transition: box-shadow .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
        cursor: pointer;
    }
    .drawer-tab-btn:hover {
        color: #e2e8f0;
        border-color: rgba(96, 165, 250, 0.55);
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.22);
    }
    .drawer-tab-btn.active {
        color: #bfdbfe;
        border-color: rgba(129, 140, 248, 0.9);
        background: rgba(30, 58, 138, 0.42);
        box-shadow:
            0 0 0 1px rgba(129, 140, 248, 0.45),
            0 0 22px rgba(99, 102, 241, 0.4),
            inset 0 0 14px rgba(59, 130, 246, 0.12);
    }
    .drawer-sub-card {
        background: rgba(30, 41, 59, 0.65);
        border: 1px solid rgba(71, 85, 105, 0.55);
        border-radius: 0.75rem;
        padding: 0.85rem 1rem;
    }
    .drawer-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.45rem 0;
        border-bottom: 1px solid rgba(51, 65, 85, 0.45);
        font-size: 0.75rem;
    }
    .drawer-row:last-child { border-bottom: none; }
    .drawer-label { color: #94a3b8; display: flex; align-items: center; gap: 0.35rem; }
    .drawer-val { color: #f1f5f9; text-align: right; max-width: 58%; word-break: break-word; }
    .drawer-copy-icon {
        flex-shrink: 0;
        padding: 0.15rem 0.35rem;
        border-radius: 6px;
        border: 1px solid rgba(71, 85, 105, 0.8);
        background: rgba(15, 23, 42, 0.9);
        color: #94a3b8;
        cursor: pointer;
        line-height: 1;
    }
    .drawer-copy-icon:hover { color: #e2e8f0; border-color: rgba(56, 189, 248, 0.5); }
    .drawer-action-btn {
        flex: 1 1 42%;
        min-width: 6.5rem;
        padding: 0.45rem 0.55rem;
        border-radius: 10px;
        font-size: 0.68rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        border: 1px solid;
        cursor: pointer;
        transition: filter .15s ease, transform .1s ease;
    }
    .drawer-action-btn:active { transform: scale(0.98); }
    .drawer-action-btn:hover { filter: brightness(1.09); }
    .drawer-action-extend {
        background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
        color: #dbeafe;
        border-color: rgba(96, 165, 250, 0.55);
        box-shadow: 0 0 12px rgba(37, 99, 235, 0.25);
    }
    .drawer-action-shrink {
        background: linear-gradient(180deg, #ca8a04 0%, #713f12 100%);
        color: #fef9c3;
        border-color: rgba(250, 204, 21, 0.45);
        box-shadow: 0 0 12px rgba(202, 138, 4, 0.2);
    }
    .drawer-action-block {
        background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%);
        color: #fee2e2;
        border-color: rgba(248, 113, 113, 0.5);
        box-shadow: 0 0 12px rgba(220, 38, 38, 0.25);
    }
    .drawer-action-block.is-unblock {
        background: linear-gradient(180deg, #059669 0%, #064e3b 100%);
        color: #d1fae5;
        border-color: rgba(52, 211, 153, 0.45);
        box-shadow: 0 0 12px rgba(5, 150, 105, 0.22);
    }
    .drawer-action-reset {
        flex-basis: 100%;
        background: linear-gradient(180deg, #ea580c 0%, #7c2d12 100%);
        color: #ffedd5;
        border-color: rgba(251, 146, 60, 0.55);
        box-shadow: 0 0 12px rgba(234, 88, 12, 0.22);
    }
    #resetSubModal .modal-content { background: #0f172a; color: #e2e8f0; border: 1px solid #334155; }
    #resetSubModal .modal-header { border-bottom-color: #334155; }
    #resetSubModal .btn-close { filter: invert(0.85); }
    #resetSubModal .reset-sub-warn {
        background: rgba(180, 83, 9, 0.25);
        border: 1px solid rgba(245, 158, 11, 0.45);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        color: #fde68a;
        font-size: 0.8rem;
    }
    #resetSubModal .reset-sub-list { font-size: 0.78rem; color: #94a3b8; }
    #resetSubModal .reset-sub-list ul { margin: 0.25rem 0 0 1rem; padding: 0; }
    .reset-sub-step {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0;
        border-bottom: 1px solid rgba(51, 65, 85, 0.5);
        font-size: 0.78rem;
    }
    .reset-sub-step:last-child { border-bottom: none; }
    .reset-sub-step .st-ic { width: 1.25rem; text-align: center; flex-shrink: 0; }
    .pill-green {
        background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
        color: #dcfce7;
        border-radius: 10px;
        border: 1px solid rgba(74, 222, 128, 0.45);
        box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
    }
    .pill-blue {
        background: linear-gradient(180deg, #0e7490 0%, #0f766e 100%);
        color: #cffafe;
        border-radius: 10px;
        border: 1px solid rgba(34, 211, 238, 0.45);
        box-shadow: 0 0 14px rgba(34, 211, 238, 0.3);
    }
    .pill-gray {
        background: rgba(55, 65, 81, 0.95);
        color: #e5e7eb;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        box-shadow: 0 0 10px rgba(148, 163, 184, 0.12);
    }
    #deleteProgressOverlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.58);
        z-index: 12050;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    #deleteProgressOverlay.open { display: flex; }
    #deleteProgressCard {
        width: 100%;
        max-width: 760px;
        border-radius: 14px;
        border: 1px solid rgba(71, 85, 105, 0.85);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(2, 6, 23, 0.98) 100%);
        box-shadow: 0 24px 60px rgba(0,0,0,.55);
    }
    #deleteProgressLog {
        max-height: 330px;
        overflow-y: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        line-height: 1.45;
    }
    .delete-log-row { padding: 4px 0; border-bottom: 1px dashed rgba(51,65,85,.5); }
    .delete-log-row:last-child { border-bottom: none; }
    .delete-log-ok { color: #34d399; }
    .delete-log-err { color: #f87171; }
    .delete-log-info { color: #93c5fd; }
    .sub-preview-ok { color: #22c55e !important; }
    .sub-preview-warn { color: #f59e0b !important; }
    .sub-preview-bad { color: #ef4444 !important; }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6 text-gray-100">
    <div class="clients-hero px-6 py-5 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white mb-1">
                {% if blocked_only %}Заблокированные (VPN){% else %}Клиенты VPN{% endif %}
            </h1>
            <p class="text-indigo-100/80 text-sm">Пользователи с подпиской vpn-тарифа. Без VPN — в разделе «Клиенты прокси». Всего: {{ total_users }}</p>
            {% if mtproto_enabled %}
            <p class="text-indigo-200/70 text-xs mt-1">
                <a href="{{ url_for('users.users_mtproxy') }}" class="text-sky-300 hover:text-sky-200 underline underline-offset-2">Клиенты прокси (MTProxy) — отдельный раздел</a>
            </p>
            {% endif %}
        </div>
        <div class="flex flex-wrap gap-2">
            {% if not blocked_only %}
            <button type="button" id="openCreateClientBtn" class="px-4 py-2 rounded-lg text-sm font-semibold btn-violet flex items-center gap-2">
                <i class="bi bi-person-plus"></i> Создать клиента
            </button>
            <button type="button" id="importFromXuiBtn" class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-800 border border-gray-600 text-gray-200 hover:bg-gray-700 flex items-center gap-2" title="Синхронизация с панелями: добавить в БД клиентов с inbound; удалить из БД тех, кого нет ни на одной панели (если все серверы ответили).">
                <i class="bi bi-cloud-download"></i> Подгрузить с 3X-UI
            </button>
            <a href="{{ url_for('users.users_list', view='blocked') }}" class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-800 border border-gray-600 text-gray-200 hover:bg-gray-700 flex items-center gap-2">
                <i class="bi bi-person-x"></i> Заблокированные VPN
            </a>
            {% else %}
            <a href="{{ url_for('users.users_list') }}" class="px-4 py-2 rounded-lg text-sm font-semibold btn-violet flex items-center gap-2">
                <i class="bi bi-people"></i> Активные VPN
            </a>
            {% endif %}
        </div>
    </div>

    <form method="GET" class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
        {% if blocked_only %}
        <input type="hidden" name="view" value="blocked">
        {% endif %}
        <input type="text" name="search" value="{{ search }}" placeholder="Поиск по Telegram ID"
               class="flex-1 rounded-lg bg-gray-900 border border-gray-600 px-4 py-2 text-white placeholder:text-gray-500 focus:ring-2 focus:ring-violet-500 focus:border-transparent">
        <button type="submit" class="px-6 py-2 rounded-lg btn-violet font-semibold shrink-0">Искать</button>
        {% if search %}
        <a href="{{ url_for('users.users_list', view='blocked') if blocked_only else url_for('users.users_list') }}" class="px-4 py-2 rounded-lg bg-gray-800 border border-gray-600 text-center">Сброс</a>
        {% endif %}
    </form>

    <button type="button" id="toggleAdvFilters" class="text-sm text-indigo-300 hover:text-indigo-200 flex items-center gap-2">
        <i class="bi bi-funnel"></i> Расширенные фильтры
    </button>
    <div id="advFiltersPanel" class="hidden rounded-lg border border-gray-700 bg-gray-900/50 p-4 text-sm text-gray-400">
        Дополнительные фильтры появятся здесь (теги, тарифы, даты).
    </div>

    <div class="clients-table-wrap bg-gray-900/40">
        <div class="overflow-x-auto">
            <table class="w-full text-sm" id="usersTable">
                <thead class="bg-gray-800/90 text-gray-400 text-xs uppercase tracking-wide">
                    <tr>
                        <th class="px-3 py-3 w-10"><input type="checkbox" id="selectAllClients" class="rounded border-gray-600 bg-gray-900"></th>
                        <th class="px-3 py-3 text-left">Telegram ID</th>
                        <th class="px-3 py-3 text-left">Username</th>
                        <th class="px-3 py-3 text-left">Tag</th>
                        <th class="px-3 py-3 text-left">С нами</th>
                        <th class="px-3 py-3 text-left">До окончания</th>
                        <th class="px-3 py-3 text-left">Общий трафик</th>
                        <th class="px-3 py-3 text-left">Limit IP</th>
                        <th class="px-3 py-3 text-left">Онлайн</th>
                        <th class="px-3 py-3 text-center w-16">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    {% for user in users %}
                    <tr class="user-row hover:bg-gray-800/50 cursor-pointer transition-colors" data-id="{{ user.id }}" data-telegram-id="{{ user.telegram_id }}">
                        <td class="px-3 py-3" onclick="event.stopPropagation();">
                            <input type="checkbox" class="client-cb rounded border-gray-600 bg-gray-900" value="{{ user.id }}">
                        </td>
                        <td class="px-3 py-3 tg-id">{{ user.telegram_id }}</td>
                        <td class="px-3 py-3 text-gray-200">{{ user.username or '—' }}</td>
                        <td class="px-3 py-3" onclick="event.stopPropagation();">
                            <select class="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-xs text-gray-400 w-full max-w-[100px]" disabled>
                                <option>no tag</option>
                            </select>
                        </td>
                        <td class="px-3 py-3 text-gray-300">{{ user.days_with_us or 0 }}д</td>
                        <td class="px-3 py-3 text-gray-300">
                            {% if user.sub_days_left is none %}—
                            {% elif user.sub_days_left < 0 %}<span class="text-red-400">истёк</span>
                            {% else %}{{ user.sub_days_left }} дн.{% endif %}
                        </td>
                        <td class="px-3 py-3"><span class="traffic-pill">0.0 MB</span></td>
                        <td class="px-3 py-3 text-gray-400">1</td>
                        <td class="px-3 py-3"><span class="offline-badge">Offline</span></td>
                        <td class="px-3 py-3 text-center">
                            <button type="button"
                                    class="edit-btn text-blue-400 hover:text-blue-300 p-1 me-2"
                                    data-id="{{ user.id }}"
                                    title="Редактировать">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button type="button"
                                    class="delete-btn text-red-400 hover:text-red-300 p-1"
                                    data-id="{{ user.id }}"
                                    data-username="{{ user.username or '—' }}"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal"
                                    title="Удалить">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="px-4 py-8 text-center text-gray-500">Нет записей</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if total_pages > 1 %}
    {% set start_page = [1, current_page - 2]|max %}
    {% set end_page = [total_pages, current_page + 2]|min %}
    <div class="flex justify-center gap-1 flex-wrap">
        {% if current_page > 1 %}
        <a class="px-3 py-1 rounded bg-gray-800 border border-gray-600 text-sm" href="?page=1&search={{ search }}{% if blocked_only %}&view=blocked{% endif %}">«</a>
        <a class="px-3 py-1 rounded bg-gray-800 border border-gray-600 text-sm" href="?page={{ current_page - 1 }}&search={{ search }}{% if blocked_only %}&view=blocked{% endif %}">‹</a>
        {% endif %}
        {% for p in range(start_page, end_page + 1) %}
        <a class="px-3 py-1 rounded text-sm border {% if p == current_page %}bg-violet-700 border-violet-500 text-white{% else %}bg-gray-800 border-gray-600 text-gray-300{% endif %}"
           href="?page={{ p }}&search={{ search }}{% if blocked_only %}&view=blocked{% endif %}">{{ p }}</a>
        {% endfor %}
        {% if current_page < total_pages %}
        <a class="px-3 py-1 rounded bg-gray-800 border border-gray-600 text-sm" href="?page={{ current_page + 1 }}&search={{ search }}{% if blocked_only %}&view=blocked{% endif %}">›</a>
        <a class="px-3 py-1 rounded bg-gray-800 border border-gray-600 text-sm" href="?page={{ total_pages }}&search={{ search }}{% if blocked_only %}&view=blocked{% endif %}">»</a>
        {% endif %}
    </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="rounded-xl border border-amber-900/50 bg-gray-900/60 p-4">
            <h3 class="font-semibold text-amber-100 mb-2 flex items-center gap-2"><i class="bi bi-megaphone"></i> Отправить новость выбранным пользователям</h3>
            <div class="text-xs text-amber-200/80 bg-amber-950/40 border border-amber-800/50 rounded-lg p-3 mb-3">
                Сначала выберите пользователей, затем введите текст новости и отправьте.
            </div>
            <label class="block text-xs text-gray-400 mb-1">Шаблон новости</label>
            <select class="w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-gray-300 mb-3">
                <option>— шаблон —</option>
            </select>
            <textarea rows="4" class="w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white placeholder:text-gray-600" placeholder="Введите текст новости..."></textarea>
            <button type="button" class="mt-3 w-full py-2 rounded-lg btn-violet text-sm font-semibold opacity-60 cursor-not-allowed" disabled>Отправить</button>
        </div>
        <div class="rounded-xl border border-red-900/40 bg-gray-900/60 p-4">
            <h3 class="font-semibold text-red-200 mb-2 flex items-center gap-2"><i class="bi bi-lightning"></i> Массовые действия</h3>
            <div class="text-xs text-red-100/90 bg-red-950/35 border border-red-800/40 rounded-lg p-3">
                <strong>ВНИМАНИЕ!</strong> Действия необратимы. Следите за выбором клиентов. Рекомендуем не более 50 пользователей за раз.
            </div>
            <div class="mt-4 flex flex-wrap gap-2">
                <button type="button" class="px-3 py-2 rounded-lg bg-gray-800 border border-gray-600 text-xs text-gray-400 cursor-not-allowed" disabled>Блокировка</button>
                <button type="button" class="px-3 py-2 rounded-lg bg-gray-800 border border-gray-600 text-xs text-gray-400 cursor-not-allowed" disabled>Снять блок</button>
            </div>
        </div>
    </div>
</div>

<!-- Создать клиента -->
<div class="modal fade" id="createClientModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-gray-900 text-white border border-gray-700">
            <div class="modal-header border-gray-700">
                <h5 class="modal-title">Добавить клиента</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-sm text-gray-400 mb-3">
                    Запись создаётся в БД панели и во всех включённых серверах 3X-UI добавляется клиент в inbound с параметрами, заданными для сервера (VLESS Reality, flow xtls-rprx-vision).
                </p>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Telegram ID <span class="text-red-400">*</span></label>
                        <input type="text" id="createClientTgId" class="form-control bg-gray-800 border-gray-600 text-white" placeholder="7556764034" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Username</label>
                        <input type="text" id="createClientUsername" class="form-control bg-gray-800 border-gray-600 text-white" placeholder="без символа @">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Приглашён</label>
                        <input type="text" id="createClientReferredBy" class="form-control bg-gray-800 border-gray-600 text-white" placeholder="Telegram ID или @username реферера">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Дата регистрации</label>
                        <input type="datetime-local" id="createClientRegDate" class="form-control bg-gray-800 border-gray-600 text-white">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Тариф (опционально)</label>
                        <select id="createClientTariffId" class="form-select bg-gray-800 border-gray-600 text-white">
                            <option value="">Без тарифа</option>
                            {% for t in active_tariffs %}
                            {% set _unl = t.is_admin_only or t.is_unlimited_days %}
                            <option value="{{ t.id }}" data-days="{{ t.left_day|int }}" data-unlimited="{{ 1 if _unl else 0 }}">{{ t.name }}{% if _unl %} (без срока){% else %} ({{ t.left_day }} дн.){% endif %}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Подписка: дней</label>
                        <input type="number" min="1" id="createClientSubDays" class="form-control bg-gray-800 border-gray-600 text-white" placeholder="например 30">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-gray-300">Подписка: действует до</label>
                        <input type="datetime-local" id="createClientSubEndDate" class="form-control bg-gray-800 border-gray-600 text-white">
                    </div>
                    <div class="col-12">
                        <div id="createSubPreview" class="form-text text-info">Новая дата окончания: —</div>
                    </div>
                </div>
                <div id="createClientError" class="text-danger text-sm mt-3 d-none"></div>
                <div id="createClientXuiLog" class="text-xs text-gray-500 mt-3 d-none font-monospace whitespace-pre-wrap max-h-40 overflow-y-auto border border-gray-700 rounded p-2"></div>
            </div>
            <div class="modal-footer border-gray-700">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="submitCreateClient"><i class="bi bi-check2 me-1"></i>Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно просмотра -->
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Информация о клиенте</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Основная информация</h6>
                        <table class="table table-sm">
                            <tr>
                                <td class="text-muted">ID:</td>
                                <td id="viewUserId"></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Имя:</td>
                                <td id="viewUserName"></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Telegram ID:</td>
                                <td id="viewUserTelegramId"></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Регистрация:</td>
                                <td id="viewUserDate"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Реферальная система</h6>
                        <table class="table table-sm">
                            <tr>
                                <td class="text-muted">Реф. код:</td>
                                <td id="viewUserRefCode"></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Рефералов:</td>
                                <td id="viewUserRefCount"></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Приглашён:</td>
                                <td id="viewUserRefBy"></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <h6 class="mt-4">История платежей</h6>
                <div class="table-responsive">
                    <table class="table table-sm" id="paymentsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Дата</th>
                                <th>Тариф</th>
                                <th>Сумма</th>
                            </tr>
                        </thead>
                        <tbody id="viewUserPayments">
                        </tbody>
                    </table>
                </div>

                <h6 class="mt-4">Подписки</h6>
                <div id="viewUserSubscriptions">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно редактирования -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Редактирование клиента</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="userForm" class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label class="form-label">Telegram ID</label>
                        <input type="text" class="form-control" name="telegram_id" inputmode="numeric" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Имя пользователя</label>
                        <input type="text" class="form-control" name="username">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="trial_period">
                            <label class="form-check-label">Пробный период использован</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_enable">
                            <label class="form-check-label">Активен</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="editUserDeviceLimit">Лимит устройств (3X-UI)</label>
                        <input type="number" class="form-control" id="editUserDeviceLimit" name="device_limit"
                               min="1" max="512" step="1" value="" inputmode="numeric" placeholder="пусто = без лимита">
                        <div class="form-text">Оставьте поле пустым для безлимита (в БД и на панели — 0).</div>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <label class="form-label">Добавить подписку (тариф)</label>
                        <select class="form-select" id="assignTariffId">
                            <option value="">Не добавлять</option>
                            {% for t in active_tariffs %}
                            {% set _unl = t.is_admin_only or t.is_unlimited_days %}
                            <option value="{{ t.id }}" data-days="{{ t.left_day|int }}" data-unlimited="{{ 1 if _unl else 0 }}">{{ t.name }}{% if _unl %} (без срока){% else %} ({{ t.left_day }} дн.){% endif %}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Серверы для подписки</label>
                        <select class="form-select" id="assignServerIds" multiple size="6">
                            {% for s in active_servers %}
                            <option value="{{ s.id }}">{{ s.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">Если не выбирать, возьмутся серверы из тарифа.</div>
                    </div>
                    <div class="mb-2 form-check">
                        <input class="form-check-input" type="checkbox" id="assignAllServers">
                        <label class="form-check-label" for="assignAllServers">Все активные сервера</label>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Продлить на дней</label>
                        <input type="number" min="1" id="assignSubscriptionDays" class="form-control" placeholder="например 30">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Или установить дату окончания</label>
                        <input type="datetime-local" id="assignSubscriptionEndDate" class="form-control">
                        <div class="form-text">Если указаны и дата, и дни — приоритет у даты.</div>
                    </div>
                    <div class="mb-2">
                        <div id="assignSubPreview" class="form-text text-info">Новая дата окончания: —</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveUserBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно удаления -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение удаления</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы действительно хотите удалить этого клиента?</p>
                <p class="mb-0"><strong>Клиент:</strong> <span id="deleteUserName"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="bi bi-trash"></i> Удалить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Прогресс удаления клиента -->
<div id="deleteProgressOverlay" aria-hidden="true">
    <div id="deleteProgressCard">
        <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
            <h5 class="mb-0 text-white font-semibold flex items-center gap-2">
                <i class="bi bi-trash" id="deleteProgressHeaderIcon" aria-hidden="true"></i>
                <span id="deleteProgressHeaderText">Удаление клиента</span>
            </h5>
            <button type="button" class="text-gray-400 hover:text-white text-xl leading-none" id="closeDeleteProgress">&times;</button>
        </div>
        <div class="p-4">
            <div id="deleteProgressTitle" class="text-sm text-gray-300 mb-3">Подготовка…</div>
            <div id="deleteProgressLog" class="rounded-lg border border-gray-700 bg-gray-950/70 px-3 py-2 text-gray-300"></div>
            <div class="mt-3 flex justify-between items-center gap-2">
                <button type="button" class="px-3 py-1.5 rounded-lg bg-gray-800 border border-amber-600 text-sm text-amber-200 disabled:opacity-50" id="retryDeleteFailedBtn" disabled>
                    Повторить удаление на ошибочных серверах
                </button>
                <button type="button" class="px-3 py-1.5 rounded-lg bg-gray-800 border border-gray-600 text-sm text-gray-200" id="deleteProgressCloseBtn" disabled>
                    Закрыть
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Продлить / уменьшить срок подписки из drawer -->
<div class="modal fade" id="drawerExtendModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-calendar-plus text-primary"></i> Продлить подписку</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Дней к текущей дате окончания (все активные подписки)</label>
                <input type="number" min="1" max="3650" class="form-control" id="drawerExtendDays" value="30">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="drawerExtendConfirm"><i class="bi bi-check2"></i> Продлить</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="drawerShrinkModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-calendar-minus text-warning"></i> Уменьшить срок</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Вычесть дней у всех активных подписок</label>
                <input type="number" min="1" max="3650" class="form-control" id="drawerShrinkDays" value="7">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-warning text-dark" id="drawerShrinkConfirm"><i class="bi bi-check2"></i> Уменьшить</button>
            </div>
        </div>
    </div>
</div>

<!-- Сброс подписки (новые UUID на панелях) -->
<div class="modal fade" id="resetSubModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center gap-2 mb-0 text-white">
                    <i class="bi bi-shield-exclamation text-amber-400"></i> Отозвать подписку
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" id="resetSubModalCloseX" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <div id="resetSubIntro">
                    <div class="reset-sub-warn mb-3 d-flex gap-2">
                        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                        <div>
                            <strong>Внимание!</strong> Данное действие сгенерирует новые данные UUID и сбросит пароли/ключи для клиента.
                            Убедитесь, что все 3X-UI серверы доступны, в противном случае сервер для клиента станет недоступным, если он не в сети.
                        </div>
                    </div>
                    <div class="row g-3 reset-sub-list mb-2">
                        <div class="col-md-6">
                            <div class="text-slate-300 fw-semibold small mb-1">Что будет изменено</div>
                            <ul class="mb-0">
                                <li>Новые UUID для подключения</li>
                                <li>Новые subId / ключи в 3X-UI</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <div class="text-slate-300 fw-semibold small mb-1">Что не будет изменено</div>
                            <ul class="mb-0">
                                <li>Учёт трафика на панели (как отдаёт API)</li>
                                <li>Лимит устройств в тарифе</li>
                                <li>Дата окончания подписки в БД</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="resetSubProgressWrap" class="d-none">
                    <div class="text-slate-400 small mb-2">Выполнение операции…</div>
                    <div class="progress mb-3" style="height: 6px;">
                        <div class="progress-bar bg-info progress-bar-striped" role="progressbar" id="resetSubProgressBar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div id="resetSubStepList"></div>
                    <div id="resetSubResultMsg" class="small mt-2 text-slate-400"></div>
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary" id="resetSubCancelBtn" data-bs-dismiss="modal">Отменить</button>
                <button type="button" class="btn btn-danger" id="resetSubConfirmBtn">
                    <i class="bi bi-shield-lock"></i> Подтвердить и выполнить
                </button>
                <button type="button" class="btn btn-outline-light d-none" id="resetSubDoneBtn" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_overlays %}
<div id="userDrawerOverlay" aria-hidden="true"></div>
<aside id="userDrawer" aria-hidden="true">
    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700 shrink-0">
        <div class="flex items-center gap-2 text-white font-semibold">
            <i class="bi bi-person-vcard text-blue-400 text-lg"></i>
            <span id="drawerTitle">Поддержка</span>
        </div>
        <button type="button" id="closeUserDrawer" class="text-gray-400 hover:text-white text-xl leading-none">&times;</button>
    </div>
    <div class="drawer-tab-strip flex gap-2 px-2 py-2 border-b border-gray-800 shrink-0 overflow-x-auto">
        <button type="button" class="drawer-tab-btn active" data-drawer-tab="info" title="Инфо"><i class="bi bi-info-circle"></i></button>
        <button type="button" class="drawer-tab-btn" data-drawer-tab="pay" title="Платежи"><i class="bi bi-credit-card"></i></button>
        <button type="button" class="drawer-tab-btn" data-drawer-tab="ref" title="Партнёры"><i class="bi bi-people"></i></button>
        <button type="button" class="drawer-tab-btn" data-drawer-tab="shield" title="Безопасность"><i class="bi bi-shield-check"></i></button>
        <button type="button" class="drawer-tab-btn" data-drawer-tab="key" title="Ключи"><i class="bi bi-key"></i></button>
    </div>
    <div class="flex-1 overflow-y-auto p-3 sm:p-4 text-sm text-gray-300" onclick="event.stopPropagation();">
        <div id="drawerPanelInfo" class="drawer-panel space-y-3">
            <div class="flex items-center gap-2 text-white font-semibold text-sm px-1">
                <i class="bi bi-calendar-check text-sky-400"></i>
                Подписка
            </div>
            <div class="flex flex-wrap gap-2 px-1" id="drawerQuickActions">
                <button type="button" class="drawer-action-btn drawer-action-extend" id="drawerBtnExtend" title="Продлить">
                    <i class="bi bi-clock-history"></i> Продлить
                </button>
                <button type="button" class="drawer-action-btn drawer-action-shrink" id="drawerBtnShrink" title="Уменьшить срок">
                    <i class="bi bi-dash-lg"></i> Уменьшить
                </button>
                <button type="button" class="drawer-action-btn drawer-action-block" id="drawerBtnBlock" title="Заблокировать">
                    <i class="bi bi-lock-fill"></i> Заблокировать
                </button>
                <button type="button" class="drawer-action-btn drawer-action-reset" id="drawerBtnResetSub" title="Сброс подписки">
                    <i class="bi bi-shield-lock"></i> Сброс подписки
                </button>
            </div>
            <div class="drawer-sub-card">
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-hourglass-split text-slate-500"></i> Дата окончания</span>
                    <span id="drawerEndDate" class="drawer-val">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-check2-circle text-slate-500"></i> Статус подписки</span>
                    <span id="drawerSubBadge" class="px-2 py-0.5 text-xs pill-green shrink-0">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-gift text-slate-500"></i> Доп. триал</span>
                    <span id="drawerTrialExtra" class="px-2 py-0.5 text-xs pill-gray shrink-0">Не получен</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-calendar3 text-slate-500"></i> Дата регистрации</span>
                    <span id="drawerRegDate" class="drawer-val">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-phone text-slate-500"></i> Лимит устройств</span>
                    <span id="drawerDeviceLimit" class="drawer-val">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-layers text-slate-500"></i> Режим подписки</span>
                    <span id="drawerSubMode" class="px-2 py-0.5 text-xs pill-blue shrink-0">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-hdd-network text-slate-500"></i> Серверы (активные)</span>
                    <span id="drawerServersLine" class="drawer-val text-xs">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-envelope-at text-slate-500"></i> Почта X-UI</span>
                    <span id="drawerXuiEmail" class="drawer-val text-[11px] font-mono">—</span>
                </div>
                <div class="drawer-sub-card mt-2" id="drawerXuiLiveCard">
                    <div class="text-[11px] text-slate-500 mb-2 flex items-center gap-2 flex-wrap">
                        <i class="bi bi-hdd-rack"></i> Панели 3X-UI <span class="text-slate-600">(UUID, трафик)</span>
                    </div>
                    <div id="drawerXuiLiveBody" class="text-xs space-y-2">—</div>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-translate text-slate-500"></i> Язык</span>
                    <span id="drawerUserLang" class="drawer-val">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-shield-check text-slate-500"></i> Провайдер</span>
                    <span class="px-2 py-0.5 text-xs pill-blue shrink-0">X-UI</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-eye text-slate-500"></i> Статус</span>
                    <span id="drawerUserActive" class="px-2 py-0.5 text-xs pill-green shrink-0">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-link-45deg text-slate-500"></i> Страница подключения</span>
                    <a id="drawerConnLink" href="#" target="_blank" rel="noopener" class="text-sky-400 hover:text-sky-300 font-medium whitespace-nowrap">Открыть</a>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-people text-slate-500"></i> Партнёрская программа</span>
                    <span id="drawerAffiliateProg" class="px-2 py-0.5 text-xs pill-gray shrink-0">Из настроек</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-wallet2 text-slate-500"></i> Баланс партнёра</span>
                    <span id="drawerPartnerBalance" class="drawer-val">—</span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-percent text-slate-500"></i> % Процент партнёра</span>
                    <span id="drawerPartnerPct" class="px-2 py-0.5 text-xs pill-gray shrink-0">Из настроек</span>
                </div>
            </div>

            <div class="flex items-center gap-2 text-white font-semibold text-sm px-1 mt-4">
                <i class="bi bi-telegram text-sky-400"></i>
                Telegram
            </div>
            <div class="drawer-sub-card">
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-hash text-slate-500"></i> Telegram ID</span>
                    <span class="drawer-val inline-flex items-center gap-1 justify-end">
                        <span id="drawerTelegramId" class="tg-id">—</span>
                        <button type="button" class="drawer-copy-icon" id="drawerCopyTgId" title="Копировать"><i class="bi bi-clipboard"></i></button>
                    </span>
                </div>
                <div class="drawer-row">
                    <span class="drawer-label"><i class="bi bi-at text-slate-500"></i> Username</span>
                    <span class="drawer-val inline-flex items-center gap-1 justify-end">
                        <span id="drawerTelegramUsername">—</span>
                        <button type="button" class="drawer-copy-icon" id="drawerCopyUsername" title="Копировать"><i class="bi bi-clipboard"></i></button>
                    </span>
                </div>
            </div>
        </div>
        <div id="drawerPanelPay" class="drawer-panel hidden text-gray-400 text-xs">
            <p class="text-gray-500 mb-2">Последние платежи</p>
            <div id="drawerPayments" class="space-y-2"></div>
        </div>
        <div id="drawerPanelRef" class="drawer-panel hidden text-gray-400 text-xs">
            <p>Реф. код: <span id="drawerRefCode" class="text-gray-200">—</span></p>
            <p class="mt-2">Приглашён: <span id="drawerRefBy" class="text-gray-200">—</span></p>
        </div>
        <div id="drawerPanelShield" class="drawer-panel hidden text-gray-500 text-xs">Настройки безопасности появятся здесь.</div>
        <div id="drawerPanelKey" class="drawer-panel hidden text-gray-400 text-xs space-y-2">
            <p class="text-gray-400 font-medium">Ключи по серверам <span id="drawerKeysCount" class="text-gray-500"></span></p>
            <div id="drawerKeysByServer" class="space-y-2 max-h-[42vh] overflow-y-auto pr-1"></div>
            <p class="text-gray-500 pt-2 border-t border-gray-800">Объединённая подписка (base64):</p>
            <textarea id="drawerKeyMerged" readonly rows="5" class="w-full bg-gray-950 border border-gray-700 rounded-lg px-2 py-1.5 text-[11px] font-mono text-gray-300"></textarea>
        </div>
    </div>
</aside>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    const viewModal = new bootstrap.Modal(document.getElementById('viewModal'));
    const userModal = new bootstrap.Modal(document.getElementById('userModal'));
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const createClientModal = document.getElementById('createClientModal')
        ? new bootstrap.Modal(document.getElementById('createClientModal'))
        : null;
    const deleteProgressOverlay = document.getElementById('deleteProgressOverlay');
    const deleteProgressTitle = document.getElementById('deleteProgressTitle');
    const deleteProgressLog = document.getElementById('deleteProgressLog');
    const deleteProgressCloseBtn = document.getElementById('deleteProgressCloseBtn');
    const closeDeleteProgress = document.getElementById('closeDeleteProgress');
    const retryDeleteFailedBtn = document.getElementById('retryDeleteFailedBtn');
    const deleteProgressHeaderIcon = document.getElementById('deleteProgressHeaderIcon');
    const deleteProgressHeaderText = document.getElementById('deleteProgressHeaderText');
    const drawerExtendModal = new bootstrap.Modal(document.getElementById('drawerExtendModal'));
    const drawerShrinkModal = new bootstrap.Modal(document.getElementById('drawerShrinkModal'));
    const resetSubModalEl = document.getElementById('resetSubModal');
    const resetSubModal = resetSubModalEl ? new bootstrap.Modal(resetSubModalEl) : null;
    /** 'delete' | 'create' — общая плашка прогресса для обеих операций */
    let longOperationMode = 'delete';
    let lastDeleteTelegramId = null;
    let lastDeleteFailedServerIds = [];
    let currentUserId = null;
    let drawerUserEnabled = true;
    let subscriptionOptionsLoaded = true;
    let lastDrawerSubscriptions = [];
    function escapeDrawerHtml(s) {
        return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
    }
    function flashDrawerCopied(btn) {
        if (!btn) return;
        const prev = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check2 text-emerald-400"></i>';
        setTimeout(() => { btn.innerHTML = prev; }, 850);
    }
    const drawer = document.getElementById('userDrawer');
    const drawerOverlay = document.getElementById('userDrawerOverlay');

    function openUserDrawer() {
        drawer.classList.add('open');
        drawerOverlay.classList.add('open');
        drawer.setAttribute('aria-hidden', 'false');
    }
    function closeUserDrawer() {
        drawer.classList.remove('open');
        drawerOverlay.classList.remove('open');
        drawer.setAttribute('aria-hidden', 'true');
    }
    $('#closeUserDrawer, #userDrawerOverlay').on('click', closeUserDrawer);
    $(document).on('click', '#drawerCopyTgId', function() {
        const t = $('#drawerTelegramId').text().trim();
        if (t && t !== '—') {
            navigator.clipboard.writeText(t);
            flashDrawerCopied(this);
        }
    });
    $(document).on('click', '#drawerCopyUsername', function() {
        let t = $('#drawerTelegramUsername').text().trim();
        if (t.startsWith('@')) t = t.slice(1);
        if (t && t !== '—') {
            navigator.clipboard.writeText(t);
            flashDrawerCopied(this);
        }
    });
    function formatDrawerTrafficBytes(n) {
        let v = Number(n);
        if (!v || v < 0 || isNaN(v)) return '—';
        const u = ['B', 'KB', 'MB', 'GB', 'TB'];
        let i = 0;
        while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
        return (i === 0 ? Math.round(v) : v.toFixed(i >= 3 ? 2 : 1)) + ' ' + u[i];
    }

    async function loadDrawerXuiLive(userId) {
        const el = document.getElementById('drawerXuiLiveBody');
        if (!el) return;
        el.innerHTML = '<span class="text-slate-500">Загрузка с панелей…</span>';
        try {
            const r = await fetch(`/admin/users/view/${userId}/xui-live`);
            const data = await r.json();
            if (!r.ok || data.error) {
                el.innerHTML = '<span class="text-amber-400/90">' + escapeDrawerHtml(data.error || 'Ошибка') + '</span>';
                return;
            }
            const srvs = data.servers || [];
            if (!srvs.length) {
                el.innerHTML = '<span class="text-slate-500">' + escapeDrawerHtml(data.message || 'Нет серверов для запроса') + '</span>';
                return;
            }
            el.innerHTML = srvs.map((s) => {
                const name = escapeDrawerHtml(s.server_name || ('#' + s.server_id));
                if (!s.ok) {
                    return '<div class="border border-gray-800 rounded px-2 py-1.5 bg-gray-950/50">' +
                        '<div class="text-gray-300 font-medium">' + name + '</div>' +
                        '<div class="text-amber-400/90 text-[11px] mt-0.5">' + escapeDrawerHtml(s.error || 'Ошибка') + '</div></div>';
                }
                const uid = escapeDrawerHtml(s.uuid || '—');
                const up = formatDrawerTrafficBytes(s.up);
                const down = formatDrawerTrafficBytes(s.down);
                const uuidRaw = (s.uuid || '').trim();
                const copyBtn = uuidRaw
                    ? '<button type="button" class="drawer-copy-icon drawer-copy-xui-uuid shrink-0" data-uuid="' + encodeURIComponent(uuidRaw) + '" title="Копировать UUID"><i class="bi bi-clipboard"></i></button>'
                    : '';
                const inb = s.inbound_id ? '<span class="text-[10px] text-slate-600 shrink-0">inb ' + escapeDrawerHtml(String(s.inbound_id)) + '</span>' : '';
                return '<div class="border border-gray-800 rounded px-2 py-1.5 bg-gray-950/50">' +
                    '<div class="flex items-start justify-between gap-2">' +
                    '<div class="text-gray-300 font-medium">' + name + '</div>' + inb +
                    '</div>' +
                    '<div class="mt-1 flex items-center gap-1 justify-end">' +
                    '<span class="text-[10px] text-slate-500 font-mono break-all flex-1 text-left">' + uid + '</span>' + copyBtn + '</div>' +
                    '<div class="text-[10px] text-slate-400 mt-1">↑ ' + escapeDrawerHtml(up) + ' · ↓ ' + escapeDrawerHtml(down) + '</div>' +
                    '</div>';
            }).join('');
        } catch (e) {
            el.innerHTML = '<span class="text-amber-400/90">' + escapeDrawerHtml(e.message || String(e)) + '</span>';
        }
    }

    function populateUserDrawerFromApi(data) {
        const u = data.user;
        lastDrawerSubscriptions = data.subscriptions || [];
        const dr = data.drawer || {};
        const title = (u.username && u.username.trim()) ? u.username : ('ID ' + u.telegram_id);
        $('#drawerTitle').text(title);
        $('#drawerRegDate').text(formatDrawerDate(u.date || '—'));
        $('#drawerKeyMerged').val(u.merged_subscription_b64 || '');

        $('#drawerDeviceLimit').text(dr.device_limit != null && dr.device_limit !== '' ? dr.device_limit : '—');
        $('#drawerSubMode').text(dr.subscription_mode || '—');
        $('#drawerServersLine').text(dr.servers_summary || '—');
        $('#drawerXuiEmail').text(dr.xui_email || '—');
        const lang = (u.language != null && String(u.language).trim()) ? String(u.language).trim() : '';
        $('#drawerUserLang').text(lang || '—');
        $('#drawerPartnerBalance').text('—');

        if (u.trial_period) {
            $('#drawerTrialExtra').text('Получен / использован').removeClass('pill-gray').addClass('pill-green');
        } else {
            $('#drawerTrialExtra').text('Не получен').removeClass('pill-green').addClass('pill-gray');
        }

        $('#drawerTelegramId').text(u.telegram_id != null ? u.telegram_id : '—');
        const un = (u.username || '').trim();
        $('#drawerTelegramUsername').text(un ? ('@' + un.replace(/^@/, '')) : '—');

        const actSubs = (data.subscriptions || []).filter((s) => Number(s.is_active) === 1);
        $('#drawerKeysCount').text(actSubs.length ? ('(активных: ' + actSubs.length + ')') : '');
        const keyHtml = actSubs.map((s) => {
            const name = escapeDrawerHtml(s.server_name || ('Сервер #' + s.server_id));
            const prev = escapeDrawerHtml(s.vless_preview || '');
            const sid = s.id;
            return (
                '<div class="flex items-start justify-between gap-2 border border-gray-700 rounded-lg px-2 py-1.5 bg-gray-950/40">' +
                '<div class="min-w-0 flex-1">' +
                '<div class="text-gray-200 text-xs font-medium">' + name + '</div>' +
                '<div class="text-[10px] text-gray-500 font-mono break-all mt-0.5">' + (prev || '—') + '</div>' +
                '</div>' +
                '<button type="button" class="drawer-copy-vless drawer-copy-icon self-start" data-sub-id="' + sid + '" title="Копировать полный vless"><i class="bi bi-clipboard"></i></button>' +
                '</div>'
            );
        }).join('');
        $('#drawerKeysByServer').html(keyHtml || '<p class="text-gray-500">Нет активных ключей</p>');

        const sub = (data.subscriptions && data.subscriptions[0]) ? data.subscriptions[0] : null;
        if (sub && sub.end_date) {
            $('#drawerEndDate').text(formatDrawerDate(sub.end_date));
        } else {
            $('#drawerEndDate').text('—');
        }
        let dl = sub ? sub.days_left : null;
        if (dl != null && typeof dl === 'number') { /* ok */ } else if (dl != null) { dl = parseFloat(dl); }
        if (sub && dl != null && !isNaN(dl)) {
            if (dl > 0) {
                $('#drawerSubBadge').text('Действует').removeClass('pill-gray').addClass('pill-green');
            } else {
                $('#drawerSubBadge').text('Истекла').removeClass('pill-green').addClass('pill-gray');
            }
        } else {
            $('#drawerSubBadge').text('Нет подписки').removeClass('pill-green').addClass('pill-gray');
        }

        drawerUserEnabled = (u.is_enable === 1 || u.is_enable === true);
        const $blk = $('#drawerBtnBlock');
        if (drawerUserEnabled) {
            $blk.removeClass('is-unblock').html('<i class="bi bi-lock-fill"></i> Заблокировать');
        } else {
            $blk.addClass('is-unblock').html('<i class="bi bi-unlock-fill"></i> Разблокировать');
        }

        if (u.is_enable) {
            $('#drawerUserActive').text('Активен').removeClass('pill-gray').addClass('pill-green');
        } else {
            $('#drawerUserActive').text('Заблокирован').removeClass('pill-green').addClass('pill-gray');
        }

        const tgConn = u.telegram_id;
        if (tgConn) {
            $('#drawerConnLink').attr('href', `${window.location.origin}/admin/users/client-area/${tgConn}`);
        } else {
            $('#drawerConnLink').attr('href', '#');
        }

        $('#drawerRefCode').text(u.referral_code || '—');
        $('#drawerRefBy').text(u.referred_by || '—');

        const payHtml = (data.payments || []).slice(0, 8).map(p =>
            `<div class="flex justify-between gap-2 border border-gray-700 rounded px-2 py-1.5">
                <span class="text-gray-500">${p.date || ''}</span>
                <span class="text-gray-200">${p.tariff_name || ''}</span>
                <span class="text-emerald-400">${p.price} ₽</span>
            </div>`
        ).join('');
        $('#drawerPayments').html(payHtml || '<p class="text-gray-500">Нет платежей</p>');

        $('.drawer-tab-btn').removeClass('active');
        $('.drawer-tab-btn[data-drawer-tab="info"]').addClass('active');
        $('.drawer-panel').addClass('hidden');
        $('#drawerPanelInfo').removeClass('hidden');
    }

    async function refreshDrawerFromServer(userId) {
        if (!userId) return;
        try {
            const response = await fetch(`/admin/users/view/${userId}`);
            if (!response.ok) return;
            const data = await response.json();
            if (data.error) return;
            populateUserDrawerFromApi(data);
            loadDrawerXuiLive(userId);
        } catch (e) {
            console.error(e);
        }
    }

    function resetResetSubModalUi() {
        $('#resetSubIntro').removeClass('d-none');
        $('#resetSubProgressWrap').addClass('d-none');
        $('#resetSubConfirmBtn').removeClass('d-none');
        $('#resetSubCancelBtn').removeClass('d-none');
        $('#resetSubDoneBtn').addClass('d-none');
        $('#resetSubModalCloseX').prop('disabled', false);
        $('#resetSubStepList').empty();
        $('#resetSubResultMsg').text('').removeClass('text-danger text-success');
        const bar = document.getElementById('resetSubProgressBar');
        if (bar) {
            bar.style.width = '0%';
            bar.classList.remove('progress-bar-animated', 'bg-danger', 'bg-success');
            bar.classList.add('bg-info');
        }
    }

    function renderResetSubSteps(steps) {
        const el = document.getElementById('resetSubStepList');
        if (!el) return;
        const icons = {
            pending: '<i class="bi bi-circle text-slate-600"></i>',
            running: '<span class="spinner-border spinner-border-sm text-info" role="status"></span>',
            done: '<i class="bi bi-check-circle-fill text-success"></i>',
            error: '<i class="bi bi-x-circle-fill text-danger"></i>',
        };
        const list = steps || [];
        el.innerHTML = list.map((s) => {
            const st = s.status || 'pending';
            const ic = icons[st] || icons.pending;
            return '<div class="reset-sub-step"><span class="st-ic">' + ic + '</span><span>' + escapeDrawerHtml(s.label || '') + '</span></div>';
        }).join('');
        const bar = document.getElementById('resetSubProgressBar');
        if (bar && list.length) {
            const done = list.filter((s) => (s.status || '') === 'done').length;
            const running = list.some((s) => (s.status || '') === 'running');
            let pct = Math.round((done / list.length) * 100);
            if (running && pct < 100) pct = Math.min(99, pct + Math.round(100 / list.length / 2));
            bar.style.width = pct + '%';
            bar.classList.toggle('progress-bar-animated', running);
        }
    }

    if (resetSubModalEl) {
        $(resetSubModalEl).on('hidden.bs.modal', resetResetSubModalUi);
        $(resetSubModalEl).on('show.bs.modal', resetResetSubModalUi);
    }

    $(document).on('click', '.drawer-copy-xui-uuid', function() {
        const raw = $(this).attr('data-uuid');
        let t = '';
        try { t = raw ? decodeURIComponent(raw) : ''; } catch (e) { t = raw || ''; }
        if (!t) return;
        navigator.clipboard.writeText(t).then(() => {}).catch(() => {});
    });

    $(document).on('click', '.drawer-copy-vless', function() {
        const sid = $(this).data('subId');
        const sub = (lastDrawerSubscriptions || []).find((x) => Number(x.id) === Number(sid));
        const v = sub && sub.vless ? String(sub.vless) : '';
        if (v) {
            navigator.clipboard.writeText(v);
            flashDrawerCopied(this);
        }
    });
    $(document).on('click', '.drawer-tab-btn', function() {
        const tab = $(this).data('drawer-tab');
        $('.drawer-tab-btn').removeClass('active');
        $(this).addClass('active');
        $('.drawer-panel').addClass('hidden');
        const map = { info: '#drawerPanelInfo', pay: '#drawerPanelPay', ref: '#drawerPanelRef', shield: '#drawerPanelShield', key: '#drawerPanelKey' };
        $(map[tab] || '#drawerPanelInfo').removeClass('hidden');
    });

    $('#toggleAdvFilters').on('click', function() {
        $('#advFiltersPanel').toggleClass('hidden');
    });
    $(document).on('change', '#assignAllServers', function() {
        const dis = this.checked;
        const sel = document.getElementById('assignServerIds');
        if (sel) {
            sel.disabled = dis;
            if (dis) {
                Array.from(sel.options).forEach((o) => (o.selected = false));
            }
        }
    });

    function openDeleteProgressModal(titleText, mode) {
        if (!deleteProgressOverlay || !deleteProgressTitle || !deleteProgressLog || !deleteProgressCloseBtn) return;
        longOperationMode = mode === 'create' ? 'create' : 'delete';
        if (deleteProgressHeaderIcon && deleteProgressHeaderText) {
            if (longOperationMode === 'create') {
                deleteProgressHeaderIcon.className = 'bi bi-person-plus';
                deleteProgressHeaderText.textContent = 'Создание клиента';
            } else {
                deleteProgressHeaderIcon.className = 'bi bi-trash';
                deleteProgressHeaderText.textContent = 'Удаление клиента';
            }
        }
        const defaultSub =
            longOperationMode === 'create' ? 'Подготовка к созданию…' : 'Подготовка к удалению…';
        deleteProgressTitle.textContent = titleText || defaultSub;
        deleteProgressLog.innerHTML = '';
        deleteProgressCloseBtn.disabled = true;
        if (retryDeleteFailedBtn) {
            retryDeleteFailedBtn.disabled = true;
            if (longOperationMode === 'create') {
                retryDeleteFailedBtn.classList.add('hidden');
            } else {
                retryDeleteFailedBtn.classList.remove('hidden');
            }
        }
        lastDeleteTelegramId = null;
        lastDeleteFailedServerIds = [];
        deleteProgressOverlay.classList.add('open');
        deleteProgressOverlay.setAttribute('aria-hidden', 'false');
    }
    function closeDeleteProgressModal() {
        if (!deleteProgressOverlay || !deleteProgressCloseBtn) return;
        if (deleteProgressCloseBtn.disabled) return;
        deleteProgressOverlay.classList.remove('open');
        deleteProgressOverlay.setAttribute('aria-hidden', 'true');
    }
    function appendDeleteLog(text, level = 'info') {
        if (!deleteProgressLog) return;
        const cls = level === 'ok' ? 'delete-log-ok' : (level === 'err' ? 'delete-log-err' : 'delete-log-info');
        const row = document.createElement('div');
        row.className = `delete-log-row ${cls}`;
        row.textContent = text;
        deleteProgressLog.appendChild(row);
        deleteProgressLog.scrollTop = deleteProgressLog.scrollHeight;
    }
    function setDeleteProgressDone(doneText) {
        if (!deleteProgressTitle || !deleteProgressCloseBtn) return;
        const fallback =
            longOperationMode === 'create' ? 'Создание завершено' : 'Удаление завершено';
        deleteProgressTitle.textContent = doneText || fallback;
        deleteProgressCloseBtn.disabled = false;
    }
    if (deleteProgressCloseBtn) deleteProgressCloseBtn.addEventListener('click', closeDeleteProgressModal);
    if (closeDeleteProgress) closeDeleteProgress.addEventListener('click', closeDeleteProgressModal);
    if (retryDeleteFailedBtn) {
        retryDeleteFailedBtn.addEventListener('click', async () => {
            if (!lastDeleteTelegramId || !lastDeleteFailedServerIds.length) return;
            retryDeleteFailedBtn.disabled = true;
            appendDeleteLog('Повтор удаления только на ошибочных серверах…', 'info');
            try {
                const resp = await fetch('/admin/users/delete-retry-servers', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ telegram_id: lastDeleteTelegramId, server_ids: lastDeleteFailedServerIds }),
                });
                const data = await resp.json();
                if (!resp.ok || !data.ok) {
                    throw new Error(data.error || 'Ошибка повтора удаления');
                }
                const stillFailed = [];
                (data.results || []).forEach((srv, idx) => {
                    const n = idx + 1;
                    if (srv.ok) {
                        appendDeleteLog(`Повтор на сервере ${srv.name || n}: OK`, 'ok');
                    } else {
                        appendDeleteLog(`Повтор на сервере ${srv.name || n}: Ошибка (${srv.error || 'unknown'})`, 'err');
                        if (srv.server_id != null) stillFailed.push(Number(srv.server_id));
                    }
                });
                lastDeleteFailedServerIds = stillFailed;
                if (!stillFailed.length) {
                    appendDeleteLog('Ошибочных серверов не осталось.', 'ok');
                } else {
                    appendDeleteLog('Часть серверов всё ещё с ошибкой, можно повторить снова.', 'err');
                    retryDeleteFailedBtn.disabled = false;
                }
            } catch (e) {
                appendDeleteLog('Ошибка повторного удаления: ' + e.message, 'err');
                retryDeleteFailedBtn.disabled = false;
            }
        });
    }

    $('#selectAllClients').on('change', function() {
        $('.client-cb').prop('checked', $(this).prop('checked'));
    });

    function pad(n) { return n < 10 ? '0' + n : String(n); }
    function formatDrawerDate(s) {
        if (s == null || s === '' || s === '—') return '—';
        const raw = String(s).trim();
        const d = new Date(raw.replace(' ', 'T').replace(/\.\d+Z?$/, ''));
        if (isNaN(d.getTime())) {
            return raw.replace('T', ' ').replace(/\.\d+Z?$/, '').trim().slice(0, 16);
        }
        return pad(d.getDate()) + '.' + pad(d.getMonth() + 1) + '.' + d.getFullYear() + ', ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
    }
    function localInputNow() {
        const d = new Date();
        return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate())
            + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
    }
    function parseLocalDateTime(raw) {
        const t = String(raw || '').trim();
        if (!t) return null;
        const d = new Date(t.replace(' ', 'T'));
        return isNaN(d.getTime()) ? null : d;
    }
    function formatPreviewDate(d) {
        if (!d || isNaN(d.getTime())) return '—';
        return pad(d.getDate()) + '.' + pad(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
    }
    function setPreviewState(el, state, text) {
        if (!el) return;
        el.classList.remove('sub-preview-ok', 'sub-preview-warn', 'sub-preview-bad');
        if (state === 'ok') el.classList.add('sub-preview-ok');
        else if (state === 'bad') el.classList.add('sub-preview-bad');
        else el.classList.add('sub-preview-warn');
        el.textContent = text;
    }
    function selectedTariffDays(selectId) {
        const sel = document.getElementById(selectId);
        if (!sel) return 0;
        const opt = sel.options[sel.selectedIndex];
        const raw = opt ? Number(opt.getAttribute('data-days') || 0) : 0;
        return Number.isFinite(raw) ? raw : 0;
    }
    function selectedTariffUnlimited(selectId) {
        const sel = document.getElementById(selectId);
        if (!sel) return false;
        const opt = sel.options[sel.selectedIndex];
        return !!(opt && Number(opt.getAttribute('data-unlimited') || 0));
    }
    function updateCreateSubscriptionPreview() {
        const preview = document.getElementById('createSubPreview');
        if (!preview) return;
        const now = new Date();
        const explicit = parseLocalDateTime(document.getElementById('createClientSubEndDate')?.value || '');
        if (explicit) {
            if (explicit.getTime() <= now.getTime()) {
                setPreviewState(preview, 'bad', 'Новая дата окончания: ' + formatPreviewDate(explicit) + ' (дата в прошлом)');
            } else {
                setPreviewState(preview, 'ok', 'Новая дата окончания: ' + formatPreviewDate(explicit));
            }
            return;
        }
        const manualDays = Number(document.getElementById('createClientSubDays')?.value || 0);
        const tariffDays = selectedTariffDays('createClientTariffId');
        const unl = selectedTariffUnlimited('createClientTariffId');
        const days = manualDays > 0 ? manualDays : tariffDays;
        if (unl && manualDays <= 0 && !explicit) {
            setPreviewState(preview, 'ok', 'Срок: не задан (бессрочная подписка в БД)');
            return;
        }
        if (days > 0) {
            const d = new Date();
            d.setDate(d.getDate() + days);
            setPreviewState(preview, 'ok', 'Новая дата окончания: ' + formatPreviewDate(d));
        } else {
            setPreviewState(preview, 'warn', 'Новая дата окончания: —');
        }
    }
    function updateAssignSubscriptionPreview() {
        const preview = document.getElementById('assignSubPreview');
        if (!preview) return;
        const now = new Date();
        const explicit = parseLocalDateTime(document.getElementById('assignSubscriptionEndDate')?.value || '');
        if (explicit) {
            if (explicit.getTime() <= now.getTime()) {
                setPreviewState(preview, 'bad', 'Новая дата окончания: ' + formatPreviewDate(explicit) + ' (дата в прошлом)');
            } else {
                setPreviewState(preview, 'ok', 'Новая дата окончания: ' + formatPreviewDate(explicit));
            }
            return;
        }
        const manualDays = Number(document.getElementById('assignSubscriptionDays')?.value || 0);
        const tariffDays = selectedTariffDays('assignTariffId');
        const unl = selectedTariffUnlimited('assignTariffId');
        const days = manualDays > 0 ? manualDays : tariffDays;
        if (unl && manualDays <= 0 && !explicit) {
            setPreviewState(preview, 'ok', 'Срок: не задан (бессрочная подписка в БД)');
            return;
        }
        if (days > 0) {
            const d = new Date();
            d.setDate(d.getDate() + days);
            setPreviewState(preview, 'ok', 'Новая дата окончания: ' + formatPreviewDate(d));
        } else {
            setPreviewState(preview, 'warn', 'Новая дата окончания: —');
        }
    }

    $('#openCreateClientBtn').on('click', function() {
        if (!createClientModal) return;
        $('#createClientTgId').val('');
        $('#createClientUsername').val('');
        $('#createClientReferredBy').val('');
        $('#createClientRegDate').val(localInputNow());
        $('#createClientTariffId').val('');
        $('#createClientSubDays').val('');
        $('#createClientSubEndDate').val('');
        updateCreateSubscriptionPreview();
        $('#createClientError').addClass('d-none').text('');
        $('#createClientXuiLog').addClass('d-none').text('');
        createClientModal.show();
    });

    $('#importFromXuiBtn').on('click', async function() {
        const btn = this;
        if (!confirm('Синхронизация с 3X-UI:\n• добавить в БД клиентов с панелей, которых ещё нет в списке;\n• удалить из БД тех, кого нет ни на одной панели (только если все включённые серверы успешно опрошены).\n\nПродолжить?')) return;
        btn.disabled = true;
        const prev = btn.innerHTML;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Скан…';
        try {
            const response = await fetch('/admin/users/import-from-xui', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            let data = {};
            try {
                data = await response.json();
            } catch (e) {
                throw new Error('Некорректный ответ сервера');
            }
            if (!response.ok || !data.ok) {
                throw new Error(data.error || 'Ошибка импорта');
            }
            const imp = data.imported != null ? data.imported : 0;
            const miss = data.missing_before_import != null ? data.missing_before_import : '—';
            const rem = data.removed_from_db != null ? data.removed_from_db : 0;
            let extra = '';
            if (data.prune_skipped) {
                extra = '\n\nУдаление «лишних» из БД пропущено: не все панели ответили успешно (чтобы не удалить клиентов по ошибке сети).';
            }
            alert('Синхронизация завершена.\nДобавлено в БД: ' + imp + '\nБыло отсутствовало до импорта: ' + miss + '\nУдалено из БД (не на панелях): ' + rem + extra);
            window.location.reload();
        } catch (err) {
            alert('Ошибка: ' + (err && err.message ? err.message : err));
        } finally {
            btn.disabled = false;
            btn.innerHTML = prev;
        }
    });

    $('#submitCreateClient').on('click', async function() {
        const telegram_id = $('#createClientTgId').val().trim();
        const username = $('#createClientUsername').val().trim();
        const referred_by = $('#createClientReferredBy').val().trim();
        const registration_date = $('#createClientRegDate').val().trim();
        const tariff_id = Number($('#createClientTariffId').val() || 0);
        const subscription_days = Number($('#createClientSubDays').val() || 0);
        const subscription_end_date = $('#createClientSubEndDate').val().trim();
        $('#createClientError').addClass('d-none');
        $('#createClientXuiLog').addClass('d-none');
        openDeleteProgressModal(`Создаю клиента tg=${telegram_id}…`, 'create');
        appendDeleteLog('Запущен процесс создания…', 'info');
        try {
            const response = await fetch('/admin/users/create-start', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    telegram_id,
                    username: username || null,
                    referred_by: referred_by || null,
                    registration_date: registration_date || null,
                    tariff_id: tariff_id > 0 ? tariff_id : null,
                    subscription_days: subscription_days > 0 ? subscription_days : null,
                    subscription_end_date: subscription_end_date || null,
                }),
            });
            const startData = await response.json();
            if (!response.ok || !startData.ok || !startData.job_id) {
                throw new Error(startData.error || 'Ошибка запуска создания');
            }
            const jobId = startData.job_id;
            let cursor = 0;
            const appendCreateResultDetails = (st) => {
                const result = st && st.result ? st.result : {};
                const err = String(result.error || result.message || '').trim();
                if (err) appendDeleteLog(err, 'err');
                const xui = result.xui || {};
                (xui.results || []).forEach((row) => {
                    if (row && row.ok === false) {
                        appendDeleteLog(
                            `${row.name || ('#' + row.server_id)}: ${row.error || 'ошибка'}`,
                            'err'
                        );
                    }
                });
            };
            const pollCreate = async () => {
                const stResp = await fetch(`/admin/users/create-status/${encodeURIComponent(jobId)}?cursor=${cursor}`, {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                });
                const st = await stResp.json();
                if (!stResp.ok || !st.ok) throw new Error(st.error || 'Ошибка получения статуса создания');
                (st.logs || []).forEach((line) => {
                    if (/Ошибка/i.test(line)) appendDeleteLog(line, 'err');
                    else if (/Клиент создан$/.test(line) || /: OK$/.test(line)) appendDeleteLog(line, 'ok');
                    else appendDeleteLog(line, 'info');
                });
                cursor = st.cursor || cursor;
                if (st.finished) {
                    if (st.success) {
                        setDeleteProgressDone('Создание завершено');
                        setTimeout(() => window.location.reload(), 900);
                    } else {
                        appendCreateResultDetails(st);
                        setDeleteProgressDone('Создание завершено с ошибкой');
                    }
                    return true;
                }
                return false;
            };
            const maxPolls = 600;
            let polls = 0;
            let done = await pollCreate();
            while (!done && polls < maxPolls) {
                await new Promise((r) => setTimeout(r, 1000));
                polls += 1;
                done = await pollCreate();
            }
            if (!done) {
                appendDeleteLog(
                    'Таймаут ожидания (10 мин). Закройте окно и проверьте, появился ли клиент в списке.',
                    'err'
                );
                setDeleteProgressDone('Создание прервано по таймауту');
            }
            createClientModal.hide();
        } catch (e) {
            appendDeleteLog('Ошибка при создании: ' + e.message, 'err');
            setDeleteProgressDone('Создание завершено с ошибкой');
            $('#createClientError').removeClass('d-none').text(e.message);
        }
    });

    $(document).on('click', '.user-row', async function(e) {
        if (!$(e.target).closest('.edit-btn, .delete-btn, .client-cb, select').length) {
            const userId = $(this).data('id');
            currentUserId = Number(userId);
            try {
                const response = await fetch(`/admin/users/view/${userId}`);
                if (!response.ok) throw new Error('Ошибка при получении данных');
                const data = await response.json();
                if (data.error) throw new Error(data.error);
                populateUserDrawerFromApi(data);
                openUserDrawer();
                loadDrawerXuiLive(userId);
            } catch (error) {
                console.error('Ошибка:', error);
                alert('Ошибка при получении данных: ' + error.message);
            }
        }
    });

    $('#drawerBtnExtend').on('click', function() {
        if (!currentUserId) return;
        drawerExtendModal.show();
    });
    $('#drawerBtnShrink').on('click', function() {
        if (!currentUserId) return;
        drawerShrinkModal.show();
    });
    $('#drawerExtendConfirm').on('click', async function() {
        if (!currentUserId) return;
        const days = parseInt($('#drawerExtendDays').val(), 10);
        if (!days || days < 1) {
            alert('Укажите число дней от 1');
            return;
        }
        try {
            const r = await fetch(`/admin/users/${currentUserId}/adjust-subscription-days`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ days }),
            });
            const d = await r.json();
            if (!r.ok || !d.ok) throw new Error(d.error || 'Ошибка');
            drawerExtendModal.hide();
            await refreshDrawerFromServer(currentUserId);
        } catch (err) {
            alert(err.message || String(err));
        }
    });
    $('#drawerShrinkConfirm').on('click', async function() {
        if (!currentUserId) return;
        const days = parseInt($('#drawerShrinkDays').val(), 10);
        if (!days || days < 1) {
            alert('Укажите число дней от 1');
            return;
        }
        try {
            const r = await fetch(`/admin/users/${currentUserId}/adjust-subscription-days`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ days: -days }),
            });
            const d = await r.json();
            if (!r.ok || !d.ok) throw new Error(d.error || 'Ошибка');
            drawerShrinkModal.hide();
            await refreshDrawerFromServer(currentUserId);
        } catch (err) {
            alert(err.message || String(err));
        }
    });
    $('#drawerBtnBlock').on('click', async function() {
        if (!currentUserId) return;
        const willBlock = drawerUserEnabled;
        const msg = willBlock
            ? 'Заблокировать пользователя? Доступ к сервису через бота будет отключён.'
            : 'Разблокировать пользователя?';
        if (!window.confirm(msg)) return;
        try {
            const r = await fetch(`/admin/users/${currentUserId}/set-blocked`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ blocked: willBlock }),
            });
            const d = await r.json();
            if (!r.ok || !d.ok) throw new Error(d.error || 'Ошибка');
            drawerUserEnabled = !willBlock;
            const $blk = $('#drawerBtnBlock');
            if (drawerUserEnabled) {
                $('#drawerUserActive').text('Активен').removeClass('pill-gray').addClass('pill-green');
                $blk.removeClass('is-unblock').html('<i class="bi bi-lock-fill"></i> Заблокировать');
            } else {
                $('#drawerUserActive').text('Заблокирован').removeClass('pill-green').addClass('pill-gray');
                $blk.addClass('is-unblock').html('<i class="bi bi-unlock-fill"></i> Разблокировать');
            }
        } catch (err) {
            alert(err.message || String(err));
        }
    });
    $('#drawerBtnResetSub').on('click', function() {
        if (!currentUserId || !resetSubModal) return;
        resetSubModal.show();
    });
    $('#resetSubConfirmBtn').on('click', async function() {
        if (!currentUserId || !resetSubModal) return;
        $('#resetSubIntro').addClass('d-none');
        $('#resetSubProgressWrap').removeClass('d-none');
        $('#resetSubConfirmBtn').addClass('d-none');
        $('#resetSubCancelBtn').addClass('d-none');
        $('#resetSubModalCloseX').prop('disabled', true);
        $('#resetSubResultMsg').text('');
        try {
            const r = await fetch(`/admin/users/${currentUserId}/reset-subscription-start`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({}),
            });
            const d = await r.json();
            if (!r.ok || !d.ok) throw new Error(d.error || 'Не удалось начать операцию');
            const jobId = d.job_id;
            if (d.steps && d.steps.length) renderResetSubSteps(d.steps);
            const bar = document.getElementById('resetSubProgressBar');
            for (;;) {
                const sr = await fetch(`/admin/users/reset-subscription-status/${encodeURIComponent(jobId)}`);
                const st = await sr.json();
                if (!st.ok) throw new Error(st.error || 'Ошибка статуса');
                renderResetSubSteps(st.steps);
                if (st.finished) {
                    if (bar) {
                        bar.classList.remove('progress-bar-animated');
                        bar.style.width = '100%';
                        bar.classList.remove('bg-info', 'bg-danger', 'bg-success');
                        if (st.success) {
                            bar.classList.add('bg-success');
                        } else {
                            bar.classList.add('bg-danger');
                        }
                    }
                    if (st.success) {
                        $('#resetSubResultMsg').addClass('text-success').removeClass('text-danger')
                            .text('Готово. Ключи и UUID обновлены.');
                        await refreshDrawerFromServer(currentUserId);
                    } else {
                        const err = (st.result && st.result.error) ? st.result.error : 'Ошибка выполнения';
                        $('#resetSubResultMsg').addClass('text-danger').removeClass('text-success').text(err);
                    }
                    $('#resetSubDoneBtn').removeClass('d-none');
                    $('#resetSubModalCloseX').prop('disabled', false);
                    break;
                }
                await new Promise((res) => setTimeout(res, 450));
            }
        } catch (err) {
            const bar = document.getElementById('resetSubProgressBar');
            if (bar) {
                bar.classList.remove('progress-bar-animated');
                bar.classList.remove('bg-info');
                bar.classList.add('bg-danger');
            }
            $('#resetSubResultMsg').addClass('text-danger').removeClass('text-success').text(err.message || String(err));
            $('#resetSubDoneBtn').removeClass('d-none');
            $('#resetSubModalCloseX').prop('disabled', false);
        }
    });

    $(document).on('click', '.edit-btn', async function(e) {
        e.preventDefault();
        e.stopPropagation();
        currentUserId = Number($(this).data('id'));
        const row = $(this).closest('tr');
        const fallbackTg = String(row.data('telegram-id') ?? '').trim();
        const fallbackUsername = String(row.find('td').eq(2).text() || '').trim().replace(/^—$/, '');
        const form = $('#userForm')[0];
        try {
            if (!subscriptionOptionsLoaded) {
                const optResp = await fetch('/admin/users/subscription-options', { credentials: 'same-origin' });
                if (optResp.ok) {
                    const optData = await optResp.json();
                    if (optData.ok) {
                        const tariffSel = document.getElementById('assignTariffId');
                        const serverSel = document.getElementById('assignServerIds');
                        tariffSel.innerHTML = '<option value="">Не добавлять</option>';
                        (optData.tariffs || []).forEach((t) => {
                            const unl = (Number(t.is_admin_only) || 0) || (Number(t.is_unlimited_days) || 0);
                            const d = Number(t.left_day || 0);
                            const lab = unl ? 'без срока' : `${d} дн.`;
                            tariffSel.insertAdjacentHTML('beforeend', `<option value="${t.id}" data-days="${d}" data-unlimited="${unl ? 1 : 0}">${t.name} (${lab})</option>`);
                        });
                        serverSel.innerHTML = '';
                        (optData.servers || []).forEach((s) => {
                            serverSel.insertAdjacentHTML('beforeend', `<option value="${s.id}">${s.name}</option>`);
                        });
                        subscriptionOptionsLoaded = true;
                    }
                }
            }
            const response = await fetch(`/admin/users/edit/${currentUserId}`);
            if (!response.ok) throw new Error(`Ошибка при получении данных (${response.status})`);
            const ct = String(response.headers.get('content-type') || '').toLowerCase();
            if (!ct.includes('application/json')) {
                throw new Error('Сервер вернул не JSON (проверьте авторизацию/перезапуск web_admin)');
            }
            const data = await response.json();
            if (data.error) throw new Error(data.error);
            form.telegram_id.value = String(data.telegram_id ?? '');
            form.username.value = data.username || '';
            form.trial_period.checked = data.trial_period;
            form.is_enable.checked = data.is_enable;
            const dlRaw = parseInt(data.device_limit, 10);
            const dlEl = document.getElementById('editUserDeviceLimit');
            if (dlEl) dlEl.value = (!isNaN(dlRaw) && dlRaw > 0) ? String(Math.min(dlRaw, 512)) : '';
            document.getElementById('assignTariffId').value = '';
            document.getElementById('assignAllServers').checked = false;
            Array.from(document.getElementById('assignServerIds').options).forEach((o) => (o.selected = false));
            document.getElementById('assignSubscriptionDays').value = '';
            document.getElementById('assignSubscriptionEndDate').value = '';
            updateAssignSubscriptionPreview();
            userModal.show();
        } catch (error) {
            console.error('Ошибка:', error);
            // Fallback: открываем редактирование с данными из строки таблицы.
            form.telegram_id.value = fallbackTg;
            form.username.value = fallbackUsername;
            form.trial_period.checked = false;
            form.is_enable.checked = true;
            const dlFb = document.getElementById('editUserDeviceLimit');
            if (dlFb) dlFb.value = '';
            document.getElementById('assignTariffId').value = '';
            document.getElementById('assignAllServers').checked = false;
            Array.from(document.getElementById('assignServerIds').options).forEach((o) => (o.selected = false));
            document.getElementById('assignSubscriptionDays').value = '';
            document.getElementById('assignSubscriptionEndDate').value = '';
            updateAssignSubscriptionPreview();
            userModal.show();
            alert('Не удалось загрузить полные данные клиента, открыта форма с данными из таблицы: ' + error.message);
        }
    });
    $(document).on('input change', '#createClientTariffId, #createClientSubDays, #createClientSubEndDate', updateCreateSubscriptionPreview);
    $(document).on('input change', '#assignTariffId, #assignSubscriptionDays, #assignSubscriptionEndDate', updateAssignSubscriptionPreview);

    // Надёжно заполняем данные удаления при открытии модалки Bootstrap
    document.getElementById('deleteModal')?.addEventListener('shown.bs.modal', function(evt) {
        const trigger = evt.relatedTarget;
        if (!trigger) return;
        const uidRaw = trigger.getAttribute('data-id');
        const uid = parseInt(uidRaw || '', 10);
        if (!uid || isNaN(uid)) return;
        currentUserId = uid;
        $('#confirmDeleteBtn').attr('data-delete-user-id', String(uid));
        const userName = (trigger.getAttribute('data-username') || '').trim() || 'Клиент';
        $('#deleteUserName').text(userName);
    });

    const confirmDeleteLabel = '<i class="bi bi-trash"></i> Удалить';
    $('#confirmDeleteBtn').on('click', async function(e) {
        e.preventDefault();
        e.stopPropagation();
        const uidFromAttr = parseInt($('#confirmDeleteBtn').attr('data-delete-user-id'), 10);
        const uid = (!uidFromAttr || isNaN(uidFromAttr)) ? currentUserId : uidFromAttr;
        if (!uid || isNaN(uid)) {
            alert('Не выбран клиент для удаления');
            return;
        }
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Удаление…';
        const userName = $('#deleteUserName').text() || ('ID ' + uid);
        deleteModal.hide();
        openDeleteProgressModal(`Удаляю клиента: ${userName}`, 'delete');
        appendDeleteLog('Запущен процесс удаления…');
        let pollTimer = null;
        try {
            const response = await fetch('/admin/users/delete-start/' + uid, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            let startData = {};
            try {
                startData = await response.json();
            } catch (parseErr) {
                throw new Error('Некорректный ответ сервера (возможно, сессия истекла — обновите страницу и войдите снова)');
            }
            if (!response.ok) {
                throw new Error(startData.error || 'Ошибка запуска удаления');
            }
            if (!startData.ok || !startData.job_id) {
                throw new Error(startData.error || 'Не удалось запустить задачу удаления');
            }
            const jobId = startData.job_id;
            let cursor = 0;

            const pollOnce = async () => {
                const stResp = await fetch(`/admin/users/delete-status/${encodeURIComponent(jobId)}?cursor=${cursor}`, {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                });
                const st = await stResp.json();
                if (!stResp.ok || !st.ok) {
                    throw new Error(st.error || 'Ошибка получения статуса удаления');
                }
                (st.logs || []).forEach((line) => {
                    if (/Ошибка/i.test(line)) appendDeleteLog(line, 'err');
                    else if (/Удален$/.test(line) || /: OK$/.test(line)) appendDeleteLog(line, 'ok');
                    else appendDeleteLog(line, 'info');
                });
                cursor = st.cursor || cursor;
                if (st.finished) {
                    if (pollTimer) {
                        clearInterval(pollTimer);
                        pollTimer = null;
                    }
                    if (st.success) {
                        const rs = (st.result && st.result.xui && st.result.xui.results) || [];
                        const failedIds = rs.filter(r => !r.ok && r.server_id != null).map(r => Number(r.server_id));
                        lastDeleteTelegramId = uid;
                        lastDeleteFailedServerIds = failedIds;
                        if (retryDeleteFailedBtn) retryDeleteFailedBtn.disabled = failedIds.length === 0;
                        setDeleteProgressDone('Удаление завершено');
                        setTimeout(() => window.location.reload(), 900);
                    } else {
                        setDeleteProgressDone('Удаление завершено с ошибкой');
                    }
                }
            };

            await pollOnce();
            pollTimer = setInterval(async () => {
                try {
                    await pollOnce();
                } catch (err) {
                    if (pollTimer) {
                        clearInterval(pollTimer);
                        pollTimer = null;
                    }
                    appendDeleteLog('Ошибка polling: ' + err.message, 'err');
                    setDeleteProgressDone('Удаление завершено с ошибкой');
                }
            }, 1000);
        } catch (error) {
            console.error('Ошибка:', error);
            appendDeleteLog('Ошибка при удалении: ' + error.message, 'err');
            setDeleteProgressDone('Удаление завершено с ошибкой');
        } finally {
            btn.disabled = false;
            btn.innerHTML = confirmDeleteLabel;
        }
    });

    $('#saveUserBtn').click(async function() {
        const form = document.getElementById('userForm');
        const tg = String(form.telegram_id.value || '').trim();
        if (!/^-?\d{5,20}$/.test(tg)) {
            alert('Введите корректный Telegram ID');
            return;
        }
        const dlStr = String(document.getElementById('editUserDeviceLimit')?.value || '').trim();
        let deviceLimit = dlStr === '' ? 0 : parseInt(dlStr, 10);
        if (isNaN(deviceLimit) || deviceLimit < 0) deviceLimit = 0;
        if (deviceLimit > 512) deviceLimit = 512;
        const formData = {
            telegram_id: tg,
            username: form.username.value,
            trial_period: form.trial_period.checked,
            is_enable: form.is_enable.checked,
            device_limit: deviceLimit,
        };
        const assignTariffId = Number(document.getElementById('assignTariffId').value || 0);
        const assignAllServers = document.getElementById('assignAllServers').checked;
        const assignServerIds = Array.from(document.getElementById('assignServerIds').selectedOptions).map(o => Number(o.value));
        const assignSubscriptionDays = Number(document.getElementById('assignSubscriptionDays').value || 0);
        const assignSubscriptionEndDate = String(document.getElementById('assignSubscriptionEndDate').value || '').trim();
        try {
            const response = await fetch(`/admin/users/edit/${currentUserId}`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            if (!response.ok) throw new Error('Ошибка при сохранении');
            const result = await response.json();
            if (result.error) throw new Error(result.error);
            if (assignTariffId > 0) {
                const addResp = await fetch(`/admin/users/${currentUserId}/add-subscription`, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        tariff_id: assignTariffId,
                        all_servers: assignAllServers,
                        server_ids: assignServerIds,
                        subscription_days: assignSubscriptionDays > 0 ? assignSubscriptionDays : null,
                        subscription_end_date: assignSubscriptionEndDate || null,
                        extend_existing: true,
                    }),
                });
                const addData = await addResp.json();
                if (!addResp.ok || !addData.ok) {
                    throw new Error(addData.error || 'Не удалось добавить подписку');
                }
            }
            if (result.xui && result.xui.skipped !== true) {
                const xui = result.xui;
                const rows = Array.isArray(xui.results) ? xui.results : [];
                const bad = rows.filter(r => !r.ok);
                if (bad.length > 0 || xui.ok === false) {
                    const details = bad.slice(0, 5).map(r => `${r.name || ('#' + r.server_id)}: ${r.error || 'ошибка'}`).join('\n');
                    alert('Панели обновлены частично.\n' + (details || 'Проверьте логи.'));
                } else {
                    alert('Telegram ID/Username сохранены и синхронизированы на панелях.');
                }
            }
            const dsync = result.device_limit_sync;
            if (dsync && Array.isArray(dsync.results)) {
                const badD = dsync.results.filter(r => !r.ok);
                if (badD.length || dsync.ok === false) {
                    const details = badD.slice(0, 5).map(r => `${r.name || ('#' + r.server_id)}: ${r.error || 'ошибка'}`).join('\n');
                    alert('Лимит устройств в БД сохранён, но на части панелей не применился:\n' + (details || 'Проверьте логи.'));
                }
            }
            userModal.hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Ошибка при сохранении: ' + error.message);
        }
    });
});
</script>
{% endblock %}