<script lang="ts">
	import { onMount, tick } from 'svelte';
	import { goto } from '$app/navigation';
	import IconFullscreen from '$lib/assets/Scale.svg?raw';
	import {
		compareCatalogItems,
		type AttributeDefinition,
		type CatalogItem,
		type ComparisonCategory,
		type ComparisonRow,
		type CompareOutput
	} from '@tool.io/tools/compare';
	import CompareActionIcon from './CompareActionIcon.svelte';
	import {
		filterComparisonRows,
		type ComparisonRowMode
	} from './comparison-filter';
	import {
		emptyPersonalItemState,
		parsePersonalState,
		togglePersonalItemState,
		type ComparePersonalItemState,
		type ComparePersonalState
	} from './personal-state';
	import { removeSelectedItem } from './selection';
	import { groupCompareSuggestions } from './modal';
	import {
		comparisonHref,
		comparisonItemsHref,
		maximumComparisonItems
	} from './routes';

	interface Props {
		data?: {
			compareCatalog?: {
				attributeDefinitions: AttributeDefinition[];
				categories: ComparisonCategory[];
				items: CatalogItem[];
				nextCursor?: string | null;
				schemaVersion: 1;
			};
			compareCategory?: string | null;
			compareCategoryRestricted?: boolean;
			compareMissingSelections?: Array<{
				message: string;
				query: string;
			}>;
			comparePairRoute?: boolean;
			compareSelectedSlugs?: string[];
		};
		preview?: boolean;
	}

	let { data = {}, preview = false }: Props = $props();

	const PERSONAL_STATE_KEY = 'toolio-compare-personal-state-v1';
	const rowModes: readonly {
		label: string;
		mode: ComparisonRowMode;
	}[] = [
		{ label: 'Show all', mode: 'all' },
		{ label: 'Differences', mode: 'different' },
		{ label: 'Shared facts', mode: 'shared' }
	];
	const emptyCatalog = {
		attributeDefinitions: [] as AttributeDefinition[],
		categories: [] as ComparisonCategory[],
		items: [] as CatalogItem[],
		nextCursor: null as string | null,
		schemaVersion: 1 as const
	};
	const featuredCategoryItems: Readonly<
		Record<string, string[]>
	> = {
		appliances: ['front-load-washer', 'heat-pump-dryer'],
		bicycles: ['trek-fx-3', 'specialized-rockhopper'],
		cars: ['tesla-model-3', 'toyota-corolla'],
		cpus: ['amd-ryzen-7-9700x', 'intel-core-ultra-7-265k'],
		'electric-cars': ['tesla-model-3', 'compact-electric-car'],
		food: ['banana', 'apple'],
		gpus: ['nvidia-geforce-rtx-4070', 'amd-radeon-rx-7800-xt'],
		headphones: [
			'closed-back-studio-headphones',
			'wireless-anc-headphones'
		],
		heating: ['air-source-heat-pump', 'condensing-gas-boiler'],
		'light-bulbs': ['a19-led-bulb', 'br30-smart-bulb'],
		microphones: [
			'dynamic-broadcast-microphone',
			'condenser-studio-microphone'
		],
		'mobile-devices': ['apple-iphone-16', 'samsung-s26-ultra'],
		monitors: ['monitor-27-4k', 'monitor-34-ultrawide'],
		ram: ['ddr5-16gb-kit', 'ddr5-32gb-kit'],
		servers: ['virtual-private-server', 'bare-metal-server'],
		'smart-rings': ['oura-ring-4', 'samsung-galaxy-ring'],
		smartphones: ['apple-iphone-16', 'samsung-s26-ultra'],
		smartwatches: [
			'apple-watch-series-10',
			'samsung-galaxy-watch7'
		],
		softboxes: [
			'octagonal-softbox-90',
			'rectangular-softbox-120'
		],
		'studio-lights': [
			'bi-color-studio-light',
			'rgbww-studio-light'
		],
		tablets: ['ipad-2024', 'samsung-galaxy-tab-s10'],
		tpus: ['edge-tpu-module', 'data-center-tpu-board'],
		tvs: ['oled-tv-55', 'mini-led-tv-65'],
		vehicles: ['tesla-model-3', 'toyota-corolla'],
		wearables: [
			'apple-watch-series-10',
			'samsung-galaxy-watch7'
		]
	};
	const topComparedItemSlugs = [
		'apple-iphone-16',
		'samsung-s26-ultra',
		'ipad-2024',
		'apple-watch-series-10',
		'tesla-model-3',
		'amd-ryzen-7-9700x',
		'trek-fx-3',
		'banana'
	] as const;
	const initialData = (() => data)();
	const catalog = initialData?.compareCatalog ?? emptyCatalog;
	const initialCatalogItems = [...catalog.items];
	let catalogItems = $state<CatalogItem[]>(initialCatalogItems);
	let attributeDefinitions = $state<AttributeDefinition[]>([
		...catalog.attributeDefinitions
	]);
	const activeCategory = catalog.categories.find(
		(category) => category.slug === initialData?.compareCategory
	);
	const categoryRestricted = Boolean(
		initialData?.compareCategoryRestricted && activeCategory
	);
	const missingSelections =
		initialData?.compareMissingSelections ?? [];
	const requestedItems = (
		initialData?.compareSelectedSlugs ?? []
	)
		.map((identifier) =>
			initialCatalogItems.find(
				(item) =>
					item.id === identifier || item.slug === identifier
			)
		)
		.filter((item): item is CatalogItem => Boolean(item));
	const categoryItems = activeCategory
		? initialCatalogItems.filter((item) =>
				item.categoryIds.includes(activeCategory.id)
			)
		: [];
	const featuredItems = activeCategory
		? (featuredCategoryItems[activeCategory.slug] ?? [])
				.map((slug) =>
					categoryItems.find((item) => item.slug === slug)
				)
				.filter((item): item is CatalogItem => Boolean(item))
		: [];
	const defaults =
		requestedItems.length > 0
			? requestedItems
			: initialData?.comparePairRoute
				? []
				: activeCategory
					? featuredItems.length >= 2
						? featuredItems
						: categoryItems.slice(0, 2)
					: initialCatalogItems.filter((item) =>
							['apple-iphone-16', 'samsung-s26-ultra'].includes(
								item.slug
							)
						);

	let selectedIds = $state(defaults.map((item) => item.id));
	let query = $state(missingSelections[0]?.query ?? '');
	let rowMode: ComparisonRowMode = $state('all');
	let searchFocused = $state(false);
	let personalState: ComparePersonalState = $state({});
	let expandedRowDescriptions: string[] = $state([]);
	let compareAnchorItem: CatalogItem | null = $state(null);
	let compareModalOpen = $state(false);
	let compareModalMode = $state<'add' | 'replace'>('replace');
	let compareModalQuery = $state('');
	let mainSearchInput: HTMLInputElement = $state(undefined!);
	let compareModalInput: HTMLInputElement = $state(undefined!);
	let comparisonSurface: HTMLElement = $state(undefined!);
	let selectedItemsCard: HTMLElement = $state(undefined!);
	let selectedItemsScroller: HTMLDivElement = $state(
		undefined!
	);
	let stickySelectedItemsScroller: HTMLDivElement = $state(
		undefined!
	);
	let comparisonRowsScroller: HTMLDivElement = $state(
		undefined!
	);
	let showStickySelectedItems = $state(false);
	let comparisonFullscreen = $state(false);

	type CatalogSearchPayload = {
		attributeDefinitions: AttributeDefinition[];
		items: CatalogItem[];
		nextCursor: string | null;
		schemaVersion: 1;
	};

	const mergeById = <T extends { id: string }>(
		current: readonly T[],
		incoming: readonly T[]
	): T[] =>
		Array.from(
			new Map(
				[...current, ...incoming].map((entry) => [
					entry.id,
					entry
				])
			).values()
		);

	async function loadCatalogMatches(
		searchQuery: string,
		signal: AbortSignal
	) {
		const normalized = searchQuery.trim();
		if (normalized.length < 2) return;
		const response = await fetch(
			`/api/compare/search?query=${encodeURIComponent(normalized)}&limit=20${
				categoryRestricted && activeCategory
					? `&category=${encodeURIComponent(activeCategory.slug)}`
					: ''
			}`,
			{ signal }
		);
		if (!response.ok) return;
		const payload =
			(await response.json()) as CatalogSearchPayload;
		if (payload.schemaVersion !== 1) return;
		catalogItems = mergeById(catalogItems, payload.items);
		attributeDefinitions = mergeById(
			attributeDefinitions,
			payload.attributeDefinitions
		);
	}

	$effect(() => {
		const searchQuery = query;
		if (searchQuery.trim().length < 2) return;
		const controller = new AbortController();
		const timer = window.setTimeout(() => {
			void loadCatalogMatches(searchQuery, controller.signal);
		}, 150);
		return () => {
			window.clearTimeout(timer);
			controller.abort();
		};
	});

	$effect(() => {
		const searchQuery = compareModalQuery;
		if (!compareModalOpen || searchQuery.trim().length < 2)
			return;
		const controller = new AbortController();
		const timer = window.setTimeout(() => {
			void loadCatalogMatches(searchQuery, controller.signal);
		}, 150);
		return () => {
			window.clearTimeout(timer);
			controller.abort();
		};
	});
	let actionNotice: {
		action: 'price alert' | 'review';
		itemId: string;
		message: string;
	} | null = $state(null);

	onMount(() => {
		personalState = parsePersonalState(
			localStorage.getItem(PERSONAL_STATE_KEY)
		);

		const selectedItemsObserver = new IntersectionObserver(
			([entry]) => {
				const shouldShow = Boolean(
					entry &&
					!entry.isIntersecting &&
					entry.boundingClientRect.bottom <= 8
				);
				showStickySelectedItems = shouldShow;
				if (shouldShow) {
					void tick().then(() => {
						if (stickySelectedItemsScroller) {
							stickySelectedItemsScroller.scrollLeft =
								comparisonRowsScroller?.scrollLeft ??
								selectedItemsScroller.scrollLeft;
						}
					});
				}
			},
			{ rootMargin: '-8px 0px 0px' }
		);
		if (selectedItemsCard) {
			selectedItemsObserver.observe(selectedItemsCard);
		}
		const updateFullscreenState = () => {
			comparisonFullscreen =
				document.fullscreenElement === comparisonSurface;
		};
		document.addEventListener(
			'fullscreenchange',
			updateFullscreenState
		);

		return () => {
			selectedItemsObserver.disconnect();
			document.removeEventListener(
				'fullscreenchange',
				updateFullscreenState
			);
		};
	});

	async function toggleFullscreen() {
		if (document.fullscreenElement === comparisonSurface) {
			await document.exitFullscreen();
			return;
		}
		await comparisonSurface?.requestFullscreen?.();
	}

	function calculateComparison(
		items: CatalogItem[],
		attributeDefinitions: AttributeDefinition[],
		categories: ComparisonCategory[]
	): CompareOutput | null {
		const comparison = compareCatalogItems({
			attributeDefinitions,
			categories,
			items
		});
		return comparison.ok ? comparison.output : null;
	}

	async function addItem(item: CatalogItem) {
		if (
			selectedIds.includes(item.id) ||
			selectedItems.length >= maximumComparisonItems
		)
			return;
		const nextItems = [...selectedItems, item];
		if (nextItems.length >= 2) {
			await goto(
				comparisonItemsHref(
					nextItems,
					catalog.categories,
					activeCategory ?? null
				)
			);
			return;
		}
		selectedIds = nextItems.map((entry) => entry.id);
		query = '';
		searchFocused = true;
		await tick();
		mainSearchInput?.focus();
	}

	async function removeItem(id: string) {
		const nextIds = removeSelectedItem(selectedIds, id);
		const nextItems = nextIds
			.map((itemId) =>
				catalogItems.find((item) => item.id === itemId)
			)
			.filter((item): item is CatalogItem => Boolean(item));
		if (nextItems.length >= 2) {
			await goto(
				comparisonItemsHref(
					nextItems,
					catalog.categories,
					activeCategory ?? null
				)
			);
			return;
		}
		selectedIds = nextIds;
	}

	function syncHorizontalScroll(
		source: HTMLDivElement,
		...targets: HTMLDivElement[]
	) {
		for (const target of targets) {
			if (target && target.scrollLeft !== source.scrollLeft) {
				target.scrollLeft = source.scrollLeft;
			}
		}
	}

	async function openCompareModal(item: CatalogItem) {
		compareAnchorItem = item;
		compareModalMode = 'replace';
		compareModalOpen = true;
		compareModalQuery = '';
		await tick();
		compareModalInput?.focus();
	}

	async function openAddItemModal() {
		if (selectedItems.length >= maximumComparisonItems) return;
		compareAnchorItem = null;
		compareModalMode = 'add';
		compareModalOpen = true;
		compareModalQuery = '';
		await tick();
		compareModalInput?.focus();
	}

	function closeCompareModal() {
		compareModalOpen = false;
		compareAnchorItem = null;
		compareModalQuery = '';
	}

	async function compareWith(item: CatalogItem) {
		if (compareModalMode === 'add') {
			if (
				!selectedIds.includes(item.id) &&
				selectedItems.length >= maximumComparisonItems
			)
				return;
			const nextItems = selectedIds.includes(item.id)
				? selectedItems
				: [...selectedItems, item];
			closeCompareModal();
			if (nextItems.length >= 2) {
				await goto(
					comparisonItemsHref(
						nextItems,
						catalog.categories,
						activeCategory ?? null
					)
				);
				return;
			}
			selectedIds = nextItems.map((entry) => entry.id);
			await tick();
			showComparisonRows();
			return;
		}

		if (!compareAnchorItem) return;
		const anchorItem = compareAnchorItem;
		const destination = comparisonHref(
			anchorItem,
			item,
			catalog.categories,
			activeCategory ?? null
		);
		closeCompareModal();
		await goto(destination);
	}

	function handleModalKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape' && compareModalOpen) {
			closeCompareModal();
		}
	}

	function togglePersonalState(
		itemId: string,
		action: keyof ComparePersonalItemState
	) {
		personalState = togglePersonalItemState(
			personalState,
			itemId,
			action
		);
		try {
			localStorage.setItem(
				PERSONAL_STATE_KEY,
				JSON.stringify(personalState)
			);
		} catch {
			// The controls remain usable when private browsing blocks storage.
		}
	}

	function showAccountNotice(
		itemId: string,
		action: 'price alert' | 'review'
	) {
		if (
			actionNotice?.itemId === itemId &&
			actionNotice.action === action
		) {
			actionNotice = null;
			return;
		}

		actionNotice = {
			action,
			itemId,
			message: `${
				action === 'review' ? 'Reviews' : 'Price alerts'
			} will be available with Tool.io accounts.`
		};
	}

	function formatPrice(item: CatalogItem) {
		const price = item.attributes['commercial.price'];
		if (!price || typeof price.value !== 'number') return null;
		try {
			return new Intl.NumberFormat('en-US', {
				currency: price.unit || 'USD',
				style: 'currency'
			}).format(price.value);
		} catch {
			return `${price.value}${
				price.unit ? ` ${price.unit}` : ''
			}`;
		}
	}

	function actionClass(active: boolean) {
		return active
			? 'bg-blue-600 text-white dark:bg-blue-500 dark:text-steel-950'
			: 'bg-steel-100 text-steel-700 hover:bg-steel-200 dark:bg-steel-700 dark:text-steel-200 dark:hover:bg-steel-600';
	}

	function showComparisonRows() {
		document
			.getElementById('compare-results')
			?.scrollIntoView({ behavior: 'smooth', block: 'start' });
	}

	function setRowMode(mode: ComparisonRowMode) {
		if (
			mode === 'all' ||
			mode === 'different' ||
			mode === 'shared'
		) {
			rowMode = mode;
		}
	}

	function rowCount(
		comparison: CompareOutput | null,
		mode: ComparisonRowMode
	) {
		return (
			comparison?.sections.reduce(
				(count, section) =>
					count +
					filterComparisonRows(section.rows, mode).length,
				0
			) ?? 0
		);
	}

	function rowDescriptionId(
		sectionId: string,
		attributeId: string
	) {
		return `${sectionId}:${attributeId}`;
	}

	function toggleRowDescription(rowId: string) {
		expandedRowDescriptions = expandedRowDescriptions.includes(
			rowId
		)
			? expandedRowDescriptions.filter((id) => id !== rowId)
			: [...expandedRowDescriptions, rowId];
	}

	function itemInitials(name: string) {
		return name
			.split(/\s+/)
			.slice(0, 2)
			.map((part) => part.charAt(0))
			.join('')
			.toLocaleUpperCase('en-US');
	}

	function cellClass(row: ComparisonRow, index: number) {
		const comparison = row.cells[index]?.comparison;
		const preferred =
			(row.preference === 'higher' &&
				comparison === 'higher') ||
			(row.preference === 'lower' && comparison === 'lower');
		return preferred
			? 'bg-emerald-100 text-emerald-950 dark:bg-emerald-900/50 dark:text-emerald-100'
			: comparison === 'missing'
				? 'text-steel-400 dark:text-steel-500'
				: '';
	}
	let selectedItems = $derived(
		selectedIds
			.map((id) => catalogItems.find((item) => item.id === id))
			.filter((item): item is CatalogItem => Boolean(item))
	);
	let comparisonItemLimitReached = $derived(
		selectedItems.length >= maximumComparisonItems
	);
	let result = $derived(
		calculateComparison(
			selectedItems,
			attributeDefinitions,
			catalog.categories
		)
	);
	let searchableCatalogItems = $derived(
		categoryRestricted && activeCategory
			? catalogItems.filter((item) =>
					item.categoryIds.includes(activeCategory.id)
				)
			: catalogItems
	);
	let searchGroups = $derived(
		groupCompareSuggestions(searchableCatalogItems, {
			activeCategoryId: activeCategory?.id ?? null,
			excludedItemIds: selectedIds,
			preferredRelatedSlugs: activeCategory
				? featuredCategoryItems[activeCategory.slug]
				: [],
			query,
			topComparedSlugs: topComparedItemSlugs
		})
	);
	let compareModalGroups = $derived(
		compareModalOpen
			? groupCompareSuggestions(searchableCatalogItems, {
					activeCategoryId: activeCategory?.id ?? null,
					excludedItemIds:
						compareModalMode === 'add'
							? selectedIds
							: compareAnchorItem
								? [(compareAnchorItem as CatalogItem).id]
								: [],
					preferredRelatedSlugs: activeCategory
						? featuredCategoryItems[activeCategory.slug]
						: [],
					query: compareModalQuery,
					topComparedSlugs: topComparedItemSlugs
				})
			: []
	);
</script>

<svelte:window onkeydown={handleModalKeydown} />

{#if preview}
	<div
		class="flex min-h-[118px] w-full flex-col gap-2 bg-white p-3 text-steel-900 dark:bg-steel-800 dark:text-steel-100"
	>
		<div class="flex items-center gap-1 text-xs font-medium">
			<span
				class="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-950"
				>iPhone 16</span
			>
			<span class="text-steel-400">vs</span>
			<span
				class="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-950"
				>Galaxy S26</span
			>
		</div>
		<div
			class="grid grid-cols-[1fr_4rem_4rem] overflow-hidden rounded-lg border border-steel-200 text-[11px] dark:border-steel-600"
		>
			<span class="bg-steel-50 p-1.5 dark:bg-steel-900"
				>Weight</span
			><span class="p-1.5">170 g</span><span class="p-1.5"
				>232 g</span
			>
			<span class="bg-steel-50 p-1.5 dark:bg-steel-900"
				>Display</span
			><span class="p-1.5">6.1 in</span><span class="p-1.5"
				>6.9 in</span
			>
		</div>
	</div>
{:else}
	<div class="w-full min-w-0 px-4">
		{#if missingSelections.length > 0}
			<div
				class="mb-3 rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100"
				role="status"
			>
				{#each missingSelections as missing}
					<p>{missing.message}</p>
				{/each}
			</div>
		{/if}
		<div class="relative">
			<label
				class="absolute -top-2 left-4 z-10 bg-white px-1 text-xs text-steel-500 dark:bg-steel-950 dark:text-steel-400"
				for="compare-search">Compare</label
			>
			<div
				class="flex min-w-0 flex-nowrap items-center gap-2 overflow-x-auto overscroll-x-contain rounded-full border border-steel-300 bg-white px-3 py-2 text-steel-900 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/30 dark:border-steel-600 dark:bg-steel-900 dark:text-steel-100"
			>
				{#each selectedItems as item}
					<span
						class="flex max-w-[min(18rem,70vw)] shrink-0 items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-950 dark:bg-blue-950 dark:text-blue-100"
					>
						<span class="truncate">{item.name}</span>
						<button
							class="rounded-full px-1 hover:bg-blue-200 dark:hover:bg-blue-900"
							title={`Remove ${item.name}`}
							aria-label="Remove {item.name}"
							onclick={() => removeItem(item.id)}>×</button
						>
					</span>
				{/each}
				<input
					id="compare-search"
					class="min-w-40 flex-1 shrink-0 border-0 bg-transparent p-1 text-sm outline-none focus:outline-none"
					bind:this={mainSearchInput}
					bind:value={query}
					onfocus={() => (searchFocused = true)}
					onblur={() => (searchFocused = false)}
					onkeydown={(event) =>
						event.key === 'Escape' && (searchFocused = false)}
					disabled={comparisonItemLimitReached}
					placeholder={comparisonItemLimitReached
						? `Maximum ${maximumComparisonItems} items selected`
						: categoryRestricted && activeCategory
							? `Search ${activeCategory.name.toLocaleLowerCase('en-US')}…`
							: 'Search phones, tablets, food…'}
					autocomplete="off"
				/>
			</div>
			{#if searchFocused && !comparisonItemLimitReached}
				<div
					class="absolute left-0 right-0 top-full z-30 mt-1 max-h-64 overflow-y-auto rounded-xl border border-steel-200 bg-white p-1 text-steel-900 shadow-xl dark:border-steel-700 dark:bg-steel-900 dark:text-steel-100"
				>
					{#each searchGroups as group}
						<section aria-label={group.title}>
							<h3
								class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-steel-500 dark:text-steel-400"
							>
								{group.title}
							</h3>
							{#each group.items as item}
								<button
									class="flex w-full items-center gap-3 rounded-lg p-2 text-left hover:bg-steel-100 dark:hover:bg-steel-800"
									onmousedown={(event) => {
										event.preventDefault();
										addItem(item);
									}}
								>
									<span
										class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-steel-200 text-xs font-bold dark:bg-steel-700"
										>{itemInitials(item.name)}</span
									>
									<span class="min-w-0"
										><strong class="block truncate text-sm"
											>{item.name}</strong
										><span
											class="block truncate text-xs text-steel-500 dark:text-steel-400"
											>{item.summary}</span
										></span
									>
								</button>
							{/each}
						</section>
					{:else}
						<p class="p-3 text-sm text-steel-500">
							No catalog item matches that search.
						</p>
					{/each}
				</div>
			{/if}
		</div>
	</div>

	<section
		bind:this={comparisonSurface}
		class="fullscreen:overflow-auto fullscreen:p-4 mt-3 w-full min-w-0 max-w-full overflow-hidden rounded-2xl bg-steel-100 p-3 text-steel-950 [--compare-column-width:17.375rem] lg:[--compare-column-width:19.375rem] dark:bg-steel-950 dark:text-steel-100"
	>
		<div class="mt-3 w-full">
			<div
				bind:this={selectedItemsScroller}
				class="w-full min-w-0 max-w-full touch-pan-x overflow-x-auto overscroll-x-contain pb-2"
				onscroll={(event) =>
					syncHorizontalScroll(
						event.currentTarget,
						stickySelectedItemsScroller,
						comparisonRowsScroller
					)}
			>
				<div
					style:min-width={`calc(8rem + ${Math.max(
						selectedItems.length,
						2
					)} * var(--compare-column-width))`}
				>
					<section
						bind:this={selectedItemsCard}
						class="min-w-0 overflow-hidden rounded-xl bg-white shadow-md ring-1 ring-steel-200/70 dark:bg-steel-800 dark:ring-steel-700"
						aria-label="Selected items"
					>
						<h3 class="px-4 pt-4 text-lg font-semibold">
							{selectedItems.length
								? selectedItems
										.map((item) => item.name)
										.join(' vs ')
								: 'Selected items'}
						</h3>
						<div class="p-3">
							<div
								class="grid items-start"
								style:grid-template-columns={`8rem repeat(${Math.max(
									selectedItems.length,
									2
								)}, minmax(var(--compare-column-width), 1fr))`}
							>
								<div
									class="w-32 min-w-32 max-w-32 p-2 text-xs font-semibold uppercase tracking-wide text-steel-500 dark:text-steel-400"
								>
									Selected items
								</div>
								{#each selectedItems as item}
									{@const itemState =
										personalState[item.id] ??
										emptyPersonalItemState()}
									{@const price = formatPrice(item)}
									<article
										class="min-w-0 border-l border-steel-200 px-3 py-2 dark:border-steel-700"
									>
										<div class="flex items-start gap-2">
											<div
												class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-steel-200 text-xs font-bold text-steel-700 dark:bg-steel-700 dark:text-steel-100"
											>
												{itemInitials(item.name)}
											</div>
											<div class="min-w-0">
												<h4
													class="text-sm font-semibold leading-tight"
												>
													{item.name}
												</h4>
												<p
													class="mt-1 line-clamp-2 text-xs text-steel-500 dark:text-steel-400"
												>
													{item.summary}
												</p>
											</div>
										</div>
										<div class="mt-3 flex items-center">
											<button
												class="inline-flex shrink-0 cursor-not-allowed items-center rounded-full bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white opacity-70 dark:bg-blue-500 dark:text-steel-950"
												disabled
												title="Supplier links will appear after their prices and availability are verified"
											>
												Buy now{price ? ` ${price}` : ''}
											</button>
										</div>
										<div class="mt-3 flex items-center gap-1.5">
											<button
												class="flex size-10 shrink-0 items-center justify-center rounded-full bg-steel-100 text-steel-700 hover:bg-steel-200 dark:bg-steel-700 dark:text-steel-200 dark:hover:bg-steel-600"
												aria-label={`Review ${item.name}`}
												aria-expanded={actionNotice?.itemId ===
													item.id &&
													actionNotice.action === 'review'}
												aria-controls={`compare-action-notice-${item.id}`}
												title="Review"
												onclick={() =>
													showAccountNotice(item.id, 'review')}
											>
												<CompareActionIcon
													icon="review"
													className="size-4"
												/>
											</button>
											<button
												class="flex min-w-0 flex-1 items-center justify-center rounded-full bg-blue-600 px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:text-steel-950 dark:hover:bg-blue-400"
												onclick={() => openCompareModal(item)}
											>
												<span>Compare</span>
											</button>
											<button
												class="flex size-10 shrink-0 items-center justify-center rounded-full bg-steel-100 text-steel-700 hover:bg-steel-200 dark:bg-steel-700 dark:text-steel-200 dark:hover:bg-steel-600"
												aria-label={`Create a price alert for ${item.name}`}
												aria-expanded={actionNotice?.itemId ===
													item.id &&
													actionNotice.action === 'price alert'}
												aria-controls={`compare-action-notice-${item.id}`}
												title="Price alert"
												onclick={() =>
													showAccountNotice(
														item.id,
														'price alert'
													)}
											>
												<CompareActionIcon
													icon="price-alert"
													className="size-4"
												/>
											</button>
										</div>
										<div
											class="mt-1.5 grid grid-cols-3 gap-1.5"
										>
											<button
								class="flex min-w-0 items-center justify-center gap-1 rounded-full px-2 py-1.5 text-xs font-semibold {actionClass(
									itemState.owned
								)}"
												aria-label={`I own ${item.name}`}
												aria-pressed={itemState.owned}
												title="I own"
												onclick={() =>
													togglePersonalState(item.id, 'owned')}
											>
												<CompareActionIcon icon="own" />
								<span>I own</span>
							</button>
							<button
								class="flex min-w-0 items-center justify-center gap-1 rounded-full px-2 py-1.5 text-xs font-semibold {actionClass(
									itemState.wanted
								)}"
												aria-label={`I want ${item.name}`}
												aria-pressed={itemState.wanted}
												title="I want"
												onclick={() =>
													togglePersonalState(
														item.id,
														'wanted'
													)}
											>
												<CompareActionIcon icon="want" />
								<span>I want</span>
							</button>
							<button
								class="flex min-w-0 items-center justify-center gap-1 rounded-full px-2 py-1.5 text-xs font-semibold {actionClass(
									itemState.had
								)}"
												aria-label={`I had ${item.name}`}
												aria-pressed={itemState.had}
												title="I had"
												onclick={() =>
													togglePersonalState(item.id, 'had')}
											>
												<CompareActionIcon icon="had" />
								<span>I had</span>
											</button>
										</div>
										{#if actionNotice?.itemId === item.id}
											<p
												id={`compare-action-notice-${item.id}`}
												class="mt-2 text-xs text-steel-500 dark:text-steel-400"
											>
												{actionNotice.message}
											</p>
										{/if}
									</article>
								{/each}
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>

		<div class="sticky top-14 z-20 h-0 w-full">
			{#if showStickySelectedItems}
				<div
					bind:this={stickySelectedItemsScroller}
					class="w-full min-w-0 max-w-full touch-pan-x overflow-x-auto overscroll-x-contain rounded-xl bg-white shadow-lg ring-1 ring-steel-200 dark:bg-steel-800 dark:ring-steel-700"
					onscroll={(event) =>
						syncHorizontalScroll(
							event.currentTarget,
							selectedItemsScroller,
							comparisonRowsScroller
						)}
				>
					<div
						class="grid min-h-16 items-stretch"
						style:min-width={`calc(8rem + ${Math.max(
							selectedItems.length,
							2
						)} * var(--compare-column-width))`}
						style:grid-template-columns={`8rem repeat(${Math.max(
							selectedItems.length,
							2
						)}, minmax(var(--compare-column-width), 1fr))`}
					>
						<div
							class="sticky left-0 z-10 flex w-32 min-w-32 max-w-32 items-center justify-between gap-1 bg-white p-3 text-xs font-semibold uppercase tracking-wide text-steel-500 dark:bg-steel-800 dark:text-steel-400"
						>
							<span>Selected</span>
							<button
								class="flex size-8 shrink-0 items-center justify-center rounded-full text-xl font-normal leading-none {comparisonItemLimitReached
									? 'cursor-not-allowed bg-steel-200 text-steel-400 dark:bg-steel-700 dark:text-steel-500'
									: 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:text-steel-950 dark:hover:bg-blue-400'}"
								aria-label={comparisonItemLimitReached
									? `Maximum ${maximumComparisonItems} items selected`
									: 'Add another item'}
								title={comparisonItemLimitReached
									? `Maximum ${maximumComparisonItems} items selected`
									: 'Add another item'}
								disabled={comparisonItemLimitReached}
								onclick={openAddItemModal}>+</button
							>
						</div>
						{#each selectedItems as item}
							{@const price = formatPrice(item)}
							<div
								class="flex min-w-0 flex-col items-start justify-center gap-1 border-l border-steel-200 px-3 py-2 dark:border-steel-700"
							>
								<strong class="min-w-0 truncate text-sm"
									>{item.name}</strong
								>
								<button
									class="shrink-0 cursor-not-allowed rounded-full bg-blue-600 px-2.5 py-1.5 text-[11px] font-semibold text-white opacity-70 dark:bg-blue-500 dark:text-steel-950"
									disabled
									title="Supplier links will appear after their prices and availability are verified"
								>
									Buy now{price ? ` for ${price}` : ''}
								</button>
							</div>
						{/each}
					</div>
				</div>
			{/if}
		</div>

		<div
			class="mt-1 flex flex-wrap items-center gap-2"
			aria-label="Comparison row filters"
		>
			<button
				class="flex size-10 shrink-0 items-center justify-center rounded-full bg-white text-steel-700 shadow-sm hover:bg-steel-200 dark:bg-steel-800 dark:text-steel-200 dark:hover:bg-steel-700"
				aria-label={comparisonFullscreen
					? 'Exit fullscreen comparison'
					: 'Open fullscreen comparison'}
				title={comparisonFullscreen
					? 'Exit fullscreen'
					: 'Fullscreen'}
				onclick={toggleFullscreen}
			>
				<span
					class="flex size-5 items-center justify-center [&>svg]:block [&>svg]:size-5"
					aria-hidden="true"
					>{@html IconFullscreen}</span
				>
			</button>
			{#each rowModes as option}
				<button
					class="rounded-full px-3 py-1.5 text-xs font-semibold {rowMode ===
					option.mode
						? 'bg-blue-600 text-white'
						: 'bg-white text-steel-700 shadow-sm dark:bg-steel-800 dark:text-steel-200'}"
					onclick={() => setRowMode(option.mode)}
					>{option.label}
					<span class="opacity-70"
						>{rowCount(result, option.mode)}</span
					></button
				>
			{/each}
		</div>

		<div
			bind:this={comparisonRowsScroller}
			class="w-full min-w-0 max-w-full touch-pan-x overflow-x-auto overscroll-x-contain pb-2"
			onscroll={(event) =>
				syncHorizontalScroll(
					event.currentTarget,
					selectedItemsScroller,
					stickySelectedItemsScroller
				)}
		>
			<div
				style:min-width={`calc(8rem + ${Math.max(
					selectedItems.length,
					2
				)} * var(--compare-column-width))`}
			>
				{#if result}
					<div
						id="compare-results"
						class="mt-3 scroll-mt-4 space-y-3"
					>
						{#each result.sections as section}
							{@const rows = filterComparisonRows(
								section.rows,
								rowMode
							)}
							{#if rows.length}
								<section
									class="min-w-0 overflow-hidden rounded-xl bg-white shadow-sm dark:bg-steel-800"
								>
									<h3
										class="px-4 pb-2 pt-4 text-lg font-semibold"
									>
										{section.title}
									</h3>
									<div>
										<table
											class="w-full table-fixed border-collapse text-left text-sm"
										>
											<colgroup>
												<col class="w-32" style="width: 8rem" />
												{#each selectedItems as _}<col />{/each}
											</colgroup>
											<tbody>
												{#each rows as row}
													{@const descriptionId =
														rowDescriptionId(
															section.id,
															row.attributeId
														)}
													{@const descriptionIsOpen =
														expandedRowDescriptions.includes(
															descriptionId
														)}
													<tr
														class="border-b border-steel-100 dark:border-steel-700/70"
													>
														<th
															class="sticky left-0 z-10 w-32 min-w-32 max-w-32 overflow-hidden break-words p-0 font-medium {descriptionIsOpen
																? 'bg-steel-100 dark:bg-steel-900'
																: 'bg-white dark:bg-steel-800'}"
														>
															<button
																class="flex w-full items-center justify-between gap-1 p-3 text-left"
																aria-expanded={descriptionIsOpen}
																aria-controls={`compare-row-description-${descriptionId}`}
																onclick={() =>
																	toggleRowDescription(
																		descriptionId
																	)}
															>
																<span>{row.label}</span>
																<span
																	class="shrink-0 text-steel-400 transition-transform {descriptionIsOpen
																		? 'rotate-180'
																		: ''}"
																	aria-hidden="true">⌄</span
																>
															</button>
														</th>
														{#each row.cells as cell, index}<td
																class="p-3 font-medium {cellClass(
																	row,
																	index
																)}"
																title={cell.missingReason
																	? `Missing: ${cell.missingReason}`
																	: (cell.status ?? '')}
																>{cell.display}</td
															>{/each}
													</tr>
													{#if descriptionIsOpen}
														<tr
															id={`compare-row-description-${descriptionId}`}
															class="border-b border-steel-200 bg-steel-100 dark:border-steel-700 dark:bg-steel-900"
														>
															<td
																colspan={selectedItems.length +
																	1}
																class="px-4 py-3 text-sm text-steel-600 dark:text-steel-300"
															>
																{row.description}
															</td>
														</tr>
													{/if}
												{/each}
											</tbody>
										</table>
									</div>
								</section>
							{/if}
						{/each}
					</div>
				{:else}
					<p
						class="mt-3 rounded-xl bg-white p-4 text-sm dark:bg-steel-800"
					>
						Select at least two different items to start
						comparing.
					</p>
				{/if}
			</div>
		</div>
		<p class="mt-3 text-xs text-steel-500 dark:text-steel-400">
			The current catalog contains illustrative fixtures only.
			Values marked as fixtures must not be treated as verified
			product specifications.
		</p>
	</section>

	{#if compareModalOpen}
		<div
			class="fixed inset-0 z-50 flex items-center justify-center bg-steel-950/60 p-4 backdrop-blur-sm"
			role="presentation"
			onclick={(event) => {
				if (event.target === event.currentTarget) {
					closeCompareModal();
				}
			}}
		>
			<div
				class="flex max-h-[min(42rem,calc(100vh-2rem))] w-full max-w-xl flex-col overflow-hidden rounded-2xl bg-white text-steel-950 shadow-2xl dark:bg-steel-900 dark:text-steel-100"
				role="dialog"
				aria-modal="true"
				aria-labelledby="compare-search-modal-title"
			>
				<header
					class="flex items-start justify-between gap-3 border-b border-steel-200 p-4 dark:border-steel-700"
				>
					<div>
						<h2
							id="compare-search-modal-title"
							class="text-lg font-semibold"
						>
							{compareModalMode === 'add'
								? 'Add another item'
								: `Compare ${compareAnchorItem?.name ?? ''}`}
						</h2>
						<p
							class="mt-1 text-sm text-steel-500 dark:text-steel-400"
						>
							{compareModalMode === 'add'
								? 'Choose another item to add to the current comparison.'
								: 'Choose one other item. The current comparison will be replaced with this pair.'}
						</p>
					</div>
					<button
						class="flex size-10 shrink-0 items-center justify-center rounded-full bg-steel-100 text-xl hover:bg-steel-200 dark:bg-steel-800 dark:hover:bg-steel-700"
						aria-label="Close comparison search"
						onclick={closeCompareModal}>×</button
					>
				</header>
				<div class="p-4 pb-2">
					{#if selectedItems.length}
						<div
							class="mb-3 flex flex-wrap gap-2"
							aria-label="Currently selected items"
						>
							{#each selectedItems as item}
								<span
									class="flex max-w-full items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-950 dark:bg-blue-950 dark:text-blue-100"
								>
									<span class="truncate">{item.name}</span>
									<button
										class="rounded-full px-1 hover:bg-blue-200 dark:hover:bg-blue-900"
										title={`Remove ${item.name}`}
										aria-label={`Remove ${item.name}`}
										onclick={() => removeItem(item.id)}
										>×</button
									>
								</span>
							{/each}
						</div>
					{/if}
					<label class="sr-only" for="compare-modal-search"
						>Search for another item</label
					>
					<input
						id="compare-modal-search"
						bind:this={compareModalInput}
						bind:value={compareModalQuery}
						class="w-full rounded-full border border-steel-300 bg-white px-4 py-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-steel-700 dark:bg-steel-800"
						placeholder="Search phones, CPUs, cars, food…"
						autocomplete="off"
					/>
				</div>
				<div class="min-h-0 overflow-y-auto p-4 pt-2">
					{#each compareModalGroups as group}
						<section aria-label={group.title}>
							<h3
								class="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-steel-500 dark:text-steel-400"
							>
								{group.title}
							</h3>
							<ul class="space-y-1">
								{#each group.items as item}
									<li>
										<button
											class="flex w-full items-center gap-3 rounded-xl p-3 text-left hover:bg-steel-100 dark:hover:bg-steel-800"
											onclick={() => compareWith(item)}
										>
											<span
												class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-steel-200 text-xs font-bold dark:bg-steel-700"
												>{itemInitials(item.name)}</span
											>
											<span class="min-w-0">
												<strong class="block truncate text-sm"
													>{item.name}</strong
												>
												<span
													class="block truncate text-xs text-steel-500 dark:text-steel-400"
													>{item.summary}</span
												>
											</span>
										</button>
									</li>
								{/each}
							</ul>
						</section>
					{:else}
						<p class="p-4 text-sm text-steel-500">
							No other item matches that search.
						</p>
					{/each}
				</div>
			</div>
		</div>
	{/if}
{/if}