{% extends "base.html" %}
{% block title %}Logs — Neto{% endblock %}

{% block content %}
<div class="page-title" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
  <span>Logs <small style="font-size:13px;color:var(--muted);font-weight:400">{{ log_path }}</small></span>
  <div style="display:flex;align-items:center;gap:12px">
    <label style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px">
      <input type="checkbox" id="auto-scroll" checked> Auto-scroll
    </label>
    <label style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px">
      Lines:
      <select id="lines-sel" style="background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:6px;font-size:13px">
        <option value="50">50</option>
        <option value="100" selected>100</option>
        <option value="200">200</option>
        <option value="500">500</option>
      </select>
    </label>
    <div style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)">
      <span id="refresh-dot" style="width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block"></span>
      Live — refreshes every 5s
    </div>
    <button onclick="clearDisplay()" style="background:var(--bg3);border:1px solid var(--border);color:var(--muted);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:13px">Clear display</button>
  </div>
</div>

<div style="margin-top:16px;background:#1a1d27;border:1px solid #2e3452;border-radius:10px;overflow:hidden">
  <div style="padding:10px 16px;background:#22263a;border-bottom:1px solid #2e3452;display:flex;gap:16px;align-items:center">
    <input id="filter-input" type="text" placeholder="Filter lines..." style="background:#1a1d27;border:1px solid #2e3452;color:#e2e5f0;padding:5px 10px;border-radius:5px;font-size:12px;width:220px;font-family:monospace">
    <div style="display:flex;gap:8px">
      <button onclick="setFilter('ERROR')" style="font-size:11px;padding:3px 10px;border-radius:4px;border:none;cursor:pointer;background:#3d1515;color:#e85d5d">ERRORs</button>
      <button onclick="setFilter('WARNING')" style="font-size:11px;padding:3px 10px;border-radius:4px;border:none;cursor:pointer;background:#2d1f0a;color:#f5a623">WARNs</button>
      <button onclick="setFilter('wpa_state')" style="font-size:11px;padding:3px 10px;border-radius:4px;border:none;cursor:pointer;background:#0d1f33;color:#4f83cc">wpa_state</button>
      <button onclick="setFilter('')" style="font-size:11px;padding:3px 10px;border-radius:4px;border:none;cursor:pointer;background:#22263a;color:#7b829e">All</button>
    </div>
    <span id="line-count" style="font-size:12px;color:#7b829e;margin-left:auto"></span>
  </div>
  <pre id="log-output" style="margin:0;padding:14px 16px;font-size:12px;line-height:1.7;overflow-y:auto;max-height:65vh;font-family:'JetBrains Mono','Fira Code',monospace;color:#c9d1d9;white-space:pre-wrap;word-break:break-all"></pre>
</div>

<script>
let allLines = [];
let cleared = false;
let clearedFrom = 0;

function setFilter(val) {
  document.getElementById('filter-input').value = val;
  renderLines();
}

function colorLine(line) {
  if (line.includes(' ERROR ') || line.includes('Traceback') || line.includes('Exception'))
    return `<span style="color:#e85d5d">${escHtml(line)}</span>`;
  if (line.includes(' WARNING '))
    return `<span style="color:#f5a623">${escHtml(line)}</span>`;
  if (line.includes('=== Starting') || line.includes('=== All bands'))
    return `<span style="color:#7ab8f5;font-weight:600">${escHtml(line)}</span>`;
  if (line.includes('Associated to'))
    return `<span style="color:#3dd68c">${escHtml(line)}</span>`;
  if (line.includes('Failed to associate') || line.includes('Stalled'))
    return `<span style="color:#e85d5d">${escHtml(line)}</span>`;
  if (line.includes(' DEBUG '))
    return `<span style="color:#4a5568">${escHtml(line)}</span>`;
  if (line.includes('Done.'))
    return `<span style="color:#3dd68c">${escHtml(line)}</span>`;
  return `<span style="color:#c9d1d9">${escHtml(line)}</span>`;
}

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

function renderLines() {
  const filter = document.getElementById('filter-input').value.toLowerCase();
  const visibleLines = allLines.slice(clearedFrom);
  const filtered = filter ? visibleLines.filter(l => l.toLowerCase().includes(filter)) : visibleLines;
  document.getElementById('line-count').textContent = `${filtered.length} lines`;
  document.getElementById('log-output').innerHTML = filtered.map(colorLine).join('\n');
  if (document.getElementById('auto-scroll').checked) {
    const pre = document.getElementById('log-output');
    pre.scrollTop = pre.scrollHeight;
  }
}

function clearDisplay() {
  clearedFrom = allLines.length;
  renderLines();
}

async function fetchLog() {
  const lines = document.getElementById('lines-sel').value;
  try {
    const r = await fetch(`/api/log?lines=${lines}`);
    const data = await r.json();
    allLines = data.lines.map(l => l.trimEnd());
    renderLines();
    // Pulse the dot
    const dot = document.getElementById('refresh-dot');
    dot.style.background = '#4f83cc';
    setTimeout(() => dot.style.background = '#3dd68c', 300);
  } catch(e) {
    document.getElementById('log-output').textContent = 'Error fetching log: ' + e;
  }
}

document.getElementById('filter-input').addEventListener('input', renderLines);
document.getElementById('lines-sel').addEventListener('change', fetchLog);

fetchLog();
setInterval(fetchLog, 5000);
</script>
{% endblock %}