<script lang="ts">
import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
import { m } from '$lib/paraglide/messages.js';

let {
	senderId = $bindable(''),
	receiverId = $bindable(''),
	fromDate = $bindable(''),
	toDate = $bindable(''),
	sortDir = $bindable('DESC'),
	initialSenderName = '',
	initialReceiverName = '',
	onapplyFilters,
	ontoggleSort,
	onswapPersons
}: {
	senderId?: string;
	receiverId?: string;
	fromDate?: string;
	toDate?: string;
	sortDir?: string;
	initialSenderName?: string;
	initialReceiverName?: string;
	onapplyFilters: () => void;
	ontoggleSort: () => void;
	onswapPersons: () => void;
} = $props();
</script>

<div class="relative z-20 mb-10 border border-line bg-surface p-8 shadow-sm">
	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
		<!-- Sender -->
		<div
			class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
		>
			<PersonTypeahead
				name="senderId"
				label={m.conv_label_person_a()}
				bind:value={senderId}
				initialName={initialSenderName}
				restrictToCorrespondentsOf={receiverId || undefined}
				onchange={() => onapplyFilters()}
			/>
		</div>

		<!-- Swap button -->
		<div class="{senderId && receiverId ? 'flex' : 'hidden md:flex'} items-end">
			<button
				data-testid="conv-swap-btn"
				onclick={onswapPersons}
				class="flex w-full items-center justify-center gap-2 border border-line px-3 py-2.5 text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg md:w-auto {senderId &&
				receiverId
					? ''
					: 'invisible'}"
				title={m.conv_swap_btn()}
			>
				<svg
					class="h-4 w-4 flex-shrink-0 md:rotate-90"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
					></path>
				</svg>
				<span class="md:hidden">{m.conv_swap_btn()}</span>
			</button>
		</div>

		<!-- Receiver -->
		<div
			class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
		>
			<PersonTypeahead
				name="receiverId"
				label={m.conv_label_person_b()}
				bind:value={receiverId}
				initialName={initialReceiverName}
				restrictToCorrespondentsOf={senderId || undefined}
				onchange={() => onapplyFilters()}
			/>
		</div>
	</div>

	<div class="grid grid-cols-1 items-end gap-6 md:grid-cols-3">
		<!-- Date From -->
		<div>
			<label
				for="dateFrom"
				class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
				>{m.conv_label_from()}</label
			>
			<input
				id="dateFrom"
				type="date"
				bind:value={fromDate}
				onchange={() => onapplyFilters()}
				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>

		<!-- Date To -->
		<div>
			<label for="dateTo" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
				>{m.conv_label_to()}</label
			>
			<input
				id="dateTo"
				type="date"
				bind:value={toDate}
				onchange={() => onapplyFilters()}
				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>

		<!-- Sort Toggle -->
		<div>
			<button
				onclick={ontoggleSort}
				class="flex h-[42px] w-full items-center justify-center border border-line text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg"
			>
				<span class="mr-2">{m.conv_sort_label()}</span>
				<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
				<svg
					class="ml-2 h-4 w-4 transform {sortDir === 'ASC'
						? 'rotate-180'
						: ''} transition-transform"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
					></path>
				</svg>
			</button>
		</div>
	</div>
</div>
