<script lang="ts">
	import Download from "$icon/download";
	import FoldVertical from "$icon/fold-vertical";
	import PanelLeft from "$icon/panel-left";
	import SquareSplitHorizontal from "$icon/square-split-horizontal";
	import SquareSplitVertical from "$icon/square-split-vertical";
	import UnfoldVertical from "$icon/unfold-vertical";
	import type { DiffStat } from "$lib/api/diff";
	import type { DiffStyle } from "./pierre";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import type { Snippet } from "svelte";
	import DiffStatPill from "./DiffStatPill.svelte";

	interface Props {
		stat?: DiffStat;
		fileCount: number;
		// side-by-side or stacked, persisted by the route in ?diff=
		diffStyle?: DiffStyle;
		// raw .patch/.diff targets, only present for full-hash refs
		downloadUrls?: { patch: string; diff: string };
		// the sidebar can be hidden to give diffs the room
		filesOpen?: boolean;
		onToggleFiles?: () => void;
		allOpen?: boolean;
		onSetAllOpen?: (open: boolean) => void;
		// round/interdiff indicator slot, sits after the stats
		center?: Snippet;
		// subscription-toggle slot, pinned to the far end (pull review panel)
		actions?: Snippet;
	}

	let {
		stat,
		fileCount,
		diffStyle = "unified",
		downloadUrls,
		filesOpen = true,
		onToggleFiles,
		allOpen = true,
		onSetAllOpen,
		center,
		actions
	}: Props = $props();
</script>

<div
	class="sticky top-[env(safe-area-inset-top)] z-10 flex h-12 items-center gap-2 bg-background-canvas py-2"
>
	{#if onToggleFiles}
		<Button
			size="sm"
			icon={PanelLeft}
			onclick={onToggleFiles}
			aria-expanded={filesOpen}
			title="Toggle file list"
			class="hidden md:inline-flex"
		/>
	{/if}

	{#if stat}
		<DiffStatPill {stat} />
	{/if}
	<span class="hidden typography-paragraph-small text-foreground-muted md:inline-flex">
		{fileCount} changed file{fileCount === 1 ? "" : "s"}
	</span>

	{@render center?.()}

	<div class="grow"></div>

	{#if downloadUrls}
		<!-- below md these crowd the topbar into page-level horizontal scroll -->
		<ButtonGroup spaced class="hidden md:inline-flex">
			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload size="sm" icon={Download}
				>.patch</Button
			>
			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload size="sm" icon={Download}
				>.diff</Button
			>
		</ButtonGroup>
	{/if}

	{#if onSetAllOpen}
		<Button
			size="sm"
			icon={allOpen ? FoldVertical : UnfoldVertical}
			onclick={() => onSetAllOpen(!allOpen)}
		>
			<span class="hidden md:inline">{allOpen ? "Collapse all" : "Expand all"}</span>
		</Button>
	{/if}

	<ButtonGroup>
		<Button
			href={"?diff=unified" as "/"}
			data-sveltekit-replacestate
			data-sveltekit-noscroll
			size="sm"
			variant={diffStyle === "split" ? "ghost" : "default"}
			icon={SquareSplitVertical}
			aria-label="Unified diff"
			title="Unified diff"
		/>
		<Button
			href={"?diff=split" as "/"}
			data-sveltekit-replacestate
			data-sveltekit-noscroll
			size="sm"
			variant={diffStyle === "split" ? "default" : "ghost"}
			icon={SquareSplitHorizontal}
			aria-label="Split diff"
			title="Split diff"
		/>
	</ButtonGroup>

	{@render actions?.()}
</div>
