<script lang="ts">
	import { app } from '$lib/stores/app.svelte';

	const items = $derived(app.session?.pendingImports ?? []);

	function locationName(id: number | null): string {
		if (id == null) return '—';
		const loc = app.locations.find((l) => l.id === id);
		return loc ? `${loc.id} — ${loc.name}` : `#${id}`;
	}

	function elapsed(iso: string): string {
		const ms = Date.now() - new Date(iso).getTime();
		if (ms < 1000) return 'just now';
		const s = Math.floor(ms / 1000);
		if (s < 60) return `${s}s ago`;
		const m = Math.floor(s / 60);
		return `${m}m ${s % 60}s ago`;
	}

	// Tick every second so "elapsed" stays fresh.
	let now = $state(Date.now());
	$effect(() => {
		const id = setInterval(() => (now = Date.now()), 1000);
		return () => clearInterval(id);
	});
	$effect(() => {
		// Reference `now` so the template re-computes elapsed strings.
		void now;
	});
</script>

<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
	<div class="mb-3 flex items-center justify-between">
		<h2 class="text-lg font-semibold text-slate-800">
			Pending imports
			{#if items.length > 0}
				<span class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700"
					>{items.length}</span
				>
			{/if}
		</h2>
		<span class="text-xs text-slate-500">
			up to {app.importConcurrency} in parallel
		</span>
	</div>

	{#if items.length === 0}
		<p class="text-sm text-slate-500">Nothing in the queue.</p>
	{:else}
		<ul class="space-y-2">
			{#each items as item (item.id)}
				<li class="rounded-md border border-slate-200 bg-slate-50 p-3">
					<div class="flex items-center justify-between">
						<div class="min-w-0 flex-1">
							<div class="flex items-center gap-2">
								<span class="relative flex h-2 w-2">
									<span
										class="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-70"
									></span>
									<span class="relative inline-flex h-2 w-2 rounded-full bg-amber-500"></span>
								</span>
								<span class="truncate font-mono text-sm font-medium text-slate-900"
									>{item.partCode}</span
								>
							</div>
							<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-slate-500">
								<span>Qty: <span class="text-slate-700">{item.quantity ?? '—'}</span></span>
								<span>Loc: <span class="text-slate-700">{locationName(item.locationId)}</span></span>
								<span
									>Attempt: <span class="text-slate-700">{item.attempts}/3</span></span
								>
								<span title={item.queuedAt}>{elapsed(item.queuedAt)}</span>
							</div>
							{#if item.lastError}
								<div class="mt-1 text-xs text-rose-600">
									Last error: {item.lastError}
								</div>
							{/if}
						</div>
					</div>
				</li>
			{/each}
		</ul>
	{/if}
</section>
