import { describeFile, describeFolder, firstSentence } from "../describe/describe.ts";
import { filesAt, fileTouches, objectBytes, type Save, type Touches } from "../mirror/queries.ts";
import type { Release } from "../releases/releases.ts";
import { isText } from "./files.ts";
import { type Html, html } from "./html.ts";
import {
	formatDate,
	formatSize,
	type PublicRepo,
	pathUrl,
	plural,
	relativeTime,
} from "./layout.ts";
import { type MarkdownBase, renderLine, renderMarkdown } from "./markdown.ts";

type AtlasFile = {
	name: string;
	path: string;
	size: number;
	lines: number | null;
	description: string | null;
	/** The saves that touched it, oldest first. */
	saves: Save[];
};

type AtlasFolder = {
	name: string;
	path: string;
	folders: AtlasFolder[];
	files: AtlasFile[];
	/** The saves that touched anything under it, removed files included, oldest first. */
	saves: Save[];
};

type View = { repo: string; at: string | null };

type Facts = { lines: number | null; description: string | null };

// Measured: Koh 3's vendored 9 MB sqlite3.c cost every Atlas view ~25 ms to inflate and scan. An
// object never changes, so what it says about itself is kept for the life of the process, keyed by
// hash and file name (the name picks the comment syntax).
// ponytail: unbounded, one small entry per object viewed; an LRU if a bucket reaches millions.
const known = new Map<string, Facts>();

function factsOf(db: PublicRepo["mirror"], hash: string, name: string): Facts {
	const key = `${hash} ${name}`;
	const cached = known.get(key);
	if (cached) return cached;
	const bytes = objectBytes(db, hash);
	const text = bytes && isText(bytes) ? new TextDecoder().decode(bytes) : null;
	const facts =
		text === null
			? { lines: null, description: null }
			: { lines: countLines(text), description: describeFile(name, text) };
	known.set(key, facts);
	return facts;
}

/**
 * §21.5's Atlas at one save: the folder tree as `<details>`, so it opens and links without
 * JavaScript. Each row is followed by a `<template>` holding its detail panel, which the browser
 * island shows on hover or select. `HEAD` (or the save shown) opens Kepr 2's picker of saves and
 * versions to view it at instead.
 */
export function atlasSection(
	repo: PublicRepo,
	saveId: string,
	at: string | null,
	saves: Save[],
	releases: Release[],
): Html {
	const touches = fileTouches(repo.mirror, saveId);
	const foldersTouches = folderTouches(touches);
	const root: AtlasFolder = { name: "", path: "", folders: [], files: [], saves: [] };
	const entries = filesAt(repo.mirror, saveId);
	for (const entry of entries) {
		const parts = entry.path.split("/");
		let folder = root;
		for (const name of parts.slice(0, -1)) {
			let child = folder.folders.find((f) => f.name === name);
			if (!child) {
				const path = folder.path ? `${folder.path}/${name}` : name;
				child = { name, path, folders: [], files: [], saves: foldersTouches.get(path) ?? [] };
				folder.folders.push(child);
			}
			folder = child;
		}
		const name = parts[parts.length - 1] as string;
		folder.files.push({
			name,
			path: entry.path,
			size: entry.size,
			...factsOf(repo.mirror, entry.hash, name),
			saves: touches.byPath.get(entry.path) ?? [],
		});
	}
	const view = { repo: repo.settings.name, at };
	return html`<section class="repo-section" id="atlas">
<details class="repo-section-toggle" open>
<summary class="section-head"><span class="section-label">atlas</span><span class="section-count">${plural(
		entries.length,
		"file",
	)}</span></summary>
<div class="atlas-bar">
${picker(view, saves, releases)}
${at && html`<a class="atlas-head-link mono" href="/${view.repo}#atlas">back to HEAD</a>`}
<button type="button" class="atlas-search-btn mono" hidden>search</button>
<input class="atlas-filter mono" type="search" placeholder="filter by filename" aria-label="Filter files by name" hidden>
</div>
<div class="atlas" data-repo="${view.repo}">
<div class="atlas-tree">${children(root, view)}</div>
<aside class="atlas-panel" hidden><p class="atlas-hint mono">hover or select a row for details</p></aside>
</div>
</details>
</section>`;
}

// Kepr 2's "explore through time": every save, newest first, and every version tied to a save
// still on the line. The tabs and the filter are kepr.js's; without it, the saves list alone.
function picker(view: View, saves: Save[], releases: Release[]): Html {
	const ids = new Set(saves.map((save) => save.id));
	const row = (id: string, label: string, message: string, age: string, active: boolean) =>
		html`<a class="atlas-picker-row${active ? " active" : ""}" href="/${
			view.repo
		}?at=${id}#atlas" data-q="${`${label} ${message}`.toLowerCase()}"><span class="atlas-picker-id">${label}</span><span class="atlas-picker-msg">${message}</span><span class="atlas-picker-age">${age}</span></a>`;
	return html`<details class="atlas-picker">
<summary class="atlas-ref-tab mono" title="explore through time">${view.at ?? "HEAD"}</summary>
<div class="atlas-picker-popover">
<div class="atlas-picker-tabs mono" hidden><button type="button" class="active" data-tab="saves">saves</button><button type="button" data-tab="versions">versions</button></div>
<input class="atlas-picker-filter mono" type="search" placeholder="filter saves" aria-label="Filter saves" hidden>
<div class="atlas-picker-list" data-tab="saves">${saves
		.toReversed()
		.map((save) =>
			row(
				save.id,
				save.id,
				save.message.split("\n")[0] as string,
				`· ${relativeTime(save.created_at)}`,
				save.id === view.at,
			),
		)}</div>
<div class="atlas-picker-list" data-tab="versions" hidden>${releases
		.filter((release) => ids.has(release.save))
		.map((release) =>
			row(
				release.save,
				release.version,
				release.save,
				`· ${relativeTime(release.publishedAt)}`,
				release.save === view.at,
			),
		)}</div>
</div>
</details>`;
}

function children(folder: AtlasFolder, view: View): Html[] {
	const byName = (a: { name: string }, b: { name: string }) =>
		a.name.toLowerCase().localeCompare(b.name.toLowerCase()) || a.name.localeCompare(b.name);
	return [
		...folder.folders.sort(byName).map((child) => folderRow(child, view)),
		...folder.files.sort(byName).map((file) => fileRow(file, view)),
	];
}

function fileRow(file: AtlasFile, view: View): Html {
	const { description } = file;
	const base = markdownBase(view, file.path);
	const href = `/${view.repo}/files/${pathUrl(file.path)}${view.at ? `?at=${view.at}` : ""}`;
	return html`<a class="atlas-row atlas-file" href="${
		href
	}" data-name="${file.name.toLowerCase()}">${row(file.name, description, base, file.size, file.saves)}</a>
<template>${panel(
		file.name,
		file.path,
		[
			["size", formatSize(file.size)],
			["lines", file.lines === null ? "binary" : file.lines.toLocaleString("en-US")],
			...saveFacts(file.saves, view),
		],
		description,
		base,
	)}</template>`;
}

function folderRow(folder: AtlasFolder, view: View): Html {
	const description = describeFolder(folder.files);
	const base = markdownBase(view, `${folder.path}/`);
	const files = allFiles(folder);
	const size = files.reduce((sum, f) => sum + f.size, 0);
	const lines = files.reduce((sum, f) => sum + (f.lines ?? 0), 0);
	return html`<details class="atlas-folder" data-path="${folder.path}">
<summary class="atlas-row">${row(
		`${folder.name}/`,
		description,
		base,
		size,
		folder.saves,
	)}</summary>
<template>${panel(
		`${folder.name}/`,
		folder.path,
		[
			["size", formatSize(size)],
			["lines", lines.toLocaleString("en-US")],
			["files", files.length.toLocaleString("en-US")],
			...saveFacts(folder.saves, view),
		],
		description,
		base,
	)}</template>
<div class="atlas-children">${children(folder, view)}</div>
</details>`;
}

function row(
	name: string,
	description: string | null,
	base: MarkdownBase,
	size: number,
	saves: Save[],
): Html {
	const last = saves[saves.length - 1];
	const meta = [formatSize(size), last && relativeTime(last.created_at)]
		.filter(Boolean)
		.join(" · ");
	return html`<span class="atlas-name">${name}</span>${html`<span class="atlas-desc">${
		description && renderLine(firstSentence(description), base)
	}</span>`}${html`<span class="atlas-meta mono">${meta}</span>`}`;
}

function panel(
	name: string,
	path: string,
	facts: [string, Html | string][],
	description: string | null,
	base: MarkdownBase,
): Html {
	return html`<h3 class="atlas-info-name">${name}</h3>
<p class="atlas-info-path mono">${path}</p>
<dl class="atlas-facts mono">${facts.map(
		([term, value]) => html`<dt>${term}</dt><dd>${value}</dd>`,
	)}</dl>
${
	description &&
	html`<div class="markdown atlas-info-desc">${renderMarkdown(description, base)}</div>`
}`;
}

function saveFacts(saves: Save[], view: View): [string, Html | string][] {
	const [first, last] = [saves[0], saves[saves.length - 1]];
	if (!first || !last) return [];
	return [
		["first save", saveLink(first, view)],
		["last save", saveLink(last, view)],
		["saves", saves.length.toLocaleString("en-US")],
	];
}

function saveLink(save: Save, view: View): Html {
	return html`<a href="/${
		view.repo
	}/saves/${save.id}">${save.id}</a> ${formatDate(save.created_at)}`;
}

// Each folder's saves are the line's saves that touched any path under it, in line order.
function folderTouches(touches: Touches): Map<string, Save[]> {
	const ids = new Map<string, Set<string>>();
	for (const [path, saves] of touches.byPath) {
		const parts = path.split("/");
		for (let depth = 1; depth < parts.length; depth++) {
			const folder = parts.slice(0, depth).join("/");
			const set = ids.get(folder) ?? new Set<string>();
			for (const save of saves) set.add(save.id);
			ids.set(folder, set);
		}
	}
	return new Map(
		[...ids].map(([folder, set]) => [folder, touches.line.filter((save) => set.has(save.id))]),
	);
}

function allFiles(folder: AtlasFolder): AtlasFile[] {
	return [...folder.files, ...folder.folders.flatMap(allFiles)];
}

// Relative links in a description resolve from the file's own folder, as in a README.
function markdownBase(view: View, path: string): MarkdownBase {
	return { repo: view.repo, dir: path.split("/").slice(0, -1).join("/"), at: view.at };
}

function countLines(text: string): number {
	if (text === "") return 0;
	let count = 0;
	for (let i = text.indexOf("\n"); i >= 0; i = text.indexOf("\n", i + 1)) count++;
	return text.endsWith("\n") ? count : count + 1;
}