{% extends "base.html" %}

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

{% block content %}
<style>
  /* Bootstrap table-striped задаёт фон ячейкам (td), а не tr — красим все ячейки строки */
  .table-mtproto-free tbody tr.mtproto-row--ok > th,
  .table-mtproto-free tbody tr.mtproto-row--ok > td {
    background-color: rgba(25, 135, 84, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.06);
  }
  .table-mtproto-free tbody tr.mtproto-row--ok {
    box-shadow: inset 5px 0 0 #20c997;
  }
  .table-mtproto-free tbody tr.mtproto-row--warn > th,
  .table-mtproto-free tbody tr.mtproto-row--warn > td {
    background-color: rgba(255, 193, 7, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.06);
  }
  .table-mtproto-free tbody tr.mtproto-row--warn {
    box-shadow: inset 5px 0 0 #ffc107;
  }
  .table-mtproto-free tbody tr.mtproto-row--bad > th,
  .table-mtproto-free tbody tr.mtproto-row--bad > td {
    background-color: rgba(220, 53, 69, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.06);
  }
  .table-mtproto-free tbody tr.mtproto-row--bad {
    box-shadow: inset 5px 0 0 #dc3545;
  }
  .mtproto-legend .lg-all {
    background: rgba(108, 117, 125, 0.35);
    border-left: 4px solid #adb5bd;
  }
  .mtproto-legend-btn {
    cursor: pointer;
    border: 1px solid transparent;
    font: inherit;
    text-align: left;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
  }
  .mtproto-legend-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
  .mtproto-legend-btn:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: 2px;
  }
  .mtproto-legend-btn.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
  }
  .mtproto-legend .lg-ok { background: rgba(25, 135, 84, 0.25); border-left: 4px solid #198754; }
  .mtproto-legend .lg-warn { background: rgba(255, 193, 7, 0.2); border-left: 4px solid #ffc107; }
  .mtproto-legend .lg-bad { background: rgba(220, 53, 69, 0.22); border-left: 4px solid #dc3545; }
  .table-mtproto-free {
    table-layout: fixed;
    width: 100%;
    font-size: 12px;
  }
  .table-mtproto-free tbody tr {
    height: 2rem;
  }
  .table-mtproto-free tbody td,
  .table-mtproto-free thead th {
    vertical-align: middle;
    padding: 0.2rem 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-mtproto-free .col-secret {
    max-width: 140px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    cursor: help;
  }
  .table-mtproto-free .col-server {
    max-width: 180px;
  }
  .mtproto-table-wrap {
    max-height: min(72vh, 900px);
    overflow: auto;
  }
  .mtproto-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #212529;
  }
</style>

<div class="container-fluid py-3">
  <p class="text-secondary small mb-3">
    Порядок строк: сначала прокси с ответом на TCP-пинг (ежедневно в 03:00 и повтор «мёртвых» в 07:00 по времени сервера, где крутится бот).
    <strong>Порядок в списке</strong> (<code>sort_tail</code>): у «живых» обычно 0 — выше в таблице и в выдаче боту; после проверки без ответа число растёт (317, 318…) — строка уходит вниз, это <em>не</em> счётчик неудач.
    <strong>Нет ответа</strong> — сколько раз подряд проверка TCP не получила ответа; при успешном пинге сбрасывается в 0, при каждой неудаче +1 для этой строки.
  </p>

  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <button type="button" class="btn btn-primary btn-sm" id="btnPingNow">
      Проверить пинг (все)
    </button>
    <button type="button" class="btn btn-outline-primary btn-sm" id="btnPingSelected" disabled>
      Пинг выбранных
    </button>
    <button type="button" class="btn btn-outline-danger btn-sm" id="btnDeleteSelected" disabled>
      Удалить выбранные
    </button>
    <button type="button" class="btn btn-outline-light btn-sm" id="btnRefreshList" title="Подтянуть актуальный список из базы">
      ↻ Обновить список
    </button>
    <a class="btn btn-outline-secondary btn-sm" href="{% if mtproto_urls %}{{ mtproto_urls.export_json }}{% else %}{{ url_for('panels.mtproto_free_export_json') }}{% endif %}">
      Скачать JSON
    </a>
    <a class="btn btn-outline-secondary btn-sm" href="{% if mtproto_urls %}{{ mtproto_urls.download_sqlite }}{% else %}{{ url_for('panels.mtproto_free_download_sqlite') }}{% endif %}"
       title="Вся база SQLite бота (не только прокси). Храните в безопасном месте.">
      Скачать файл БД
    </a>
    <form class="d-flex flex-wrap align-items-center gap-2 ms-lg-2" id="formImport" enctype="multipart/form-data">
      <input type="file" name="file" id="importFile" accept=".json,.db,.sqlite,.sqlite3,application/json,application/octet-stream" class="form-control form-control-sm" style="max-width: 260px;">
      <div class="form-check m-0">
        <input class="form-check-input" type="checkbox" name="replace_all" id="replaceAll" value="1">
        <label class="form-check-label small" for="replaceAll">Заменить таблицу целиком</label>
      </div>
      <button type="button" class="btn btn-outline-warning btn-sm" id="btnImportJson">Загрузить JSON</button>
      <button type="button" class="btn btn-outline-info btn-sm" id="btnImportSqlite" title="Импорт строк из другого .db с таблицей free_mtproto_proxy">
        Загрузить SQLite
      </button>
    </form>
  </div>
  <p id="mtprotoFreeMsg" class="small text-info mb-2 d-none"></p>
  <p id="mtprotoFreeErr" class="small text-danger mb-2 d-none"></p>

  <div class="card bg-dark border border-secondary border-opacity-50 mb-3">
    <div class="card-body py-3">
      <h6 class="card-title text-light mb-2">Добавить вручную</h6>
      <p class="small text-white-50 mb-3">
        <strong class="text-light">Куда что:</strong>
        ① <span class="text-info">Сервер</span> — IP или домен;
        ② <span class="text-info">Порт</span> — обычно 443;
        ③ <span class="text-info">Секрет</span> — hex (<code>ee</code>…).
        <strong class="text-light">Удаление:</strong> галочки в таблице → «Удалить выбранные» или «Удалить» в строке.
        <strong class="text-light">Подтянуть список:</strong> «↻ Обновить список» сверху.
      </p>
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label small mb-1 text-light" for="addServer">① Сервер (IP или хост)</label>
          <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white" id="addServer" autocomplete="off"
                 placeholder="proofgram.loveproxy.xyz или 77.110.98.131">
        </div>
        <div class="col-md-2">
          <label class="form-label small mb-1 text-light" for="addPort">② Порт</label>
          <input type="number" class="form-control form-control-sm bg-secondary border-secondary text-white" id="addPort" min="1" max="65535" placeholder="443">
        </div>
        <div class="col-md-4">
          <label class="form-label small mb-1 text-light" for="addSecret">③ Секрет MTProto (hex)</label>
          <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white font-monospace" id="addSecret" autocomplete="off"
                 placeholder="ee0123456789abcdef… (длинная hex-строка)">
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-success btn-sm w-100" id="btnAddManual">Добавить</button>
        </div>
      </div>
      <div class="mt-3">
        <label class="form-label small mb-1 text-light" for="addTextBlock">Или вставьте пост / ссылки <code class="text-warning">t.me/proxy</code>, <code class="text-warning">t.me/socks</code>, <code>tg://proxy</code></label>
        <textarea class="form-control form-control-sm bg-secondary border-secondary text-white font-monospace" id="addTextBlock" rows="6"
                  placeholder="Server: 1.2.3.4&#10;Port: 443&#10;Secret: ee0123456789abcdef…&#10;&#10;https://t.me/proxy?server=1.2.3.4&amp;port=443&amp;secret=ee...&#10;&#10;SOCKS: https://t.me/socks?server=...&amp;port=...&amp;user=...&amp;pass=..."></textarea>
        <button type="button" class="btn btn-outline-success btn-sm mt-2" id="btnAddFromText">Добавить из текста</button>
      </div>
      <p id="addManualResult" class="small text-secondary mb-0 mt-2"></p>
    </div>
  </div>

  <div class="mtproto-legend mb-2 small" id="mtprotoLegendBlock" style="display:none;">
    <strong class="text-light d-block mb-2">Фильтр по цвету строк (клик — показать только этот статус):</strong>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <button type="button" class="mtproto-legend-btn lg-all px-2 py-1 rounded active" data-filter="all" title="Показать все строки">
        Все <span class="text-white-50">({{ proxies_total|default(0) }})</span>
      </button>
      <button type="button" class="mtproto-legend-btn lg-ok px-2 py-1 rounded" data-filter="ok" title="Последний TCP-пинг успешен">
        Зелёный — пинг успешен <span class="text-white-50">({{ ping_stats.ok }})</span>
      </button>
      <button type="button" class="mtproto-legend-btn lg-warn px-2 py-1 rounded" data-filter="warn" title="Ещё не проверяли или &lt;3 неудач подряд">
        Жёлтый — не проверяли / мало неудач (&lt;3) <span class="text-white-50">({{ ping_stats.warn }})</span>
      </button>
      <button type="button" class="mtproto-legend-btn lg-bad px-2 py-1 rounded" data-filter="bad" title="3+ неудач подряд без успешного ответа">
        Красный — 3+ неудач подряд <span class="text-white-50">({{ ping_stats.bad }})</span>
      </button>
    </div>
    <p class="text-secondary mb-0 mt-2" id="mtprotoFilterSummary">Показаны все строки.</p>
  </div>
  <div class="table-responsive mtproto-table-wrap rounded border border-secondary border-opacity-25">
    <table class="table table-dark table-sm align-middle mb-0 table-mtproto-free">
      <thead>
        <tr>
          <th scope="col" style="width:36px;">
            <input type="checkbox" class="form-check-input m-0" id="chkSelectAll" title="Выбрать все видимые строки">
          </th>
          <th scope="col" title="Внутренний id SQLite; после удалений не совпадает с числом строк">ID БД</th>
          <th scope="col">Тип</th>
          <th scope="col" class="col-server">Сервер</th>
          <th scope="col" style="width:52px;">Порт</th>
          <th scope="col" class="col-secret">Секрет</th>
          <th scope="col">Пинг TCP, мс</th>
          <th scope="col">Проверено</th>
          <th scope="col" title="sort_tail: 0 — вверху; больше число — ниже (после неудачного пинга ставится очередь «в хвост»)">Порядок</th>
          <th scope="col" title="Нужна повторная проверка (утро 07:00)">Повтор</th>
          <th scope="col" title="Подряд без ответа TCP по этой строке; успех → 0">Нет ответа</th>
          <th scope="col">Создан</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody id="mtprotoProxyTbody"></tbody>
    </table>
  </div>
  <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
    <p class="text-secondary small mb-0" id="mtprotoCountLine">
      Записей: <strong class="text-light" id="mtprotoTotalCount">{{ proxies_total or 0 }}</strong>
      <span id="mtprotoPageInfo" class="ms-2"></span>
    </p>
    <label class="small text-secondary mb-0 ms-2">
      На стр.
      <select id="mtprotoPerPage" class="form-select form-select-sm d-inline-block" style="width:auto;">
        <option value="50">50</option>
        <option value="100" selected>100</option>
        <option value="200">200</option>
      </select>
    </label>
    <nav class="ms-auto" id="mtprotoPager" aria-label="Страницы"></nav>
  </div>
  <p class="text-muted small" id="mtprotoEmptyMsg" style="display:none;">
    В таблице <code>free_mtproto_proxy</code> пока нет строк. Импортируйте JSON/SQLite или добавьте прокси.
  </p>
</div>

<!-- Modal edit -->
<div class="modal fade" id="modalEditProxy" tabindex="-1" aria-labelledby="modalEditProxyLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark text-light border-secondary">
      <div class="modal-header border-secondary">
        <h5 class="modal-title" id="modalEditProxyLabel">Редактировать прокси</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="editProxyId">
        <div class="mb-2">
          <label class="form-label small" for="editServer">Сервер (IP или хост)</label>
          <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white" id="editServer" autocomplete="off">
        </div>
        <div class="mb-2">
          <label class="form-label small" for="editPort">Порт</label>
          <input type="number" class="form-control form-control-sm bg-secondary border-secondary text-white" id="editPort" min="1" max="65535">
        </div>
        <div class="mb-2">
          <label class="form-label small" for="editSecret">Секрет (hex)</label>
          <textarea class="form-control form-control-sm bg-secondary border-secondary text-white font-monospace" id="editSecret" rows="3"></textarea>
        </div>
        <div class="d-flex flex-wrap align-items-center gap-2 border-top border-secondary pt-2 mt-2">
          <button type="button" class="btn btn-outline-info btn-sm" id="btnEditPingHost">
            Проверить пинг (TCP)
          </button>
          <span class="small text-secondary" id="editPingResult">Укажите сервер и порт — проверка без сохранения.</span>
        </div>
      </div>
      <div class="modal-footer border-secondary">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-primary btn-sm" id="btnSaveEdit">Сохранить</button>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  const UPDATE_URL = "{% if mtproto_urls %}{{ mtproto_urls['update'] }}{% else %}{{ url_for('panels.mtproto_free_update') }}{% endif %}";
  const ADD_URL = "{% if mtproto_urls %}{{ mtproto_urls.add }}{% else %}{{ url_for('panels.mtproto_free_add') }}{% endif %}";
  const PING_HOST_URL = "{% if mtproto_urls %}{{ mtproto_urls.ping_host }}{% else %}{{ url_for('panels.mtproto_free_ping_host') }}{% endif %}";
  const LIST_URL = "/admin/panels/api/mtproto-free/list";
  let PER_PAGE = 100;
  let currentPage = 1;
  let currentFilter = 'all';
  let totalPages = 1;
  let totalRows = {{ proxies_total or 0 }};
  let loadingRows = false;

  function deleteUrlFor(id) {
    {% if mtproto_delete_url %}
    return "{{ mtproto_delete_url(0) }}".replace(/\/0$/, '/' + id);
    {% else %}
    return "{{ url_for('panels.mtproto_free_delete', proxy_id=0) }}".replace(/0$/, String(id));
    {% endif %}
  }

  function escHtml(s) {
    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function rowStatus(p) {
    var streak = parseInt(p.ping_no_answer_streak || 0, 10) || 0;
    if (p.last_ping_ms != null && p.last_ping_ms !== '') return { cls: 'mtproto-row--ok', st: 'ok' };
    if (streak >= 3) return { cls: 'mtproto-row--bad', st: 'bad' };
    return { cls: 'mtproto-row--warn', st: 'warn' };
  }

  function shortSecret(raw) {
    var s = String(raw || '').trim();
    if (!s) return '—';
    if (s.length <= 24) return s;
    return s.slice(0, 10) + '…' + s.slice(-8);
  }

  function renderRow(p) {
    var rs = rowStatus(p);
    var kind = (p.proxy_kind || 'mtproto');
    var secretFull = kind === 'socks'
      ? ((p.socks_user || '—') + ' / ' + (p.socks_pass || '—'))
      : (p.secret || '');
    var secretShort = escHtml(shortSecret(secretFull));
    var secretTitle = escHtml(secretFull);
    var typeBadge = kind === 'socks'
      ? '<span class="badge bg-info text-dark">SOCKS</span>'
      : '<span class="badge bg-secondary">MTProto</span>';
    return '<tr class="' + rs.cls + '" data-mtproto-status="' + rs.st + '">' +
      '<td><input type="checkbox" class="form-check-input m-0 row-chk" value="' + p.id + '"></td>' +
      '<td>' + p.id + '</td>' +
      '<td class="text-nowrap small">' + typeBadge + '</td>' +
      '<td class="col-server" title="' + escHtml(p.server) + '">' + escHtml(p.server) + '</td>' +
      '<td>' + escHtml(p.port) + '</td>' +
      '<td class="col-secret" title="' + secretTitle + '">' + secretShort + '</td>' +
      '<td>' + (p.last_ping_ms != null ? escHtml(p.last_ping_ms) : '—') + '</td>' +
      '<td class="small text-secondary text-nowrap">' + escHtml(p.last_ping_checked_at || '—') + '</td>' +
      '<td>' + escHtml(p.sort_tail) + '</td>' +
      '<td>' + (p.pending_recheck ? 'да' : 'нет') + '</td>' +
      '<td class="text-nowrap">' + escHtml(p.ping_no_answer_streak || 0) + '</td>' +
      '<td class="small text-secondary text-nowrap">' + escHtml(p.created_at || '—') + '</td>' +
      '<td class="text-nowrap">' +
        '<button type="button" class="btn btn-outline-secondary btn-sm py-0 px-1 btn-edit-proxy" data-id="' + p.id + '" data-server="' + escHtml(p.server) + '" data-port="' + p.port + '" data-secret="' + escHtml(p.secret || '') + '">Изменить</button> ' +
        '<button type="button" class="btn btn-outline-danger btn-sm py-0 px-1 btn-delete-proxy" data-id="' + p.id + '" data-delete-url="' + deleteUrlFor(p.id) + '">Удалить</button>' +
      '</td></tr>';
  }

  function updateLegendCounts(stats) {
    if (!stats) return;
    document.querySelectorAll('.mtproto-legend-btn').forEach(function (b) {
      var f = b.getAttribute('data-filter');
      var span = b.querySelector('span');
      if (!span) return;
      var n = stats.total || 0;
      if (f === 'ok') n = stats.ok || 0;
      else if (f === 'warn') n = stats.warn || 0;
      else if (f === 'bad') n = stats.bad || 0;
      span.textContent = '(' + n + ')';
    });
    var tot = document.getElementById('mtprotoTotalCount');
    if (tot) tot.textContent = String(stats.total || 0);
    var leg = document.getElementById('mtprotoLegendBlock');
    if (leg) leg.style.display = (stats.total > 0) ? '' : 'none';
    var empty = document.getElementById('mtprotoEmptyMsg');
    if (empty) empty.style.display = (stats.total > 0) ? 'none' : '';
  }

  function renderPager() {
    var nav = document.getElementById('mtprotoPager');
    var info = document.getElementById('mtprotoPageInfo');
    if (!nav) return;
    if (totalPages <= 1) { nav.innerHTML = ''; if (info) info.textContent = ''; return; }
    var html = '<ul class="pagination pagination-sm mb-0">';
    html += '<li class="page-item' + (currentPage <= 1 ? ' disabled' : '') + '"><a class="page-link" href="#" data-pg="' + (currentPage - 1) + '">‹</a></li>';
    var start = Math.max(1, currentPage - 2);
    var end = Math.min(totalPages, start + 4);
    for (var i = start; i <= end; i++) {
      html += '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-pg="' + i + '">' + i + '</a></li>';
    }
    html += '<li class="page-item' + (currentPage >= totalPages ? ' disabled' : '') + '"><a class="page-link" href="#" data-pg="' + (currentPage + 1) + '">›</a></li></ul>';
    nav.innerHTML = html;
    nav.querySelectorAll('a[data-pg]').forEach(function (a) {
      a.addEventListener('click', function (e) {
        e.preventDefault();
        var pg = parseInt(a.getAttribute('data-pg'), 10);
        if (!isNaN(pg) && pg >= 1 && pg <= totalPages) loadPage(pg, currentFilter);
      });
    });
    if (info) info.textContent = 'Стр. ' + currentPage + ' / ' + totalPages;
  }

  async function loadPage(page, filter) {
    if (loadingRows) return;
    loadingRows = true;
    currentPage = page || 1;
    currentFilter = filter || 'all';
    var tbody = document.getElementById('mtprotoProxyTbody');
    if (tbody) tbody.innerHTML = '<tr><td colspan="13" class="text-center text-secondary py-3">Загрузка…</td></tr>';
    try {
      var url = LIST_URL + '?page=' + currentPage + '&per_page=' + PER_PAGE + '&filter=' + encodeURIComponent(currentFilter);
      var r = await fetch(url, { credentials: 'same-origin', cache: 'no-store' });
      var raw = await r.text();
      var j;
      try {
        j = JSON.parse(raw);
      } catch (parseErr) {
        throw new Error('Сервер вернул не JSON (HTTP ' + r.status + '). Обновите код панели и перезапустите веб-админку.');
      }
      if (!r.ok || !j.ok) throw new Error((j && j.error) || ('HTTP ' + r.status));
      totalPages = j.pages || 1;
      totalRows = j.total || 0;
      updateLegendCounts(j.ping_stats);
      if (tbody) {
        if (!j.items || !j.items.length) {
          tbody.innerHTML = '<tr><td colspan="13" class="text-center text-muted py-3">Нет строк на этой странице</td></tr>';
        } else {
          tbody.innerHTML = j.items.map(renderRow).join('');
          bindRowHandlers();
        }
      }
      renderPager();
      if (filterSummaryEl) {
        if (currentFilter === 'all') filterSummaryEl.textContent = 'Показаны все (стр. ' + currentPage + '): ' + (j.items ? j.items.length : 0) + ' из ' + totalRows;
        else filterSummaryEl.textContent = 'Фильтр «' + currentFilter + '»: ' + totalRows + ' всего';
      }
      refreshBulkButtons();
    } catch (e) {
      if (tbody) tbody.innerHTML = '<tr><td colspan="13" class="text-danger py-3">' + escHtml(String(e)) + '</td></tr>';
      showErr(String(e));
    } finally {
      loadingRows = false;
    }
  }

  function bindRowHandlers() {
    document.querySelectorAll('.row-chk').forEach(function (c) {
      c.addEventListener('change', function () {
        refreshBulkButtons();
        var tb = document.getElementById('mtprotoProxyTbody');
        var boxes = tb ? Array.from(tb.querySelectorAll('tr:not(.d-none) .row-chk')) : [];
        var allChecked = boxes.length > 0 && boxes.every(function (x) { return x.checked; });
        if (chkAll) chkAll.checked = allChecked;
      });
    });
    document.querySelectorAll('.btn-delete-proxy').forEach(function (btn) {
      btn.addEventListener('click', async function () {
        var id = btn.getAttribute('data-id');
        var url = btn.getAttribute('data-delete-url');
        if (!confirm('Удалить прокси #' + id + '?')) return;
        hideMsgs();
        try {
          var r = await fetch(url, { method: 'POST', credentials: 'same-origin' });
          var j = await r.json().catch(function () { return {}; });
          if (!r.ok || !j.ok) { showErr((j && j.error) || ('HTTP ' + r.status)); return; }
          showOk('Удалено #' + id);
          await loadPage(currentPage, currentFilter);
        } catch (e) { showErr(String(e)); }
      });
    });
    document.querySelectorAll('.btn-edit-proxy').forEach(function (btn) {
      btn.addEventListener('click', function () {
        document.getElementById('editProxyId').value = btn.getAttribute('data-id');
        document.getElementById('editServer').value = btn.getAttribute('data-server') || '';
        document.getElementById('editPort').value = btn.getAttribute('data-port') || '';
        document.getElementById('editSecret').value = btn.getAttribute('data-secret') || '';
        var modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('modalEditProxy'));
        modal.show();
      });
    });
  }

  const msgOk = document.getElementById('mtprotoFreeMsg');
  const msgErr = document.getElementById('mtprotoFreeErr');
  function showOk(t) {
    msgErr.classList.add('d-none');
    msgOk.textContent = t;
    msgOk.classList.remove('d-none');
  }
  function showErr(t) {
    msgOk.classList.add('d-none');
    msgErr.textContent = t;
    msgErr.classList.remove('d-none');
  }
  function hideMsgs() {
    msgOk.classList.add('d-none');
    msgErr.classList.add('d-none');
  }

  function selectedIds() {
    return Array.from(document.querySelectorAll('.row-chk:checked')).map(function (el) {
      return parseInt(el.value, 10);
    }).filter(function (n) { return !isNaN(n); });
  }

  function refreshBulkButtons() {
    const n = selectedIds().length;
    const pingBtn = document.getElementById('btnPingSelected');
    const delBtn = document.getElementById('btnDeleteSelected');
    if (pingBtn) pingBtn.disabled = n === 0;
    if (delBtn) delBtn.disabled = n === 0;
  }

  const filterSummaryEl = document.getElementById('mtprotoFilterSummary');

  function applyMtprotoFilter(which) {
    document.querySelectorAll('.mtproto-legend-btn').forEach(function (b) {
      b.classList.toggle('active', (b.getAttribute('data-filter') || '') === which);
    });
    loadPage(1, which || 'all');
  }

  document.querySelectorAll('.mtproto-legend-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      applyMtprotoFilter(this.getAttribute('data-filter') || 'all');
    });
  });

  const chkAll = document.getElementById('chkSelectAll');
  if (chkAll) {
    chkAll.addEventListener('change', function () {
      var tb = document.getElementById('mtprotoProxyTbody');
      var sel = tb ? tb.querySelectorAll('.row-chk') : [];
      sel.forEach(function (c) { c.checked = chkAll.checked; });
      refreshBulkButtons();
    });
  }

  var btnRefresh = document.getElementById('btnRefreshList');
  if (btnRefresh) {
    btnRefresh.addEventListener('click', function () { loadPage(currentPage, currentFilter); });
  }

  var perPageSel = document.getElementById('mtprotoPerPage');
  if (perPageSel) {
    perPageSel.addEventListener('change', function () {
      PER_PAGE = parseInt(perPageSel.value, 10) || 100;
      loadPage(1, currentFilter);
    });
  }

  updateLegendCounts({ ok: {{ ping_stats.ok|default(0) }}, warn: {{ ping_stats.warn|default(0) }}, bad: {{ ping_stats.bad|default(0) }}, total: {{ proxies_total|default(0) }} });
  loadPage(1, 'all');

  document.getElementById('btnPingNow').addEventListener('click', async function () {
    hideMsgs();
    this.disabled = true;
    try {
      const r = await fetch('{% if mtproto_urls %}{{ mtproto_urls.ping_now }}{% else %}{{ url_for("panels.mtproto_free_ping_now") }}{% endif %}', { method: 'POST', credentials: 'same-origin' });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
        return;
      }
      showOk('Пинг выполнен. Записей: ' + (j.total != null ? j.total : '—') + '. Обновляю…');
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showErr(String(e));
    } finally {
      document.getElementById('btnPingNow').disabled = false;
    }
  });

  document.getElementById('btnPingSelected').addEventListener('click', async function () {
    const ids = selectedIds();
    if (!ids.length) return;
    hideMsgs();
    this.disabled = true;
    try {
      const r = await fetch('{% if mtproto_urls %}{{ mtproto_urls.ping_selected }}{% else %}{{ url_for("panels.mtproto_free_ping_selected") }}{% endif %}', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: ids }),
      });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
        this.disabled = false;
        return;
      }
      showOk('Пинг выбранных: строк=' + (j.total != null ? j.total : '—') +
        ', ответили=' + (j.alive != null ? j.alive : '—') +
        ', без ответа=' + (j.dead != null ? j.dead : '—') + '. Обновляю…');
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showErr(String(e));
      this.disabled = false;
    }
  });

  document.getElementById('btnDeleteSelected').addEventListener('click', async function () {
    const ids = selectedIds();
    if (!ids.length) return;
    if (!confirm('Удалить выбранные прокси (' + ids.length + ' шт.)?')) return;
    hideMsgs();
    this.disabled = true;
    try {
      const r = await fetch('{% if mtproto_urls %}{{ mtproto_urls.delete_selected }}{% else %}{{ url_for("panels.mtproto_free_delete_selected") }}{% endif %}', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: ids }),
      });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
        this.disabled = false;
        return;
      }
      showOk(j.message || ('Удалено: ' + (j.deleted || ids.length)));
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showErr(String(e));
      this.disabled = false;
    }
  });

  async function runImportJson() {
    hideMsgs();
    const inp = document.getElementById('importFile');
    if (!inp.files || !inp.files[0]) {
      showErr('Выберите файл');
      return;
    }
    const fd = new FormData();
    fd.append('file', inp.files[0]);
    if (document.getElementById('replaceAll').checked) {
      fd.append('replace_all', '1');
    }
    const r = await fetch('{% if mtproto_urls %}{{ mtproto_urls.import_json }}{% else %}{{ url_for("panels.mtproto_free_import") }}{% endif %}', { method: 'POST', body: fd, credentials: 'same-origin' });
    const j = await r.json().catch(function () { return {}; });
    if (!r.ok || !j.ok) {
      showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
      return;
    }
    showOk('Импорт JSON: добавлено ' + j.added + ', дублей ' + j.dup + ', ошибок ' + j.err + '. Обновляю…');
    await loadPage(1, currentFilter);
  }

  async function runImportSqlite() {
    hideMsgs();
    const inp = document.getElementById('importFile');
    if (!inp.files || !inp.files[0]) {
      showErr('Выберите файл .db');
      return;
    }
    const fd = new FormData();
    fd.append('file', inp.files[0]);
    if (document.getElementById('replaceAll').checked) {
      fd.append('replace_all', '1');
    }
    const r = await fetch('{% if mtproto_urls %}{{ mtproto_urls.import_sqlite }}{% else %}{{ url_for("panels.mtproto_free_import_sqlite") }}{% endif %}', { method: 'POST', body: fd, credentials: 'same-origin' });
    const j = await r.json().catch(function () { return {}; });
    if (!r.ok || !j.ok) {
      showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
      return;
    }
    showOk('Импорт SQLite: добавлено ' + j.added + ', дублей ' + j.dup + ', ошибок ' + j.err + '. Обновляю…');
    await loadPage(1, currentFilter);
  }

  document.getElementById('btnImportJson').addEventListener('click', function () {
    runImportJson().catch(function (e) { showErr(String(e)); });
  });
  document.getElementById('btnImportSqlite').addEventListener('click', function () {
    runImportSqlite().catch(function (e) { showErr(String(e)); });
  });

  const addResultEl = document.getElementById('addManualResult');
  function showAddResult(text, isErr) {
    if (!addResultEl) return;
    addResultEl.textContent = text;
    addResultEl.className = 'small mb-0 mt-2 ' + (isErr ? 'text-danger' : 'text-success');
  }

  document.getElementById('btnAddManual').addEventListener('click', async function () {
    hideMsgs();
    showAddResult('', false);
    const server = (document.getElementById('addServer').value || '').trim();
    const port = parseInt(document.getElementById('addPort').value, 10);
    const secret = (document.getElementById('addSecret').value || '').trim();
    if (!server || isNaN(port)) {
      showAddResult('Укажите сервер и порт', true);
      return;
    }
    this.disabled = true;
    try {
      const r = await fetch(ADD_URL, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ server: server, port: port, secret: secret }),
      });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showAddResult((j && j.error) ? j.error : ('HTTP ' + r.status), true);
        return;
      }
      showAddResult(j.message || 'Готово');
      showOk(j.message || 'Готово');
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showAddResult(String(e), true);
    } finally {
      this.disabled = false;
    }
  });

  document.getElementById('btnAddFromText').addEventListener('click', async function () {
    hideMsgs();
    showAddResult('', false);
    const text = (document.getElementById('addTextBlock').value || '').trim();
    if (!text) {
      showAddResult('Вставьте текст с Server/Port/Secret или tg://proxy', true);
      return;
    }
    this.disabled = true;
    try {
      const r = await fetch(ADD_URL, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: text }),
      });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showAddResult((j && j.error) ? j.error : ('HTTP ' + r.status), true);
        return;
      }
      showAddResult(j.message || 'Готово');
      showOk(j.message || 'Готово');
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showAddResult(String(e), true);
    } finally {
      this.disabled = false;
    }
  });

  document.querySelectorAll('.btn-delete-proxy').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const id = this.getAttribute('data-id');
      const url = this.getAttribute('data-delete-url');
      if (!id || !url || !confirm('Удалить прокси #' + id + '?')) return;
      hideMsgs();
      this.disabled = true;
      try {
        const r = await fetch(url, { method: 'POST', credentials: 'same-origin' });
        const j = await r.json().catch(function () { return {}; });
        if (!r.ok || !j.ok) {
          showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
          this.disabled = false;
          return;
        }
        showOk(j.message || 'Удалено');
        await loadPage(currentPage, currentFilter);
      } catch (e) {
        showErr(String(e));
        this.disabled = false;
      }
    });
  });

  const modalEl = document.getElementById('modalEditProxy');
  const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
  document.querySelectorAll('.btn-edit-proxy').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.getElementById('editProxyId').value = btn.getAttribute('data-id') || '';
      document.getElementById('editServer').value = btn.getAttribute('data-server') || '';
      document.getElementById('editPort').value = btn.getAttribute('data-port') || '';
      document.getElementById('editSecret').value = btn.getAttribute('data-secret') || '';
      var pr = document.getElementById('editPingResult');
      if (pr) {
        pr.textContent = 'Укажите сервер и порт — проверка без сохранения.';
        pr.className = 'small text-secondary';
      }
      if (modal) modal.show();
    });
  });

  document.getElementById('btnEditPingHost').addEventListener('click', async function () {
    var server = (document.getElementById('editServer').value || '').trim();
    var portRaw = document.getElementById('editPort').value;
    var pr = document.getElementById('editPingResult');
    if (!server) {
      if (pr) { pr.textContent = 'Введите сервер.'; pr.className = 'small text-warning'; }
      return;
    }
    var port = parseInt(portRaw, 10);
    if (isNaN(port) || port < 1 || port > 65535) {
      if (pr) { pr.textContent = 'Введите корректный порт (1–65535).'; pr.className = 'small text-warning'; }
      return;
    }
    this.disabled = true;
    if (pr) { pr.textContent = 'Проверка…'; pr.className = 'small text-secondary'; }
    try {
      var r = await fetch(PING_HOST_URL, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ server: server, port: port }),
      });
      var j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        if (pr) { pr.textContent = (j && j.error) ? j.error : ('Ошибка HTTP ' + r.status); pr.className = 'small text-danger'; }
        return;
      }
      if (j.reachable && j.ms != null) {
        if (pr) { pr.textContent = 'Ответ: ' + j.ms + ' мс (TCP connect)'; pr.className = 'small text-success'; }
      } else {
        if (pr) { pr.textContent = 'Нет ответа TCP за отведённое время.'; pr.className = 'small text-danger'; }
      }
    } catch (e) {
      if (pr) { pr.textContent = String(e); pr.className = 'small text-danger'; }
    } finally {
      document.getElementById('btnEditPingHost').disabled = false;
    }
  });

  document.getElementById('btnSaveEdit').addEventListener('click', async function () {
    const id = parseInt(document.getElementById('editProxyId').value, 10);
    if (!id) return;
    hideMsgs();
    this.disabled = true;
    try {
      const body = {
        id: id,
        server: document.getElementById('editServer').value,
        port: document.getElementById('editPort').value,
        secret: document.getElementById('editSecret').value,
      };
      const r = await fetch(UPDATE_URL, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const j = await r.json().catch(function () { return {}; });
      if (!r.ok || !j.ok) {
        showErr((j && j.error) ? j.error : ('HTTP ' + r.status));
        this.disabled = false;
        return;
      }
      if (modal) modal.hide();
      await loadPage(currentPage, currentFilter);
    } catch (e) {
      showErr(String(e));
      this.disabled = false;
    }
  });

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