<script lang="ts">
import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
import FieldLabelBadge from '$lib/shared/primitives/FieldLabelBadge.svelte';
import DatePrecisionField from '$lib/shared/primitives/DatePrecisionField.svelte';
import { m } from '$lib/paraglide/messages.js';
import type { components } from '$lib/generated/api';
import type { DatePrecision } from '$lib/shared/utils/documentDate';

type Person = components['schemas']['Person'];

let {
	senderId = $bindable(''),
	selectedReceivers = $bindable<Person[]>([]),
	dateIso = $bindable(''),
	precision = $bindable<DatePrecision>('DAY'),
	endDateIso = $bindable(''),
	initialDateIso = '',
	initialLocation = '',
	initialSenderName = '',
	suggestedDateIso = '',
	suggestedSenderName = '',
	hideDate = false,
	editMode = false
}: {
	senderId?: string;
	selectedReceivers?: Person[];
	dateIso?: string;
	precision?: DatePrecision;
	endDateIso?: string;
	initialDateIso?: string;
	initialLocation?: string;
	initialSenderName?: string;
	suggestedDateIso?: string;
	suggestedSenderName?: string;
	hideDate?: boolean;
	editMode?: boolean;
} = $props();
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.doc_section_who_when()}
	</h2>

	<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
		{#if !hideDate}
			<!-- Datum + Präzision + Enddatum (shared primitive, #781). The three grid
				 cells slot directly into this grid; testids are forwarded so the
				 existing WhoWhenSection selectors survive the extraction. -->
			<DatePrecisionField
				bind:dateIso={dateIso}
				bind:precision={precision}
				bind:endDateIso={endDateIso}
				initialDateIso={initialDateIso}
				suggestedDateIso={suggestedDateIso}
				dateInputName="documentDate"
				endDateInputName="metaDateEnd"
				dateLabel={m.form_label_date()}
				dateTestId="who-when-date"
				precisionTestId="who-when-precision"
				endDateInnerTestId="who-when-end-date"
			/>
		{/if}

		<!-- Absender (required in upload mode — row 1, col 2) -->
		<div>
			<PersonTypeahead
				name="senderId"
				label={m.form_label_sender()}
				required={!editMode}
				bind:value={senderId}
				initialName={initialSenderName}
				suggestedName={suggestedSenderName}
				badge={editMode ? 'replace' : undefined}
			/>
		</div>

		<!-- Empfänger (optional — row 2, col 1) -->
		<div>
			<p class="mb-1 block text-sm font-medium text-ink-2">
				{m.form_label_receivers()}
				{#if editMode}<FieldLabelBadge variant="additive" />{/if}
			</p>
			<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
		</div>

		{#if !editMode}
			<!-- Ort (optional — row 2, col 2). Hidden in editMode: meta_location is
				 NOT bulk-editable per the issue spec; the three editable location
				 fields live in DescriptionSection. -->
			<div>
				<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
					>{m.form_label_location()}</label
				>
				<input
					id="location"
					type="text"
					name="location"
					value={initialLocation}
					placeholder={m.form_placeholder_location()}
					class="block w-full rounded border border-line px-2 py-3 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
				/>
			</div>
		{/if}
	</div>
</div>
