<script lang="ts">
	import { Input } from '$lib/components/ui/input/index.js';
	import { isValidUKPhone, formatPhoneDisplay } from '$lib/utils/phone';

	interface Props {
		value?: string;
		error?: string;
		placeholder?: string;
		_required?: boolean;
		disabled?: boolean;
		class?: string;
		id?: string;
		onvaluechange?: (value: string) => void;
		onerrorchange?: (error: string) => void;
	}

	let {
		value = $bindable(''),
		error = $bindable(''),
		placeholder = '07123 456789 or +44 7123 456789',
		_required = false,
		disabled = false,
		class: className = '',
		id = 'phone',
		onvaluechange,
		onerrorchange
	}: Props = $props();

	let touched = $state(false);

	function handleKeyDown(e: KeyboardEvent) {
		const _target = e.target as HTMLInputElement;
		const allowedKeys = [
			'Backspace',
			'Delete',
			'Tab',
			'ArrowLeft',
			'ArrowRight',
			'ArrowUp',
			'ArrowDown',
			'Home',
			'End'
		];
		if (allowedKeys.includes(e.key)) return;
		if (e.key === '+') return; // allow + anywhere; normalisePhoneInput removes extras
		if (!/^[0-9]$/.test(e.key)) {
			e.preventDefault();
		}
	}

	function normalizePhone(value: string): string {
		let cleaned = value.replace(/[\s\-()]/g, '');
		if (cleaned.startsWith('07')) {
			cleaned = '+44' + cleaned.substring(1);
		}
		return cleaned;
	}

	function handleInput(e: Event) {
		const _target = e.target as HTMLInputElement;
		const formatted = formatPhoneDisplay(_target.value);
		value = formatted;
		onvaluechange?.(formatted);
		// Only show live validation after the field has been blurred at least once
		if (touched) {
			if (formatted && !isValidUKPhone(formatted)) {
				error = 'Invalid UK phone number';
				onerrorchange?.(error);
			} else {
				error = '';
				onerrorchange?.('');
			}
		}
	}

	function handleBlur() {
		touched = true;
		if (value && !isValidUKPhone(value)) {
			error = 'Invalid UK phone number';
			onerrorchange?.(error);
		} else {
			error = '';
			onerrorchange?.('');
			if (value) {
				const normalized = normalizePhone(value);
				if (normalized !== value) {
					value = normalized;
					onvaluechange?.(normalized);
				}
			}
		}
	}
</script>

<div class="space-y-1.5">
	<Input
		{id}
		type="text"
		inputmode="tel"
		{placeholder}
		maxlength={15}
		{value}
		oninput={handleInput}
		onblur={handleBlur}
		onkeydown={handleKeyDown}
		{disabled}
		aria-invalid={!!error || undefined}
		class={className}
	/>
	{#if error}
		<p class="text-sm text-red-500">{error}</p>
	{/if}
</div>
