{% extends "base.html" %}
{% block title %}VPC Atlas · History{% endblock %}
{% block body %}
{% macro resource_groups(label, key, groups) %}
{% if groups %}
<h3 class="diff-heading" id="diff-{{ key }}">{{ label }} <span class="count">{{ groups|sum(attribute='count') }}</span></h3>
{% for group in groups %}
<details class="diff-group" data-diff="{{ key }}" data-type="{{ group.type }}"{% if group.count <= 25 %} open{% endif %}>
  <summary>{{ group.type }} <span class="count">{{ group.count }}</span></summary>
  <div class="table-wrap">
    <table class="table">
      <thead><tr><th>Name</th><th>Id</th><th>Account</th><th>Region</th>{% if key == 'changed' %}<th>What changed</th>{% endif %}</tr></thead>
      <tbody>
        {% for row in group.rows %}
        <tr>
          <td>{{ row.name or '—' }}</td>
          <td><code>{{ row.id }}</code></td>
          <td>{{ row.account }}</td>
          <td>{{ row.region }}</td>
          {% if key == 'changed' %}
          <td>
            {% for field in row.fields %}
            <div class="field-change"><code>{{ field.field }}</code>{% if field.valued %}: <span class="before">{{ field.before }}</span> → <span class="after">{{ field.after }}</span>{% endif %}</div>
            {% endfor %}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>
{% endfor %}
{% endif %}
{% endmacro %}
{% macro link_changes(label, key, rows) %}
{% if rows %}
<h3 class="diff-heading" id="diff-{{ key }}">{{ label }} <span class="count">{{ rows|length }}</span></h3>
<div class="table-wrap">
  <table class="table" data-diff="{{ key }}">
    <thead><tr><th>Source</th><th>Kind</th><th>Target</th><th></th></tr></thead>
    <tbody>
      {% for row in rows %}
      <tr{% if row.cross_account %} class="cross-account"{% endif %}>
        <td>{% if row.source_label %}{{ row.source_label }}<br>{% endif %}<code>{{ row.source }}</code></td>
        <td>{{ row.kind }}</td>
        <td>{% if row.target_label %}{{ row.target_label }}<br>{% endif %}<code>{{ row.target }}</code></td>
        <td>{% if row.cross_account %}<span class="tag tag-cross">cross-account</span>{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endmacro %}
<style>
  .history-layout { display: grid; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 16px 20px 32px; }
  .compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .compare label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
  .compare select, .viewer-pages select {
    max-width: 300px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
  }
  .timeline { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--border); }
  .entry { position: relative; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .entry::before { content: ""; position: absolute; top: 16px; left: -26px; width: 10px; height: 10px; border: 2px solid var(--bg); border-radius: 50%; background: var(--border); }
  .entry.has-changes::before { background: var(--orange); }
  .entry.is-open { border-color: var(--orange); }
  .entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .entry-head time { font-weight: 600; }
  .snapshot-id { color: var(--muted); }
  .entry-meta, .delta-note { color: var(--muted); font-size: 12.5px; }
  .deltas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 6px 0; }
  .delta { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .delta-added { color: var(--green); }
  .delta-removed { color: var(--red); }
  .delta-changed { color: var(--amber); }
  .delta-cross { color: var(--amber); font-weight: 600; }
  .entry-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .tag { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--border); color: var(--text); font-size: 12px; }
  .tag-cross { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); }
  .diff-range { margin: 0 0 12px; color: var(--muted); }
  .diff-heading { margin: 18px 0 8px; font-size: 15px; }
  .diff-group { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 6px; }
  .diff-group > summary { padding: 7px 12px; cursor: pointer; font-weight: 600; }
  .diff-group .table-wrap { padding: 0 8px 8px; }
  .table .cross-account td { background: color-mix(in srgb, var(--amber) 10%, transparent); }
  .field-change { margin: 0 0 2px; overflow-wrap: anywhere; }
  .before { color: var(--red); }
  .after { color: var(--green); }
  .viewer-pages { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
  @media (max-width: 900px) { .history-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">History</span>
    <span id="history-count" class="meta-item muted">{{ rows|length }} snapshot{{ '' if rows|length == 1 else 's' }}</span>
  </div>
  <div class="topbar-actions">
    <a id="diagrams-link" class="btn" href="{{ base_path }}/">Diagrams</a>
  </div>
</header>

<main class="history-layout">
  {% if problem %}
  <div id="history-problem" class="notice" data-kind="error" role="alert">{{ problem }}</div>
  {% endif %}

  <section id="timeline" class="panel" aria-labelledby="timeline-title">
    <div class="panel-head">
      <h2 id="timeline-title">Timeline</h2>
      {% if rows|length > 1 %}
      {% set from_id = selected_from or rows[1].snapshot_id %}
      {% set to_id = selected_to or rows[0].snapshot_id %}
      <form id="compare-form" class="compare" method="get" action="{{ base_path }}/history#diff">
        <label>Compare
          <select id="compare-from" name="from" aria-label="Base snapshot">
            {% for row in rows %}
            <option value="{{ row.snapshot_id }}"{% if row.snapshot_id == from_id %} selected{% endif %}>{{ row.generated_label }} · {{ row.snapshot_id }}</option>
            {% endfor %}
          </select>
        </label>
        <label>with
          <select id="compare-to" name="to" aria-label="Compared snapshot">
            {% for row in rows %}
            <option value="{{ row.snapshot_id }}"{% if row.snapshot_id == to_id %} selected{% endif %}>{{ row.generated_label }} · {{ row.snapshot_id }}</option>
            {% endfor %}
          </select>
        </label>
        <button class="btn" type="submit">Compare</button>
      </form>
      {% endif %}
    </div>
    {% if rows %}
    <ol class="timeline" aria-label="Snapshots, newest first">
      {% for row in rows %}
      {% set c = row.counts %}
      <li class="entry{% if c and (c.added or c.removed or c.changed or c.edges_added or c.edges_removed) %} has-changes{% endif %}" id="snapshot-{{ row.snapshot_id }}" data-snapshot-id="{{ row.snapshot_id }}"{% if c %} data-added="{{ c.added }}" data-removed="{{ c.removed }}" data-changed="{{ c.changed }}" data-links-added="{{ c.edges_added }}" data-links-removed="{{ c.edges_removed }}" data-cross-account="{{ c.cross_account }}"{% else %} data-baseline="true"{% endif %}>
        <div class="entry-head">
          <time datetime="{{ row.generated_at }}">{{ row.generated_label }}</time>
          <code class="snapshot-id">{{ row.snapshot_id }}</code>
          {% if loop.first %}<span class="tag">latest</span>{% endif %}
        </div>
        <div class="entry-meta">
          {% if row.account_id %}Account {{ row.account_id }}{% else %}No account{% endif %}
          · {{ row.regions|length }} region{{ '' if row.regions|length == 1 else 's' }}{% if row.regions %} ({{ row.regions|join(', ') }}){% endif %}
          · {{ row.summary.get('resources', 0) }} resources
        </div>
        <div class="deltas">
          {% if c %}
          <span class="delta delta-added" title="Resources added">+{{ c.added }}</span>
          <span class="delta delta-removed" title="Resources removed">−{{ c.removed }}</span>
          <span class="delta delta-changed" title="Resources changed">~{{ c.changed }}</span>
          <span class="delta-note">links +{{ c.edges_added }} −{{ c.edges_removed }}</span>
          <span class="delta-note{% if c.cross_account %} delta-cross{% endif %}">cross-account links {{ c.cross_account }}</span>
          {% else %}
          <span class="delta-note">First snapshot in the history: nothing to compare it with.</span>
          {% endif %}
        </div>
        <div class="entry-actions">
          {% if row.previous_id %}
          <a class="btn compare-previous" href="{{ base_path }}/history?from={{ row.previous_id|urlencode }}&amp;to={{ row.snapshot_id|urlencode }}#diff">Compare with previous</a>
          <a class="btn view-changes" href="{{ row.diagram_diff_url }}">View changes on diagram</a>
          {% endif %}
          <button class="btn view-diagram" type="button" data-snapshot-id="{{ row.snapshot_id }}">View diagram</button>
        </div>
      </li>
      {% endfor %}
    </ol>
    {% else %}
    <p id="history-empty" class="muted">No snapshots yet. Each scan is kept here as soon as it finishes.</p>
    {% endif %}
  </section>

  <section id="diff" class="panel" aria-labelledby="diff-title">
    <div class="panel-head">
      <h2 id="diff-title">Changes</h2>
      {% if compare %}
      <div class="panel-actions">
        <a id="view-diff-diagram" class="btn" href="{{ compare.view_url }}">View changes on diagram</a>
        <a id="dl-diff" class="btn" href="{{ compare.download_url }}" download>Download diff (.json)</a>
      </div>
      {% endif %}
    </div>
    {% if compare %}
    <p id="diff-range" class="diff-range">
      From <time datetime="{{ compare.older.generated_at }}">{{ compare.older.generated_label }}</time> (<code>{{ compare.older.snapshot_id }}</code>)
      to <time datetime="{{ compare.newer.generated_at }}">{{ compare.newer.generated_label }}</time> (<code>{{ compare.newer.snapshot_id }}</code>)
    </p>
    {% set n = view.counts %}
    <div id="diff-counts" class="cards" data-added="{{ n.added }}" data-removed="{{ n.removed }}" data-changed="{{ n.changed }}" data-links-added="{{ n.edges_added }}" data-links-removed="{{ n.edges_removed }}" data-cross-account="{{ n.cross_account }}">
      <div class="stat"><div class="stat-value delta-added">+{{ n.added }}</div><div class="stat-label">Resources added</div></div>
      <div class="stat"><div class="stat-value delta-removed">−{{ n.removed }}</div><div class="stat-label">Resources removed</div></div>
      <div class="stat"><div class="stat-value delta-changed">~{{ n.changed }}</div><div class="stat-label">Resources changed</div></div>
      <div class="stat"><div class="stat-value">+{{ n.edges_added }} −{{ n.edges_removed }}</div><div class="stat-label">Links added and removed</div></div>
      <div class="stat"><div class="stat-value{% if n.cross_account %} delta-cross{% endif %}">{{ n.cross_account }}</div><div class="stat-label">Cross-account links changed</div></div>
    </div>
    {% if compare.is_empty %}
    <p id="diff-empty" class="muted">These two snapshots describe the same network: nothing was added, removed or changed.</p>
    {% endif %}
    {{ resource_groups('Resources added', 'added', view.added) }}
    {{ resource_groups('Resources removed', 'removed', view.removed) }}
    {{ resource_groups('Resources changed', 'changed', view.changed) }}
    {{ link_changes('Links added', 'edges_added', view.edges_added) }}
    {{ link_changes('Links removed', 'edges_removed', view.edges_removed) }}
    {% elif rows|length > 1 %}
    <p class="muted">Pick two snapshots above to see what changed between them.</p>
    {% elif rows %}
    <p class="muted">The history holds a single snapshot, so there is nothing to compare yet. The next scan will be compared with it.</p>
    {% else %}
    <p class="muted">Nothing to compare yet.</p>
    {% endif %}
  </section>

  <section id="viewer-panel" class="panel" aria-labelledby="diagram-title" data-viewer-url="{{ viewer_url }}" hidden>
    <div class="panel-head">
      <h2 id="diagram-title">Diagram</h2>
      <div class="panel-actions">
        <label class="viewer-pages">Page <select id="viewer-page" aria-label="Diagram page"></select></label>
        <a id="dl-drawio" class="btn" href="#" download>Download .drawio</a>
        <button id="viewer-close" class="btn" type="button">Close</button>
      </div>
    </div>
    <div id="viewer-host" class="viewer-host" aria-live="polite"></div>
    <p id="diagram-fingerprint" class="fingerprint" aria-live="polite" hidden>diagram sha256:<code id="diagram-sha256"></code> · generated at <span id="diagram-generated"></span> · snapshot <code id="diagram-snapshot"></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 .drawio this snapshot produced when it was the current one.
    </p>
  </section>
</main>

<div id="toast-host" class="toast-host" aria-live="polite"></div>

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

  const panel = document.getElementById('viewer-panel');
  if (!panel) return;
  const base = document.querySelector('meta[name="vpcatlas-base"]')?.content ?? '';
  const VIEWER_TIMEOUT_MS = 15000;
  const byId = (id) => document.getElementById(id);
  const host = byId('viewer-host');
  const pageSelect = byId('viewer-page');
  const state = { info: null, 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 opened, 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('');
  }

  function utcLabel(value) {
    const moment = value ? new Date(value) : null;
    if (!moment || Number.isNaN(moment.getTime())) return '';
    return `${moment.toISOString().slice(0, 19).replace('T', ' ')} UTC`;
  }

  function markOpen(snapshotId) {
    for (const entry of document.querySelectorAll('.entry')) {
      entry.classList.toggle('is-open', entry.dataset.snapshotId === snapshotId);
    }
  }

  // The viewer draws the file the "Download .drawio" button serves: same route, same bytes.
  async function drawPage(key) {
    const info = state.info;
    const page = info.pages.find((item) => item.key === key) ?? info.pages[0];
    if (!page) {
      setMessage('This snapshot has no diagram pages.', 'error');
      return;
    }
    const token = ++state.selection;
    byId('dl-drawio').href = page.url;
    byId('diagram-title').textContent = `${page.title} · ${info.generated_label}`;
    byId('diagram-fingerprint').hidden = true;
    setMessage('Loading the diagram…');
    try {
      const [viewer, response] = await Promise.all([
        viewerReady(),
        fetch(page.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-generated').textContent = utcLabel(response.headers.get('Last-Modified'));
      byId('diagram-snapshot').textContent = info.snapshot_id;
      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');
      }
    }
  }

  async function openSnapshot(snapshotId) {
    const token = ++state.selection;
    markOpen(snapshotId);
    panel.hidden = false;
    pageSelect.replaceChildren();
    byId('diagram-fingerprint').hidden = true;
    setMessage('Loading the diagram…');
    panel.scrollIntoView({ block: 'start' });
    try {
      const response = await fetch(`${base}/api/history/${encodeURIComponent(snapshotId)}`, {
        credentials: 'same-origin',
        cache: 'no-store',
      });
      if (!response.ok) throw new Error(`the server answered ${response.status}`);
      const info = await response.json();
      if (token !== state.selection) return;
      state.info = info;
      for (const page of info.pages) {
        const option = document.createElement('option');
        option.value = page.key;
        option.textContent = page.title;
        pageSelect.append(option);
      }
      await drawPage(info.pages[0]?.key);
    } catch (error) {
      if (token === state.selection) {
        setMessage(`The snapshot could not be loaded: ${error.message}.`, 'error');
      }
    }
  }

  for (const button of document.querySelectorAll('.view-diagram')) {
    button.addEventListener('click', () => openSnapshot(button.dataset.snapshotId));
  }
  pageSelect.addEventListener('change', () => drawPage(pageSelect.value));
  byId('viewer-close').addEventListener('click', () => {
    state.selection += 1;
    panel.hidden = true;
    host.replaceChildren();
    markOpen('');
  });
  const wanted = new URLSearchParams(window.location.search).get('view');
  if (wanted) openSnapshot(wanted);
})();
</script>
{% endblock %}