{% extends "layout.html" %}

{% block header_right %}
<label class="refresh-toggle" title="Auto-refresh every 30s">
  <div class="live-dot off" id="liveDot"></div>
  <span id="refreshLabel">Auto-refresh</span>
  <label class="toggle-switch">
    <input type="checkbox" id="autoRefreshToggle" onchange="toggleAutoRefresh(this.checked)">
    <span class="toggle-slider"></span>
  </label>
</label>
{% endblock %}

{% block content %}

  <!-- STATS -->
  <div class="stats">
    <div class="stat-card red">
      <span class="stat-label">Errors (24h)</span>
      <span class="stat-value red" id="statErrors">—</span>
      <span class="stat-sub">last 24 hours</span>
    </div>
    <div class="stat-card amber">
      <span class="stat-label">Warnings (24h)</span>
      <span class="stat-value amber" id="statWarnings">—</span>
      <span class="stat-sub">last 24 hours</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">Total stored</span>
      <span class="stat-value" id="statTotal">—</span>
      <span class="stat-sub">in stream</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">Latest error</span>
      <span class="stat-value" id="statLastError" style="font-size:15px;padding-top:6px">—</span>
      <span class="stat-sub" id="statLastErrorSub"></span>
    </div>
  </div>

  <!-- FILTERS -->
  <div class="filters">
    <div class="filter-group">
      <i class="fas fa-search" style="color:var(--gray);font-size:12px"></i>
      <input type="text" class="search-input" id="searchInput" placeholder="Search in message or error..." oninput="debounceLoad()" />
    </div>
    <div class="filter-group">
      <span class="filter-label">Level</span>
      <div class="level-chips">
        <button class="chip active" data-level="" onclick="setLevelChip(this)">All</button>
        <button class="chip" data-level="ERROR" onclick="setLevelChip(this)">Error</button>
        <button class="chip" data-level="WARNING" onclick="setLevelChip(this)">Warning</button>
      </div>
    </div>
    <div class="filter-group">
      <span class="filter-label">Event</span>
      <input type="text" id="eventFilter" placeholder="e.g. http_exception" style="width:180px" oninput="debounceLoad()" />
    </div>
    <div class="filters-right">
      <button class="btn btn-ghost" onclick="clearFilters()"><i class="fas fa-xmark"></i> Clear</button>
      <button class="btn btn-red" onclick="loadLogs(1)"><i class="fas fa-rotate-right"></i> Refresh</button>
    </div>
  </div>

  <!-- TABLE -->
  <div class="table-wrapper">
    <div class="table-header">
      <span class="table-title">
        <i class="fas fa-list-ul" style="color:var(--red)"></i>
        Log entries
      </span>
      <span class="table-count" id="tableCount">—</span>
    </div>
    <div class="table-scroll">
      <table>
        <thead>
          <tr>
            <th style="width:155px">Timestamp</th>
            <th style="width:90px">Level</th>
            <th style="width:190px">Event</th>
            <th>Message</th>
            <th style="width:200px">Endpoint</th>
            <th style="width:70px">Status</th>
            <th style="width:30px"></th>
          </tr>
        </thead>
        <tbody id="logsTableBody">
          <tr class="loading-row"><td colspan="7"><span class="spinner"></span></td></tr>
        </tbody>
      </table>
    </div>
    <div class="pagination" id="paginationBar" style="display:none">
      <span class="pagination-info" id="paginationInfo"></span>
      <div class="pagination-btns" id="paginationBtns"></div>
      <span class="pagination-info" id="paginationRight" style="margin-left:auto"></span>
    </div>
  </div>

  <!-- MODAL -->
  <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
    <div class="modal" id="modal">
      <div class="modal-head">
        <span class="modal-level" id="modalLevel"></span>
        <span class="modal-event" id="modalEvent"></span>
        <span class="modal-time"  id="modalTime"></span>
        <button class="modal-close" onclick="closeModalBtn()"><i class="fas fa-xmark"></i></button>
      </div>
      <div class="modal-body" id="modalBody"></div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<script>
  // ── Config injected by Jinja2 at serve time ──────────────────────────────
  const API_BASE = "{{ api_base }}";

  // ── State ─────────────────────────────────────────────────────────────────
  let currentPage      = 1;
  let totalPages       = 1;
  let currentLimit     = 15;
  let autoRefreshTimer = null;
  let debounceTimer    = null;
  let activeLevel      = '';
  let lastKnownTotal   = null;
  let activeRow        = null;

  // ── Boot ──────────────────────────────────────────────────────────────────
  loadLogs(1);
  loadStats();

  // ── STATS ──────────────────────────────────────────────────────────────────
  async function loadStats() {
    try {
      const res  = await fetch(`${API_BASE}/stats`);
      const data = await res.json();
      setStatFlash('statErrors',   data.errors_last_24h   ?? '—');
      setStatFlash('statWarnings', data.warnings_last_24h ?? '—');
      setStatFlash('statTotal',    (data.total_entries ?? 0).toLocaleString());
      if (data.newest_entry_ts) {
        const d = new Date(data.newest_entry_ts);
        document.getElementById('statLastError').textContent    = d.toLocaleTimeString();
        document.getElementById('statLastErrorSub').textContent = d.toLocaleDateString();
      }
    } catch (e) { /* non-critical */ }
  }

  // ── LOAD LOGS ──────────────────────────────────────────────────────────────
  async function loadLogs(page = 1) {
    currentPage = page;
    showLoading();
    const wrapper = document.querySelector('.table-wrapper');
    if (wrapper) wrapper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    const params = new URLSearchParams({ page, limit: currentLimit });
    const level  = activeLevel;
    const search = document.getElementById('searchInput').value;
    const event  = document.getElementById('eventFilter').value;
    if (level)  params.set('level',  level);
    if (search) params.set('search', search);
    if (event)  params.set('event',  event);
    try {
      const res  = await fetch(`${API_BASE}/logs?${params}`);
      const data = await res.json();
      renderTable(data);
    } catch (e) { showError(); }
  }

  // ── RENDER TABLE ───────────────────────────────────────────────────────────
  function renderTable(data) {
    const tbody    = document.getElementById('logsTableBody');
    totalPages     = data.pages;
    const newTotal = data.total ?? 0;
    document.getElementById('tableCount').textContent = `${newTotal.toLocaleString()} entries`;
    if (lastKnownTotal !== null && currentPage === 1 && newTotal > lastKnownTotal) {
      const diff = newTotal - lastKnownTotal;
      showToast(`${diff} new entr${diff === 1 ? 'y' : 'ies'} detected`, 'fa-bell');
    }
    lastKnownTotal = newTotal;
    if (!data.logs || !data.logs.length) {
      tbody.innerHTML = `<tr><td colspan="7">
        <div class="empty-state">
          <i class="fas fa-circle-check"></i>
          <p>No log entries found with the current filters</p>
        </div></td></tr>`;
      document.getElementById('paginationBar').style.display = 'none';
      return;
    }
    tbody.innerHTML = data.logs.map(l => `
      <tr class="level-${(l.level||'').toLowerCase()}" data-id="${esc(l.id)}" data-log="${escJson(l)}" onclick="openModalFromRow(this)">
        <td class="td-time">${formatRelativeDate(l.timestamp)}</td>
        <td>${levelBadge(l.level)}</td>
        <td><span class="badge-event">${esc(l.event || '—')}</span></td>
        <td class="td-message"><div class="td-message-text" title="${esc(l.message||'')}">${esc(l.message || '—')}</div></td>
        <td class="td-endpoint">${esc(l.endpoint || '—')}</td>
        <td>${statusBadge(l.http_status)}</td>
        <td style="color:var(--gray);font-size:11px"><i class="fas fa-chevron-right"></i></td>
      </tr>
    `).join('');
    renderPagination(data);
  }

  // ── PAGINATION ─────────────────────────────────────────────────────────────
  function renderPagination(data) {
    const bar   = document.getElementById('paginationBar');
    const info  = document.getElementById('paginationInfo');
    const btns  = document.getElementById('paginationBtns');
    const right = document.getElementById('paginationRight');
    if (!data.total) { bar.style.display = 'none'; return; }
    bar.style.display = 'flex';
    const from = ((data.page - 1) * data.limit) + 1;
    const to   = Math.min(data.page * data.limit, data.total);
    info.textContent  = `${from}–${to} of ${data.total.toLocaleString()}`;
    right.textContent = `Page ${data.page} of ${data.pages}`;
    if (!data.pages || data.pages <= 1) { btns.innerHTML = ''; return; }
    const pages = [];
    pages.push({ label: '<i class="fas fa-chevron-left"></i>', page: data.page - 1, disabled: data.page <= 1 });
    let start = Math.max(1, data.page - 2);
    let end   = Math.min(data.pages, start + 4);
    start = Math.max(1, end - 4);
    if (start > 1) pages.push({ label: '1', page: 1 });
    if (start > 2) pages.push({ label: '…', page: null });
    for (let i = start; i <= end; i++) pages.push({ label: i, page: i, active: i === data.page });
    if (end < data.pages - 1) pages.push({ label: '…', page: null });
    if (end < data.pages)     pages.push({ label: data.pages, page: data.pages });
    pages.push({ label: '<i class="fas fa-chevron-right"></i>', page: data.page + 1, disabled: data.page >= data.pages });
    btns.innerHTML = pages.map(p =>
      `<button class="pg-btn ${p.active ? 'active' : ''}" ${p.disabled || !p.page ? 'disabled' : ''} onclick="${p.page ? `loadLogs(${p.page})` : ''}">${p.label}</button>`
    ).join('');
  }

  // ── MODAL ──────────────────────────────────────────────────────────────────
  function openModalFromRow(row) {
    let log;
    try { log = JSON.parse(row.getAttribute('data-log')); } catch (e) { return; }
    if (activeRow) activeRow.classList.remove('row-active');
    activeRow = row;
    activeRow.classList.add('row-active');
    openModal(log);
  }
  function openModal(log) {
    document.getElementById('modalLevel').innerHTML  = levelBadge(log.level);
    document.getElementById('modalEvent').textContent = log.event || '—';
    document.getElementById('modalTime').textContent  = formatDate(log.timestamp);
    const body = document.getElementById('modalBody');
    body.innerHTML = `
      ${log.message ? `
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-message"></i> Message</div>
        <div class="detail-message">${esc(log.message)}</div>
      </div>` : ''}
      ${log.error ? `
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-circle-exclamation"></i> Error</div>
        <div class="detail-error">${esc(log.error)}</div>
      </div>` : ''}
      ${log.stack_trace ? `
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-layer-group"></i> Stack Trace</div>
        ${codeBlock(esc(log.stack_trace), 'stack')}
      </div>` : ''}
      ${log.request_body != null ? `
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-arrow-up-from-bracket"></i> Request Body</div>
        ${codeBlock(esc(typeof log.request_body === 'object' ? JSON.stringify(log.request_body, null, 2) : String(log.request_body)))}
      </div>` : ''}
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-info-circle"></i> Request Info</div>
        <div class="meta-grid">
          ${metaItem('Request ID',  log.request_id)}
          ${metaItem('Endpoint',    log.endpoint)}
          ${metaItem('Method',      log.http_method)}
          ${metaItem('HTTP Status', log.http_status)}
          ${metaItem('IP Address',  log.ip_address)}
          ${metaItem('Duration',    log.duration_ms != null ? log.duration_ms + ' ms' : null)}
        </div>
      </div>
      ${log.context ? `
      <div class="detail-section">
        <div class="detail-section-title"><i class="fas fa-brackets-curly"></i> Context</div>
        ${codeBlock(esc(JSON.stringify(log.context, null, 2)))}
      </div>` : ''}
    `;
    document.getElementById('modalOverlay').classList.add('open');
    document.body.style.overflow = 'hidden';
  }
  function closeModal(e) { if (e.target === document.getElementById('modalOverlay')) closeModalBtn(); }
  function closeModalBtn() {
    document.getElementById('modalOverlay').classList.remove('open');
    document.body.style.overflow = '';
    if (activeRow) { activeRow.classList.remove('row-active'); activeRow = null; }
  }

  // ── AUTO REFRESH ───────────────────────────────────────────────────────────
  function toggleAutoRefresh(on) {
    const dot   = document.getElementById('liveDot');
    const label = document.getElementById('refreshLabel');
    clearInterval(autoRefreshTimer);
    if (on) {
      dot.classList.remove('off');
      label.textContent = 'Live';
      autoRefreshTimer = setInterval(() => { loadLogs(currentPage); loadStats(); }, 30000);
    } else {
      dot.classList.add('off');
      label.textContent = 'Auto-refresh';
    }
  }

  // ── HELPERS ────────────────────────────────────────────────────────────────
  function debounceLoad() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => loadLogs(1), 400); }
  function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('eventFilter').value = '';
    activeLevel = '';
    document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
    const allChip = document.querySelector('.chip[data-level=""]');
    if (allChip) allChip.classList.add('active');
    loadLogs(1);
  }
  function setLevelChip(btn) {
    document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    activeLevel = btn.dataset.level;
    loadLogs(1);
  }
  function showLoading() {
    const skel = (w) => `<div class="skel" style="width:${w}"></div>`;
    const skRow = () => `<tr>
      <td class="td-time">${skel('96px')}</td>
      <td>${skel('52px')}</td>
      <td>${skel('110px')}</td>
      <td class="td-message">${skel('200px')}</td>
      <td class="td-endpoint">${skel('130px')}</td>
      <td>${skel('36px')}</td>
      <td></td>
    </tr>`;
    document.getElementById('logsTableBody').innerHTML = Array(6).fill(0).map(skRow).join('');
  }
  function showError() {
    document.getElementById('logsTableBody').innerHTML =
      `<tr><td colspan="7"><div class="empty-state">
        <i class="fas fa-triangle-exclamation" style="color:var(--red)"></i>
        <p>Failed to load logs. Check your connection.</p>
      </div></td></tr>`;
  }
  function levelBadge(level) {
    if (!level) return '';
    const l    = level.toLowerCase();
    const icon = l === 'error' ? 'fa-circle-xmark' : 'fa-triangle-exclamation';
    return `<span class="badge-level ${l}"><i class="fas ${icon}"></i>${level}</span>`;
  }
  function statusBadge(status) {
    if (!status) return '<span style="color:var(--gray)">—</span>';
    const color = status >= 500 ? 'var(--red-light)' : 'var(--amber)';
    return `<span style="color:${color}; font-family:var(--mono); font-size:12px">${status}</span>`;
  }
  function metaItem(key, val) {
    return `<div class="meta-item">
      <div class="meta-key">${esc(key)}</div>
      <div class="meta-val ${!val ? 'none' : ''}">${val ? esc(String(val)) : 'N/A'}</div>
    </div>`;
  }
  function formatDate(iso) {
    if (!iso) return '—';
    const d = new Date(iso);
    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
  }
  function esc(str) {
    return String(str ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function escJson(obj) {
    return JSON.stringify(obj).replace(/'/g,"&#39;").replace(/"/g,'&quot;');
  }
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeModalBtn();
    if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
      e.preventDefault();
      const s = document.getElementById('searchInput');
      if (s) { s.focus(); s.select(); }
    }
  });
</script>
{% endblock %}