<script lang="ts">
	import type { QueueItem } from '$lib/server/queue/types';
	import RecipeThumb from './RecipeThumb.svelte';
	import Retry from './ic/Retry.svelte';
	import Chevron from './ic/Chevron.svelte';
	import Check from './ic/Check.svelte';

	interface Props {
		item: QueueItem;
		onTap?: () => void;
		onRetry?: (id: string) => void;
		queuePosition?: number;
	}
	let { item, onTap, onRetry, queuePosition }: Props = $props();

	const isError = $derived(item.status === 'error' || item.status === 'unhealthy');
	const isSuccess = $derived(item.status === 'success');
	const isPending = $derived(item.status === 'pending');

	function username(url: string) {
		const m = url.match(/instagram\.com\/([^/?#]+)/);
		return m ? '@' + m[1] : '@instagram';
	}

	function relTime(iso: string): string {
		const diff = (Date.now() - new Date(iso).getTime()) / 1000;
		if (diff < 60) return 'just now';
		if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
		if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
		return Math.floor(diff / 86400) + 'd ago';
	}

	const recipe = $derived(item.recipe ?? item.results?.recipe);
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="row" role="button" tabindex="0" onclick={onTap} onkeydown={(e) => e.key === 'Enter' && onTap?.()}>
	<!-- Thumbnail -->
	<div class="thumb-wrap">
		{#if isPending}
			<div class="pending-thumb">
				<span class="queue-pos">#{queuePosition ?? 1}</span>
			</div>
		{:else}
			<RecipeThumb id={item.id} size={56} />
		{/if}
		{#if isError}
			<div class="badge badge-error">!</div>
		{:else if isSuccess}
			<div class="badge badge-success">
				<Check size={12} strokeWidth={3.4} color="#fff" />
			</div>
		{/if}
	</div>

	<!-- Body -->
	<div class="body">
		<div class="title">
			{recipe?.name || (isPending ? 'Waiting in line…' : 'Untitled recipe')}
		</div>
		<div class="meta">
			<span class="uname">{username(item.url)}</span>
			<span class="sep">·</span>
			<span>{relTime(item.createdAt)}</span>
		</div>
		{#if isError && item.error}
			<div class="error-line">{item.error.message?.slice(0, 60)}…</div>
		{/if}
	</div>

	<!-- Tail -->
	<div class="tail">
		{#if isError}
			<button
				class="ic-btn-reset retry-btn"
				onclick={(e) => { e.stopPropagation(); onRetry?.(item.id); }}
				aria-label="Retry"
			>
				<Retry size={18} color="var(--pink)" />
			</button>
		{:else}
			<Chevron size={18} color="var(--muted-2)" dir="right" />
		{/if}
	</div>
</div>

<style>
	.row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 20px;
		border-bottom: 1px solid var(--border);
		cursor: pointer;
		width: 100%;
		background: transparent;
		-webkit-tap-highlight-color: transparent;
	}
	.row:active {
		background: var(--surface-2);
	}
	.thumb-wrap {
		position: relative;
		flex-shrink: 0;
	}
	.pending-thumb {
		width: 56px;
		height: 56px;
		border-radius: 16px;
		background: var(--surface-2);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed var(--border-strong);
	}
	.queue-pos {
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 700;
		color: var(--muted);
	}
	.badge {
		position: absolute;
		bottom: -4px;
		right: -4px;
		width: 20px;
		height: 20px;
		border-radius: 99px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid var(--bg);
		font-size: 13px;
		font-weight: 800;
	}
	.badge-error {
		background: var(--status-error);
		color: #fff;
	}
	.badge-success {
		background: var(--status-success);
	}
	.body {
		flex: 1;
		min-width: 0;
	}
	.title {
		font-size: 15px;
		font-weight: 600;
		color: var(--ink);
		margin-bottom: 3px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		color: var(--muted);
	}
	.uname {
		font-family: var(--font-mono);
		color: var(--ink-2);
		font-weight: 600;
	}
	.sep {
		opacity: 0.5;
	}
	.error-line {
		font-size: 12px;
		color: var(--status-error);
		margin-top: 4px;
		font-weight: 500;
	}
	.tail {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}
	.retry-btn {
		width: 36px;
		height: 36px;
		border-radius: 12px;
		background: var(--surface-2);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
