import type { Hono } from "hono";
import { describeFile } from "../describe/describe.ts";
import {
	fileAt,
	filesAt,
	headId,
	history,
	objectBytes,
	repoStats,
	saveByPrefix,
	timeline,
} from "../mirror/queries.ts";
import { setting } from "../server/db.ts";
import { atlasSection } from "./atlas.ts";
import { type Html, html } from "./html.ts";
import {
	cacheFor,
	notFound,
	openPublicRepo,
	type PageContext,
	type PublicRepo,
	page,
	plural,
	relativeTime,
} from "./layout.ts";
import { renderMarkdown, renderParagraph } from "./markdown.ts";
import { timelineSvg } from "./timeline.ts";

const PAGE_SIZE = 50;
const HTTP_URL = /^https?:\/\//i;

export function registerRepoPage(app: Hono, ctx: PageContext): void {
	app.get("/:repo", (c) => {
		const repo = openPublicRepo(ctx, c.req.param("repo"));
		if (!repo) return notFound(c, ctx);
		// `?at=<id>` shows the Atlas at that save (§21.5); the rest of the page stays at HEAD.
		const at = c.req.query("at");
		const atSave = at === undefined ? null : saveByPrefix(repo.mirror, at);
		if (at !== undefined && !atSave) return notFound(c, ctx);
		const pageNumber = Math.max(1, Number.parseInt(c.req.query("page") ?? "1", 10) || 1);
		const readme = readmeAtHead(repo);
		const name = repo.settings.name;
		const paragraph = readme === null ? null : describeFile("README.md", readme);
		const intro =
			paragraph === null ? null : renderParagraph(paragraph, { repo: name, dir: "", at: null });
		cacheFor(c, false);
		return c.html(
			page(ctx, {
				title: name,
				description: intro?.text ?? "",
				path: `/${name}`,
				body: html`${header(ctx, repo, intro?.html ?? null)}
${headId(repo.mirror) && sections(repo, pageNumber, atSave?.id ?? null)}
${readme && details(renderMarkdown(readme, { repo: name, dir: "", at: null }))}`,
			}),
		);
	});
}

function readmeAtHead(repo: PublicRepo): string | null {
	const head = headId(repo.mirror);
	const path =
		head && filesAt(repo.mirror, head).find((f) => f.path.toLowerCase() === "readme.md")?.path;
	const file = head && path ? fileAt(repo.mirror, head, path) : null;
	const bytes = file && objectBytes(repo.mirror, file.hash);
	return bytes ? new TextDecoder().decode(bytes) : null;
}

function header(ctx: PageContext, repo: PublicRepo, intro: Html | null): Html {
	const { name, homepage, installLines } = repo.settings;
	const stats = repoStats(repo.mirror);
	const handle = setting(ctx.kepr, "handle");
	const meta = [
		plural(stats.saves, "save"),
		stats.lines > 0 && plural(stats.lines, "line"),
		stats.updated !== null && `updated ${relativeTime(stats.updated)}`,
	].filter(Boolean);
	return html`<header class="repo-head">
<h1 class="repo-name">${name}</h1>
${handle && html`<p class="repo-contributor mono"><a href="/@${handle}">@${handle}</a></p>`}
${intro && html`<div class="repo-desc"><p>${intro}</p></div>`}
${HTTP_URL.test(homepage) && html`<p class="repo-homepage"><a href="${homepage}">${homepage}</a></p>`}
${stats.language && html`<div class="lang-badges"><span class="lang-badge">${stats.language}</span></div>`}
<p class="repo-meta">${meta.join(" · ")}</p>
<div class="repo-tabbar">
<nav class="repo-tabs" aria-label="Repository panels"><a class="repo-tab" href="/${name}/issues">issues</a><a class="repo-tab" href="/${name}/releases">builds</a><a class="repo-tab" href="/${name}/archives">archives</a></nav>
${installLines.length > 0 && html`<div class="install-lines">${installLines.map((line) => html`<div class="install-line"><code>${line}</code><button type="button" class="copy-btn" data-copy="${line}" hidden>copy</button></div>`)}</div>`}
</div>
</header>`;
}

function sections(repo: PublicRepo, pageNumber: number, at: string | null): Html {
	const name = repo.settings.name;
	const atlas = atlasSection(repo, at ?? (headId(repo.mirror) as string), at);
	const saves = timeline(repo.mirror);
	const rows = history(repo.mirror, PAGE_SIZE, (pageNumber - 1) * PAGE_SIZE);
	const count = plural(saves.length, "save");
	const older = pageNumber * PAGE_SIZE < saves.length;
	return html`<section class="repo-section">
<details class="repo-section-toggle" open>
<summary class="section-head"><span class="section-label">timeline</span><span class="section-count">${count}</span></summary>
${timelineSvg(name, saves)}
</details>
</section>
${atlas}
<section class="repo-section" id="history">
<details class="repo-section-toggle" open>
<summary class="section-head"><span class="section-label">history</span><span class="section-count">${count}</span></summary>
${rows.map((save) => html`<a class="history-row" href="/${name}/saves/${save.id}"><span class="history-id">${save.id}</span><span class="history-msg">${save.message.split("\n")[0]}</span><span class="history-when">${relativeTime(save.created_at)}</span></a>`)}
${(pageNumber > 1 || older) && html`<p class="pager mono">${pageNumber > 1 && html`<a href="?page=${pageNumber - 1}#history">← newer</a>`}${older && html`<a href="?page=${pageNumber + 1}#history">older →</a>`}</p>`}
</details>
</section>`;
}

function details(readme: Html): Html {
	return html`<section class="repo-details">
<details class="repo-details-toggle" open>
<summary class="repo-details-head">details</summary>
<div class="repo-details-body markdown">${readme}</div>
</details>
</section>`;
}