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

{% block content %}
<div class="page-title" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
  <span>Spectrum Analyser</span>
  <div style="display:flex;align-items:center;gap:12px">
    <span id="scan-age" style="font-size:13px;color:var(--muted)"></span>
    <button onclick="loadSpectrum()" style="background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px">↻ Refresh</button>
  </div>
</div>

<!-- Channel graphs -->
<style>
@media (max-width: 768px) {
  .spectrum-grid { grid-template-columns: 1fr !important; }
}
</style>

<div class="spectrum-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px">
  <div class="chart-wrap">
    <h4>2.4 GHz channels (1–13)</h4>
    <canvas id="c-24" height="200"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>5 GHz channels</h4>
    <canvas id="c-5" height="200"></canvas>
  </div>
</div>

<!-- Network table -->
<div class="card" style="margin-bottom:24px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px">
    <h3>Nearby networks</h3>
    <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
      <label style="font-size:13px;color:var(--muted)">Band:</label>
      <select id="band-filter" onchange="renderTable()" style="background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;font-size:13px">
        <option value="all">All</option>
        <option value="2.4GHz">2.4 GHz</option>
        <option value="5GHz">5 GHz</option>
      </select>
      <input id="search" type="text" placeholder="Search SSID…" oninput="renderTable()"
        style="background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;font-size:13px;width:160px">
    </div>
  </div>
  <div style="overflow-x:auto">
    <table id="net-table">
      <thead>
        <tr>
          <th>SSID</th>
          <th>BSSID</th>
          <th>Band</th>
          <th>Channel</th>
          <th>Width</th>
          <th>Signal</th>
          <th>Quality</th>
          <th>Security</th>
          <th>Interference</th>
        </tr>
      </thead>
      <tbody id="net-body">
        <tr><td colspan="9" style="color:var(--muted)">Loading…</td></tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Interferers summary -->
<div class="card" id="interference-card" style="display:none">
  <h3 style="margin-bottom:12px">⚠️ Channel interference warnings</h3>
  <div id="interference-list" style="font-size:14px;line-height:2"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
Chart.register(Chart.Filler);
Chart.defaults.color = '#6b7490';
Chart.defaults.borderColor = '#dde2ea';
Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
Chart.defaults.font.size = 11;

let allNetworks = [];
let scanTs = null;

// Our SSIDs (injected from config)
const ourSSIDs = new Set([
  "{{ cfg.ssid_24 }}",
  "{{ cfg.ssid_5 }}"
].filter(Boolean));

// Channel occupancy chart
function makeSpectrumChart(id, labels, datasets) {
  const ctx = document.getElementById(id).getContext('2d');
  return new Chart(ctx, {
    type: 'line',
    data: { labels, datasets },
    options: {
      responsive: true,
      animation: false,
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: { position: 'top', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
        tooltip: {
          callbacks: {
            label: ctx => ctx.raw !== null ? `${ctx.dataset.label}: ${ctx.raw} dBm` : null,
            filter: item => item.raw !== null,
          }
        }
      },
      scales: {
        x: { grid: { color: '#eef1f5' }, ticks: { font: { size: 10 } } },
        y: {
          grid: { color: '#eef1f5' },
          title: { display: true, text: 'Signal (dBm)' },
          min: -100,
          max: -20,
          ticks: { callback: v => v + ' dBm' }
        }
      }
    }
  });
}

function buildSpectrumDataset(ssid, channel, channelWidth, signalDbm, isOurs, totalChannels) {
  const halfMhz = (channelWidth || 20) / 2;
  const halfCh  = halfMhz / 5;
  const floor   = -100;

  const data = totalChannels.map(ch => {
    const dist = Math.abs(ch - channel);
    if (dist > halfCh) return floor;
    // Cosine bell: noise floor at edges, peak signal at centre
    const taper = Math.cos((dist / halfCh) * (Math.PI / 2));
    return Math.round(floor + (signalDbm - floor) * taper);
  });

  const colour = isOurs
    ? (ssid && ssid.includes('5G') ? '22,163,74' : '37,99,235')
    : '107,116,144';

  return {
    label:            ssid || '(hidden)',
    data,
    borderColor:      `rgba(${colour},${isOurs ? 1 : 0.6})`,
    backgroundColor:  `rgba(${colour},${isOurs ? 0.2 : 0.08})`,
    borderWidth:      isOurs ? 2.5 : 1.5,
    fill:             { target: { value: floor }, above: `rgba(${colour},${isOurs ? 0.2 : 0.08})` },
    tension:          0.4,
    pointRadius:      0,
    pointHoverRadius: 4,
    spanGaps:         false,
  };
}

let chart24 = null, chart5 = null;

function updateCharts(networks) {
  // ── 2.4 GHz ──
  const ch24    = Array.from({length: 13}, (_, i) => i + 1);
  const nets24  = networks.filter(n => n.band === '2.4GHz');
  const ssids24 = [...new Map(nets24.map(n => [n.bssid, n])).values()]; // unique by bssid

  const ds24 = ssids24.map(n =>
    buildSpectrumDataset(n.ssid, n.channel, n.channel_width, n.signal_dbm,
                         n.our_ssid, ch24, 1)
  );

  // ── 5 GHz ──
  const nets5  = networks.filter(n => n.band === '5GHz');
  // Build a dense channel list spanning all detected channels
  const minCh5 = nets5.length ? Math.min(...nets5.map(n => n.channel)) - 4 : 36;
  const maxCh5 = nets5.length ? Math.max(...nets5.map(n => n.channel)) + 4 : 48;
  // 5GHz channels increment by 4
  const ch5 = [];
  for (let c = minCh5; c <= maxCh5; c += 4) ch5.push(c);

  const ssids5 = [...new Map(nets5.map(n => [n.bssid, n])).values()];
  const ds5    = ssids5.map(n =>
    buildSpectrumDataset(n.ssid, n.channel, n.channel_width, n.signal_dbm,
                         n.our_ssid, ch5, minCh5)
  );

  if (chart24) chart24.destroy();
  if (chart5)  chart5.destroy();
  chart24 = makeSpectrumChart('c-24', ch24.map(c => 'Ch ' + c), ds24);
  chart5  = makeSpectrumChart('c-5',  ch5.map(c => 'Ch ' + c), ds5.length ? ds5 : []);
}

function signalBadge(dbm) {
  if (dbm === null) return '—';
  const cls = dbm >= -60 ? 'ok' : dbm >= -75 ? 'warn' : 'fail';
  return `<span class="${cls}">${dbm} dBm</span>`;
}

function qualityBar(q) {
  if (q === null) return '—';
  const colour = q >= 66 ? '#16a34a' : q >= 33 ? '#d97706' : '#dc2626';
  return `<div style="display:flex;align-items:center;gap:6px">
    <div style="width:60px;height:6px;background:#eef1f5;border-radius:3px;overflow:hidden">
      <div style="width:${q}%;height:100%;background:${colour};border-radius:3px"></div>
    </div>
    <span style="font-size:11px;color:var(--muted)">${q}%</span>
  </div>`;
}

function renderTable() {
  const bandF   = document.getElementById('band-filter').value;
  const search  = document.getElementById('search').value.toLowerCase();
  const tbody   = document.getElementById('net-body');

  let nets = allNetworks;
  if (bandF !== 'all') nets = nets.filter(n => n.band === bandF);
  if (search) nets = nets.filter(n => (n.ssid || '').toLowerCase().includes(search) || (n.bssid || '').toLowerCase().includes(search));

  // Sort: ours first, then by signal
  nets = nets.sort((a, b) => {
    if (b.our_ssid !== a.our_ssid) return b.our_ssid - a.our_ssid;
    return b.signal_dbm - a.signal_dbm;
  });

  if (!nets.length) {
    tbody.innerHTML = '<tr><td colspan="9" style="color:var(--muted)">No networks found.</td></tr>';
    return;
  }

  tbody.innerHTML = nets.map(n => {
    const isOurs = n.our_ssid;
    const style  = isOurs ? 'background:#eff6ff;' : '';
    const ssidCell = `${n.ssid || '<em style="color:var(--muted)">(hidden)</em>'}${isOurs ? ' <span style="font-size:10px;background:#dbeafe;color:#1d4ed8;padding:1px 6px;border-radius:10px;font-weight:600">OURS</span>' : ''}`;
    return `<tr style="${style}">
      <td>${ssidCell}</td>
      <td style="font-family:monospace;font-size:11px;color:var(--muted)">${n.bssid || '—'}</td>
      <td><span class="band-badge ${n.band === '2.4GHz' ? 'b24' : 'b5'}" style="font-size:10px">${n.band || '—'}</span></td>
      <td>${n.channel ?? '—'}</td>
      <td>${n.channel_width ? n.channel_width + ' MHz' : '—'}</td>
      <td>${signalBadge(n.signal_dbm)}</td>
      <td>${qualityBar(n.quality)}</td>
      <td>${n.security || '—'}</td>
      <td>${getInterference(n, nets)}</td>
    </tr>`;
  }).join('');
}

function getInterference(net, allNets) {
  if (!net.channel || !net.band) return '—';
  const warnings = [];

  if (net.band === '2.4GHz') {
    // Non-overlapping channels: 1, 6, 11
    const nonOverlapping = [1, 6, 11];
    if (!nonOverlapping.includes(net.channel)) {
      warnings.push(`<span class="warn">Non-standard ch</span>`);
    }
    // Find overlapping networks (within 4 channels)
    const overlapping = allNets.filter(n =>
      n !== net && n.band === '2.4GHz' && n.bssid !== net.bssid &&
      Math.abs((n.channel || 0) - net.channel) < 5
    );
    if (overlapping.length > 0) {
      warnings.push(`<span class="fail">${overlapping.length} overlap</span>`);
    }
  } else {
    // 5GHz — same channel conflict
    const same = allNets.filter(n =>
      n !== net && n.band === '5GHz' && n.channel === net.channel && n.bssid !== net.bssid
    );
    if (same.length > 0) {
      warnings.push(`<span class="warn">${same.length} co-channel</span>`);
    }
  }

  return warnings.length ? warnings.join(' ') : '<span class="ok">Clear</span>';
}

function showInterferenceSummary(networks) {
  const warnings = [];
  const nets24 = networks.filter(n => n.band === '2.4GHz');
  const ourNets = networks.filter(n => n.our_ssid);

  for (const net of ourNets) {
    if (!net.channel) continue;
    if (net.band === '2.4GHz') {
      const nonOverlapping = [1, 6, 11];
      if (!nonOverlapping.includes(net.channel)) {
        warnings.push(`<div>⚠️ <strong>${net.ssid}</strong> is on channel ${net.channel} — consider switching to channel 1, 6, or 11 to avoid overlap.</div>`);
      }
      const overlapping = nets24.filter(n =>
        n.bssid !== net.bssid && Math.abs((n.channel || 0) - net.channel) < 5
      );
      if (overlapping.length > 0) {
        const names = overlapping.map(n => n.ssid || n.bssid).join(', ');
        warnings.push(`<div>⚠️ <strong>${net.ssid}</strong> (ch ${net.channel}) overlaps with: ${names}</div>`);
      }
    }
    if (net.band === '5GHz') {
      const same = networks.filter(n =>
        n.band === '5GHz' && n.channel === net.channel && n.bssid !== net.bssid
      );
      if (same.length > 0) {
        warnings.push(`<div>⚠️ <strong>${net.ssid}</strong> shares channel ${net.channel} with ${same.length} other network(s).</div>`);
      }
    }
  }

  const card = document.getElementById('interference-card');
  const list = document.getElementById('interference-list');
  if (warnings.length) {
    card.style.display = 'block';
    list.innerHTML = warnings.join('');
  } else {
    card.style.display = 'none';
  }
}

async function loadSpectrum() {
  const r = await fetch('/api/spectrum');
  allNetworks = await r.json();

  if (!allNetworks.length) {
    document.getElementById('net-body').innerHTML =
      '<tr><td colspan="9" style="color:var(--muted)">No scan data yet — run a test cycle to populate.</td></tr>';
    return;
  }

  scanTs = allNetworks[0]?.ts;
  if (scanTs) {
    const d = new Date(scanTs * 1000);
    document.getElementById('scan-age').textContent =
      'Last scan: ' + d.toLocaleDateString('en-GB') + ' ' + d.toLocaleTimeString('en-GB', {hour:'2-digit',minute:'2-digit'});
  }

  updateCharts(allNetworks);
  renderTable();
  showInterferenceSummary(allNetworks);
}

loadSpectrum();
// Auto-refresh every 60s
setInterval(loadSpectrum, 60000);
</script>
{% endblock %}