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

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

	// Asegurar que formData siempre tenga un valor por defecto
	formData = formData || { observaciones: '' };

	// Variable para rastrear el último valor del servidor
	let lastServerObservations = $state<string | null>(null);

	// Actualizar formData solo cuando el pedimento cambie desde el servidor
	$effect(() => {
		const currentObservations = pedimento?.observations ?? null;	
		
		// Solo actualizar si el valor del servidor cambió realmente
		if (currentObservations !== lastServerObservations) {
			lastServerObservations = currentObservations;
			formData = {
				observaciones: currentObservations || ''
			};
			exists = !!currentObservations;			
		}
	});
	
	// Mapear el tipo de pedimento a un nombre legible
	const tipoPedimentoNombre = $derived.by(() => {
		switch(pedimentoType?.toLowerCase()) {
			case 'automobile':
				return 'Automobile';
			case 'complementary':
				return 'Complementary';
			case 'consolidated':
				return 'Consolidated';
			case 'normal':
				return 'Normal';
			default:
				return pedimentoType || 'No especificado';
		}
	});
</script>

<Card.Root>
	<Card.Header>
		<Card.Title>Observaciones</Card.Title>
		<Card.Description>
			Agrega notas y observaciones sobre el pedimento
		</Card.Description>
	</Card.Header>
	<Card.Content>
		<div class="space-y-4">
			<!-- Mostrar el tipo de pedimento y número -->
			<div class="rounded-lg border bg-card p-4">
				<div class="space-y-2">
					<div class="flex items-center gap-2">
						<span class="text-sm font-medium text-muted-foreground">Tipo de Pedimento:</span>
						<span class="text-sm font-semibold">{tipoPedimentoNombre}</span>
					</div>
					{#if pedimentoNumber}
						<div class="flex items-center gap-2">
							<span class="text-sm font-medium text-muted-foreground">Número de Pedimento:</span>
							<span class="text-sm font-semibold">{pedimentoNumber}</span>
						</div>
					{/if}
				</div>
			</div>
			
			<div class="space-y-2">
				<Label for="observaciones">Observaciones</Label>
				<textarea
					id="observaciones"
					bind:value={formData.observaciones}
					placeholder="Escribe tus observaciones aquí..."
					rows={10}
					class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
				></textarea>
			</div>
		</div>
	</Card.Content>
</Card.Root>