<script lang="ts">
	import { resolve } from "$app/paths";
	import Tag from "$lib/components/ui/Tag.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import type { BranchSummary } from "./types";

	interface Props {
		ownerHandle: string;
		repoName: string;
		branches: BranchSummary[];
	}

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

	const base = $derived(`/${ownerHandle}/${repoName}`);
	const treeHref = (name: string) => resolve(`${base}/tree/${encodeURIComponent(name)}` as "/");
	const logHref = (name: string) => resolve(`${base}/commits/${encodeURIComponent(name)}` as "/");
	const subject = (message?: string) => message?.split("\n\n")[0] ?? "";
</script>

<section id="branches-table" class="overflow-x-auto rounded bg-background-default px-6 py-4">
	<h2 class="mb-4 typography-paragraph-regular font-bold">Branches</h2>

	{#if branches.length === 0}
		<p class="py-6 text-center text-foreground-subtle">This repository has no branches.</p>
	{:else}
		<div class="hidden divide-y divide-border-default md:flex md:flex-col">
			<div class="grid grid-cols-14 gap-4">
				<div
					class="col-span-4 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
				>
					Name
				</div>
				<div
					class="col-span-2 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
				>
					Commit
				</div>
				<div
					class="col-span-6 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
				>
					Message
				</div>
				<div
					class="col-span-2 justify-self-end py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
				>
					Date
				</div>
			</div>
			{#each branches as branch (branch.name)}
				<div class="grid grid-cols-14 gap-4 py-3">
					<div class="col-span-4 flex items-center gap-2 align-top">
						<a
							href={treeHref(branch.name)}
							class="truncate text-foreground-default no-underline hover:underline"
						>
							{branch.name}
						</a>
						{#if branch.isDefault}
							<Tag color="gray" class="font-mono">Default</Tag>
						{/if}
					</div>
					<div class="col-span-2 align-top font-mono">
						<a href={logHref(branch.name)} class="no-underline hover:underline">
							{branch.hash.slice(0, 8)}
						</a>
					</div>
					<div class="col-span-6 align-top break-words">{subject(branch.message)}</div>
					<div class="col-span-2 justify-self-end align-top text-foreground-muted">
						{#if branch.when}
							<TimeAgo value={branch.when} />
						{/if}
					</div>
				</div>
			{/each}
		</div>

		<div class="md:hidden">
			{#each branches as branch, index (branch.name)}
				<div class="p-2 {index < branches.length - 1 ? 'border-b border-border-default' : ''}">
					<div class="flex items-center gap-2">
						<a
							href={treeHref(branch.name)}
							class="truncate font-medium text-foreground-default no-underline hover:underline"
						>
							{branch.name}
						</a>
						{#if branch.isDefault}
							<Tag color="gray" class="font-mono">Default</Tag>
						{/if}
					</div>
					<div
						class="mt-1 flex items-center gap-1 typography-paragraph-small text-foreground-muted"
					>
						<a href={logHref(branch.name)} class="font-mono no-underline hover:underline">
							{branch.hash.slice(0, 8)}
						</a>
						{#if branch.when}
							<span aria-hidden="true">&middot;</span>
							<TimeAgo value={branch.when} />
						{/if}
					</div>
				</div>
			{/each}
		</div>
	{/if}
</section>
