<!--
	Inline preview pane: replaces the old fullscreen `PreviewOverlay`.
	Renders the focused photo or video inside its host pane so the grid
	stays visible below. Prev/next move `selection.focused` directly so
	the right metadata sidebar tracks in lockstep.
-->
<script lang="ts">
	import { createQuery } from '@tanstack/svelte-query';
	import { getPhoto } from '$lib/services/photoprism';
	import { thumbUrl, videoUrl } from '$lib/stores/session.svelte';
	import { selection, setAnchor, setFocused } from '$lib/stores/selection.svelte';
	import SelectionDeck from '$lib/components/preview/SelectionDeck.svelte';
	import VideoPlayer from '$lib/components/preview/VideoPlayer.svelte';
	import { isVideo, primaryFile, videoFile, type PpPhoto } from '$lib/types/photoprism';

	interface Props {
		uid: string | null;
		/** Ordered uid list for prev/next chevrons. The host page mirrors
		 *  whatever list the user is currently looking at into this prop so
		 *  navigation stays in context (timeline order, drill-in order, etc). */
		order: string[];
	}
	let { uid, order }: Props = $props();

	// Multi-select swaps the single-photo pane for a fanned deck of the
	// selected thumbnails. Reads `selection.ids` directly (already in
	// scope via the import) so the host doesn't need to thread it
	// through as a prop. Spreading SvelteSet preserves insertion order,
	// so the most recently picked card sits on top of the fan.
	const selectedUids = $derived([...selection.ids]);
	const multiSelect = $derived(selectedUids.length >= 2);

	const photoQuery = createQuery<PpPhoto>(() => ({
		queryKey: ['photo', uid ?? ''],
		queryFn: () => getPhoto(uid as string),
		enabled: Boolean(uid)
	}));

	const currentIndex = $derived(uid ? order.indexOf(uid) : -1);

	function focusAt(i: number) {
		const next = order[i];
		if (!next) return;
		setFocused(next);
		setAnchor(next);
	}
</script>

<div class="relative flex h-full w-full items-center justify-center bg-black/30 p-4">
	{#if multiSelect}
		<SelectionDeck uids={selectedUids} />
	{:else if uid === null}
		<p class="text-sm text-muted-foreground">Select a photo to preview.</p>
	{:else if photoQuery.isPending}
		<p class="text-sm text-muted-foreground">Loading…</p>
	{:else if photoQuery.isError}
		<p class="text-sm text-destructive">Failed to load photo.</p>
	{:else if photoQuery.data}
		{@const pf = primaryFile(photoQuery.data)}
		{#if currentIndex > 0}
			<button
				class="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-background/80 px-3 py-2 text-lg hover:bg-background"
				onclick={() => focusAt(currentIndex - 1)}
				aria-label="Previous photo"
			>
				‹
			</button>
		{/if}
		{#if currentIndex >= 0 && currentIndex < order.length - 1}
			<button
				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-background/80 px-3 py-2 text-lg hover:bg-background"
				onclick={() => focusAt(currentIndex + 1)}
				aria-label="Next photo"
			>
				›
			</button>
		{/if}

		{#if isVideo(photoQuery.data)}
			{@const vf = videoFile(photoQuery.data)}
			<!-- Key on the video hash so navigating to a new video remounts the
			     player. Without this the <media-player> element keeps the
			     previous src bound and `autoplay` doesn't re-fire — clicking
			     a video tile would leave the pane idle on its poster. -->
			{#key vf.Hash}
				<VideoPlayer
					src={videoUrl(vf.Hash)}
					poster={thumbUrl(pf.Hash, 'fit_1280')}
					title={photoQuery.data.OriginalName ?? pf.Name ?? ''}
				/>
			{/key}
		{:else}
			<img
				src={thumbUrl(pf.Hash, 'fit_1280')}
				alt={photoQuery.data.OriginalName ?? pf.Name ?? 'Photo'}
				class="max-h-full max-w-full rounded-md object-contain shadow-2xl"
			/>
		{/if}
	{/if}
</div>
