// 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 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";
    nodes.push(`<circle class="${cls}" cx="${x}" cy="${y}" r="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 === "invalid" ? "✖" : "·";
      return `<div class="row${c.working_copy ? " wc" : ""}" style="top:${i * rowH}px" data-hash="${c.hash}" title="${escape(c.message)}">
        <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" 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; }
  svg path { fill: none; stroke: var(--vscode-editorCodeLens-foreground); stroke-width: 1.5; }
  svg circle.node { fill: var(--vscode-editorCodeLens-foreground); }
  svg circle.head { fill: var(--vscode-charts-green); }
  svg circle.wc { fill: var(--vscode-charts-blue); stroke: var(--vscode-charts-blue); stroke-width: 2; fill-opacity: .3; }
  .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-charts-blue); 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;");
}

export function repositoryLabel(repo: Repository): string {
  return repo.root.split("/").pop() ?? repo.root;
}