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

{% block content %}
<div class="page-title">Graphs</div>

<div class="controls">
  <label>Window:</label>
  <select id="hours-sel">
    {% for h, l in [(1,'1h'),(6,'6h'),(12,'12h'),(24,'24h'),(48,'48h'),(168,'7 days')] %}
      <option value="{{ h }}" {% if h == hours %}selected{% endif %}>{{ l }}</option>
    {% endfor %}
  </select>
  <label style="margin-left:12px">Band:</label>
  <select id="band-sel">
    <option value="all" {% if band=='all' %}selected{% endif %}>Both</option>
    <option value="2.4GHz" {% if band=='2.4GHz' %}selected{% endif %}>2.4 GHz</option>
    <option value="5GHz" {% if band=='5GHz' %}selected{% endif %}>5 GHz</option>
  </select>
  <button onclick="loadAll()" style="background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;">Refresh</button>
</div>

<div class="chart-grid">
  <div class="chart-wrap">
    <h4>Gateway ping (ms)</h4>
    <canvas id="c-ping-gw" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Signal strength (dBm)</h4>
    <canvas id="c-signal" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>External ping — {{ cfg.external_ip }} (ms)</h4>
    <canvas id="c-ping-ext" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Download speed (Mbps)</h4>
    <canvas id="c-dl" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Upload speed (Mbps)</h4>
    <canvas id="c-ul" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>DNS resolve time (ms)</h4>
    <canvas id="c-dns" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Webpage fetch time (ms)</h4>
    <canvas id="c-curl" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Gateway packet loss (%)</h4>
    <canvas id="c-loss-gw" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Speedtest ping (ms)</h4>
    <canvas id="c-ping-st" height="180"></canvas>
  </div>
</div>

<script>
const COLORS = {
  '2.4GHz': { line: '#2563eb', fill: 'rgba(37,99,235,0.08)' },
  '5GHz':   { line: '#16a34a', fill: 'rgba(22,163,74,0.08)' },
};

Chart.defaults.color = '#6b7490';
Chart.defaults.borderColor = '#dde2ea';
Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
Chart.defaults.font.size = 11;

const charts = {};

function makeChart(id, label, field, opts={}) {
  const ctx = document.getElementById(id).getContext('2d');
  charts[id] = new Chart(ctx, {
    type: 'line',
    data: { datasets: [] },
    options: {
      responsive: true,
      animation: false,
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: { position: 'top', labels: { boxWidth: 10, padding: 14, font: { size: 11 } } },
        tooltip: {
          callbacks: {
            label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y != null ? ctx.parsed.y.toFixed(opts.dec??1) : '—'} ${opts.unit??''}`
          }
        }
      },
      scales: {
        x: { type: 'category', ticks: { maxTicksLimit: 8, maxRotation: 0 }, grid: { color: '#eef1f5' } },
        y: {
          beginAtZero: opts.beginAtZero ?? true,
          grid: { color: '#eef1f5' },
          ticks: { callback: v => v + (opts.unit ? ' ' + opts.unit : '') }
        }
      }
    }
  });
}

makeChart('c-ping-gw',  'Gateway ping',     'ping_gw_ms',   { unit: 'ms',   dec: 1 });
makeChart('c-signal',   'Signal strength',  'signal_dbm',   { unit: 'dBm',  dec: 0, beginAtZero: false });
makeChart('c-ping-ext', 'External ping',    'ping_ext_ms',  { unit: 'ms',   dec: 1 });
makeChart('c-dl',       'Download',         'dl_mbps',      { unit: 'Mbps', dec: 1 });
makeChart('c-ul',       'Upload',           'ul_mbps',      { unit: 'Mbps', dec: 1 });
makeChart('c-dns',      'DNS resolve',      'dns_ms',       { unit: 'ms',   dec: 0 });
makeChart('c-curl',     'Webpage fetch',    'curl_ms',      { unit: 'ms',   dec: 0 });
makeChart('c-loss-gw',  'GW packet loss',   'ping_gw_loss', { unit: '%',    dec: 0 });
makeChart('c-ping-st',  'Speedtest ping',   'ping_st_ms',   { unit: 'ms',   dec: 1 });

const FIELD_MAP = {
  'c-ping-gw':  'ping_gw_ms',
  'c-signal':   'signal_dbm',
  'c-ping-ext': 'ping_ext_ms',
  'c-dl':       'dl_mbps',
  'c-ul':       'ul_mbps',
  'c-dns':      'dns_ms',
  'c-curl':     'curl_ms',
  'c-loss-gw':  'ping_gw_loss',
  'c-ping-st':  'ping_st_ms',
};

function fmtTime(ts) {
  const d = new Date(ts * 1000);
  return d.toLocaleDateString('en-GB',{day:'2-digit',month:'2-digit'}) + ' ' +
         d.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit'});
}

function populateChart(id, byBand) {
  const chart = charts[id];
  const field = FIELD_MAP[id];
  const datasets = [];
  for (const [band, rows] of Object.entries(byBand)) {
    const c = COLORS[band] || { line: '#7b829e', fill: 'rgba(123,130,158,0.1)' };
    datasets.push({
      label: band,
      data: rows.map(r => r[field] ?? null),
      borderColor: c.line,
      backgroundColor: c.fill,
      borderWidth: 1.5,
      pointRadius: rows.length > 100 ? 0 : 2,
      pointHoverRadius: 4,
      fill: true,
      tension: 0.3,
      spanGaps: true,
    });
  }
  chart.data.labels = Object.values(byBand)[0]?.map(r => fmtTime(r.ts)) || [];
  chart.data.datasets = datasets;
  chart.update('none');
}

async function loadAll() {
  const hours = document.getElementById('hours-sel').value;
  const band  = document.getElementById('band-sel').value;
  const url   = `/api/results?hours=${hours}` + (band !== 'all' ? `&band=${encodeURIComponent(band)}` : '');
  const rows  = await fetch(url).then(r => r.json());

  // Group by band
  const byBand = {};
  for (const r of rows) {
    if (!byBand[r.band]) byBand[r.band] = [];
    byBand[r.band].push(r);
  }
  // Sort each band by time
  for (const b of Object.keys(byBand)) byBand[b].sort((a,b) => a.ts - b.ts);

  for (const id of Object.keys(FIELD_MAP)) {
    populateChart(id, byBand);
  }
}

// Reload when controls change
document.getElementById('hours-sel').addEventListener('change', loadAll);
document.getElementById('band-sel').addEventListener('change', loadAll);

loadAll();
</script>
{% endblock %}