<script lang="ts">
	import { resolve } from "$app/paths";
	import type { CommitDetail } from "$lib/api/repo";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import { formatDateTime } from "$lib/format";

	interface Props {
		ownerHandle: string;
		repoName: string;
		commit: CommitDetail;
		// empty for a root commit
		parent?: string;
		changeId?: string;
	}

	let { ownerHandle, repoName, commit, parent = "", changeId = "" }: Props = $props();

	const base = $derived(`/${ownerHandle}/${repoName}`);

	const showCommitter = $derived(
		commit.committerEmail !== "" && commit.committerEmail !== commit.authorEmail
	);
	const parentShort = $derived(parent.slice(0, 8));
	const changeIdShort = $derived(changeId.slice(0, 8));

	const absoluteTime = $derived(formatDateTime(commit.committerWhen));
</script>

<section class="text-foreground-default">
	<div>
		<p class="pb-2 typography-paragraph-large">{commit.subject}</p>
		{#if commit.body}
			<p class="mt-1 cursor-text pb-2 typography-paragraph-regular whitespace-pre-wrap">
				{commit.body}
			</p>
		{/if}
	</div>

	{#snippet attribution(label: string, name: string, email: string)}
		<span class="inline-flex flex-wrap items-center">
			<span class="w-24 text-foreground-subtle select-none">{label}</span>
			<!-- no email -> did mapping here, always the fallback form -->
			<span class="flex items-center gap-1">
				<Avatar size="large" />
				{#if email}
					<a href="mailto:{email}" class="no-underline hover:underline">{name}</a>
				{:else}
					<span>{name}</span>
				{/if}
			</span>
		</span>
	{/snippet}

	<div class="flex flex-col gap-2 pt-4 typography-paragraph-regular">
		<div class="flex flex-col gap-1 font-mono text-foreground-muted">
			{@render attribution("author", commit.authorName, commit.authorEmail)}

			{#each commit.coAuthors as coAuthor (coAuthor.email)}
				{@render attribution("co-author", coAuthor.name, coAuthor.email)}
			{/each}

			{#if showCommitter}
				{@render attribution("committer", commit.committerName, commit.committerEmail)}
			{/if}

			{#if commit.committerWhen}
				<span class="inline-flex flex-wrap items-center">
					<span class="w-24 text-foreground-subtle select-none">date</span>
					<span class="inline-flex flex-wrap items-center gap-1">
						<TimeAgo value={commit.committerWhen} variant="full" />
						{#if absoluteTime}
							<span>({absoluteTime})</span>
						{/if}
					</span>
				</span>
			{/if}

			{#if commit.hash}
				<span class="inline-flex flex-wrap items-center">
					<span class="w-24 text-foreground-subtle select-none">commit</span>
					<a
						href={resolve(`${base}/commit/${commit.hash}` as "/")}
						class="break-all no-underline hover:underline"
					>
						<span class="md:hidden">{commit.shortHash}</span>
						<span class="hidden md:inline">{commit.hash}</span>
					</a>
				</span>
			{/if}

			{#if parent}
				<span class="inline-flex flex-wrap items-center">
					<span class="w-24 text-foreground-subtle select-none">parent</span>
					<a
						href={resolve(`${base}/commit/${parent}` as "/")}
						class="break-all no-underline hover:underline"
					>
						<span class="md:hidden">{parentShort}</span>
						<span class="hidden md:inline">{parent}</span>
					</a>
				</span>
			{/if}

			{#if changeId}
				<span class="inline-flex flex-wrap items-center">
					<span class="w-24 text-foreground-subtle select-none">change-id</span>
					<span class="break-all">
						<span class="md:hidden">{changeIdShort}</span>
						<span class="hidden md:inline">{changeId}</span>
					</span>
				</span>
			{/if}
		</div>
	</div>
</section>
