<script lang="ts">
	import { createQuery } from '@tanstack/svelte-query';
	import {
		listDuplicateGroups,
		type DuplicateGroup
	} from '$lib/services/adapters/duplicates';
	import { isAuthenticated } from '$lib/stores/session.svelte';
	import {
		setThumbnailSize,
		THUMBNAIL_SIZE_LABELS,
		THUMBNAIL_SIZE_PRESETS,
		view
	} from '$lib/stores/view.svelte';
	import Toolbar from '$lib/components/layout/Toolbar.svelte';
	import DuplicatesView from '$lib/components/duplicates/DuplicatesView.svelte';

	// Stale-time matches mule-image's DuplicatesView (30 s) so quick
	// toolbar bounces don't refetch the (potentially expensive) stack
	// listing. Invalidation by mutations is explicit, not time-driven.
	const dupesQuery = createQuery<DuplicateGroup[]>(() => ({
		queryKey: ['duplicates'],
		queryFn: listDuplicateGroups,
		enabled: isAuthenticated(),
		staleTime: 30_000
	}));
</script>

<Toolbar>
	<span class="rounded-md border border-border px-2 py-0.5 text-[11px] text-muted-foreground">
		Duplicates · stacks
	</span>
	{#snippet trailing()}
		<!-- Thumbnail-size control mirrors the timeline Toolbar. The view
		     store is global, so the picked size persists across routes —
		     when you come back to the timeline it stays where you left it. -->
		<div
			class="flex items-center overflow-hidden rounded border border-border"
			role="group"
			aria-label="Thumbnail size"
		>
			{#each THUMBNAIL_SIZE_PRESETS as size, i (size)}
				<button
					type="button"
					class="px-1.5 py-0.5 text-[10px] font-medium hover:bg-accent"
					class:bg-accent={view.thumbnailSize === size}
					class:text-foreground={view.thumbnailSize === size}
					class:text-muted-foreground={view.thumbnailSize !== size}
					onclick={() => setThumbnailSize(size)}
					title={`${THUMBNAIL_SIZE_LABELS[i]} · ${size}px`}
				>
					{THUMBNAIL_SIZE_LABELS[i]}
				</button>
			{/each}
		</div>
		<span class="text-[11px] text-muted-foreground">
			{dupesQuery.data?.length ?? 0} group{dupesQuery.data?.length === 1 ? '' : 's'}
		</span>
	{/snippet}
</Toolbar>

<main class="min-h-0 flex-1 overflow-y-auto">
	<DuplicatesView
		groups={dupesQuery.data ?? []}
		pending={dupesQuery.isPending}
		error={dupesQuery.error}
	/>
</main>
