{% extends "base.html" %}

{% block title %}Клиенты прокси{% endblock %}
{% block title_header %}Клиенты прокси{% endblock %}

{% block styles %}
<style>
  .mtg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
  }
  .mtg-search {
    width: 160px;
    max-width: 100%;
    height: 32px;
    font-size: 13px;
  }
  .mtg-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .mtg-act {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: #151b2e;
    color: #e8ecf4;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  .mtg-act:hover:not(:disabled) {
    background: #1c2540;
    border-color: rgba(255,255,255,.2);
    color: #fff;
  }
  .mtg-act:disabled { opacity: .45; cursor: not-allowed; }
  .mtg-act-play {
    border: none;
    background: linear-gradient(180deg, #5b7cfa 0%, #7c4dff 100%);
    box-shadow: 0 0 14px rgba(110, 130, 255, .35);
    color: #fff;
  }
  .mtg-act-play:hover:not(:disabled) {
    filter: brightness(1.06);
    border: none;
    color: #fff;
  }
  .mtg-act-del {
    border-color: rgba(240, 107, 107, .45);
    color: #f06b6b;
    background: rgba(40, 18, 22, .35);
  }
  .mtg-act-del:hover:not(:disabled) {
    border-color: #f06b6b;
    color: #ff8b8b;
    background: rgba(60, 22, 28, .5);
  }
  .mtg-sync-hint { font-size: 12px; min-height: 1.25rem; }
  .proxy-kind-hint { font-size: 11px; color: #94a3b8; }
</style>
{% endblock %}

{% block content %}
<div class="space-y-4 text-gray-100">
    <div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
                <h5 class="mb-1">Клиенты прокси (MTProxy)</h5>
                <div class="small text-secondary">Отдельно от <a href="{{ url_for('users.users_list') }}" class="text-info text-decoration-underline">клиентов VPN</a>. Ниже — MTG-ноды и бот без VPN (метки MTProto / MTProto Free).</div>
            </div>
            <div class="mtg-toolbar">
                <input id="mtgSearch" type="search" class="form-control form-control-sm bg-dark text-white border-secondary mtg-search" placeholder="Поиск…" autocomplete="off">
                <button id="refreshMtgBtn" type="button" class="btn btn-sm btn-outline-light" title="Обновить список"><i class="bi bi-arrow-clockwise"></i></button>
                <button id="exportMtgCsvBtn" type="button" class="btn btn-sm btn-outline-light" title="Экспорт CSV"><i class="bi bi-download"></i> CSV</button>
                <button id="exportMtgJsonBtn" type="button" class="btn btn-sm btn-outline-light" title="Экспорт JSON"><i class="bi bi-download"></i> JSON</button>
                <button id="syncMtgNodeBtn" type="button" class="btn btn-sm btn-outline-info" title="Синхронизировать с сервером (импорт)"><i class="bi bi-arrow-repeat"></i> Синхронизация</button>
                <button id="openAddMtgUserModalBtn" type="button" class="btn btn-info btn-sm">+ Добавить юзера</button>
            </div>
        </div>
        <div id="mtgSyncHint" class="mtg-sync-hint text-secondary mb-2"></div>
        <div class="row g-2 align-items-end">
            <div class="col-md-6">
                <label class="form-label">Нода</label>
                <select id="mtgNodeSelect" class="form-select bg-dark text-white border-secondary"></select>
            </div>
        </div>
    </div>

    <div class="rounded-xl border border-gray-700 bg-gray-950/60 p-3">
        <div id="mtgNodeHeader" class="fw-semibold text-info mb-3">Нода не выбрана</div>
        <div class="table-responsive">
            <table class="table table-dark table-hover align-middle mb-0">
                <thead>
                    <tr class="text-secondary small">
                        <th>Клиент</th>
                        <th>Метка</th>
                        <th>Порт</th>
                        <th>Статус</th>
                        <th>Подключения</th>
                        <th>Трафик</th>
                        <th>Срок / лимит</th>
                        <th>Заметка</th>
                        <th class="text-uppercase" style="font-size:11px;letter-spacing:.04em;">Действия</th>
                    </tr>
                </thead>
                <tbody id="mtgUsersBody">
                    <tr><td colspan="9" class="text-center text-muted py-4">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="rounded-xl border border-gray-700 bg-gray-950/60 p-3">
        <div class="fw-semibold text-info mb-3">Клиенты бота (MTProto / MTProto Free)</div>
        <div class="table-responsive">
            <table class="table table-dark table-hover align-middle mb-0">
                <thead>
                    <tr class="text-secondary small">
                        <th>Telegram ID</th>
                        <th>Username</th>
                        <th>Метка</th>
                        <th>Регистрация</th>
                    </tr>
                </thead>
                <tbody id="botProxyUsersBody">
                    <tr><td colspan="4" class="text-center text-muted py-4">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="addMtgUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark border border-secondary text-light">
            <div class="modal-header border-secondary">
                <h5 class="modal-title">Добавить юзера</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label">Имя (латиница)</label>
                    <input id="newMtgName" class="form-control bg-dark text-white border-secondary" placeholder="ivan">
                </div>
                <div class="mb-3">
                    <label class="form-label mb-1">Метка доступа</label>
                    <div class="d-flex flex-wrap gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="newMtgAccessKind" id="newMtgKindPersonal" value="personal" checked>
                            <label class="form-check-label" for="newMtgKindPersonal">MTProto</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="newMtgAccessKind" id="newMtgKindFree" value="free">
                            <label class="form-check-label" for="newMtgKindFree">MTProto Free</label>
                        </div>
                    </div>
                    <div class="proxy-kind-hint mt-1">В заметке на ноде: <code class="text-secondary">[MTProto]</code> или <code class="text-secondary">[MTProto Free]</code>.</div>
                </div>
                <div class="mb-2">
                    <label class="form-label">Комментарий (необязательно)</label>
                    <input id="newMtgNote" class="form-control bg-dark text-white border-secondary" placeholder="Иван, оплатил до …">
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="form-label">Истекает</label>
                        <input id="newMtgExpires" type="datetime-local" class="form-control bg-dark text-white border-secondary">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Лимит трафика (GB)</label>
                        <input id="newMtgLimit" type="number" min="0" step="0.1" class="form-control bg-dark text-white border-secondary">
                    </div>
                </div>
                <div id="newMtgErr" class="text-danger small mt-2 d-none"></div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Отмена</button>
                <button id="createMtgUserBtn" type="button" class="btn btn-info">Создать</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editMtgUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-dark border border-secondary text-light">
            <div class="modal-header border-secondary">
                <h5 class="modal-title">Редактировать: <span id="editMtgTitleName"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label">Метка доступа</label>
                    <select id="editMtgTag" class="form-select bg-dark text-white border-secondary">
                        <option value="">Без метки</option>
                        <option value="MTProto">MTProto</option>
                        <option value="MTProto Free">MTProto Free</option>
                        <option value="Личный">Личный</option>
                        <option value="Бесплатный">Бесплатный</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label">Комментарий</label>
                    <input id="editMtgNote" class="form-control bg-dark text-white border-secondary">
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="form-label">Истекает</label>
                        <input id="editMtgExpires" type="datetime-local" class="form-control bg-dark text-white border-secondary">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Лимит трафика (GB)</label>
                        <input id="editMtgLimit" type="number" min="0" step="0.1" class="form-control bg-dark text-white border-secondary" placeholder="∞">
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-6">
                        <label class="form-label">Макс. устройств</label>
                        <input id="editMtgMaxDev" type="number" min="1" step="1" class="form-control bg-dark text-white border-secondary" placeholder="∞">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Сброс трафика</label>
                        <select id="editMtgResetIv" class="form-select bg-dark text-white border-secondary">
                            <option value="never">Никогда</option>
                            <option value="daily">Ежедневно</option>
                            <option value="monthly">Ежемесячно</option>
                            <option value="yearly">Ежегодно</option>
                        </select>
                    </div>
                </div>
                <div id="editMtgErr" class="text-danger small mt-2 d-none"></div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Отмена</button>
                <button id="saveMtgUserBtn" type="button" class="btn btn-info">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="qrMtgModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark border border-secondary text-light">
            <div class="modal-header border-secondary">
                <h5 class="modal-title">QR-код</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div id="qrMtgWrap" class="d-flex justify-content-center mb-2"></div>
                <div class="small text-secondary text-break" id="qrMtgLink"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delMtgUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark border border-secondary text-light">
            <div class="modal-header border-secondary">
                <h5 class="modal-title">Удалить клиента</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Удалить <strong id="delMtgUserName"></strong>? Прокси на сервере будет остановлен и удалён.
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Отмена</button>
                <button id="confirmDelMtgUserBtn" type="button" class="btn btn-danger">Удалить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const mtgNodeSelect = document.getElementById('mtgNodeSelect');
const mtgUsersBody = document.getElementById('mtgUsersBody');
const botProxyUsersBody = document.getElementById('botProxyUsersBody');
const mtgNodeHeader = document.getElementById('mtgNodeHeader');
const mtgSearch = document.getElementById('mtgSearch');
const mtgSyncHint = document.getElementById('mtgSyncHint');
const addMtgUserModal = new bootstrap.Modal(document.getElementById('addMtgUserModal'));
const editMtgUserModal = new bootstrap.Modal(document.getElementById('editMtgUserModal'));
const qrMtgModal = new bootstrap.Modal(document.getElementById('qrMtgModal'));
const delMtgUserModal = new bootstrap.Modal(document.getElementById('delMtgUserModal'));

let mtgUsersCache = [];
let botProxyUsersCache = [];
const mtgBusy = {};

function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
function nodeId(){return Number(mtgNodeSelect.value||0);}

/** Префикс [MTProto] / [MTProto Free] (и старые [Личный] / [Бесплатный]) в note на MTG */
function parseProxyNote(note) {
  const s = String(note == null ? '' : note).trim();
  const m = s.match(/^\[(Бесплатный|Личный|MTProto Free|MTProto)\]\s*([\s\S]*)$/);
  if (m) return { tag: m[1], rest: m[2].trim() };
  return { tag: null, rest: s };
}

function proxyTagBadgeHtml(tag) {
  if (tag === 'Личный' || tag === 'MTProto') return '<span class="badge rounded-pill text-bg-primary">MTProto</span>';
  if (tag === 'Бесплатный' || tag === 'MTProto Free') return '<span class="badge rounded-pill text-bg-secondary">MTProto Free</span>';
  return '<span class="text-muted">—</span>';
}

function botProxyKindBadgeHtml(kind) {
  if (kind === 'mtproto') return '<span class="badge rounded-pill text-bg-primary">MTProto</span>';
  if (kind === 'mtproto_free') return '<span class="badge rounded-pill text-bg-secondary">MTProto Free</span>';
  return '<span class="text-muted">—</span>';
}

function composeProxyNote(tagLabel, rest) {
  const r = String(rest || '').trim();
  if (!tagLabel) return r;
  return r ? `[${tagLabel}] ${r}` : `[${tagLabel}]`;
}

/** Ссылка tg://proxy: используем proxy host override (URL), если задан */
function buildMtgProxyLink(u) {
  const opt = mtgNodeSelect.options[mtgNodeSelect.selectedIndex];
  const host = (opt && opt.dataset.host) ? String(opt.dataset.host).trim() : '';
  const rawLink = String(u.link || '').trim();
  const fallbackPort = u.port;
  const fallbackSecret = u.secret != null ? String(u.secret).trim() : '';

  if (rawLink) {
    const prefix = 'tg://proxy?';
    if (rawLink.startsWith(prefix)) {
      const q = new URLSearchParams(rawLink.slice(prefix.length));
      const p = q.get('port') || (fallbackPort != null ? String(fallbackPort) : '');
      const s = q.get('secret') || fallbackSecret;
      const server = host || (q.get('server') || '').trim();
      if (server && p && s) {
        return `tg://proxy?server=${server}&port=${p}&secret=${s}`;
      }
    }
    return rawLink;
  }

  if (host && fallbackPort != null && fallbackSecret) {
    return `tg://proxy?server=${host}&port=${fallbackPort}&secret=${fallbackSecret}`;
  }
  return '';
}

function isExpired(u) {
  if (u.expired) return true;
  if (!u.expires_at) return false;
  const d = new Date(String(u.expires_at).replace(' ', 'T'));
  return !isNaN(d.getTime()) && d.getTime() < Date.now();
}

function filterBotProxyUsers(list) {
  const q = (mtgSearch.value || '').trim().toLowerCase();
  if (!q) return list.slice();
  return list.filter(u => {
    const kind = String(u.proxy_kind || '').toLowerCase();
    const kindLabel = kind === 'mtproto' ? 'mtproto' : (kind === 'mtproto_free' ? 'mtproto free' : kind);
    return String(u.telegram_id || '').includes(q) ||
      String(u.username || '').toLowerCase().includes(q) ||
      kindLabel.includes(q);
  });
}

function renderBotProxyRows(rows) {
  if (!rows.length) {
    const q = (mtgSearch.value || '').trim();
    botProxyUsersBody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">${q ? 'Ничего не найдено' : 'Клиентов нет'}</td></tr>`;
    return;
  }
  botProxyUsersBody.innerHTML = '';
  rows.forEach(u => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><span style="font-family:ui-monospace,Menlo,monospace;font-weight:600">${esc(u.telegram_id)}</span></td>
      <td>${esc(u.username || '—')}</td>
      <td class="small">${botProxyKindBadgeHtml(u.proxy_kind)}</td>
      <td class="small text-secondary">${esc(u.date || '—')}</td>
    `;
    botProxyUsersBody.appendChild(tr);
  });
}

async function loadBotProxyUsers() {
  botProxyUsersBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">Загрузка...</td></tr>';
  const q = (mtgSearch.value || '').trim();
  const url = new URL('/admin/users/mtproxy/api/bot-proxy-users', window.location.origin);
  if (q) url.searchParams.set('search', q);
  try {
    const r = await fetch(url.toString(), { cache: 'no-store' });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка загрузки клиентов бота');
    botProxyUsersCache = data.items || [];
    renderBotProxyRows(filterBotProxyUsers(botProxyUsersCache));
  } catch (e) {
    botProxyUsersCache = [];
    botProxyUsersBody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-4">${esc(e.message || e)}</td></tr>`;
  }
}

function filterUsers(list) {
  const q = (mtgSearch.value || '').trim().toLowerCase();
  if (!q) return list.slice();
  return list.filter(u => {
    const { tag, rest } = parseProxyNote(u.note);
    return String(u.name||'').toLowerCase().includes(q) ||
      String(u.note||'').toLowerCase().includes(q) ||
      String(rest||'').toLowerCase().includes(q) ||
      (tag && tag.toLowerCase().includes(q)) ||
      String(u.port||'').includes(q);
  });
}

function setBusy(name, v) {
  mtgBusy[name] = v;
  document.querySelectorAll(`[data-mtg-user="${CSS.escape(name)}"]`).forEach(el => {
    el.querySelectorAll('[data-mtg-act]').forEach(btn => { btn.disabled = !!v; });
  });
}

function setBusyReset(name, v) {
  const k = name + '::reset';
  mtgBusy[k] = v;
  const row = document.querySelector(`[data-mtg-user="${CSS.escape(name)}"]`);
  if (row) {
    const b = row.querySelector('[data-mtg-act="reset"]');
    if (b) b.disabled = !!v;
  }
}

async function loadNodes() {
  const r = await fetch('/admin/users/mtproxy/api/nodes', {cache:'no-store'});
  const data = await r.json();
  if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка загрузки нод');
  mtgNodeSelect.innerHTML = '';
  (data.items || []).forEach(n => {
    const displayHost = (n.proxy_host_override || n.host || '').trim();
    const o = document.createElement('option');
    o.value = String(n.id);
    o.textContent = `${n.name} (${displayHost})`;
    o.dataset.host = displayHost;
    mtgNodeSelect.appendChild(o);
  });
  if (!mtgNodeSelect.value && mtgNodeSelect.options.length) mtgNodeSelect.value = mtgNodeSelect.options[0].value;
}

function renderUserRows(rows) {
  if (!rows.length) {
    const q = (mtgSearch.value || '').trim();
    mtgUsersBody.innerHTML = `<tr><td colspan="9" class="text-center text-muted py-4">${q ? 'Ничего не найдено' : 'Клиентов нет'}</td></tr>`;
    return;
  }
  mtgUsersBody.innerHTML = '';
  rows.forEach(u => {
    const { tag, rest } = parseProxyNote(u.note);
    const tr = document.createElement('tr');
    tr.dataset.mtgUser = u.name;
    const status = u.running
      ? '<span class="badge text-bg-success">UP</span>'
      : '<span class="badge text-bg-secondary">STOP</span>';
    const playClass = u.running ? 'mtg-act' : 'mtg-act mtg-act-play';
    const playIcon = u.running ? 'bi-pause-fill' : 'bi-play-fill';
    const playTitle = u.running ? 'Остановить' : 'Запустить';
    const b = mtgBusy[u.name];
    const link = buildMtgProxyLink(u);
    tr.innerHTML = `
      <td><span style="font-family:ui-monospace,Menlo,monospace;font-weight:600">${esc(u.name)}</span></td>
      <td class="small">${proxyTagBadgeHtml(tag)}</td>
      <td><span class="badge text-bg-primary">${esc(u.port)}</span></td>
      <td>${status}</td>
      <td>${esc(u.connections || 0)}</td>
      <td class="small text-secondary">↑ ${esc(u.traffic_tx || u.current_traffic_tx || '—')}<br>↓ ${esc(u.traffic_rx || u.current_traffic_rx || '—')}</td>
      <td class="small text-secondary">${esc(u.expires_at || '∞')} / ${esc(u.traffic_limit_gb != null && u.traffic_limit_gb !== '' ? u.traffic_limit_gb + 'GB' : '∞')}</td>
      <td class="small">${esc(rest || (tag ? '' : (u.note || '')))}</td>
      <td>
        <div class="mtg-acts">
          <button type="button" class="${playClass}" data-mtg-act="toggle" title="${esc(playTitle)}" ${b ? 'disabled' : ''}><i class="bi ${playIcon}"></i></button>
          <button type="button" class="mtg-act" data-mtg-act="copy" title="Копировать ссылку" ${b ? 'disabled' : ''}><i class="bi bi-copy"></i></button>
          <button type="button" class="mtg-act" data-mtg-act="qr" title="QR" ${b ? 'disabled' : ''}><i class="bi bi-qr-code"></i></button>
          <button type="button" class="mtg-act" data-mtg-act="edit" title="Изменить" ${b ? 'disabled' : ''}><i class="bi bi-pencil"></i></button>
          <button type="button" class="mtg-act" data-mtg-act="reset" title="Сбросить трафик" ${b || mtgBusy[u.name+'::reset'] ? 'disabled' : ''}><i class="bi bi-arrow-repeat"></i></button>
          <button type="button" class="mtg-act mtg-act-del" data-mtg-act="delete" title="Удалить" ${b ? 'disabled' : ''}><i class="bi bi-trash"></i></button>
        </div>
      </td>
    `;
    tr.querySelector('[data-mtg-act="copy"]').dataset.link = link;
    mtgUsersBody.appendChild(tr);
  });
}

async function loadUsers() {
  const nid = nodeId();
  if (!nid) {
    mtgUsersCache = [];
    mtgUsersBody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-4">Нет ноды</td></tr>';
    return;
  }
  mtgUsersBody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-4">Загрузка...</td></tr>';
  const opt = mtgNodeSelect.options[mtgNodeSelect.selectedIndex];
  mtgNodeHeader.textContent = `${opt ? opt.textContent : ('Нода #' + nid)}`;
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users`, {cache:'no-store'});
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка загрузки клиентов');
    mtgUsersCache = data.items || [];
    renderUserRows(filterUsers(mtgUsersCache));
  } catch (e) {
    mtgUsersCache = [];
    mtgUsersBody.innerHTML = `<tr><td colspan="9" class="text-center text-danger py-4">${esc(e.message || e)}</td></tr>`;
  }
}

function exportMtg(format) {
  const nid = nodeId();
  const rows = filterUsers(mtgUsersCache);
  const opt = mtgNodeSelect.options[mtgNodeSelect.selectedIndex];
  const nodeLabel = (opt && opt.textContent) ? opt.textContent.replace(/\s+/g, '_') : ('node_' + nid);
  const filename = `${nodeLabel}_clients_${new Date().toISOString().slice(0,10)}`;
  if (format === 'json') {
    const clean = rows.map(u => ({
      name: u.name, port: u.port, status: u.running ? 'running' : 'stopped',
      connections: u.connections, traffic_rx: u.current_traffic_rx, traffic_tx: u.current_traffic_tx,
      expires_at: u.expires_at, traffic_limit_gb: u.traffic_limit_gb, note: u.note, link: u.link,
    }));
    const blob = new Blob([JSON.stringify(clean, null, 2)], { type: 'application/json' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename + '.json'; a.click();
  } else {
    const cols = ['name','port','status','connections','traffic_rx','traffic_tx','expires_at','traffic_limit_gb','note'];
    const csv = [cols.join(','), ...rows.map(u => [
      u.name, u.port, u.running ? 'running' : 'stopped', u.connections,
      u.current_traffic_rx||'', u.current_traffic_tx||'', u.expires_at||'', u.traffic_limit_gb??'',
      '"' + String(u.note||'').replace(/"/g,'""') + '"',
    ].join(','))].join('\n');
    const blob = new Blob(['\uFEFF'+csv], { type: 'text/csv;charset=utf-8' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename + '.csv'; a.click();
  }
}

async function apiToggle(u) {
  const nid = nodeId();
  const path = u.running ? 'stop' : 'start';
  if (path === 'start' && isExpired(u)) {
    if (!confirm(`Срок у клиента «${u.name}» истёк. Запустить всё равно?`)) return;
  }
  setBusy(u.name, true);
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users/${encodeURIComponent(u.name)}/${path}`, {
      method: 'POST', headers: { 'Accept': 'application/json' },
    });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка');
    await loadUsers();
  } catch (e) {
    alert(e.message || e);
    await loadUsers();
  } finally {
    setBusy(u.name, false);
  }
}

async function apiResetTraffic(u) {
  if (!confirm(`Сбросить трафик для «${u.name}»?`)) return;
  const nid = nodeId();
  setBusyReset(u.name, true);
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users/${encodeURIComponent(u.name)}/reset-traffic`, {
      method: 'POST', headers: { 'Accept': 'application/json' },
    });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка');
    await loadUsers();
  } catch (e) {
    alert(e.message || e);
  } finally {
    setBusyReset(u.name, false);
  }
}

let delTarget = null;
let editTarget = null;

mtgUsersBody.addEventListener('click', async (e) => {
  const btn = e.target.closest('[data-mtg-act]');
  if (!btn) return;
  const row = btn.closest('tr[data-mtg-user]');
  if (!row) return;
  const name = row.dataset.mtgUser;
  const u = mtgUsersCache.find(x => x.name === name);
  if (!u) return;
  const act = btn.dataset.mtgAct;
  if (act === 'toggle') { await apiToggle(u); return; }
  if (act === 'copy') {
    const link = btn.dataset.link || buildMtgProxyLink(u);
    if (!link) { alert('Нет ссылки'); return; }
    try {
      await navigator.clipboard.writeText(link);
      mtgSyncHint.textContent = 'Ссылка скопирована';
      setTimeout(() => { if (mtgSyncHint.textContent === 'Ссылка скопирована') mtgSyncHint.textContent = ''; }, 2000);
    } catch {
      alert('Не удалось скопировать');
    }
    return;
  }
  if (act === 'qr') {
    const link = buildMtgProxyLink(u);
    document.getElementById('qrMtgLink').textContent = link;
    const wrap = document.getElementById('qrMtgWrap');
    wrap.innerHTML = '';
    if (!link) {
      wrap.innerHTML = '<span class="text-secondary small">Нет ссылки (нет host/port/secret)</span>';
      qrMtgModal.show();
      return;
    }
    const holder = document.createElement('div');
    holder.className = 'd-inline-block bg-white p-2 rounded';
    wrap.appendChild(holder);
    try {
      if (typeof QRCode !== 'function') throw new Error('QRCode');
      new QRCode(holder, {
        text: link,
        width: 200,
        height: 200,
        correctLevel: QRCode.CorrectLevel.H,
      });
    } catch (e) {
      holder.remove();
      wrap.innerHTML = '<span class="text-warning small">Не удалось отрисовать QR. Скопируйте ссылку ниже.</span>';
    }
    qrMtgModal.show();
    return;
  }
  if (act === 'edit') {
    editTarget = u;
    document.getElementById('editMtgTitleName').textContent = u.name;
    const pn = parseProxyNote(u.note);
    document.getElementById('editMtgTag').value = pn.tag || '';
    document.getElementById('editMtgNote').value = pn.rest;
    const ex = u.expires_at ? String(u.expires_at).replace(' ', 'T').slice(0, 16) : '';
    document.getElementById('editMtgExpires').value = ex;
    document.getElementById('editMtgLimit').value = u.traffic_limit_gb != null ? u.traffic_limit_gb : '';
    document.getElementById('editMtgMaxDev').value = u.max_devices != null ? u.max_devices : '';
    document.getElementById('editMtgResetIv').value = (u.traffic_reset_interval && u.traffic_reset_interval !== 'never') ? u.traffic_reset_interval : 'never';
    document.getElementById('editMtgErr').classList.add('d-none');
    editMtgUserModal.show();
    return;
  }
  if (act === 'reset') { await apiResetTraffic(u); return; }
  if (act === 'delete') {
    delTarget = u;
    document.getElementById('delMtgUserName').textContent = u.name;
    delMtgUserModal.show();
  }
});

document.getElementById('confirmDelMtgUserBtn').addEventListener('click', async function() {
  if (!delTarget) return;
  const nid = nodeId();
  const name = delTarget.name;
  this.disabled = true;
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users/${encodeURIComponent(name)}`, {
      method: 'DELETE', headers: { 'Accept': 'application/json' },
    });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка удаления');
    delMtgUserModal.hide();
    delTarget = null;
    await loadUsers();
  } catch (e) {
    alert(e.message || e);
  } finally {
    this.disabled = false;
  }
});

document.getElementById('saveMtgUserBtn').addEventListener('click', async function() {
  if (!editTarget) return;
  const err = document.getElementById('editMtgErr');
  err.classList.add('d-none');
  const nid = nodeId();
  const exp = document.getElementById('editMtgExpires').value.trim();
  const limRaw = document.getElementById('editMtgLimit').value.trim();
  const maxRaw = document.getElementById('editMtgMaxDev').value.trim();
  const iv = document.getElementById('editMtgResetIv').value;
  const tagSel = document.getElementById('editMtgTag').value.trim();
  const noteComposed = composeProxyNote(tagSel, document.getElementById('editMtgNote').value);
  const body = {
    note: noteComposed,
    expires_at: exp || null,
    traffic_limit_gb: limRaw ? parseFloat(limRaw) : null,
    max_devices: maxRaw ? parseInt(maxRaw, 10) : null,
    traffic_reset_interval: iv !== 'never' ? iv : null,
  };
  this.disabled = true;
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users/${encodeURIComponent(editTarget.name)}`, {
      method: 'PUT',
      headers: { 'Content-Type':'application/json','Accept':'application/json' },
      body: JSON.stringify(body),
    });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка сохранения');
    editMtgUserModal.hide();
    editTarget = null;
    await loadUsers();
  } catch (e) {
    err.textContent = e.message || String(e);
    err.classList.remove('d-none');
  } finally {
    this.disabled = false;
  }
});

document.getElementById('openAddMtgUserModalBtn').addEventListener('click', () => {
  document.getElementById('newMtgName').value = '';
  document.getElementById('newMtgNote').value = '';
  document.getElementById('newMtgExpires').value = '';
  document.getElementById('newMtgLimit').value = '';
  const p = document.getElementById('newMtgKindPersonal');
  const f = document.getElementById('newMtgKindFree');
  if (p) p.checked = true;
  if (f) f.checked = false;
  document.getElementById('newMtgErr').classList.add('d-none');
  addMtgUserModal.show();
});

document.getElementById('createMtgUserBtn').addEventListener('click', async function() {
  const err = document.getElementById('newMtgErr');
  err.classList.add('d-none');
  const nid = nodeId();
  const kind = (document.querySelector('input[name="newMtgAccessKind"]:checked') || {}).value || 'personal';
  const tagLabel = kind === 'free' ? 'MTProto Free' : 'MTProto';
  const noteRaw = document.getElementById('newMtgNote').value.trim();
  const payload = {
    name: document.getElementById('newMtgName').value.trim(),
    note: composeProxyNote(tagLabel, noteRaw),
    expires_at: document.getElementById('newMtgExpires').value.trim(),
    traffic_limit_gb: document.getElementById('newMtgLimit').value.trim(),
  };
  this.disabled = true;
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/users`, {
      method: 'POST',
      headers: {'Content-Type':'application/json','Accept':'application/json'},
      body: JSON.stringify(payload),
    });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка создания');
    addMtgUserModal.hide();
    await loadUsers();
  } catch (e) {
    err.textContent = e.message || String(e);
    err.classList.remove('d-none');
  } finally {
    this.disabled = false;
  }
});

mtgNodeSelect.addEventListener('change', loadUsers);
mtgSearch.addEventListener('input', () => {
  renderUserRows(filterUsers(mtgUsersCache));
  renderBotProxyRows(filterBotProxyUsers(botProxyUsersCache));
});

document.getElementById('refreshMtgBtn').addEventListener('click', async () => {
  await loadNodes();
  await Promise.all([loadUsers(), loadBotProxyUsers()]);
});
document.getElementById('exportMtgCsvBtn').addEventListener('click', () => exportMtg('csv'));
document.getElementById('exportMtgJsonBtn').addEventListener('click', () => exportMtg('json'));

document.getElementById('syncMtgNodeBtn').addEventListener('click', async function() {
  const nid = nodeId();
  if (!nid) return;
  mtgSyncHint.textContent = '';
  this.disabled = true;
  try {
    const r = await fetch(`/admin/users/mtproxy/api/nodes/${nid}/sync`, { method: 'POST', headers: { 'Accept':'application/json' } });
    const data = await r.json();
    if (!r.ok || !data.ok) throw new Error(data.error || 'Ошибка синхронизации');
    mtgSyncHint.classList.remove('text-danger');
    mtgSyncHint.textContent = `Синхронизация: импортировано ${data.imported ?? '—'}, всего на сервере ${data.total ?? '—'}`;
    await loadUsers();
  } catch (e) {
    mtgSyncHint.textContent = e.message || String(e);
    mtgSyncHint.classList.add('text-danger');
  } finally {
    this.disabled = false;
  }
});

(async () => {
  try {
    await loadNodes();
    const params = new URLSearchParams(window.location.search);
    const pref = params.get('node');
    if (pref && [...mtgNodeSelect.options].some((o) => o.value === pref)) {
      mtgNodeSelect.value = pref;
    }
    await loadUsers();
    await loadBotProxyUsers();
  } catch (e) {
    mtgUsersBody.innerHTML = `<tr><td colspan="9" class="text-center text-danger py-4">${esc(e.message || e)}</td></tr>`;
  }
})();
</script>
{% endblock %}