<script lang="ts">
	import * as Card from '$lib/components/ui/card';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';

	let { 
		pedimento,
		formData = $bindable(),
		exists = $bindable()
	}: { 
		pedimento: Pedimento | null;
		formData?: any;
		exists?: boolean;
	} = $props();

	// Inicializar formData inmediatamente
	const transportData = pedimento?.pedimento_transport_means;
	if (transportData) {
		exists = true;
		if (!formData) {
			formData = {
				destination: transportData.destination || '',
				entry_exit: transportData.entry_exit || '',
				arrival: transportData.arrival || '',
				departure: transportData.departure || ''
			};
		}
	} else {
		exists = false;
		if (!formData) {
			formData = {
				destination: '',
				entry_exit: '',
				arrival: '',
				departure: ''
			};
		}
	}
</script>

<Card.Root>
	<Card.Header>
		<Card.Title>Medios de Transporte</Card.Title>
		<Card.Description>
			Gestiona la información de transporte del pedimento
		</Card.Description>
	</Card.Header>
	<Card.Content>
		<div class="space-y-6">
			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<!-- Destino -->
				<div class="space-y-2">
					<Label for="destination">Destino</Label>
					<Input
						id="destination"
						type="number"
						bind:value={formData.destination}
						placeholder="Destino"
					/>
				</div>

				<!-- Entrada/Salida -->
				<div class="space-y-2">
					<Label for="entry_exit">Entrada/Salida</Label>
					<Input
						id="entry_exit"
						bind:value={formData.entry_exit}
						maxlength={2}
						placeholder="Entrada/Salida"
					/>
				</div>

				<!-- Llegada -->
				<div class="space-y-2">
					<Label for="arrival">Llegada</Label>
					<Input
						id="arrival"
						bind:value={formData.arrival}
						maxlength={2}
						placeholder="Llegada"
					/>
				</div>

				<!-- Salida -->
				<div class="space-y-2">
					<Label for="departure">Salida</Label>
					<Input
						id="departure"
						bind:value={formData.departure}
						maxlength={2}
						placeholder="Salida"
					/>
				</div>
			</div>
		</div>
	</Card.Content>
</Card.Root>
