<script lang="ts">
import { isoToGerman, handleGermanDateInput, germanToIso } from '$lib/utils/date';
import { m } from '$lib/paraglide/messages.js';

interface Props {
	value?: string;
	errorMessage?: string | null;
	name?: string;
	id?: string;
	placeholder?: string;
	class?: string;
	onchange?: () => void;
}

let {
	value = $bindable(''),
	errorMessage = $bindable<string | null>(null),
	name,
	id,
	placeholder,
	class: className = '',
	onchange
}: Props = $props();

let display = $state(isoToGerman(value ?? ''));

// ─── Validation helper ────────────────────────────────────────────────────
function isCalendarValid(iso: string): boolean {
	if (!iso) return false;
	const [, mm, dd] = iso.match(/^\d{4}-(\d{2})-(\d{2})$/) ?? [];
	const month = parseInt(mm, 10);
	const day = parseInt(dd, 10);
	return month >= 1 && month <= 12 && day >= 1 && day <= 31;
}

// ─── Input handler ────────────────────────────────────────────────────────
function handleInput(e: Event) {
	const result = handleGermanDateInput(e);
	display = result.display;

	if (result.display === '') {
		value = '';
		errorMessage = null;
		onchange?.();
		return;
	}

	if (result.display.length < 10) {
		value = '';
		errorMessage = m.form_date_error();
		return;
	}

	const iso = germanToIso(result.display);
	if (!iso || !isCalendarValid(iso)) {
		value = '';
		errorMessage = m.form_date_error();
		return;
	}

	value = iso;
	errorMessage = null;
	onchange?.();
}
</script>

<input
	type="text"
	inputmode="numeric"
	maxlength="10"
	id={id}
	value={display}
	placeholder={placeholder ?? m.form_placeholder_date()}
	oninput={handleInput}
	class={className}
/>
{#if name}
	<input type="hidden" name={name} value={value} />
{/if}
