<script lang="ts">
	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
	import IssueHeader from "$lib/components/repo/issues/IssueHeader.svelte";
	import IssueLabelPanel from "$lib/components/repo/issues/IssueLabelPanel.svelte";
	import PullDiscussion from "$lib/components/repo/pulls/PullDiscussion.svelte";
	import PullInfoBar from "$lib/components/repo/pulls/PullInfoBar.svelte";
	import TabPanel from "$lib/components/ui/TabPanel.svelte";

	let { data } = $props();

	let pull = $derived(data.pull);
</script>

<svelte:head>
	<title
		>{pull.title} &middot; Pull Request #{pull.rkey} &middot; {data.repo.ownerHandle}/{data.repo
			.name} &middot; Tangled</title
	>
</svelte:head>

<!--
	unlike every other repo page this one is laid out by the page, not the layout:
	the discussion rail runs the full page height beside the repo chrome, and the
	diff below needs the whole viewport width, so only the conversation half stays
	inside the reading column
-->
<div class="flex flex-col gap-4 lg:flex-row lg:gap-2">
	<div class="min-w-0 flex-1">
		<!-- max-w-5xl is the layout's max-w-screen-lg, spelled the way the linter wants -->
		<div class="mx-auto max-w-5xl">
			<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
			<RepoTabs repo={data.repo} counts={data.counts} active="pulls" />

			<div class="grid grid-cols-1 gap-4 lg:grid-cols-[4fr_1fr]">
				<div class="min-w-0">
					<TabPanel>
						<IssueHeader title={pull.title} rkey={pull.rkey} />
						<PullInfoBar
							state={pull.state}
							authorHandle={pull.author.handle}
							authorDid={pull.author.did}
							ownerHandle={data.repo.ownerHandle}
							repoName={data.repo.name}
							targetBranch={pull.targetBranch}
						/>
						<!-- todo: body markup and reactions once the loader returns them -->
						<article class="mt-4 typography-paragraph-regular text-foreground-subtle italic">
							No description provided
						</article>
					</TabPanel>
				</div>

				<!-- todo: participants, subscribe button, backlinks, external links -->
				<div class="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
					<IssueLabelPanel />
				</div>

				<div class="lg:col-start-1 lg:row-start-2">
					<h2 class="mb-2 typography-heading-4">Commits</h2>
					<!-- todo: commit list, needs the base..head log in the loader -->
				</div>
			</div>
		</div>

		<!-- todo: DiffView. full-bleed on purpose, it is the reason this page places
		     its own repo header instead of taking the layout's -->
		<div class="mt-4 min-h-[50vh]"></div>
	</div>

	<aside class="lg:sticky lg:top-0 lg:max-h-screen lg:w-[25vw] lg:shrink-0">
		<PullDiscussion
			state={pull.state}
			versions={pull.versions}
			authorHandle={pull.author.handle}
			authorDid={pull.author.did}
		/>
	</aside>
</div>
