// The history view (spec §5.6): a webview drawing the bookmark's changes

// as a graph of dependencies, newest first, heads highlighted, with no

// fake merge nodes. Clicking a change asks the extension to show it.

import * as vscode from "vscode";

import { LogEntry } from "./oxy";

import { Repository } from "./repository";

import { timeAgo } from "./operations";

export class HistoryPanel {

  private static panels = new Map<string, HistoryPanel>();

  private readonly panel: vscode.WebviewPanel;

  private disposed = false;

  static show(repo: Repository, onOpen: (hash: string) => void): void {

    const existing = HistoryPanel.panels.get(repo.root);

    if (existing && !existing.disposed) {

      existing.panel.reveal();

      void existing.render();

      return;

    }

    HistoryPanel.panels.set(repo.root, new HistoryPanel(repo, onOpen));

  }

  static refresh(root: string): void {

    const p = HistoryPanel.panels.get(root);

    if (p && !p.disposed) {

      void p.render();

    }

  }

  private constructor(

    private readonly repo: Repository,

    onOpen: (hash: string) => void,

  ) {

    this.panel = vscode.window.createWebviewPanel("oxygen.history", `History: ${repo.root.split("/").pop()}`, vscode.ViewColumn.Active, { enableScripts: true, retainContextWhenHidden: true });

    this.panel.iconPath = new vscode.ThemeIcon("git-commit");

    this.panel.webview.onDidReceiveMessage((m: { type: string; hash?: string }) => {

      if (m.type === "open" && m.hash) {

        onOpen(m.hash);

      } else if (m.type === "refresh") {

        void this.render();

      }

    });

    this.panel.onDidDispose(() => {

      this.disposed = true;

      HistoryPanel.panels.delete(repo.root);

    });

    void this.render();

  }

  private async render(): Promise<void> {

    let log;

    try {

      log = await this.repo.oxy.log(this.repo.root, 300);

    } catch (e) {

      this.panel.webview.html = `<p>${escape(String(e))}</p>`;

      return;

    }

    const changes = log.changes;

    const lanes = layout(changes);

    this.panel.webview.html = html(this.repo, log.bookmark, changes, lanes);

  }

}

/** Assign each change a lane so that dependency edges flow downward. */

function layout(changes: LogEntry[]): Map<string, number> {

  const lanes = new Map<string, number>();

  const active: (string | undefined)[] = [];

  for (const c of changes) {

    let lane = active.indexOf(c.hash);

    if (lane < 0) {

      lane = active.indexOf(undefined);

      if (lane < 0) {

        lane = active.length;

        active.push(undefined);

      }

    }

    lanes.set(c.hash, lane);

    // The first dependency continues this lane; others take free lanes.

    const deps = c.deps.filter((d) => changes.some((x) => x.hash === d));

    active[lane] = deps[0];

    for (const d of deps.slice(1)) {

      if (!active.includes(d)) {

        const free = active.indexOf(undefined, lane + 1);

        if (free >= 0) {

          active[free] = d;

        } else {

          active.push(d);

        }

      }

    }

    // Lanes whose expected change has appeared elsewhere are free again.

    for (let i = 0; i < active.length; i++) {

      if (active[i] !== undefined && lanes.has(active[i]!)) {

        active[i] = undefined;

      }

    }

  }

  return lanes;

}

function html(repo: Repository, bookmark: string, changes: LogEntry[], lanes: Map<string, number>): string {

  const rowH = 30;

  const laneW = 18;

  const maxLane = Math.max(0, ...lanes.values());

  const graphW = (maxLane + 1) * laneW + 10;

  const index = new Map(changes.map((c, i) => [c.hash, i]));

  const edges: string[] = [];

  const nodes: string[] = [];

  changes.forEach((c, i) => {

    const x = lanes.get(c.hash)! * laneW + 10;

    const y = i * rowH + rowH / 2;

    for (const d of c.deps) {

      const j = index.get(d);

      if (j === undefined) {

        continue;

      }

      const x2 = lanes.get(d)! * laneW + 10;

      const y2 = j * rowH + rowH / 2;

      edges.push(`<path class="l${(lanes.get(d)! % 8) + 1}" d="M${x},${y} C${x},${y + rowH / 2} ${x2},${y2 - rowH / 2} ${x2},${y2}" />`);

    }

    const cls = c.working_copy ? "wc" : c.head ? "head" : "node";

    const lane = `l${(lanes.get(c.hash)! % 8) + 1}`;

    nodes.push(`<circle class="${cls} ${lane}" cx="${x}" cy="${y}" r="${c.head ? 6 : 5}" />`);

  });

  const rows = changes

    .map((c, i) => {

      const subject = c.message.split("\n")[0] || (c.working_copy ? "(working copy)" : "(no description)");

      const sig = c.working_copy ? "" : c.signature?.status === "signed" || c.signature?.status === "sealed" ? (c.signature.revoked ? "⚠" : c.signature.status === "sealed" ? "◈" : "✔") : c.signature?.status === "invalid" ? "✖" : "·";

      const sigClass = c.signature?.revoked ? "sig-revoked" : `sig-${c.signature?.status ?? "none"}`;

      // Right-click: split, squash and rebase (webview/context menus in package.json).

      const ctx = c.working_copy ? "" : ` data-vscode-context='${escape(JSON.stringify({ webviewSection: "change", root: repo.root, hash: c.hash, oxygenHead: c.head, oxygenHasDeps: c.deps.length > 0, preventDefaultContextMenuItems: true }))}'`;

      return `<div class="row${c.working_copy ? " wc" : ""}" style="top:${i * rowH}px" data-hash="${c.hash}" title="${escape(c.message)}"${ctx}>

        <span class="id">${c.change_id.slice(0, 8)}</span>

        <span class="subject">${escape(subject)}</span>

        <span class="meta">${escape(c.author)} · ${timeAgo(c.when_ms)} <span class="sig ${sigClass}" title="${escape(c.signature?.status ?? "")}">${sig}</span></span>

      </div>`;

    })

    .join("");

  return `<!DOCTYPE html>

<html><head><meta charset="utf-8">

<style>

  body { font-family: var(--vscode-font-family); color: var(--vscode-foreground); margin: 0; padding: 8px 12px; }

  h2 { font-size: 13px; font-weight: 600; margin: 0 0 8px; display: flex; gap: 12px; align-items: center; }

  h2 button { background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: none; padding: 2px 8px; cursor: pointer; }

  .wrap { position: relative; }

  svg { position: absolute; left: 0; top: 0; }

  /* Lanes in the Oxygen mark's colours (themeable: oxygen.lane1…8). */

  ${[1, 2, 3, 4, 5, 6, 7, 8].map((n) => `.l${n} { --lane: var(--vscode-oxygen-lane${n}); }`).join("\n  ")}

  svg path { fill: none; stroke: var(--lane); stroke-width: 1.6; opacity: .85; }

  svg circle.node { fill: var(--lane); }

  svg circle.head { fill: var(--vscode-oxygen-head); stroke: var(--vscode-editor-background); stroke-width: 1.5; filter: drop-shadow(0 0 3px var(--vscode-oxygen-head)); }

  svg circle.wc { fill: var(--vscode-oxygen-workingCopy); fill-opacity: .25; stroke: var(--vscode-oxygen-workingCopy); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: breathe 2.4s ease-in-out infinite; }

  @keyframes breathe { 0%, 100% { transform: scale(1); fill-opacity: .25; } 50% { transform: scale(1.25); fill-opacity: .55; } }

  @media (prefers-reduced-motion: reduce) { svg circle.wc { animation: none; } }

  h2::after { content: ""; flex: 1; height: 2px; margin-left: 6px; background: linear-gradient(90deg, var(--vscode-oxygen-lane1), var(--vscode-oxygen-lane2), transparent); border-radius: 1px; }

  .sig-signed { color: var(--vscode-oxygen-signed); }

  .sig-sealed { color: var(--vscode-oxygen-sealed); }

  .sig-invalid, .sig-revoked { color: var(--vscode-oxygen-invalid); }

  .row:not(.wc):hover .id { text-decoration: underline; }

  .rows { position: relative; margin-left: ${graphW}px; height: ${changes.length * rowH}px; }

  .row { position: absolute; left: 0; right: 0; height: ${rowH}px; line-height: ${rowH}px; display: flex; gap: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; }

  .row:hover { background: var(--vscode-list-hoverBackground); }

  .row.wc { color: var(--vscode-descriptionForeground); font-style: italic; cursor: default; }

  .id { color: var(--vscode-oxygen-lane1); font-family: var(--vscode-editor-font-family); }

  .subject { flex: 1; overflow: hidden; text-overflow: ellipsis; }

  .meta { color: var(--vscode-descriptionForeground); font-size: 12px; }

  .sig { margin-left: 4px; }

</style></head>

<body>

<h2>${escape(bookmark)} <span class="meta">${changes.length - 1} changes</span> <button id="refresh">Refresh</button></h2>

<div class="wrap">

  <svg width="${graphW}" height="${changes.length * rowH}">${edges.join("")}${nodes.join("")}</svg>

  <div class="rows">${rows}</div>

</div>

<script>

  const vscode = acquireVsCodeApi();

  document.querySelectorAll('.row:not(.wc)').forEach(r => r.addEventListener('click', () => vscode.postMessage({ type: 'open', hash: r.dataset.hash })));

  document.getElementById('refresh').addEventListener('click', () => vscode.postMessage({ type: 'refresh' }));

</script>

</body></html>`;

}

function escape(s: string): string {

  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");

}

export function repositoryLabel(repo: Repository): string {

  return repo.root.split("/").pop() ?? repo.root;

}