import type { Hono } from "hono";
import { isSafePath } from "../bucket/repo.ts";
import { publicIssueCount } from "../issues/store.ts";
import { languageLines } from "../mirror/queries.ts";
import { publicDownloadCount } from "../releases/releases.ts";
import { setting } from "../server/db.ts";
import { type Html, html } from "./html.ts";
import { cacheFor, notFound, type PageContext, page, relativeTime } from "./layout.ts";
import {
	type LibraryRepo,
	publicLibrary,
	type RecentSave,
	recentSaves,
	repoCards,
} from "./library.ts";

const HEX_COLUMNS = 48;
const RECENT_ACTIVITY = 20;
const BAR_LANGUAGES = 4;
const HTTP_URL = /^https?:\/\//i;

/** §21.2's profile of the one operator; any other handle is a 404. */
export function registerProfilePage(app: Hono, ctx: PageContext): void {
	app.get("/:handle{@[^/]+}", (c) => {
		const handle = setting(ctx.kepr, "handle") ?? "";
		if (handle === "" || c.req.param("handle") !== `@${handle}`) return notFound(c, ctx);
		const library = publicLibrary(ctx);
		const bio = setting(ctx.kepr, "bio") ?? "";
		cacheFor(c, false);
		return c.html(
			page(ctx, {
				title: `@${handle}`,
				description: bio || `@${handle}'s repositories.`,
				path: `/@${handle}`,
				body: html`<div class="profile">
${cover(ctx, handle, recentSaves(library, HEX_COLUMNS))}
<section class="profile-portrait-section">
<div class="profile-left">
${identityCard(ctx, bio)}
${stats(ctx, library)}
${languageBar(library)}
</div>
<div class="profile-right">
<div class="profile-section-label">recent activity</div>
${activity(recentSaves(library, RECENT_ACTIVITY))}
</div>
</section>
<section class="profile-repos-section">
<div class="profile-section-label">repos · ${library.length}</div>
${repoCards(library)}
</section>
</div>`,
			}),
		);
	});
}

function cover(ctx: PageContext, handle: string, recent: RecentSave[]): Html {
	const since = setting(ctx.kepr, "building_since");
	const signature = setting(ctx.kepr, "signature");
	// The backdrop repeats the newest IDs when there are fewer saves than columns.
	const columns =
		recent.length === 0
			? []
			: Array.from({ length: HEX_COLUMNS }, (_, i) => recent[i % recent.length]?.save.id);
	// Without an uploaded signature, the handle in Sacramento stands in for it, as on Kepr 2.
	const name =
		signature && isSafePath(signature) && !signature.includes("/")
			? html`<img class="profile-signature" src="/static/assets/${encodeURIComponent(
					signature,
				)}" alt="${handle}">`
			: handle;
	return html`<section class="profile-cover">
<div class="hex-backdrop" aria-hidden="true">${columns.map(
		(id) => html`<span class="hex-col">${id}</span>`,
	)}</div>
<div class="profile-cover-fade"></div>
<div class="profile-identity">
<h1 class="profile-username">${name}</h1>
${since && html`<p class="profile-tagline">building since ${since}</p>`}
<span class="profile-op-badge mono">◈ operator</span>
</div>
</section>`;
}

function identityCard(ctx: PageContext, bio: string): Html | null {
	const location = setting(ctx.kepr, "location");
	const link = setting(ctx.kepr, "link") ?? "";
	const hasLink = HTTP_URL.test(link);
	if (!bio && !location && !hasLink) return null;
	return html`<div class="profile-identity-card">
${bio && html`<p class="profile-identity-bio">${bio}</p>`}
${location && html`<p class="profile-identity-location">${location}</p>`}
${
	hasLink &&
	html`<a class="profile-website-pill" href="${link}" rel="me noopener noreferrer">${link}</a>`
}
</div>`;
}

function stats(ctx: PageContext, library: LibraryRepo[]): Html {
	const tiles: [string, number][] = [
		["repos", library.length],
		["saves", library.reduce((sum, repo) => sum + repo.stats.saves, 0)],
		["issues", publicIssueCount(ctx.kepr)],
		["downloads", publicDownloadCount(ctx.kepr)],
	];
	return html`<div class="profile-stats-grid">${tiles.map(
		([label, n]) =>
			html`<div class="profile-stat-tile"><div class="profile-stat-number">${n.toLocaleString("en-US")}</div><div class="profile-stat-label">${label}</div></div>`,
	)}</div>`;
}

// Lines per language summed across public repos, as SVG so the widths need no inline style (§25).
function languageBar(library: LibraryRepo[]): Html | null {
	const lines = new Map<string, number>();
	for (const repo of library) {
		for (const [language, n] of languageLines(repo.mirror)) {
			lines.set(language, (lines.get(language) ?? 0) + n);
		}
	}
	const top = [...lines].sort((a, b) => b[1] - a[1]).slice(0, BAR_LANGUAGES);
	const total = top.reduce((sum, [, n]) => sum + n, 0);
	if (total === 0) return null;
	let x = 0;
	const segments = top.map(([language, n]) => {
		const width = (100 * n) / total;
		const segment = html`<rect x="${x.toFixed(
			2,
		)}" width="${width.toFixed(2)}" height="6"><title>${language} ${Math.round(width)}%</title></rect>`;
		x += width;
		return segment;
	});
	return html`<div class="profile-languages-bar">
<svg class="profile-lang-bar" viewBox="0 0 100 6" preserveAspectRatio="none" role="img" aria-label="languages by lines">${
		segments
	}</svg>
<div class="profile-lang-labels">${top
		.slice(0, 3)
		.map(([language]) => html`<span class="profile-lang-label">${language}</span>`)}</div>
</div>`;
}

function activity(recent: RecentSave[]): Html {
	if (recent.length === 0) return html`<p class="profile-empty-state">no activity yet</p>`;
	return html`<div class="profile-timeline" tabindex="0"
role="region" aria-label="recent activity">${recent.map(
		({ repo, save }) =>
			html`<div class="profile-event"><a class="profile-event-repo" href="/${
				repo
			}">${repo}</a><span class="profile-event-glyph">✦</span><a class="profile-event-message" href="/${repo}/saves/${save.id}">${save.message.split("\n")[0]}</a><span class="profile-event-time">${relativeTime(save.created_at)}</span></div>`,
	)}</div>`;
}