{% extends "layout.html" %}

{% block header_right %}
<label class="refresh-toggle" title="Auto-refresh every 10s">
  <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 %}

  <!-- SUMMARY STATS (populated by JS) -->
  <div class="stats">
    <div class="stat-card green">
      <span class="stat-label">Total Requests</span>
      <span class="stat-value green" id="statTotal">—</span>
      <span class="stat-sub">since last restart</span>
    </div>
    <div class="stat-card red">
      <span class="stat-label">Total Errors</span>
      <span class="stat-value red" id="statErrors">—</span>
      <span class="stat-sub">4xx + 5xx responses</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">Endpoints</span>
      <span class="stat-value" id="statEndpoints">—</span>
      <span class="stat-sub">tracked routes</span>
    </div>
    <div class="stat-card amber">
      <span class="stat-label">Overall Error Rate</span>
      <span class="stat-value amber" id="statErrorRate">—</span>
      <span class="stat-sub">% of requests</span>
    </div>
  </div>

  <!-- METRICS TABLE -->
  <div class="table-wrapper">
    <div class="table-header">
      <span class="table-title">
        <i class="fas fa-chart-simple" style="color:var(--red)"></i>
        Endpoint Metrics
      </span>
      <div style="display:flex;align-items:center;gap:10px">
        <span class="table-count" id="tableCount">—</span>
        <button class="btn btn-red" onclick="loadMetrics()" style="padding:4px 12px">
          <i class="fas fa-rotate-right"></i> Refresh
        </button>
      </div>
    </div>
    <div class="table-scroll">
      <table>
        <thead>
          <tr>
            <th>Endpoint</th>
            <th style="text-align:right;width:110px">Requests</th>
            <th style="text-align:right;width:90px">Errors</th>
            <th style="text-align:right;width:110px">Error Rate</th>
            <th style="text-align:right;width:130px">Avg Latency</th>
            <th style="text-align:right;width:130px">Max Latency</th>
          </tr>
        </thead>
        <tbody id="metricsTableBody">
          <tr class="loading-row"><td colspan="6"><span class="spinner"></span></td></tr>
        </tbody>
      </table>
    </div>
    <div class="pagination" id="metricsPagination" style="display:none">
      <span class="pagination-info" id="metricsPageInfo"></span>
      <div class="pagination-btns" id="metricsPageBtns"></div>
    </div>
    <div id="capacityWarning" style="display:none;padding:10px 20px;border-top:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.06);font-size:12px;color:var(--amber)">
      <i class="fas fa-triangle-exclamation" style="margin-right:6px"></i>
      <strong>Endpoint cap reached.</strong> New routes are being dropped from metrics.
      Call <code style="font-size:11px;background:#1a1a1a;padding:1px 5px;border-radius:3px">metrics.reset()</code> or restart to clear.
    </div>
    <div style="padding:10px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--gray)">
      <i class="fas fa-circle-info" style="margin-right:6px"></i>
      Metrics are in-process aggregates. Data resets on server restart.
      Rows colored <span style="color:var(--amber)">amber</span> = error rate &gt; 5% &nbsp;|&nbsp;
      <span style="color:var(--red-light)">red</span> = error rate &gt; 20%.
    </div>
  </div>

{% endblock %}

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

  // ── State ─────────────────────────────────────────────────────────────────
  let autoRefreshTimer = null;
  let allEndpoints     = [];
  let currentPage      = 1;
  const PAGE_SIZE      = 15;

  // ── Boot ──────────────────────────────────────────────────────────────────
  loadMetrics();

  // ── LOAD METRICS ───────────────────────────────────────────────────────────
  async function loadMetrics() {
    showLoading();
    try {
      const res  = await fetch(`${API_BASE}/metrics`);
      const data = await res.json();
      renderMetrics(data);
    } catch (e) {
      showError();
    }
  }

  // ── RENDER ─────────────────────────────────────────────────────────────────
  function renderMetrics(data) {
    allEndpoints    = data.endpoints || [];
    const total     = data.total_requests ?? 0;
    const errors    = data.total_errors   ?? 0;
    const rate      = total > 0 ? (errors / total * 100).toFixed(1) : '0.0';

    document.getElementById('statTotal').textContent      = total.toLocaleString();
    document.getElementById('statErrors').textContent     = errors.toLocaleString();
    document.getElementById('statEndpoints').textContent  = allEndpoints.length;
    document.getElementById('statErrorRate').textContent  = rate + '%';
    document.getElementById('capacityWarning').style.display = data.at_capacity ? 'block' : 'none';
    document.getElementById('tableCount').textContent     =
      `${allEndpoints.length} endpoint${allEndpoints.length === 1 ? '' : 's'}`;

    currentPage = 1;
    renderPage(currentPage);
  }

  // ── RENDER PAGE ────────────────────────────────────────────────────────────
  function renderPage(page) {
    currentPage      = page;
    const tbody      = document.getElementById('metricsTableBody');
    const pagDiv     = document.getElementById('metricsPagination');
    const totalPages = Math.ceil(allEndpoints.length / PAGE_SIZE);
    const start      = (page - 1) * PAGE_SIZE;
    const slice      = allEndpoints.slice(start, start + PAGE_SIZE);

    if (!allEndpoints.length) {
      tbody.innerHTML = `<tr><td colspan="6">
        <div class="empty-state">
          <i class="fas fa-chart-simple"></i>
          <p>No metrics yet — make some requests to your app.</p>
        </div></td></tr>`;
      pagDiv.style.display = 'none';
      return;
    }

    tbody.innerHTML = slice.map(e => {
      const rowClass  = e.error_rate > 20 ? 'metric-crit' : e.error_rate > 5 ? 'metric-warn' : '';
      const rateClass = e.error_rate > 20 ? 'rate-crit'  : e.error_rate > 5 ? 'rate-warn'   : 'rate-ok';
      const avgClass  = e.avg_latency_ms  > 500  ? 'lat-crit' : e.avg_latency_ms  > 200 ? 'lat-warn' : 'lat-ok';
      const maxClass  = e.max_latency_ms  > 1000 ? 'lat-crit' : e.max_latency_ms  > 500 ? 'lat-warn' : 'lat-ok';
      return `<tr class="${rowClass}">
        <td class="td-endpoint" style="color:var(--white)">${esc(e.endpoint)}</td>
        <td class="td-num">${e.count.toLocaleString()}</td>
        <td class="td-num">${e.errors.toLocaleString()}</td>
        <td class="td-num"><span class="${rateClass}">${e.error_rate}%</span></td>
        <td class="td-num"><span class="${avgClass}">${e.avg_latency_ms} ms</span></td>
        <td class="td-num"><span class="${maxClass}">${e.max_latency_ms} ms</span></td>
      </tr>`;
    }).join('');

    // pagination bar
    if (totalPages <= 1) { pagDiv.style.display = 'none'; return; }
    pagDiv.style.display = 'flex';
    const from = start + 1;
    const to   = Math.min(start + PAGE_SIZE, allEndpoints.length);
    document.getElementById('metricsPageInfo').textContent =
      `Showing ${from}–${to} of ${allEndpoints.length}`;
    renderPaginationBtns(page, totalPages);
  }

  // ── PAGINATION BUTTONS ─────────────────────────────────────────────────────
  function renderPaginationBtns(page, totalPages) {
    const container = document.getElementById('metricsPageBtns');
    const pages = pagesWindow(page, totalPages);
    let html = `<button class="pg-btn" ${page===1?'disabled':''} onclick="renderPage(${page-1})">
      <i class="fas fa-chevron-left"></i></button>`;
    pages.forEach(p => {
      if (p === '…') {
        html += `<button class="pg-btn" disabled>…</button>`;
      } else {
        html += `<button class="pg-btn ${p===page?'active':''}" onclick="renderPage(${p})">${p}</button>`;
      }
    });
    html += `<button class="pg-btn" ${page===totalPages?'disabled':''} onclick="renderPage(${page+1})">
      <i class="fas fa-chevron-right"></i></button>`;
    container.innerHTML = html;
  }

  function pagesWindow(current, total) {
    if (total <= 7) return Array.from({length: total}, (_, i) => i + 1);
    const pages = [1];
    if (current > 3) pages.push('…');
    for (let p = Math.max(2, current-1); p <= Math.min(total-1, current+1); p++) pages.push(p);
    if (current < total - 2) pages.push('…');
    pages.push(total);
    return pages;
  }

  // ── 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 (10s)';
      autoRefreshTimer = setInterval(loadMetrics, 10000);
    } else {
      dot.classList.add('off');
      label.textContent = 'Auto-refresh';
    }
  }

  // ── HELPERS ────────────────────────────────────────────────────────────────
  function showLoading() {
    document.getElementById('metricsTableBody').innerHTML =
      `<tr class="loading-row"><td colspan="6"><span class="spinner"></span></td></tr>`;
  }
  function showError() {
    document.getElementById('metricsTableBody').innerHTML =
      `<tr><td colspan="6"><div class="empty-state">
        <i class="fas fa-triangle-exclamation" style="color:var(--red)"></i>
        <p>Failed to load metrics. Check your connection.</p>
      </div></td></tr>`;
  }
  function esc(str) {
    return String(str ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
</script>
{% endblock %}