<script lang="ts">
	import { resolve } from "$app/paths";
	import GitCommitHorizontal from "$icon/git-commit-horizontal";
	import TagIcon from "$icon/tag";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import type { TagSummary } from "./types";

	interface Props {
		ownerHandle: string;
		repoName: string;
		tag: TagSummary;
	}

	let { ownerHandle, repoName, tag }: Props = $props();

	const base = $derived(`/${ownerHandle}/${repoName}`);
	const tagHref = $derived(resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/"));
	const commitHref = $derived(resolve(`${base}/commit/${tag.commitHash}` as "/"));
	const shortHash = $derived(tag.commitHash.slice(0, 8));
	const messageParts = $derived(tag.message?.split("\n\n") ?? []);
</script>

<div class="flex flex-col md:grid md:grid-cols-12 md:items-start">
	<div
		class="w-full border-b border-border-default md:col-span-2 md:h-full md:border-r md:border-b-0"
	>
		<div class="flex flex-col px-2 py-2 text-xl md:hidden">
			<a
				href={tagHref}
				class="flex items-center gap-2 font-bold text-foreground-default no-underline hover:underline"
			>
				<TagIcon class="size-4" aria-hidden="true" />
				{tag.name}
			</a>
			<div class="flex items-center gap-1 typography-paragraph-regular text-foreground-muted">
				<a href={commitHref} class="font-mono no-underline hover:underline">{shortHash}</a>
				{#if tag.taggerName}
					<span aria-hidden="true">&middot;</span>
					<span>{tag.taggerName}</span>
				{/if}
				{#if tag.when}
					<span aria-hidden="true">&middot;</span>
					<TimeAgo value={tag.when} />
				{/if}
			</div>
		</div>

		<div class="hidden px-2 pb-6 text-left md:block">
			<a
				href={tagHref}
				class="flex items-center gap-2 font-bold text-foreground-default no-underline hover:underline"
			>
				<TagIcon class="size-4" aria-hidden="true" />
				{tag.name}
			</a>
			<div class="flex flex-col typography-paragraph-regular text-foreground-muted">
				<a href={commitHref} class="flex items-center gap-2 font-mono no-underline hover:underline">
					<GitCommitHorizontal class="size-4" aria-hidden="true" />
					{shortHash}
				</a>
				{#if tag.taggerName}
					<span>{tag.taggerName}</span>
				{/if}
				{#if tag.when}
					<TimeAgo value={tag.when} />
				{/if}
			</div>
		</div>
	</div>

	<div class="px-2 py-3 md:col-span-10 md:py-0 md:pb-6">
		{#if messageParts.length > 0}
			<p class="typography-paragraph-large font-bold">{messageParts[0]}</p>
			{#if messageParts.length > 1}
				<p class="cursor-text py-2 whitespace-pre-wrap">{messageParts[1]}</p>
			{/if}
		{:else}
			<p class="text-foreground-muted italic">No message</p>
		{/if}
	</div>
</div>
