<script lang="ts">
import { goto } from '$app/navigation';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import ConversationFilterBar from './ConversationFilterBar.svelte';
import ConversationTimeline from './ConversationTimeline.svelte';

let { data } = $props();

let senderId = $state(untrack(() => data.filters.senderId));
let receiverId = $state(untrack(() => data.filters.receiverId));
let fromDate = $state(untrack(() => data.filters.from));
let toDate = $state(untrack(() => data.filters.to));
let sortDir = $state(untrack(() => data.filters.dir));

// Sync with server data after navigation
$effect(() => {
	senderId = data.filters.senderId;
	receiverId = data.filters.receiverId;
	fromDate = data.filters.from;
	toDate = data.filters.to;
	sortDir = data.filters.dir;
});

function applyFilters() {
	const params = new SvelteURLSearchParams();
	if (senderId) params.set('senderId', senderId);
	if (receiverId) params.set('receiverId', receiverId);
	if (fromDate) params.set('from', fromDate);
	if (toDate) params.set('to', toDate);
	params.set('dir', sortDir);
	goto(`/korrespondenz?${params.toString()}`, { keepFocus: true });
}

function toggleSort() {
	sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC';
	applyFilters();
}

function swapPersons() {
	const tmp = senderId;
	senderId = receiverId;
	receiverId = tmp;
	applyFilters();
}
</script>

<div class="mx-auto max-w-5xl px-4 py-10">
	<!-- Page Header -->
	<div class="mb-8 border-b border-ink/10 pb-4">
		<h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1>
		<p class="mt-2 font-sans text-sm text-ink-2">
			{m.conv_subtitle()}
		</p>
	</div>

	<ConversationFilterBar
		bind:senderId={senderId}
		bind:receiverId={receiverId}
		bind:fromDate={fromDate}
		bind:toDate={toDate}
		bind:sortDir={sortDir}
		initialSenderName={data.initialValues.senderName}
		initialReceiverName={data.initialValues.receiverName}
		onapplyFilters={applyFilters}
		ontoggleSort={toggleSort}
		onswapPersons={swapPersons}
	/>

	<!-- RESULTS LIST SECTION -->
	{#if !senderId || !receiverId}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-24 text-center"
		>
			<div class="mb-4 rounded-full bg-muted p-4 text-ink">
				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
					><path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
					/></svg
				>
			</div>
			<p class="font-serif text-lg text-ink">{m.conv_empty_heading()}</p>
			<p class="mt-1 font-sans text-sm text-ink-2">{m.conv_empty_text()}</p>
		</div>
	{:else if data.documents.length === 0}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-line bg-surface py-24 text-center shadow-sm"
		>
			<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
			<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
		</div>
	{:else}
		<ConversationTimeline
			documents={data.documents}
			senderId={senderId}
			receiverId={receiverId}
			canWrite={data.canWrite}
		/>
	{/if}
</div>
