import { canManage } from "../lib/access.ts";
import { escapeHtml } from "../lib/html.ts";
import { t } from "../lib/i18n/index.ts";
import type { ProfileInfo } from "../lib/profile.ts";
import { profileUrl, settingsUrl } from "../lib/urls.ts";
import type { MembershipRow } from "../server/db/queries/index.ts";
import { type LayoutOptions, layout } from "./layout.ts";
import { outlineSmallButtonClass, THEME } from "./theme/index.ts";

function renderMemberCard(
	m: MembershipRow,
	wikiDid: string,
	profile: ProfileInfo | undefined,
	roleLabel: (role: string) => string,
): string {
	const isOwner = m.did === wikiDid;
	const role = isOwner ? "owner" : m.role;
	const handle = profile?.handle ?? null;
	const displayName = profile?.displayName ?? null;
	const href = profileUrl(handle ?? m.did);

	const avatar = profile?.avatar
		? `<img
			src="${escapeHtml(profile.avatar)}"
			width="40"
			height="40"
			loading="lazy"
			decoding="async"
			alt=""
			class="w-10 h-10 rounded-full">`
		: `<div class="w-10 h-10 rounded-full ${THEME.bgPlaceholder} flex items-center justify-center ${THEME.textMuted}">
			<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
		</div>`;

	const nameLine = displayName
		? `<span class="font-medium truncate">${escapeHtml(displayName)}</span>`
		: "";
	const handleLine = handle
		? `<span class="text-xs ${THEME.textMuted} truncate">@${escapeHtml(handle)}</span>`
		: `<span class="font-mono text-xs ${THEME.textMuted}">${escapeHtml(m.did.slice(0, 24))}…</span>`;

	return `<a href="${href}" class="flex items-center gap-3 p-3 ${THEME.bgSurface} border ${THEME.border} rounded-lg hover:shadow-md transition-shadow">
		${avatar}
		<div class="flex flex-col min-w-0 flex-1">
			${nameLine}
			${handleLine}
		</div>
		<span class="text-xs ${THEME.textMuted} shrink-0">${escapeHtml(roleLabel(role))}</span>
	</a>`;
}

export function membersPage(
	wikiName: string,
	wikiDid: string,
	members: MembershipRow[],
	profiles: Map<string, ProfileInfo>,
	options: LayoutOptions,
): string {
	const locale = options.locale ?? "en";
	const msg = t(locale);
	const roleLabel = (role: string) =>
		({
			admin: msg.access.roleAdmin,
			contributor: msg.access.roleContributor,
			viewer: msg.access.roleViewer,
			owner: msg.access.roleOwner,
		})[role] ?? role;

	// Owner, then admins, then contributors; viewers are excluded upstream.
	const rolePriority: Record<string, number> = {
		admin: 1,
		contributor: 2,
	};
	const sorted = [...members].sort((a, b) => {
		const aOwner = a.did === wikiDid ? 0 : (rolePriority[a.role] ?? 3);
		const bOwner = b.did === wikiDid ? 0 : (rolePriority[b.role] ?? 3);
		if (aOwner !== bOwner) return aOwner - bOwner;
		return a.created_at.localeCompare(b.created_at);
	});

	const cards = sorted
		.map((m) => renderMemberCard(m, wikiDid, profiles.get(m.did), roleLabel))
		.join("\n");

	const body =
		sorted.length > 0
			? `<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-3">${cards}</div>`
			: `<p class="${THEME.textMuted}">${msg.access.noMembers}</p>`;

	// Admins manage members in wiki settings; this directory links there.
	const handle = options.ownerHandle ?? "";
	const slug = options.wikiSlug ?? "";
	const manageLink =
		handle && slug && canManage(options.accessLevel ?? "none")
			? `<a href="${settingsUrl(handle, slug)}#members" class="${outlineSmallButtonClass} shrink-0">${msg.access.manageMembers}</a>`
			: "";

	return layout(
		`${msg.access.members} — ${wikiName}`,
		`<div class="max-w-3xl mx-auto">
			<div class="flex items-center justify-between gap-4 mb-6">
				<h1 class="text-2xl font-bold ${THEME.text}">${msg.access.members}</h1>
				${manageLink}
			</div>
			${body}
		</div>`,
		options,
	);
}