<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 { Textarea } from '$lib/components/ui/textarea';
	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 validationData = pedimento?.pedimento_validation;
	if (validationData) {
		exists = true;
		if (!formData) {
			formData = {
				validator: validationData.validator || '',
				validation_ack: validationData.validation_ack || '',
				pre_ack: validationData.pre_ack || '',
				line_signature: validationData.line_signature || '',
				electronic_signature: validationData.electronic_signature || '',
				certificate_number: validationData.certificate_number || '',
				validator_id: validationData.validator_id || '',
				responsible_id: validationData.responsible_id || ''
			};
		}
	} else {
		exists = false;
		if (!formData) {
			formData = {
				validator: '',
				validation_ack: '',
				pre_ack: '',
				line_signature: '',
				electronic_signature: '',
				certificate_number: '',
				validator_id: '',
				responsible_id: ''
			};
		}
	}
</script>

<Card.Root>
	<Card.Header>
		<Card.Title>Validación del Pedimento</Card.Title>
		<Card.Description>
			Gestiona la documentación de validación del pedimento
		</Card.Description>
	</Card.Header>
	<Card.Content>
		<div class="space-y-6">
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
				<!-- Validador -->
				<div class="space-y-2">
					<Label for="validator">Validador</Label>
					<Input
						id="validator"
						bind:value={formData.validator}
						maxlength={3}
						placeholder="Validador"
					/>
				</div>

				<!-- Acuse de Validación -->
				<div class="space-y-2">
					<Label for="validation_ack">Acuse de Validación</Label>
					<Input
						id="validation_ack"
						bind:value={formData.validation_ack}
						maxlength={8}
						placeholder="Acuse de validación"
					/>
				</div>

				<!-- Acuse Previo -->
				<div class="space-y-2">
					<Label for="pre_ack">Acuse Previo</Label>
					<Input
						id="pre_ack"
						bind:value={formData.pre_ack}
						maxlength={8}
						placeholder="Acuse previo"
					/>
				</div>

				<!-- Firma Línea de Captura -->
				<div class="space-y-2">
					<Label for="line_signature">Firma Línea de Captura</Label>
					<Input
						id="line_signature"
						bind:value={formData.line_signature}
						maxlength={50}
						placeholder="Firma línea de captura"
					/>
				</div>

				<!-- Firma Electrónica -->
				<div class="space-y-2 md:col-span-2">
					<Label for="electronic_signature">Firma Electrónica</Label>
					<Input
						id="electronic_signature"
						bind:value={formData.electronic_signature}
						maxlength={999}
						placeholder="Firma electrónica"
					/>
				</div>

				<!-- Número de Certificado -->
				<div class="space-y-2">
					<Label for="certificate_number">Número de Certificado</Label>
					<Input
						id="certificate_number"
						bind:value={formData.certificate_number}
						maxlength={99}
						placeholder="Número de certificado"
					/>
				</div>

				<!-- ID de Validador -->
				<div class="space-y-2">
					<Label for="validator_id">ID de Validador</Label>
					<Input
						id="validator_id"
						type="number"
						bind:value={formData.validator_id}
						placeholder="ID de validador"
					/>
				</div>

				<!-- ID de Responsable -->
				<div class="space-y-2">
					<Label for="responsible_id">ID de Responsable</Label>
					<Input
						id="responsible_id"
						type="number"
						bind:value={formData.responsible_id}
						placeholder="ID de responsable"
					/>
				</div>
			</div>
		</div>
	</Card.Content>
</Card.Root>
