{% extends "base.html" %}

{% block title %}Логи бота и веб-админки{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="bg-[#101827] border border-[#243053] rounded-2xl p-5 text-sm text-gray-300 flex items-center justify-between">
    <div>
      <div class="text-lg font-semibold text-white mb-1">Логи бота и веб-админки</div>
      <div class="text-xs text-gray-400">
        Более подробные логи можно найти в каталоге <code class="text-xs text-indigo-300 bg-[#111827] px-2 py-1 rounded">logs/</code>.
      </div>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
      <button type="button" class="log-filter-chip px-4 py-2 rounded-lg text-xs font-semibold bg-emerald-500/10 text-emerald-300 border border-emerald-500/40 shadow-sm" data-level="SUCCESS">
        SUCCESS
      </button>
      <button type="button" class="log-filter-chip px-4 py-2 rounded-lg text-xs font-semibold bg-sky-500/10 text-sky-300 border border-sky-500/40 shadow-sm" data-level="INFO">
        INFO
      </button>
      <button type="button" class="log-filter-chip px-4 py-2 rounded-lg text-xs font-semibold bg-amber-500/10 text-amber-300 border border-amber-500/40 shadow-sm" data-level="WARNING">
        WARNING
      </button>
      <button type="button" class="log-filter-chip px-4 py-2 rounded-lg text-xs font-semibold bg-rose-500/10 text-rose-300 border border-rose-500/40 shadow-sm" data-level="ERROR">
        ERROR
      </button>
      <button type="button" class="log-filter-chip ml-1 px-4 py-2 rounded-lg text-xs font-semibold bg-slate-700 text-gray-200 border border-slate-500/50 shadow-sm" id="logs-reset-filter">
        Показать все
      </button>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-[#0f172a] border border-[#243053] rounded-2xl overflow-hidden flex flex-col h-[560px]">
      <div class="px-4 py-3 border-b border-[#1f2937] flex items-center justify-between bg-[#111827]">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
          <span class="text-sm font-semibold text-white">Лог бота ({{ bot_log_name }})</span>
        </div>
      </div>
      <div class="flex-1 overflow-auto font-mono text-xs leading-relaxed bg-[#020617]" id="bot-log-container"></div>
    </div>

    <div class="bg-[#0f172a] border border-[#243053] rounded-2xl overflow-hidden flex flex-col h-[560px]">
      <div class="px-4 py-3 border-b border-[#1f2937] flex items-center justify-between bg-[#111827]">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-sky-400"></span>
          <span class="text-sm font-semibold text-white">Лог веб-админки ({{ web_log_name }})</span>
        </div>
      </div>
      <div class="flex-1 overflow-auto font-mono text-xs leading-relaxed bg-[#020617]" id="web-log-container"></div>
    </div>
  </div>

  <div class="text-xs text-gray-400 -mt-2">
    Ниже — запросы к API 3X-UI (py3xui): отдельно для процесса веб-админки и для процесса бота. В списке «Панель» показывается <strong class="text-gray-300">имя сервера</strong> из БД; неудачные попытки HTTPS при панели без TLS (WRONG_VERSION_NUMBER) скрыты. Лог бота — <code class="text-indigo-300">logs/xui_api_bot.log</code>. Отключить трассировку: <code class="text-indigo-300">XUI_API_TRACE=0</code>.
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-[#0f172a] border border-[#243053] rounded-2xl overflow-hidden flex flex-col h-[480px]">
      <div class="px-4 py-3 border-b border-[#1f2937] flex flex-wrap items-center gap-2 justify-between bg-[#111827]">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-violet-400"></span>
          <span class="text-sm font-semibold text-white">3X-UI через веб-админку</span>
        </div>
        <label class="text-xs text-gray-400 flex items-center gap-2 min-w-0">
          Панель
          <select id="xui-web-host" class="bg-[#020617] border border-[#334155] rounded-lg px-2 py-1 text-gray-200 text-xs min-w-[10rem] max-w-[min(100%,360px)] truncate" title="Имя из server_settings; полный URL в подсказке"></select>
        </label>
      </div>
      <div class="flex-1 overflow-auto m-0 p-0 font-mono text-[11px] leading-relaxed bg-[#020617] text-gray-300" id="xui-web-body"></div>
    </div>

    <div class="bg-[#0f172a] border border-[#243053] rounded-2xl overflow-hidden flex flex-col h-[480px]">
      <div class="px-4 py-3 border-b border-[#1f2937] flex flex-wrap items-center gap-2 justify-between bg-[#111827]">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-fuchsia-400"></span>
          <span class="text-sm font-semibold text-white">3X-UI через бота</span>
        </div>
        <label class="text-xs text-gray-400 flex items-center gap-2 min-w-0">
          Панель
          <select id="xui-bot-host" class="bg-[#020617] border border-[#334155] rounded-lg px-2 py-1 text-gray-200 text-xs min-w-[10rem] max-w-[min(100%,360px)] truncate" title="Имя из server_settings; полный URL в подсказке"></select>
        </label>
      </div>
      <div class="flex-1 overflow-auto m-0 p-0 font-mono text-[11px] leading-relaxed bg-[#020617] text-gray-300" id="xui-bot-body"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  (function() {
    const buttons = document.querySelectorAll('[data-level]');
    const resetBtn = document.getElementById('logs-reset-filter');
    const botContainer = document.getElementById('bot-log-container');
    const webContainer = document.getElementById('web-log-container');
    const xuiWebHost = document.getElementById('xui-web-host');
    const xuiBotHost = document.getElementById('xui-bot-host');
    const xuiWebBody = document.getElementById('xui-web-body');
    const xuiBotBody = document.getElementById('xui-bot-body');
    const LS_WEB_HOST = 'logs-xui-web-host';
    const LS_BOT_HOST = 'logs-xui-bot-host';
    let activeLevel = null;
    let lastXuiWeb = null;
    let lastXuiBot = null;

    function syncHostSelect(sel, hosts, storageKey, hostLabels) {
      const wanted = localStorage.getItem(storageKey) || '__all__';
      const H = hostLabels || {};
      const next = [{ v: '__all__', t: 'Все панели' }];
      (hosts || []).forEach((h) => {
        const label = (H[h] && String(H[h]).trim()) ? H[h] : h;
        next.push({ v: h, t: label });
      });
      sel.innerHTML = '';
      next.forEach(({ v, t }) => {
        const o = document.createElement('option');
        o.value = v;
        o.textContent = t;
        if (v !== '__all__') o.title = v;
        sel.appendChild(o);
      });
      const pick = [...sel.options].some((o) => o.value === wanted) ? wanted : '__all__';
      sel.value = pick;
    }

    function renderXuiWeb(payload) {
      lastXuiWeb = payload;
      if (!payload) {
        xuiWebBody.textContent = '(нет данных)';
        return;
      }
      syncHostSelect(xuiWebHost, payload.hosts || [], LS_WEB_HOST, payload.host_labels || {});
      const h = xuiWebHost.value;
      let blocks = [];
      if (!h || h === '__all__') blocks = payload.all || [];
      else blocks = (payload.by_host && payload.by_host[h]) || [];
      if (!blocks.length) {
        const label = (payload.host_labels && payload.host_labels[h]) || h;
        xuiWebBody.textContent = (h && h !== '__all__')
          ? `Пока нет запросов к панели «${label}» из веб-админки.`
          : 'Пока нет запросов к 3X-UI из веб-админки.';
        return;
      }
      xuiWebBody.innerHTML = renderXuiColoredText(blocks.join('\n\n'));
      xuiWebBody.scrollTop = xuiWebBody.scrollHeight;
    }

    function renderXuiBot(botPayload) {
      lastXuiBot = botPayload;
      if (!botPayload) {
        xuiBotBody.textContent = '(нет данных)';
        return;
      }
      const lines = botPayload.lines || [];
      syncHostSelect(xuiBotHost, botPayload.hosts || [], LS_BOT_HOST, botPayload.host_labels || {});
      const h = xuiBotHost.value;
      let out = lines;
      if (h && h !== '__all__') {
        const needle = '://' + h;
        out = lines.filter((ln) => ln.includes(needle));
      }
      if (!out.length) {
        const label = (botPayload.host_labels && botPayload.host_labels[h]) || h;
        xuiBotBody.textContent = (h && h !== '__all__')
          ? `Пока нет записей по панели «${label}» (бот не ходил в API или выберите другую панель).`
          : 'Пока нет записей (бот не ходил в панели или выберите другую панель).';
        return;
      }
      xuiBotBody.innerHTML = renderXuiColoredText(out.join('\n'));
      xuiBotBody.scrollTop = xuiBotBody.scrollHeight;
    }

    xuiWebHost.addEventListener('change', () => {
      localStorage.setItem(LS_WEB_HOST, xuiWebHost.value);
      if (lastXuiWeb) renderXuiWeb(lastXuiWeb);
    });
    xuiBotHost.addEventListener('change', () => {
      localStorage.setItem(LS_BOT_HOST, xuiBotHost.value);
      if (lastXuiBot) renderXuiBot(lastXuiBot);
    });

    function clearActive() {
      buttons.forEach(btn => btn.classList.remove('ring-2', 'ring-offset-2', 'ring-offset-[#020617]', 'ring-emerald-400/70', 'ring-sky-400/70', 'ring-amber-400/70', 'ring-rose-400/70'));
    }

    function applyFilter(level) {
      document.querySelectorAll('.log-line').forEach((line) => {
        const lv = line.dataset.level || 'DEFAULT';
        if (!level) {
          line.style.display = '';
        } else {
          line.style.display = lv === level ? '' : 'none';
        }
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const level = btn.getAttribute('data-level');
        activeLevel = level;
        clearActive();
        btn.classList.add('ring-2', 'ring-offset-2', 'ring-offset-[#020617]');
        if (level === 'SUCCESS') btn.classList.add('ring-emerald-400/70');
        if (level === 'INFO') btn.classList.add('ring-sky-400/70');
        if (level === 'WARNING') btn.classList.add('ring-amber-400/70');
        if (level === 'ERROR') btn.classList.add('ring-rose-400/70');
        applyFilter(level);
      });
    });

    resetBtn.addEventListener('click', () => {
      activeLevel = null;
      clearActive();
      applyFilter(null);
    });

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

    function inferStandardLogLevel(text) {
      const pipe = text.match(/\|\s*(SUCCESS|INFO|WARNING|WARN|ERROR|DEBUG|CRITICAL)\s*\|/i);
      if (pipe) {
        let u = pipe[1].toUpperCase();
        if (u === 'WARN') u = 'WARNING';
        return u;
      }
      if (/\bCRITICAL\b/i.test(text)) return 'ERROR';
      if (/\bERROR\b/i.test(text)) return 'ERROR';
      if (/\bWARNING\b/i.test(text) || /\bWARN\b/i.test(text)) return 'WARNING';
      if (/\bSUCCESS\b/i.test(text)) return 'SUCCESS';
      if (/\bDEBUG\b/i.test(text)) return 'DEBUG';
      if (/\bINFO\b/i.test(text)) return 'INFO';
      return 'DEFAULT';
    }

    function levelToCssClass(level) {
      const L = (level || 'DEFAULT').toUpperCase();
      const map = {
        SUCCESS: 'log-lvl-success',
        INFO: 'log-lvl-info',
        WARNING: 'log-lvl-warning',
        ERROR: 'log-lvl-error',
        DEBUG: 'log-lvl-debug',
        DEFAULT: 'log-lvl-default',
      };
      return map[L] || 'log-lvl-default';
    }

    function inferXuiLineLevel(line, carryIn) {
      let carry = carryIn;
      const t = line.trim();
      if (!t) {
        return { level: 'DEFAULT', carry: 'DEFAULT' };
      }

      const pipe = line.match(/\|\s*(SUCCESS|INFO|WARNING|WARN|ERROR|DEBUG|CRITICAL)\s*\|/i);
      if (pipe) {
        let u = pipe[1].toUpperCase();
        if (u === 'WARN') u = 'WARNING';
        return { level: u, carry: u };
      }

      if (t === '—' || t === '-') {
        return { level: 'DEFAULT', carry: 'DEFAULT' };
      }

      if (/\bERR\b/i.test(line) && (/\(\s*\d+\s*ms\s*\)/i.test(line) || /SSLError|SSL:|ConnectionError|Timeout|WRONG_VERSION/i.test(line))) {
        return { level: 'ERROR', carry: 'ERROR' };
      }

      const hm = line.match(/\bHTTP\s+(\d{3})\b/);
      if (hm) {
        const c = parseInt(hm[1], 10);
        let lev = 'INFO';
        if (c >= 200 && c < 300) lev = 'SUCCESS';
        else if (c >= 400 && c < 500) lev = 'WARNING';
        else if (c >= 500) lev = 'ERROR';
        return { level: lev, carry: lev };
      }

      if (/^\s+[→←]/.test(line)) {
        const use = carry && carry !== 'DEFAULT' ? carry : 'INFO';
        return { level: use, carry };
      }

      if (/^\[/.test(t)) {
        return { level: 'INFO', carry: 'INFO' };
      }

      if (carry && carry !== 'DEFAULT') {
        return { level: carry, carry };
      }
      return { level: 'DEFAULT', carry };
    }

    function renderXuiColoredText(raw) {
      const lines = raw.split('\n');
      let carry = 'DEFAULT';
      const parts = [];
      for (let i = 0; i < lines.length; i += 1) {
        const line = lines[i];
        const r = inferXuiLineLevel(line, carry);
        carry = r.carry;
        parts.push({ line, level: r.level });
      }
      let html = '';
      for (let j = 0; j < parts.length; j += 1) {
        const { line, level } = parts[j];
        const cls = levelToCssClass(level);
        html += '<div class="px-4 py-0.5 log-line" data-level="' + level + '"><span class="log-line-content ' + cls + '">' + escapeHtml(line) + '</span></div>';
      }
      return html;
    }

    async function fetchLogs() {
      try {
        const resp = await fetch("{{ url_for('tools.logs_data') }}?max=400", { cache: "no-store" });
        if (!resp.ok) return;
        const data = await resp.json();
        function render(container, lines) {
          container.innerHTML = '';
          lines.forEach((text) => {
            const level = inferStandardLogLevel(text);
            const cls = levelToCssClass(level);
            const div = document.createElement('div');
            div.className = 'px-4 py-0.5 log-line';
            div.dataset.level = level;
            div.innerHTML = '<span class="log-line-content ' + cls + '">' + escapeHtml(text) + '</span>';
            container.appendChild(div);
          });
        }
        render(botContainer, (data.bot && data.bot.lines) || []);
        render(webContainer, (data.web && data.web.lines) || []);
        const xui = data.xui || {};
        renderXuiWeb(xui.web);
        renderXuiBot(xui.bot);
        if (activeLevel) {
          applyFilter(activeLevel);
        }
        botContainer.scrollTop = botContainer.scrollHeight;
        webContainer.scrollTop = webContainer.scrollHeight;
      } catch (e) {
        console.warn("log fetch failed", e);
      }
    }

    // первый запрос сразу
    fetchLogs();
    // обновление чаще для блока 3X-UI (тот же запрос, что и логи)
    setInterval(fetchLogs, 3000);
  })();
</script>
{% endblock %}