<script lang="ts">
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
import { groupDocuments } from '$lib/utils/groupDocuments';
import GroupDivider from '$lib/components/GroupDivider.svelte';
import { applyOffsets } from '$lib/search';
import type { components } from '$lib/generated/api';

let {
	documents,
	canWrite,
	error,
	total = 0,
	q = '',
	sort,
	matchData = {}
}: {
	documents: {
		id: string;
		title?: string | null;
		originalFilename: string;
		documentDate?: string | null;
		location?: string | null;
		sender?: {
			id?: string;
			firstName?: string | null;
			lastName: string;
			displayName: string;
		} | null;
		receivers?: { id?: string; firstName?: string | null; lastName: string; displayName: string }[];
		tags?: { id: string; name: string; color?: string | null }[];
	}[];
	canWrite: boolean;
	error?: string | null;
	total?: number;
	q?: string;
	sort?: string;
	matchData?: Record<string, components['schemas']['SearchMatchData']>;
} = $props();

const fallbackLabel = $derived(
	(sort ?? 'DATE') === 'DATE' ? m.docs_group_undated() : m.docs_group_unknown()
);
const groupedDocuments = $derived.by(() =>
	groupDocuments(documents, sort ?? 'DATE', fallbackLabel)
);
const showDividers = $derived(groupedDocuments.length >= 2);
</script>

<!-- DOCUMENT LIST HEADER -->
<div class="mb-2 flex justify-end">
	{#if canWrite}
		<a
			href="/documents/new"
			class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
		>
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
				alt=""
				aria-hidden="true"
				class="h-4 w-4"
			/>
			{m.docs_btn_new()}
		</a>
	{/if}
</div>

<!-- RESULT COUNT -->
{#if total > 0}
	<p class="mb-3 font-sans text-base text-ink-2">{m.docs_result_count({ count: total })}</p>
{/if}

<!-- DOCUMENT LIST -->
<div class="border border-line bg-surface shadow-sm">
	{#if error}
		<div class="bg-red-50 p-8 text-center text-red-600">
			{error}
		</div>
	{:else if documents.length > 0}
		{#each groupedDocuments as group (group.label)}
			{#if showDividers}
				<GroupDivider label={group.label} />
			{/if}
			<ul class="divide-y divide-line-2">
				{#each group.documents as doc (doc.id)}
					{@const titleText = doc.title || doc.originalFilename}
					{@const match = matchData?.[doc.id]}
					{@const titleOffsets = match?.titleOffsets ?? []}
					{@const titleSegments = applyOffsets(titleText, titleOffsets)}
					{@const snippet = match?.transcriptionSnippet}
					{@const snippetSegments = snippet ? applyOffsets(snippet, match?.snippetOffsets ?? []) : null}
					{@const summary = match?.summarySnippet}
					{@const summarySegments = summary ? applyOffsets(summary, match?.summaryOffsets ?? []) : null}
					{@const senderMatched = match?.senderMatched ?? false}
					{@const matchedReceiverIds = new Set(match?.matchedReceiverIds ?? [])}
					{@const matchedTagIds = new Set(match?.matchedTagIds ?? [])}
					<li class="group transition-colors duration-200 hover:bg-muted/50">
						<a href="/documents/{doc.id}" class="block p-6">
							<div class="flex flex-col gap-6 sm:flex-row">
								<!-- Main Info -->
								<div class="flex-1">
									<div class="mb-2 flex items-baseline justify-between">
										<h3 class="font-serif text-xl font-medium text-ink group-hover:underline">
											{#each titleSegments as seg, i (i)}
												{#if seg.highlight}<mark
														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
														>{seg.text}</mark
													>{:else}{seg.text}{/if}
											{/each}
										</h3>
									</div>

									<!-- Metadata Row -->
									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
										<div class="flex items-center">
											<img
												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
												alt=""
												aria-hidden="true"
												class="mr-1.5 h-4 w-4"
											/>
											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
										</div>
										{#if doc.location}
											<div class="flex items-center">
												<img
													src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
													alt=""
													aria-hidden="true"
													class="mr-1.5 h-4 w-4"
												/>
												{doc.location}
											</div>
										{/if}
									</div>

									{#if snippetSegments}
										<div class="mb-4 flex items-baseline gap-2">
											<span
												class="shrink-0 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
												>{m.docs_list_content()}</span
											>
											<p
												data-testid="search-snippet"
												class="line-clamp-2 font-sans text-sm text-ink-2 italic"
											>
												{#each snippetSegments as seg, i (i)}{#if seg.highlight}<mark
															class="bg-transparent text-inherit not-italic underline decoration-brand-navy decoration-2 underline-offset-2"
															>{seg.text}</mark
														>{:else}{seg.text}{/if}{/each}
											</p>
										</div>
									{/if}

									{#if summarySegments}
										<div class="mb-4 flex items-baseline gap-2">
											<span
												class="shrink-0 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
												>{m.docs_list_summary()}</span
											>
											<p
												data-testid="search-summary"
												class="line-clamp-2 font-sans text-sm text-ink-2 italic"
											>
												{#each summarySegments as seg, i (i)}{#if seg.highlight}<mark
															class="bg-transparent text-inherit not-italic underline decoration-brand-navy decoration-2 underline-offset-2"
															>{seg.text}</mark
														>{:else}{seg.text}{/if}{/each}
											</p>
										</div>
									{/if}

									<!-- Sender/Receiver Info -->
									<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
										<div class="flex items-baseline">
											<span
												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
												>{m.docs_list_from()}</span
											>
											{#if doc.sender}
												{#if senderMatched}
													<mark
														data-testid="sender-match"
														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
														>{doc.sender.displayName}</mark
													>
												{:else}
													<span class="text-ink">{doc.sender.displayName}</span>
												{/if}
											{:else}
												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
											{/if}
										</div>
										<div class="flex items-baseline">
											<span
												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
												>{m.docs_list_to()}</span
											>
											{#if doc.receivers && doc.receivers.length > 0}
												<span class="text-ink">
													{#each doc.receivers as receiver, ri (receiver.id ?? ri)}
														{#if ri > 0}<span>, </span>{/if}
														{#if receiver.id && matchedReceiverIds.has(receiver.id)}
															<mark
																data-testid="receiver-match"
																class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
																>{receiver.displayName}</mark
															>
														{:else}
															{receiver.displayName}
														{/if}
													{/each}
												</span>
											{:else}
												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
											{/if}
										</div>
									</div>

									<!-- Tags Display -->
									{#if doc.tags && doc.tags.length > 0}
										<div class="mt-4 flex flex-wrap gap-2 pt-3">
											{#each doc.tags as tag (tag.id)}
												<button
													type="button"
													class="relative z-10 inline-flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-[10px] font-bold tracking-widest uppercase transition-colors hover:bg-primary hover:text-primary-fg {matchedTagIds.has(tag.id) ? 'bg-muted text-ink underline decoration-brand-navy decoration-2 underline-offset-2' : 'bg-muted text-ink'}"
													title={tag.name}
													onclick={(e) => {
														e.preventDefault();
														e.stopPropagation();
														goto(`/?tag=${encodeURIComponent(tag.name)}`);
													}}
												>
													{#if tag.color}
														<span
															data-testid="tag-color-dot"
															data-color={tag.color}
															style="background-color: var(--c-tag-{tag.color})"
															class="inline-block h-2 w-2 flex-shrink-0 rounded-full"
														></span>
													{/if}
													{#if matchedTagIds.has(tag.id)}
														<span data-testid="tag-match">{tag.name}</span>
													{:else}
														{tag.name}
													{/if}
												</button>
											{/each}
										</div>
									{/if}
								</div>

								<!-- Arrow Icon -->
								<div
									class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
								>
									<img
										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
										alt=""
										aria-hidden="true"
										class="h-6 w-6"
									/>
								</div>
							</div>
						</a>
					</li>
				{/each}
			</ul>
		{/each}
	{:else}
		<!-- Empty State -->
		<div class="p-16 text-center">
			<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-6 w-6"
				/>
			</div>
			<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
			<p class="mt-1 font-sans text-sm text-ink-2">
				{q ? m.docs_empty_for_term({ term: q }) : m.docs_empty_text()}
			</p>
			<button
				onclick={() => goto('/')}
				class="mt-6 text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
			>
				{m.docs_empty_btn_clear()}
			</button>
		</div>
	{/if}
</div>
