<script lang="ts">
	// a mock of the pull-request commit view, composed from the web app's own
	// pieces the way the home page's StackDemo is: the real
	// PullCommitListHeader (which carries the round version selector), a
	// RangeSelector for the commit list, and DiffStatPill. the data is fake so
	// the docs build stays clear of the app's auth, profile and API graphs.
	import Card from "$lib/components/ui/Card.svelte";
	import RangeSelector, {
		type Range,
		type RowActions,
	} from "$lib/components/ui/RangeSelector.svelte";
	import PullCommitListHeader from "$lib/components/repo/pulls/PullCommitListHeader.svelte";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
	import type { PullSubmission } from "$lib/api";
	import type { CommitSummary } from "$lib/components/repo/types";

	const versions: PullSubmission[] = [
		{
			head: "456789abcdef0123456789abcdef0123456789ab",
			base: "fedcba9876543210fedcba9876543210fedcba98",
			createdAt: "2026-07-27T12:00:00Z",
		},
		{
			head: "89abcdef0123456789abcdef0123456789abcdef",
			base: "fedcba9876543210fedcba9876543210fedcba98",
			createdAt: "2026-07-27T18:40:00Z",
		},
		{
			head: "0123456789abcdef0123456789abcdef01234567",
			base: "cba9876543210fedcba9876543210fedcba98765",
			createdAt: "2026-07-28T09:30:00Z",
		},
	];

	const commits: CommitSummary[] = [
		{
			hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
			shortHash: "d4e5f6a7",
			subject: "tidy diff toolbar spacing",
			body: "",
			authorName: "alice",
			authorEmail: "alice@tangled.org",
			when: "2026-07-28T09:10:00Z",
			changeId: "zsuskuln",
			stat: { insertions: 4, deletions: 9 },
		},
		{
			hash: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2",
			shortHash: "c3d4e5f6",
			subject: "fix hydrate leak on version switch",
			body: "",
			authorName: "alice",
			authorEmail: "alice@tangled.org",
			when: "2026-07-28T08:40:00Z",
			changeId: "rlvkpxrz",
			stat: { insertions: 12, deletions: 3 },
		},
		{
			hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
			shortHash: "b2c3d4e5",
			subject: "add interdiff change-id narrowing",
			body: "",
			authorName: "bob",
			authorEmail: "bob@tangled.org",
			when: "2026-07-27T18:20:00Z",
			changeId: "kkmtprmw",
			stat: { insertions: 148, deletions: 0 },
		},
	];

	type Item = CommitSummary | "base";
	const items: Item[] = [...commits, "base"];

	let versionRange = $state<Range>({
		start: versions.length - 1,
		end: versions.length - 1,
	});
	let showChangeIds = $state(true);
	let commitRange = $state<Range>({ start: 0, end: commits.length });

	const resetRange = () => (commitRange = { start: 0, end: commits.length });
</script>

<Card
	padding="small"
	class="not-content my-lg space-y-xs typography-paragraph-regular">
	<PullCommitListHeader
		{versions}
		{commits}
		{versionRange}
		bind:showChangeIds
		oncommitVersions={(next) => (versionRange = next)} />

	{#snippet commitRow(_index: number, item: Item, actions: RowActions)}
		{#if item === "base"}
			<div class="relative flex h-10 flex-1 items-center px-sm">
				<button
					type="button"
					class="absolute inset-0 cursor-pointer"
					aria-label="Show all changes"
					onclick={resetRange}>
				</button>
				<span
					class="pointer-events-none relative text-foreground-muted">
					Base
				</span>
			</div>
		{:else}
			<div
				role="none"
				class="relative grid min-h-10 flex-1 grid-cols-[minmax(0,1fr)] gap-x-xs px-sm sm:grid-cols-[5rem_minmax(0,1fr)_8rem]"
				{...actions}>
				<span
					class="col-start-1 row-start-1 hidden h-10 items-center truncate typography-monospace-regular text-foreground-muted sm:flex">
					{showChangeIds && item.changeId
						? item.changeId.slice(0, 8)
						: item.shortHash}
				</span>
				<div
					class="col-start-1 row-start-1 flex h-10 min-w-0 items-center gap-xs sm:col-start-2">
					<Avatar handle={item.authorName} size="large" />
					<span class="min-w-0 truncate">{item.subject}</span>
				</div>
				<div
					class="col-start-3 row-start-1 hidden h-10 items-center justify-end gap-sm sm:flex">
					{#if item.stat}<DiffStatPill
							stat={item.stat}
							size="small" />{/if}
				</div>
			</div>
		{/if}
	{/snippet}

	<RangeSelector
		{items}
		row={commitRow}
		minLength={2}
		muteFullSelection
		mode="select-top"
		bind:range={commitRange} />
</Card>