<script lang="ts">
	import ChevronDown from "$icon/chevron-down";
	import ArrowRight from "$icon/arrow-right";
	import User from "$lib/components/ui/User.svelte";
	import PullStatePill, { type PullStatePillVariants } from "./PullStatePill.svelte";

	interface PullVersion {
		base: string;
		head: string;
		comments: unknown[];
	}

	interface Props {
		state: PullStatePillVariants["state"];
		versions: PullVersion[];
		authorHandle: string;
		authorDid: string;
	}

	let { state, versions, authorHandle, authorDid }: Props = $props();

	// the appview rings the whole history panel in the pull's state colour
	const accents = {
		open: "border-border-success",
		merged: "border-background-info-emphasis",
		closed: "border-border-strong",
		abandoned: "border-border-strong"
	};
	const accent = $derived(accents[state ?? "open"]);

	const comments = $derived(versions.reduce((total, v) => total + v.comments.length, 0));
	const plural = (n: number, noun: string) => `${n} ${noun}${n === 1 ? "" : "s"}`;
	const short = (hash: string) => hash.slice(0, 7);
</script>

<details open class="group/history flex flex-col">
	<summary
		class="flex list-none items-center justify-between gap-2 rounded-t-sm border-t-2 px-1 py-2 {accent}"
	>
		<div class="flex items-center gap-2">
			<span class="lg:hidden"><PullStatePill {state} /></span>
			<h2 class="typography-heading-4">History</h2>
		</div>
		<div class="flex items-center gap-2 typography-paragraph-small text-foreground-subtle">
			<span>{plural(versions.length, "version")}</span>
			<span class="before:content-['·']"></span>
			<span>{plural(comments, "comment")}</span>
			<ChevronDown class="size-4 shrink-0 group-open/history:rotate-180" aria-hidden="true" />
		</div>
	</summary>

	<div class="flex flex-col gap-4 overflow-y-auto pb-4 lg:max-h-[calc(100vh-3rem)]">
		{#each versions as version, index (index)}
			{@const active = index === versions.length - 1}
			<div class="overflow-clip rounded-sm border border-border-default">
				<header
					class="flex gap-2 px-3 py-2 {active ? 'bg-background-inset' : 'bg-background-default'}"
				>
					<div class="flex min-w-0 flex-1 flex-col gap-1">
						<div
							class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle"
						>
							<User handle={authorHandle} did={authorDid} size="small" />
							submitted
							<span class="rounded-sm bg-background-muted px-1 typography-monospace-small"
								>#{index}</span
							>
						</div>
						<div
							class="flex items-center gap-1 typography-monospace-small text-foreground-muted"
							title="{version.base} → {version.head}"
						>
							{short(version.base)}
							<ArrowRight class="size-3 shrink-0" aria-hidden="true" />
							{short(version.head)}
						</div>
					</div>
				</header>

				<!-- todo: this version's comments, then the merge check and the
				     merge/close/resubmit actions on the latest one -->
				<div class="border-t border-border-default px-3 py-2 typography-paragraph-small">
					{#if version.comments.length === 0}
						<span class="text-foreground-subtle italic">No comments</span>
					{/if}
				</div>
			</div>
		{/each}
	</div>
</details>
