<script lang="ts">
	import type { QueueItem } from '$lib/server/queue/types';
	import CookingPot from './CookingPot.svelte';
	import PhaseTrack from './PhaseTrack.svelte';

	interface Props {
		item: QueueItem;
		onTap?: () => void;
	}
	let { item, onTap }: Props = $props();

	const phaseMap: Record<string, string> = {
		extraction: 'Prepping',
		parsing: 'Simmering',
		uploading: 'Plating'
	};
	const phaseHints: Record<string, string> = {
		extraction: 'Pulling the post + ingredients off Instagram',
		parsing: 'Reading the caption with an LLM',
		uploading: 'Sending it to your Tandoor library'
	};

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

	function phase(item: QueueItem): 'prepping' | 'simmering' | 'plating' {
		const map: Record<string, 'prepping' | 'simmering' | 'plating'> = {
			extraction: 'prepping',
			parsing: 'simmering',
			uploading: 'plating'
		};
		return map[item.currentPhase ?? 'extraction'] ?? 'prepping';
	}

	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';
		return Math.floor(diff / 3600) + 'h ago';
	}
</script>

<button class="ic-btn-reset hero-card" onclick={onTap}>
	<div class="gradient-strip"></div>
	<div class="inner">
		<div class="header-row">
			<span class="cooking-chip">
				<span class="ic-live chip-dot"></span>
				Cooking now
			</span>
			<span class="time">{relTime(item.createdAt)}</span>
		</div>

		<div class="body-row">
			<CookingPot size={90} phase={phase(item)} animate={true} />
			<div class="text-area">
				<div class="phase-label">{phaseMap[item.currentPhase ?? 'extraction']}…</div>
				<div class="phase-hint">{phaseHints[item.currentPhase ?? 'extraction']}</div>
				<span class="source-chip">{username(item.url)}</span>
			</div>
		</div>

		<PhaseTrack phase={phase(item)} />
	</div>
</button>

<style>
	.hero-card {
		display: block;
		width: calc(100% - 32px);
		margin: 8px 16px 0;
		border-radius: 28px;
		overflow: hidden;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
		border: 1px solid var(--border);
		position: relative;
		text-align: left;
	}
	.gradient-strip {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: var(--brand-gradient);
	}
	.inner {
		padding: 20px 20px 18px;
	}
	.header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 4px;
	}
	.cooking-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 10px 4px 8px;
		border-radius: 99px;
		background: var(--brand-gradient);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		font-family: var(--font-mono);
		white-space: nowrap;
	}
	.chip-dot {
		width: 6px;
		height: 6px;
		border-radius: 99px;
		background: #fff;
		display: inline-block;
	}
	.time {
		font-size: 11px;
		color: var(--muted);
		font-family: var(--font-mono);
		white-space: nowrap;
	}
	.body-row {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		margin-bottom: 14px;
	}
	.text-area {
		flex: 1;
		min-width: 0;
	}
	.phase-label {
		font-family: 'Lilita One', system-ui, sans-serif;
		font-size: 26px;
		line-height: 1;
		color: var(--ink);
		margin-bottom: 6px;
		letter-spacing: -0.01em;
	}
	.phase-hint {
		font-size: 13px;
		color: var(--muted);
		line-height: 1.35;
		margin-bottom: 8px;
	}
	.source-chip {
		display: inline-block;
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 700;
		color: var(--ink-2);
		background: var(--surface-2);
		padding: 3px 8px;
		border-radius: 99px;
	}
</style>
