{% extends "base.html" %}
{% block title %}VPC Atlas · Changes on the diagram{% endblock %}
{% block body %}
<style>
  .diff-layout { display: grid; gap: 16px; max-width: 1400px; margin: 0 auto; padding: 16px 20px 32px; }
  .diff-range { margin: 0; color: var(--muted); }
  .viewer-pages { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
  .viewer-pages select {
    max-width: 320px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
  }
  @media (max-width: 900px) { .diff-layout { padding: 12px; } }
</style>
<header class="topbar">
  <div class="brand">
    <svg class="logo" viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
      <rect width="32" height="32" rx="6" fill="#ff9900"/>
      <path d="M16 11v5m0 0-6 5m6-5 6 5" stroke="#232f3e" stroke-width="1.8" fill="none" stroke-linecap="round"/>
      <circle cx="16" cy="9" r="3.2" fill="#232f3e"/>
      <circle cx="9" cy="23" r="3.2" fill="#232f3e"/>
      <circle cx="23" cy="23" r="3.2" fill="#232f3e"/>
    </svg>
    <h1>VPC Atlas</h1>
    <span class="badge">v{{ version }}</span>
  </div>
  <div class="topbar-meta">
    <span class="meta-item">Changes on the diagram</span>
  </div>
  <div class="topbar-actions">
    <a id="history-link" class="btn" href="{{ view.history_url }}">History</a>
    <a id="diagrams-link" class="btn" href="{{ base_path }}/">Diagrams</a>
  </div>
</header>

<main class="diff-layout">
  <section id="viewer-panel" class="panel" aria-labelledby="diagram-title" data-viewer-url="{{ viewer_url }}">
    <div class="panel-head">
      <h2 id="diagram-title">{{ view.pages[0].title if view.pages else 'Diagram' }}</h2>
      <div class="panel-actions">
        <label class="viewer-pages">Page
          <select id="viewer-page" aria-label="Diagram page">
            {% for group in view.groups %}
            <optgroup label="{{ group.title }}">
              {% for page in group.pages %}
              <option value="{{ page.key }}" data-url="{{ page.url }}" data-title="{{ page.title }}">{{ page.title }}</option>
              {% endfor %}
            </optgroup>
            {% endfor %}
          </select>
        </label>
        <a id="dl-drawio" class="btn" href="{{ view.pages[0].url if view.pages else '#' }}" download>Download .drawio</a>
        <a id="dl-diff-json" class="btn" href="{{ view.json_url }}" download>Download diff (.json)</a>
      </div>
    </div>
    <p id="diff-range" class="diff-range">
      Changes from <time datetime="{{ view.older.generated_at }}">{{ view.older.generated_label }}</time> (<code>{{ view.older.snapshot_id }}</code>)
      to <time datetime="{{ view.newer.generated_at }}">{{ view.newer.generated_label }}</time> (<code>{{ view.newer.snapshot_id }}</code>):
      what was added is framed in green, what changed in orange, and the legend of each page counts what was removed.
    </p>
    <div id="viewer-host" class="viewer-host" aria-live="polite">
      <p class="viewer-message">{% if view.pages %}Drawing the changes…{% else %}This snapshot has no diagram pages.{% endif %}</p>
    </div>
    <p id="diagram-fingerprint" class="fingerprint" aria-live="polite" hidden>diagram sha256:<code id="diagram-sha256"></code> · snapshot <code id="diagram-snapshot">{{ view.newer.snapshot_id }}</code><span id="diagram-mismatch" class="fingerprint-alert" hidden> · the file received does not match the hash the server sent</span></p>
    <p class="hint">
      Drawn in your browser by the diagrams.net viewer, from the very file the download button serves: the page of the newer snapshot with the changes since the older one marked on it.
      A page is drawn when you open it, which can take a few seconds on a large network.
    </p>
  </section>
</main>

<noscript>
  <p class="noscript">This page needs JavaScript to draw the diagrams. The files are still available:
    {% for page in view.pages %}<a href="{{ page.url }}">{{ page.title }}</a>{% if not loop.last %}, {% endif %}{% endfor %}.</p>
</noscript>

<script nonce="{{ csp_nonce }}">
(() => {
  'use strict';

  const panel = document.getElementById('viewer-panel');
  const select = document.getElementById('viewer-page');
  const host = document.getElementById('viewer-host');
  if (!panel || !select || !host) return;
  const VIEWER_TIMEOUT_MS = 15000;
  const byId = (id) => document.getElementById(id);
  const state = { selection: 0 };

  function setMessage(message, kind = 'info') {
    const paragraph = document.createElement('p');
    paragraph.className = 'viewer-message';
    paragraph.dataset.kind = kind;
    paragraph.textContent = message;
    host.replaceChildren(paragraph);
  }

  // The diagrams.net viewer is fetched when the first diagram is drawn, not with the page.
  function viewerReady() {
    if (!byId('viewer-script')) {
      const script = document.createElement('script');
      script.id = 'viewer-script';
      script.src = panel.dataset.viewerUrl;
      script.async = true;
      document.head.append(script);
    }
    const started = performance.now();
    return new Promise((resolve, reject) => {
      (function check() {
        if (window.GraphViewer) {
          resolve(window.GraphViewer);
        } else if (performance.now() - started > VIEWER_TIMEOUT_MS) {
          reject(new Error('the diagrams.net viewer did not load (is viewer.diagrams.net reachable from this browser?)'));
        } else {
          setTimeout(check, 150);
        }
      })();
    });
  }

  async function sha256Hex(buffer) {
    // crypto.subtle exists only in secure contexts (https or localhost); over plain http the hash is not re-measured.
    if (!window.crypto?.subtle) return null;
    const digest = await window.crypto.subtle.digest('SHA-256', buffer);
    return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join('');
  }

  // The viewer draws the file the "Download .drawio" button serves: same route, same bytes.
  async function drawPage() {
    const option = select.selectedOptions[0];
    if (!option) return;
    const token = ++state.selection;
    const url = option.dataset.url;
    byId('dl-drawio').href = url;
    byId('diagram-title').textContent = option.dataset.title || option.textContent;
    byId('diagram-fingerprint').hidden = true;
    setMessage('Drawing the changes…');
    try {
      const [viewer, response] = await Promise.all([
        viewerReady(),
        fetch(url, { credentials: 'same-origin', cache: 'no-store' }),
      ]);
      if (!response.ok) throw new Error(`the server answered ${response.status}`);
      const bytes = await response.arrayBuffer();
      const xml = new TextDecoder('utf-8').decode(bytes);
      const received = await sha256Hex(bytes);
      if (token !== state.selection) return;
      const node = document.createElement('div');
      node.className = 'mxgraph';
      node.setAttribute(
        'data-mxgraph',
        JSON.stringify({
          highlight: '#0000ff',
          nav: true,
          resize: true,
          border: 8,
          toolbar: 'zoom pages lightbox',
          xml,
        }),
      );
      host.replaceChildren(node);
      viewer.createViewerForElement(node);
      const served = (response.headers.get('ETag') || '').replace(/^W\//, '').replace(/"/g, '');
      byId('diagram-sha256').textContent = received || served;
      byId('diagram-mismatch').hidden = !(received && served && received !== served);
      byId('diagram-fingerprint').hidden = false;
    } catch (error) {
      if (token === state.selection) {
        byId('diagram-fingerprint').hidden = true;
        setMessage(`The diagram could not be shown: ${error.message}. The download button still works.`, 'error');
      }
    }
  }

  select.addEventListener('change', drawPage);
  if (select.options.length > 0) drawPage();
})();
</script>
{% endblock %}