{% extends "base.html" %}

{% block title %}Evolution — {{ service }} — Terms Cockpit{% endblock %}

{% block head %}
<style>
/* ── Stats bar ──────────────────────────────────────────────────────── */
.ev-stats {
  display: flex;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}
.ev-stat {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-sm);
  min-width: 120px;
}
.ev-stat-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1.1;
}
.ev-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* ── Document evolution grid ─────────────────────────────────────────── */
.ev-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.ev-row {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 240px 1fr 140px 100px;
  align-items: center;
  gap: var(--sp-md);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ev-row:hover { border-color: var(--clr-primary); box-shadow: var(--shadow-md); }
@media (max-width: 800px) {
  .ev-row { grid-template-columns: 1fr; }
}

.ev-doc-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-doc-name a { color: var(--clr-text); }
.ev-doc-name a:hover { color: var(--clr-primary); }

/* Sparkline area */
.ev-sparkline {
  height: 38px;
  position: relative;
  overflow: hidden;
}
.ev-sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Meta column */
.ev-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  text-align: right;
}
.ev-meta .ver-count {
  font-weight: 700;
  color: var(--clr-text);
  font-size: 0.85rem;
}
.ev-meta .date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

/* Actions column */
.ev-actions {
  display: flex;
  gap: var(--sp-xs);
  justify-content: flex-end;
}

/* Header row */
.ev-header {
  display: grid;
  grid-template-columns: 240px 1fr 140px 100px;
  gap: var(--sp-md);
  padding: 0 var(--sp-md) var(--sp-xs);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted);
}
@media (max-width: 800px) {
  .ev-header { display: none; }
}

/* Loading placeholder for sparklines */
.spark-placeholder {
  width: 100%;
  height: 38px;
  background: linear-gradient(90deg, var(--clr-border) 25%, var(--clr-bg) 50%, var(--clr-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 3px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* btn-secondary */
.btn-secondary, a.btn-secondary {
  background: var(--clr-surface);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.btn-secondary:hover, a.btn-secondary:hover {
  background: var(--clr-tag-bg);
  text-decoration: none;
}
</style>
{% endblock %}

{% block breadcrumb %}
<span class="breadcrumb">
  <span class="bc-sep">›</span>
  <a href="{{ url_for('views.index', repo=repo) }}">Services</a>
  <span class="bc-sep">›</span>
  <a href="{{ url_for('views.service', repo=repo, service=service) }}">{{ service }}</a>
  <span class="bc-sep">›</span>
  <span class="bc-current">Evolution</span>
</span>
{% endblock %}

{% block content %}
<section class="page-header compact" style="margin-bottom: var(--sp-md);">
  <div class="page-header-row">
    <div>
      <h1>📈 Document Evolution — {{ service }}</h1>
      <p class="subtitle">Version activity across all documents</p>
    </div>
    <a class="btn btn-secondary btn-sm" href="{{ url_for('views.service', repo=repo, service=service) }}">← Documents</a>
  </div>
</section>

<!-- Stats -->
<div class="ev-stats">
  <div class="ev-stat"><div class="ev-stat-value" id="ev-doc-count">—</div><div class="ev-stat-label">Documents</div></div>
  <div class="ev-stat"><div class="ev-stat-value" id="ev-total-versions">—</div><div class="ev-stat-label">Total versions</div></div>
  <div class="ev-stat"><div class="ev-stat-value" id="ev-most-active">—</div><div class="ev-stat-label">Most active</div></div>
</div>

<!-- Column headers -->
<div class="ev-header">
  <div>Document</div>
  <div>Activity</div>
  <div style="text-align:right">Versions · Last modified</div>
  <div></div>
</div>

<!-- Grid -->
<div class="ev-grid" id="ev-grid">
  <p class="loading">Loading documents…</p>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  "use strict";

  const SERVICE = "{{ service }}";
  const REPO    = "{{ repo }}";
  const API     = "/api";

  function escapeHTML(s) {
    const d = document.createElement("div"); d.textContent = s; return d.innerHTML;
  }
  async function fetchJSON(path) {
    const r = await fetch(`${API}/${REPO}${path}`);
    if (!r.ok) throw new Error(`${r.status}`);
    return r.json();
  }
  function fmtDate(ts) {
    if (!ts) return "—";
    return new Date(ts * 1000).toLocaleDateString("en-US",
      { year: "numeric", month: "short", day: "numeric" });
  }
  function encPath(p) { return p.split("/").map(encodeURIComponent).join("/"); }

  /* ── Sparkline renderer ───────────────────────────────────────────── */

  function drawSparkline(container, changes) {
    if (!changes || changes.length === 0) {
      container.innerHTML = `<div style="height:38px;display:flex;align-items:center;padding:0 4px;font-size:0.7rem;color:var(--clr-text-muted)">No history</div>`;
      return;
    }

    const W = container.clientWidth || 200;
    const H = 38;
    const ns = "http://www.w3.org/2000/svg";
    const svg = document.createElementNS(ns, "svg");
    svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
    svg.setAttribute("width", W); svg.setAttribute("height", H);

    const spacing = W / changes.length;
    const barW    = Math.max(1, spacing - 1);

    // Total change volume (ins + del); cap top 2% outliers
    const volumes = changes.map(c => c.insertions + c.deletions);
    const sortedV = [...volumes].filter(v => v > 0).sort((a, b) => a - b);
    const p98     = sortedV[Math.floor(sortedV.length * 0.98)] || sortedV[sortedV.length - 1] || 1;
    const scale   = (H - 4) / Math.max(p98, 1);

    // Baseline
    const bl = document.createElementNS(ns, "line");
    bl.setAttribute("x1", 0); bl.setAttribute("y1", H);
    bl.setAttribute("x2", W); bl.setAttribute("y2", H);
    bl.setAttribute("stroke", "#e0e0e0"); bl.setAttribute("stroke-width", "1");
    svg.appendChild(bl);

    changes.forEach((c, i) => {
      const vol = c.insertions + c.deletions;
      if (vol === 0) return;
      const h    = Math.min(Math.max(1, vol * scale), H - 2);
      const cx   = spacing * i + spacing / 2;
      const fill = "var(--clr-primary)";
      const r = document.createElementNS(ns, "rect");
      r.setAttribute("x", cx - barW / 2); r.setAttribute("y", H - h);
      r.setAttribute("width", barW); r.setAttribute("height", h);
      r.setAttribute("fill", fill); r.setAttribute("opacity", "0.75");
      r.setAttribute("rx", "1");
      svg.appendChild(r);
    });

    container.innerHTML = "";
    container.appendChild(svg);
  }

  /* ── Main ────────────────────────────────────────────────────────── */

  async function init() {
    const grid = document.getElementById("ev-grid");
    let docs;
    try {
      const data = await fetchJSON(`/services/${encodeURIComponent(SERVICE)}/documents`);
      docs = data.documents || [];
    } catch (e) {
      grid.innerHTML = `<p class="empty-state">Failed to load documents.</p>`;
      return;
    }

    if (docs.length === 0) {
      grid.innerHTML = `<p class="empty-state">No documents found.</p>`;
      return;
    }

    // Sort by version count descending
    docs.sort((a, b) => (b.versions || 0) - (a.versions || 0));

    const totalVersions = docs.reduce((s, d) => s + (d.versions || 0), 0);
    document.getElementById("ev-doc-count").textContent    = docs.length;
    document.getElementById("ev-total-versions").textContent = totalVersions.toLocaleString();
    document.getElementById("ev-most-active").textContent  =
      docs[0] ? docs[0].name.split("/").pop() : "—";

    // Render skeleton rows
    grid.innerHTML = docs.map((doc, i) => {
      const display = doc.name.split("/").pop();
      const docHref = "/document/" + encPath(doc.name);
      const histHref = "/versions/" + encPath(doc.name);
      const lgHref = "/lexglue/" + encPath(doc.name);
      const vLabel = doc.versions === 1 ? "1 version" : `${doc.versions} versions`;
      return `
        <div class="ev-row" id="ev-row-${i}">
          <div class="ev-doc-name" title="${escapeHTML(doc.name)}">
            <a href="${docHref}">${escapeHTML(display)}</a>
          </div>
          <div class="ev-sparkline" id="spark-${i}">
            <div class="spark-placeholder"></div>
          </div>
          <div class="ev-meta">
            <span class="ver-count">${escapeHTML(vLabel)}</span>
            <span class="date">${fmtDate(doc.last_modified)}</span>
          </div>
          <div class="ev-actions">
            <a class="btn btn-secondary btn-sm" href="${histHref}" title="Version history">📊</a>
            <a class="btn btn-primary btn-sm" href="${lgHref}" title="LexGlue analysis">⚖</a>
          </div>
        </div>`;
    }).join("");

    // Load sparklines lazily (intersection observer)
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        observer.unobserve(entry.target);
        const idx = parseInt(entry.target.dataset.idx);
        loadSparkline(docs[idx], idx);
      });
    }, { rootMargin: "100px" });

    docs.forEach((_, i) => {
      const spark = document.getElementById(`spark-${i}`);
      spark.dataset.idx = i;
      observer.observe(spark);
    });
  }

  async function loadSparkline(doc, idx) {
    const container = document.getElementById(`spark-${idx}`);
    try {
      const data = await fetchJSON(`/documents/${encPath(doc.name)}/changes`);
      drawSparkline(container, data.changes || []);
    } catch (_) {
      container.innerHTML = `<div class="spark-placeholder" style="animation:none;opacity:0.3"></div>`;
    }
  }

  document.addEventListener("DOMContentLoaded", init);
})();
</script>
{% endblock %}