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

{% block content %}
<div class="page-title">
  Dashboard
  <small>last {{ hours }}h</small>
  <div class="controls" style="display:inline-flex;margin-left:16px;margin-bottom:0">
    <label>Window:</label>
    <select onchange="location='/?hours='+this.value">
      {% for h in [1, 6, 12, 24, 48, 168] %}
        <option value="{{ h }}" {% if h == hours %}selected{% endif %}>
          {% if h < 24 %}{{ h }}h{% elif h == 24 %}24h (1 day){% elif h == 48 %}48h{% else %}7 days{% endif %}
        </option>
      {% endfor %}
    </select>
  </div>
</div>

{% if not summary %}
  <div class="card" style="color:var(--muted);font-size:14px;">
    No data yet. Click <strong>▶ Run now</strong> to trigger a test, or wait for the cron job.
  </div>
{% endif %}

{% for row in summary %}
  {% set is24 = row.band == '2.4GHz' %}
  <div class="band-header">
    <span class="band-badge {{ 'b24' if is24 else 'b5' }}">{{ row.band }}</span>
    <h2>{{ row.band }} band — {{ row.total }} runs</h2>
  </div>

  <div class="stat-grid">
    <div class="stat-card {{ 'green' if row.avg_ping_gw and row.avg_ping_gw < 5 else 'amber' if row.avg_ping_gw and row.avg_ping_gw < 20 else 'red' }}">
      <div class="label">Gateway ping</div>
      <div class="value">{{ '%.1f'|format(row.avg_ping_gw) if row.avg_ping_gw else '—' }}<span style="font-size:14px;font-weight:400"> ms</span></div>
      <div class="sub">{{ row.gw_fails }} fails</div>
    </div>

    <div class="stat-card {{ 'green' if row.avg_ping_ext and row.avg_ping_ext < 30 else 'amber' if row.avg_ping_ext and row.avg_ping_ext < 80 else 'red' }}">
      <div class="label">External ping ({{ cfg.external_ip }})</div>
      <div class="value">{{ '%.1f'|format(row.avg_ping_ext) if row.avg_ping_ext else '—' }}<span style="font-size:14px;font-weight:400"> ms</span></div>
      <div class="sub">avg over {{ hours }}h</div>
    </div>

    <div class="stat-card blue">
      <div class="label">Download</div>
      <div class="value">{{ '%.1f'|format(row.avg_dl) if row.avg_dl else '—' }}<span style="font-size:14px;font-weight:400"> Mbps</span></div>
      <div class="sub">avg speedtest</div>
    </div>

    <div class="stat-card blue">
      <div class="label">Upload</div>
      <div class="value">{{ '%.1f'|format(row.avg_ul) if row.avg_ul else '—' }}<span style="font-size:14px;font-weight:400"> Mbps</span></div>
      <div class="sub">avg speedtest</div>
    </div>

    <div class="stat-card {{ 'green' if row.avg_dns and row.avg_dns < 20 else 'amber' if row.avg_dns and row.avg_dns < 100 else 'red' }}">
      <div class="label">DNS resolve</div>
      <div class="value">{{ '%.0f'|format(row.avg_dns) if row.avg_dns else '—' }}<span style="font-size:14px;font-weight:400"> ms</span></div>
      <div class="sub">{{ row.dns_fails }} fails</div>
    </div>

    <div class="stat-card {{ 'green' if row.avg_curl and row.avg_curl < 300 else 'amber' if row.avg_curl and row.avg_curl < 1000 else 'red' }}">
      <div class="label">Webpage fetch</div>
      <div class="value">{{ '%.0f'|format(row.avg_curl) if row.avg_curl else '—' }}<span style="font-size:14px;font-weight:400"> ms</span></div>
      <div class="sub">curl to {{ cfg.curl_url | truncate(30) }}</div>
    </div>
  </div>
{% endfor %}

<!-- Quick recent runs table -->
<div class="card" style="margin-top:10px">
  <h3>Recent runs</h3>
  <div id="recent-table" style="margin-top:14px; overflow-x:auto;">
    <table>
      <thead>
        <tr>
          <th>Time</th><th>Band</th><th>SSID</th><th>Signal</th>
          <th>GW ping</th><th>Ext ping</th>
          <th>DL</th><th>UL</th><th>DNS</th><th>Curl</th><th>Status</th>
        </tr>
      </thead>
      <tbody id="recent-rows">
        <tr><td colspan="11" style="color:var(--muted)">Loading…</td></tr>
      </tbody>
    </table>
  </div>
</div>

<script>
const hours = {{ hours }};
async function loadRecent() {
  const r = await fetch(`/api/results?hours=${hours}&limit=30`);
  const data = await r.json();
  const tbody = document.getElementById('recent-rows');
  if (!data.length) { tbody.innerHTML = '<tr><td colspan="11" style="color:var(--muted)">No data in window.</td></tr>'; return; }
  const rows = [...data].reverse().slice(0, 30);
  tbody.innerHTML = rows.map(d => {
    const dt = new Date(d.ts * 1000);
    const label = dt.toLocaleDateString('en-GB',{day:'2-digit',month:'2-digit'}) + ' ' + dt.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit'});
    const cls = v => v == null ? 'fail' : '';
    const fmt = (v, dec=1) => v != null ? (+v).toFixed(dec) : '—';
    const ok = d.error ? `<span class="fail">Error</span>` : `<span class="ok">OK</span>`;
    return `<tr>
      <td>${label}</td>
      <td><span class="band-badge ${d.band==='2.4GHz'?'b24':'b5'}" style="font-size:10px">${d.band}</span></td>
      <td style="color:var(--muted)">${d.ssid||'—'}</td>
      <td class="${d.signal_dbm==null?'':d.signal_dbm>=-65?'ok':d.signal_dbm>=-75?'warn':'fail'}">${d.signal_dbm!=null?d.signal_dbm+' dBm':'—'}</td>
      <td class="${d.ping_gw_ms==null?'fail':d.ping_gw_ms>20?'warn':'ok'}">${fmt(d.ping_gw_ms)} ms</td>
      <td class="${d.ping_ext_ms==null?'fail':d.ping_ext_ms>80?'warn':'ok'}">${fmt(d.ping_ext_ms)} ms</td>
      <td>${fmt(d.dl_mbps)} Mbps</td>
      <td>${fmt(d.ul_mbps)} Mbps</td>
      <td class="${d.dns_ok===0?'fail':'ok'}">${fmt(d.dns_ms,0)} ms</td>
      <td class="${d.curl_ms==null?'fail':d.curl_ms>1000?'warn':'ok'}">${fmt(d.curl_ms,0)} ms</td>
      <td>${ok}${d.error?` <span style="color:var(--muted);font-size:11px">${d.error}</span>`:''}</td>
    </tr>`;
  }).join('');
}
loadRecent();
</script>
{% endblock %}