{% extends "base.html" %}
{% block title %}Logs — pngx-controller{% endblock %}
{% block content %}

<h2>Logs</h2>

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem;">
  <label style="flex:1; min-width:150px;">
    Replica
    <select id="filter-replica" onchange="applyFilters()">
      <option value="">All</option>
      {% for r in replicas %}
        <option value="{{ r.id }}">{{ r.name }}</option>
      {% endfor %}
    </select>
  </label>
  <label style="flex:1; min-width:120px;">
    Level
    <select id="filter-level" onchange="applyFilters()">
      <option value="">All</option>
      <option value="info">Info</option>
      <option value="warning">Warning</option>
      <option value="error">Error</option>
    </select>
  </label>
  <label style="flex:2; min-width:200px;">
    Search
    <input type="text" id="filter-q" placeholder="Full-text search…" oninput="debounceFilter()">
  </label>
  <button class="secondary outline" onclick="applyFilters()">Filter</button>
  <button class="contrast outline"
    hx-delete="/api/logs?older_than_days=90"
    hx-confirm="Delete logs older than 90 days?"
    hx-on::after-request="window.location.reload()">
    Clear old logs
  </button>
</div>

<!-- Live SSE tail -->
<details open id="live-section">
  <summary>Live log stream</summary>
  <div id="sse-log"
       hx-ext="sse"
       sse-connect="/api/logs/stream"
       style="font-family:monospace; font-size:0.8em; max-height:300px; overflow-y:auto; border:1px solid var(--pico-muted-border-color); padding:0.5rem; border-radius:0.5rem; background:var(--pico-code-background-color);">
    <div sse-swap="message" hx-swap="afterbegin">
      <span class="muted">Connecting to log stream…</span>
    </div>
  </div>
</details>

<hr>

<!-- Static log table -->
<div id="log-table-area">
  {% include "partials/log_table.html" %}
</div>

<script>
let debounceTimer;
function debounceFilter() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(applyFilters, 400);
}

function applyFilters() {
  const replica = document.getElementById('filter-replica').value;
  const level = document.getElementById('filter-level').value;
  const q = document.getElementById('filter-q').value;
  const params = new URLSearchParams();
  if (replica) params.set('replica_id', replica);
  if (level) params.set('level', level);
  if (q) params.set('q', q);

  htmx.ajax('GET', '/api/logs?' + params.toString(), {
    target: '#log-table-area',
    swap: 'innerHTML',
    handler: function(elt, info) {
      // render JSON as table
      const data = JSON.parse(info.xhr.responseText);
      const rows = data.map(l => `
        <tr class="log-entry-${l.level || 'info'}">
          <td><small>${l.created_at || ''}</small></td>
          <td><span class="badge badge-${l.level}">${l.level || ''}</span></td>
          <td>${l.replica_id || ''}</td>
          <td>${l.doc_id || ''}</td>
          <td>${l.message || ''}</td>
        </tr>`).join('');
      elt.innerHTML = `<table><thead><tr><th>Time</th><th>Level</th><th>Replica</th><th>Doc</th><th>Message</th></tr></thead><tbody>${rows}</tbody></table>`;
    }
  });
}

// Pretty-print SSE messages
document.body.addEventListener('htmx:sseMessage', function(e) {
  try {
    const data = JSON.parse(e.detail.data);
    const el = document.createElement('div');
    const color = data.level === 'error' ? '#f87171' : data.level === 'warning' ? '#fbbf24' : '#6ee7b7';
    el.style.color = color;
    el.innerHTML = `[${data.ts}] ${data.level?.toUpperCase()} ${data.replica_id ? '[r:'+data.replica_id+']' : ''} ${data.doc_id ? '[d:'+data.doc_id+']' : ''} ${data.message}`;
    const container = document.querySelector('#sse-log div[sse-swap]');
    if (container) {
      const first = container.querySelector('span.muted');
      if (first) first.remove();
      container.insertBefore(el, container.firstChild);
      // Keep max 200 entries
      while (container.children.length > 200) container.removeChild(container.lastChild);
    }
  } catch(err) {}
  return false; // prevent default HTMX swap
});
</script>

{% endblock %}