<script lang="ts">
	import { enhance } from '$app/forms';
	import type { ActionData, PageData } from './$types';
	import { m } from '$lib/paraglide/messages.js';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import { baseSelectClass, baseTextareaClass } from '$lib/components/forms/form-classes';
	import FormSectionCard from '$lib/components/forms/FormSectionCard.svelte';
	import SimpleSelect from '$lib/components/forms/SimpleSelect.svelte';
	import { Pencil, X } from 'lucide-svelte';
	import {
		Table,
		TableBody,
		TableCell,
		TableHead,
		TableHeader,
		TableRow
	} from '$lib/components/ui/table';

	let { data, form }: { data: PageData; form: ActionData } = $props();

	const flags = ['N', 'ABN', 'POS', 'NEG', 'L', 'H'];
	const flagPills: Record<string, string> = {
		N: 'health-flag-pill health-flag-pill--normal',
		ABN: 'health-flag-pill health-flag-pill--abnormal',
		POS: 'health-flag-pill health-flag-pill--positive',
		NEG: 'health-flag-pill health-flag-pill--negative',
		L: 'health-flag-pill health-flag-pill--low',
		H: 'health-flag-pill health-flag-pill--high'
	};

	let showForm = $state(false);
	let selectedFlag = $state('');
	let editingId = $state<string | null>(null);
	let editCollectedAt = $state('');
	let editTestCode = $state('');
	let editTestNameOriginal = $state('');
	let editTestNameLoinc = $state('');
	let editValueMode = $state<'num' | 'text' | 'bool' | 'empty'>('empty');
	let editValueNum = $state('');
	let editValueText = $state('');
	let editValueBool = $state('');
	let editUnitOriginal = $state('');
	let editUnitUcum = $state('');
	let editRefLow = $state('');
	let editRefHigh = $state('');
	let editRefText = $state('');
	let editFlag = $state('');
	let editLab = $state('');
	let editSourceFile = $state('');
	let editNotes = $state('');

	function startEdit(item: LabResultItem) {
		editingId = item.record_id;
		editCollectedAt = item.collected_at.slice(0, 10);
		editTestCode = item.test_code;
		editTestNameOriginal = item.test_name_original ?? '';
		editTestNameLoinc = item.test_name_loinc ?? '';
		if (item.value_num != null) {
			editValueMode = 'num';
			editValueNum = String(item.value_num);
			editValueText = '';
			editValueBool = '';
		} else if (item.value_text != null && item.value_text !== '') {
			editValueMode = 'text';
			editValueNum = '';
			editValueText = item.value_text;
			editValueBool = '';
		} else if (item.value_bool != null) {
			editValueMode = 'bool';
			editValueNum = '';
			editValueText = '';
			editValueBool = item.value_bool ? 'true' : 'false';
		} else {
			editValueMode = 'empty';
			editValueNum = '';
			editValueText = '';
			editValueBool = '';
		}
		editUnitOriginal = item.unit_original ?? '';
		editUnitUcum = item.unit_ucum ?? '';
		editRefLow = item.ref_low != null ? String(item.ref_low) : '';
		editRefHigh = item.ref_high != null ? String(item.ref_high) : '';
		editRefText = item.ref_text ?? '';
		editFlag = item.flag ?? '';
		editLab = item.lab ?? '';
		editSourceFile = item.source_file ?? '';
		editNotes = item.notes ?? '';
	}

	function cancelEdit() {
		editingId = null;
	}

	type LabResultItem = PageData['resultPage']['items'][number];
	type GroupedByDate = { date: string; items: LabResultItem[] };
	type DisplayGroup = { key: string; label: string | null; items: LabResultItem[] };
	type QueryOptions = {
		page?: number;
		testCode?: string;
		includeExistingTestCode?: boolean;
		forceLatestOnly?: 'true' | 'false';
	};

	function toQueryString(params: Array<[string, string]>): string {
		return params
			.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
			.join('&');
	}

	function buildQueryParams(options: QueryOptions = {}): Array<[string, string]> {
		const params: Array<[string, string]> = [];
		if (data.q) params.push(['q', data.q]);
		if (options.testCode) {
			params.push(['test_code', options.testCode]);
		} else if (options.includeExistingTestCode && data.test_code) {
			params.push(['test_code', data.test_code]);
		}
		if (data.flag) params.push(['flag', data.flag]);
		if (data.from_date) params.push(['from_date', data.from_date]);
		if (data.to_date) params.push(['to_date', data.to_date]);

		if (options.forceLatestOnly) {
			params.push(['latest_only', options.forceLatestOnly]);
		} else if (!data.latestOnly) {
			params.push(['latest_only', 'false']);
		}

		if (options.page && options.page > 1) params.push(['page', String(options.page)]);
		return params;
	}

	function buildLabResultsUrl(options: QueryOptions = {}): string {
		const qs = toQueryString(buildQueryParams(options));
		return qs ? `/health/lab-results?${qs}` : '/health/lab-results';
	}

	function buildPageUrl(page: number) {
		return buildLabResultsUrl({ page, includeExistingTestCode: true });
	}

	function filterByCode(code: string) {
		window.location.href = buildLabResultsUrl({ testCode: code, forceLatestOnly: 'false' });
	}

	function clearCodeFilterOnly() {
		window.location.href = buildLabResultsUrl();
	}

	const groupedByDate = $derived.by<GroupedByDate[]>(() => {
		const groups: Record<string, LabResultItem[]> = {};
		for (const item of data.resultPage.items) {
			const date = item.collected_at.slice(0, 10);
			if (groups[date]) {
				groups[date].push(item);
			} else {
				groups[date] = [item];
			}
		}
		return Object.entries(groups).map(([date, items]) => ({ date, items }));
	});

	const displayGroups = $derived.by<DisplayGroup[]>(() => {
		if (data.test_code) {
			return [{ key: 'filtered', label: null, items: data.resultPage.items }];
		}
		return groupedByDate.map((group) => ({ key: group.date, label: group.date, items: group.items }));
	});

	const notableFlags = new Set(['ABN', 'H', 'L', 'POS']);
	const flaggedCount = $derived.by(() =>
		data.resultPage.items.reduce((count, item) => {
			if (!item.flag) return count;
			return notableFlags.has(item.flag) ? count + 1 : count;
		}, 0)
	);

	function formatValue(item: LabResultItem): string {
		if (item.value_num != null) {
			return `${item.value_num}${item.unit_original ? ` ${item.unit_original}` : ''}`;
		}
		if (item.value_text) return item.value_text;
		if (item.value_bool != null) return item.value_bool ? m['labResults_boolTrue']() : m['labResults_boolFalse']();
		return '—';
	}

	const flagOptions = flags.map((f) => ({ value: f, label: f }));
	const textareaClass = `${baseTextareaClass} min-h-[5rem] resize-y`;
	let filterFlagOverride = $state<string | null>(null);
	let filterLatestOnlyOverride = $state<'true' | 'false' | null>(null);
	const activeFilterFlag = $derived(filterFlagOverride ?? (data.flag ?? ''));
	const activeLatestOnly = $derived(filterLatestOnlyOverride ?? (data.latestOnly ? 'true' : 'false'));
</script>

<svelte:head><title>{m["labResults_title"]()} — innercontext</title></svelte:head>

<div class="editorial-page space-y-4">
	<section class="editorial-hero reveal-1">
		<p class="editorial-kicker">{m["nav_appSubtitle"]()}</p>
		<h2 class="editorial-title">{m["labResults_title"]()}</h2>
		<p class="editorial-subtitle">{m["labResults_count"]({ count: data.resultPage.total })}</p>
		<div class="lab-results-meta-strip">
			<span class="lab-results-meta-pill">
				{m['labResults_view']()}: {data.latestOnly ? m['labResults_viewLatest']() : m['labResults_viewAll']()}
				{#if data.flag}
					 · {m['labResults_flagFilter']()} {data.flag}
				{/if}
			</span>
			<span class="lab-results-meta-pill">
				{m['labResults_flag']()}: {flaggedCount}
			</span>
			{#if data.test_code}
				<span class="lab-results-meta-pill lab-results-meta-pill--alert">{data.test_code}</span>
			{/if}
		</div>
		<div class="editorial-toolbar">
			<Button variant="outline" onclick={() => (showForm = !showForm)}>
				{showForm ? m.common_cancel() : m["labResults_addNew"]()}
			</Button>
		</div>
	</section>

	{#if form?.error}
		<div class="editorial-alert editorial-alert--error">{form.error}</div>
	{/if}
	{#if form?.created}
		<div class="editorial-alert editorial-alert--success">{m["labResults_added"]()}</div>
	{/if}
	{#if form?.deleted}
		<div class="editorial-alert editorial-alert--success">{m["labResults_deleted"]()}</div>
	{/if}
	{#if form?.updated}
		<div class="editorial-alert editorial-alert--success">{m["labResults_updated"]()}</div>
	{/if}

	{#if editingId}
		<FormSectionCard title={m["labResults_editTitle"]()} className="reveal-2">
			<form
				method="POST"
				action="?/update"
				use:enhance={() => {
					return async ({ result, update }) => {
						await update();
						if (result.type === 'success') editingId = null;
					};
				}}
				class="grid grid-cols-1 sm:grid-cols-2 gap-4"
			>
				<input type="hidden" name="id" value={editingId} />
				<div class="space-y-1">
					<Label for="edit_collected_at">{m["labResults_date"]()}</Label>
					<Input id="edit_collected_at" name="collected_at" type="date" bind:value={editCollectedAt} required />
				</div>
				<div class="space-y-1">
					<Label for="edit_test_code">{m["labResults_loincCode"]()}</Label>
					<Input id="edit_test_code" name="test_code" bind:value={editTestCode} required />
				</div>
				<div class="space-y-1">
					<Label for="edit_test_name_original">{m["labResults_testName"]()}</Label>
					<Input id="edit_test_name_original" name="test_name_original" bind:value={editTestNameOriginal} />
				</div>
				<div class="space-y-1">
					<Label for="edit_test_name_loinc">{m["labResults_loincName"]()}</Label>
					<Input id="edit_test_name_loinc" name="test_name_loinc" bind:value={editTestNameLoinc} />
				</div>
				<div class="space-y-1">
					<Label for="edit_value_mode">{m["labResults_valueType"]()}</Label>
					<select class={`${baseSelectClass} w-full`} id="edit_value_mode" name="value_mode" bind:value={editValueMode}>
						<option value="num">{m["labResults_valueTypeNumeric"]()}</option>
						<option value="text">{m["labResults_valueTypeText"]()}</option>
						<option value="bool">{m["labResults_valueTypeBoolean"]()}</option>
						<option value="empty">{m["labResults_valueTypeEmpty"]()}</option>
					</select>
				</div>
				<div class="space-y-1">
					{#if editValueMode === 'num'}
						<Label for="edit_value_num">{m["labResults_value"]()}</Label>
						<Input id="edit_value_num" name="value_num" type="number" step="any" bind:value={editValueNum} />
					{:else if editValueMode === 'text'}
						<Label for="edit_value_text">{m["labResults_value"]()}</Label>
						<Input id="edit_value_text" name="value_text" bind:value={editValueText} />
					{:else if editValueMode === 'bool'}
						<Label for="edit_value_bool">{m["labResults_value"]()}</Label>
						<select class={`${baseSelectClass} w-full`} id="edit_value_bool" name="value_bool" bind:value={editValueBool}>
							<option value="">{m["labResults_flagNone"]()}</option>
							<option value="true">{m["labResults_boolTrue"]()}</option>
							<option value="false">{m["labResults_boolFalse"]()}</option>
						</select>
					{:else}
						<Label for="edit_value_placeholder">{m["labResults_value"]()}</Label>
						<Input id="edit_value_placeholder" value={m["labResults_valueEmpty"]()} disabled />
					{/if}
				</div>
				<div class="space-y-1">
					<Label for="edit_unit_original">{m["labResults_unit"]()}</Label>
					<Input id="edit_unit_original" name="unit_original" bind:value={editUnitOriginal} />
				</div>
				<div class="space-y-1">
					<Label for="edit_flag">{m["labResults_flag"]()}</Label>
					<select class={`${baseSelectClass} w-full`} id="edit_flag" name="flag" bind:value={editFlag}>
						<option value="">{m["labResults_flagNone"]()}</option>
						{#each flags as f (f)}
							<option value={f}>{f}</option>
						{/each}
					</select>
				</div>
				<div class="space-y-1">
					<Label for="edit_lab">{m["labResults_lab"]()}</Label>
					<Input id="edit_lab" name="lab" bind:value={editLab} />
				</div>
				<details class="sm:col-span-2 rounded-xl border p-3">
					<summary class="cursor-pointer text-sm text-muted-foreground">{m["labResults_advanced"]()}</summary>
					<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
						<div class="space-y-1">
							<Label for="edit_unit_ucum">{m["labResults_unitUcum"]()}</Label>
							<Input id="edit_unit_ucum" name="unit_ucum" bind:value={editUnitUcum} />
						</div>
						<div class="space-y-1">
							<Label for="edit_ref_low">{m["labResults_refLow"]()}</Label>
							<Input id="edit_ref_low" name="ref_low" type="number" step="any" bind:value={editRefLow} />
						</div>
						<div class="space-y-1">
							<Label for="edit_ref_high">{m["labResults_refHigh"]()}</Label>
							<Input id="edit_ref_high" name="ref_high" type="number" step="any" bind:value={editRefHigh} />
						</div>
						<div class="space-y-1">
							<Label for="edit_ref_text">{m["labResults_refText"]()}</Label>
							<textarea
								id="edit_ref_text"
								name="ref_text"
								rows="3"
								class={textareaClass}
								bind:value={editRefText}
							></textarea>
						</div>
						<div class="space-y-1">
							<Label for="edit_source_file">{m["labResults_sourceFile"]()}</Label>
							<Input id="edit_source_file" name="source_file" bind:value={editSourceFile} />
						</div>
						<div class="space-y-1 sm:col-span-2">
							<Label for="edit_notes">{m["labResults_notes"]()}</Label>
							<textarea
								id="edit_notes"
								name="notes"
								rows="4"
								class={textareaClass}
								bind:value={editNotes}
							></textarea>
						</div>
					</div>
				</details>
				<div class="sm:col-span-2 flex justify-end gap-2">
					<Button type="button" variant="outline" onclick={cancelEdit}>{m.common_cancel()}</Button>
					<Button type="submit">{m.common_save()}</Button>
				</div>
			</form>
		</FormSectionCard>
	{/if}

	<form method="GET" class="editorial-panel reveal-2 space-y-3">
		<div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
			<div class="w-full lg:max-w-md">
				<Input
					id="q"
					name="q"
					type="search"
					value={data.q ?? ''}
					placeholder={m["labResults_searchPlaceholder"]()}
					aria-label={m["labResults_search"]()}
				/>
			</div>
			<div class="flex flex-wrap gap-1">
				<Button
					type="button"
					size="sm"
					variant={activeLatestOnly === 'true' ? 'default' : 'outline'}
					onclick={() => (filterLatestOnlyOverride = 'true')}
				>
					{m["labResults_viewLatest"]()}
				</Button>
				<Button
					type="button"
					size="sm"
					variant={activeLatestOnly === 'false' ? 'default' : 'outline'}
					onclick={() => (filterLatestOnlyOverride = 'false')}
				>
					{m["labResults_viewAll"]()}
				</Button>
			</div>
		</div>

		<div class="editorial-filter-row">
			<Button
				type="button"
				size="sm"
				variant={activeFilterFlag === '' ? 'default' : 'outline'}
				onclick={() => (filterFlagOverride = '')}
			>
				{m["labResults_flagAll"]()}
			</Button>
			{#each flags as f (f)}
				<Button
					type="button"
					size="sm"
					variant={activeFilterFlag === f ? 'default' : 'outline'}
					onclick={() => (filterFlagOverride = f)}
				>
					{f}
				</Button>
			{/each}
		</div>

		<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
			<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
				<Input
					id="from_date"
					name="from_date"
					type="date"
					value={(data.from_date ?? '').slice(0, 10)}
					aria-label={m["labResults_from"]()}
				/>
				<Input
					id="to_date"
					name="to_date"
					type="date"
					value={(data.to_date ?? '').slice(0, 10)}
					aria-label={m["labResults_to"]()}
				/>
			</div>
			<div class="flex items-center gap-2">
				<input type="hidden" name="flag" value={activeFilterFlag} />
				<input type="hidden" name="latest_only" value={activeLatestOnly} />
				{#if data.test_code}
					<input type="hidden" name="test_code" value={data.test_code} />
				{/if}
				<Button type="submit">{m["labResults_applyFilters"]()}</Button>
				<Button type="button" variant="outline" onclick={() => (window.location.href = '/health/lab-results')}>
					{m["labResults_resetAllFilters"]()}
				</Button>
			</div>
		</div>
	</form>

	{#if data.test_code}
		<div class="editorial-panel lab-results-filter-banner reveal-2 flex items-center justify-between gap-3">
			<p class="text-sm text-muted-foreground">
				{m['labResults_filteredByCode']({ code: data.test_code })}
			</p>
			<Button
				type="button"
				variant="outline"
				onclick={clearCodeFilterOnly}
			>
				{m['labResults_clearCodeFilter']()}
			</Button>
		</div>
	{/if}

	{#if showForm}
		<FormSectionCard title={m["labResults_newTitle"]()} className="reveal-2">
			<form method="POST" action="?/create" use:enhance class="grid grid-cols-1 sm:grid-cols-2 gap-4">
				<div class="space-y-1">
					<Label for="collected_at">{m["labResults_date"]()}</Label>
					<Input id="collected_at" name="collected_at" type="date" required />
				</div>
				<div class="space-y-1">
					<Label for="test_code"
						>{m["labResults_loincCode"]()} <span class="text-xs text-muted-foreground"
							>({m["labResults_loincExample"]()})</span
						></Label
					>
					<Input id="test_code" name="test_code" required placeholder="718-7" />
				</div>
				<div class="space-y-1">
					<Label for="test_name_original">{m["labResults_testName"]()}</Label>
					<Input
						id="test_name_original"
						name="test_name_original"
						placeholder={m["labResults_testNamePlaceholder"]()}
					/>
				</div>
				<div class="space-y-1">
					<Label for="lab_create">{m["labResults_lab"]()}</Label>
					<Input id="lab_create" name="lab" placeholder={m["labResults_labPlaceholder"]()} />
				</div>
				<div class="space-y-1">
					<Label for="value_num">{m["labResults_value"]()}</Label>
					<Input id="value_num" name="value_num" type="number" step="any" />
				</div>
				<div class="space-y-1">
					<Label for="unit_original">{m["labResults_unit"]()}</Label>
					<Input id="unit_original" name="unit_original" placeholder={m["labResults_unitPlaceholder"]()} />
				</div>
				<SimpleSelect
					id="flag_create"
					name="flag"
					label={m["labResults_flag"]()}
					options={flagOptions}
					placeholder={m["labResults_flagNone"]()}
					bind:value={selectedFlag}
				/>
				<div class="flex items-end">
					<Button type="submit">{m.common_add()}</Button>
				</div>
			</form>
		</FormSectionCard>
	{/if}

	{#if data.totalPages > 1}
		<div class="editorial-panel lab-results-pager reveal-2 flex items-center justify-between gap-3">
			<Button
				variant="outline"
				disabled={data.page <= 1}
				onclick={() => (window.location.href = buildPageUrl(data.page - 1))}
			>
				{m["labResults_previous"]()}
			</Button>
			<p class="text-sm text-muted-foreground">
				{m["labResults_pageIndicator"]({ page: data.page, total: data.totalPages })}
			</p>
			<Button
				variant="outline"
				disabled={data.page >= data.totalPages}
				onclick={() => (window.location.href = buildPageUrl(data.page + 1))}
			>
				{m["labResults_next"]()}
			</Button>
		</div>
	{/if}

	{#snippet desktopActions(r: LabResultItem)}
		<div class="lab-results-row-actions flex justify-end gap-1">
			<Button
				type="button"
				variant="ghost"
				size="sm"
				class="h-7 w-7 shrink-0 p-0"
				onclick={() => startEdit(r)}
				aria-label={m.common_edit()}
			>
				<Pencil class="size-4" />
			</Button>
			<form
				method="POST"
				action="?/delete"
				use:enhance
				onsubmit={(event) => {
					if (!confirm(m['labResults_confirmDelete']())) event.preventDefault();
				}}
			>
				<input type="hidden" name="id" value={r.record_id} />
				<Button
					type="submit"
					variant="ghost"
					size="sm"
					class="h-7 w-7 shrink-0 p-0 text-destructive hover:text-destructive"
					aria-label={m.common_delete()}
				>
					<X class="size-4" />
				</Button>
			</form>
		</div>
	{/snippet}

	{#snippet mobileActions(r: LabResultItem)}
		<div class="lab-results-mobile-actions flex gap-1">
			<Button type="button" variant="ghost" size="sm" onclick={() => startEdit(r)}>
				<Pencil class="size-4" />
				{m.common_edit()}
			</Button>
			<form
				method="POST"
				action="?/delete"
				use:enhance
				onsubmit={(event) => {
					if (!confirm(m['labResults_confirmDelete']())) event.preventDefault();
				}}
			>
				<input type="hidden" name="id" value={r.record_id} />
				<Button type="submit" variant="ghost" size="sm" class="text-destructive hover:text-destructive">
					<X class="size-4" />
					{m.common_delete()}
				</Button>
			</form>
		</div>
	{/snippet}

	{#snippet desktopRow(r: LabResultItem)}
		<TableRow class="lab-results-row">
			<TableCell class="text-sm">{r.collected_at.slice(0, 10)}</TableCell>
			<TableCell class="font-medium">
				<button type="button" onclick={() => filterByCode(r.test_code)} class="lab-results-code-link text-left">
					{r.test_name_original ?? r.test_code}
				</button>
			</TableCell>
			<TableCell class="text-xs text-muted-foreground font-mono">
				<button type="button" onclick={() => filterByCode(r.test_code)} class="lab-results-code-link">
					{r.test_code}
				</button>
			</TableCell>
			<TableCell class="lab-results-value-cell">{formatValue(r)}</TableCell>
			<TableCell>
				{#if r.flag}
					<span class={flagPills[r.flag] ?? 'health-flag-pill'}>{r.flag}</span>
				{:else}
					—
				{/if}
			</TableCell>
			<TableCell class="text-sm text-muted-foreground">{r.lab ?? '—'}</TableCell>
			<TableCell class="text-right">
				{@render desktopActions(r)}
			</TableCell>
		</TableRow>
	{/snippet}

	{#snippet mobileCard(r: LabResultItem)}
		<div class="products-mobile-card lab-results-mobile-card flex flex-col gap-1">
			<div class="flex items-start justify-between gap-2">
				<div class="flex min-w-0 flex-col gap-1">
					<button
						type="button"
						onclick={() => filterByCode(r.test_code)}
						class="lab-results-code-link text-left font-medium"
					>
						{r.test_name_original ?? r.test_code}
					</button>
				</div>
				{#if r.flag}
					<span class={flagPills[r.flag] ?? 'health-flag-pill'}>{r.flag}</span>
				{/if}
			</div>
			<p class="text-sm text-muted-foreground">{r.collected_at.slice(0, 10)}</p>
			<div class="lab-results-mobile-value flex items-center gap-2 text-sm">
				<button
					type="button"
					onclick={() => filterByCode(r.test_code)}
					class="lab-results-code-link font-mono text-xs text-muted-foreground"
				>
					{r.test_code}
				</button>
				<span>{formatValue(r)}</span>
			</div>
			{#if r.lab}
				<p class="text-xs text-muted-foreground">{r.lab}</p>
			{/if}
			{@render mobileActions(r)}
		</div>
	{/snippet}

	<!-- Desktop: table -->
	<div class="products-table-shell lab-results-table hidden md:block reveal-2">
		<Table>
			<TableHeader>
				<TableRow>
					<TableHead>{m["labResults_colDate"]()}</TableHead>
					<TableHead>{m["labResults_colTest"]()}</TableHead>
					<TableHead>{m["labResults_colLoinc"]()}</TableHead>
					<TableHead>{m["labResults_colValue"]()}</TableHead>
					<TableHead>{m["labResults_colFlag"]()}</TableHead>
					<TableHead>{m["labResults_colLab"]()}</TableHead>
					<TableHead class="text-right">{m["labResults_colActions"]()}</TableHead>
				</TableRow>
			</TableHeader>
			<TableBody>
				{#each displayGroups as group (group.key)}
					{#if group.label}
						<TableRow>
							<TableCell colspan={7} class="bg-muted/35 py-2">
								<div class="products-section-title text-xs uppercase tracking-[0.12em]">
									{group.label}
								</div>
							</TableCell>
						</TableRow>
					{/if}
					{#each group.items as r (r.record_id)}
						{@render desktopRow(r)}
					{/each}
				{/each}
				{#if data.resultPage.items.length === 0}
					<TableRow>
						<TableCell colspan={7} class="text-center text-muted-foreground py-8">
							{m["labResults_noResults"]()}
						</TableCell>
					</TableRow>
				{/if}
			</TableBody>
		</Table>
	</div>

	<!-- Mobile: cards -->
	<div class="lab-results-mobile-grid flex flex-col gap-3 md:hidden reveal-3">
		{#each displayGroups as group (group.key)}
			{#if group.label}
				<div class="products-section-title text-xs uppercase tracking-[0.12em]">{group.label}</div>
			{/if}
			{#each group.items as r (r.record_id)}
				{@render mobileCard(r)}
			{/each}
		{/each}
		{#if data.resultPage.items.length === 0}
			<p class="py-8 text-center text-sm text-muted-foreground">{m["labResults_noResults"]()}</p>
		{/if}
	</div>
</div>
