<script lang="ts">
	import { currentStep, cardDetails } from '$lib/stores';
	import Navigator from './subcomponents/Navigator.svelte';
	import { onMount } from 'svelte';

	let esnSection = $state('');
	let studiesAt = $state('');
	let validityStart = $state('');

	onMount(() => {
		validityStart = new Date().toISOString().split('T')[0];

		try {
			const savedesnSection = localStorage.getItem('esnSection');
			if (savedesnSection) {
				esnSection = savedesnSection;
			}
			const savedStudiesAt = localStorage.getItem('studiesAt');
			if (savedStudiesAt) {
				studiesAt = savedStudiesAt;
			}
		} catch (error) {
			console.error('Failed to access localStorage on mount:', error);
		}
	});

	let canProceed = $derived(esnSection.trim() !== '' && studiesAt.trim() !== '' && validityStart.trim() !== '');

	function handleContinue() {
		try {
			localStorage.setItem('esnSection', esnSection);
			localStorage.setItem('studiesAt', studiesAt);
		} catch (error) {
			console.error('Failed to save to localStorage:', error);
		}
		// Include new field; spread in case store has more fields defined elsewhere
		$cardDetails = { ...$cardDetails, esnSection, studiesAt, validityStart } as any;
	}
</script>

<div class="p-6">
	<div class="mb-6">
		<h2 class="mb-2 text-xl font-semibold text-gray-900">Enter Card Details</h2>
		<p class="mb-4 text-sm text-gray-700">
			Please provide the following details to be printed on the cards.
		</p>
	</div>

	<div class="space-y-6">
		<div>
			<label for="esnSection" class="mb-2 block text-sm font-medium text-gray-700">
				ESN Section
			</label>
			<input
				id="esnSection"
				type="text"
				bind:value={esnSection}
				placeholder="e.g., ESN VUT Brno"
				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
			/>
		</div>

		<div>
			<label for="studiesAt" class="mb-2 block text-sm font-medium text-gray-700">
				Studies At
			</label>
			<input
				id="studiesAt"
				type="text"
				bind:value={studiesAt}
				placeholder="e.g., Brno University of Technology"
				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
			/>
		</div>

		<div>
			<label for="validityStart" class="mb-2 block text-sm font-medium text-gray-700">
				Card Validity Start Date
			</label>
			<input
				id="validityStart"
				type="date"
				bind:value={validityStart}
				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
			/>
			<p class="mt-2 text-xs text-gray-500">
				Default date is today, but future date can be selected.
			</p>
		</div>
	</div>

	<div class="mt-10">
		<Navigator
			{canProceed}
			{currentStep}
			onForward={handleContinue}
			textBack="Back to Row Selection"
			textForwardEnabled="Continue to Card Selection"
			textForwardDisabled="Please fill out all fields"
		/>
	</div>
</div>
