<script lang="ts">
	import { untrack } from 'svelte';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import * as Select from '$lib/components/ui/select';
	import { Checkbox } from '$lib/components/ui/checkbox';
	import {
		Table,
		TableBody,
		TableCell,
		TableHead,
		TableHeader,
		TableRow
	} from '$lib/components/ui/table';
	import { shortcutStore } from '$lib/stores/shortcut-store';
	import { focusStore, interactionMode } from '$lib/stores/focus-store';
	import { obtenerAtajosOtrosDatos } from '$lib/config/shortcuts/dashboard/pedimentos/tabs/other_data';
	import {
		Dialog,
		DialogContent,
		DialogHeader,
		DialogTitle,
		DialogFooter
	} from '$lib/components/ui/dialog';
	import {
		Calculator,
		FileText,
		RotateCw,
		AlertCircle,
		FileCheck,
		FileX,
		Download,
		ChevronsLeft,
		ChevronLeft,
		ChevronRight,
		ChevronsRight,
		Plus,
		Pencil,
		Trash2,
		Printer,
		Upload,
		Truck,
		Car,
		Package,
		Search
	} from 'lucide-svelte';
	import { useShortcuts } from '$lib/hooks/use-shortcuts';

	interface OtrosDatosFormData {
		// Parámetros de cálculo
		tipo_calculo: string;
		dta_por_operacion_ag_facturas: boolean;
		dta_por_numero_vehiculos: boolean;
		paga_iva: boolean;
		paga_prevalidacion: boolean;

		// Opciones de cálculo
		aplicar_dta_8_millar_partida: boolean;
		incluir_eci: boolean;
		deducible_recargos: boolean;
		cuota_fija_adicional_vehiculo: boolean;
		cuota_fija_adicional_fp: string;

		// Actualización Pedimento Normal
		actualizar_iva: boolean;
		actualizar_advalorem: boolean;
		actualizar_dta: boolean;
		actualizar_cc: boolean;
		actualizar_ieps: boolean;

		// Parámetros de Pedimento
		es_embajada: boolean;
		embajada_dta: string;
		regla_3_1_21_factores: boolean;
		cambio_tarifa_anterior: string;

		// Actualización en Rectificación
		actualizar_iva_rect: boolean;
		actualizar_advalorem_rect: boolean;
		actualizar_dta_rect: boolean;
		actualizar_cc_rect: boolean;
		actualizar_ieps_rect: boolean;
		calcular_recargos_diferencias: boolean;

		// Rectificación (R1)
		es_rectificacion: string;
		pedimento_original: string;
		clave_pedimento_original: string;
		fecha_pago_original: string;
		anio_impresion_rect: string;
		aduana_seccion_original: string;
		patente_original: string;
		utilizar_fecha_pago_original: boolean;
		calculo_manual_contribuciones: boolean;
		causa: string;
		motivo: string;

		// Diferencias en contribuciones
		liquidacion_diferencias: { gravamen: string; forma_pago: string; importe: string }[];

		// Parámetro de cambio de DTA
		proveedor_nacional_modifico_dta: boolean;

		// Opciones de cálculo de valor
		calculo_valor_aduana_v2: boolean;
		calculo_2_decimales_valor_unitario: boolean;
		calcular_valor_aduana_base_partidas: boolean;

		// Contribuciones para Recargo
		recargo_igi: boolean;
		recargo_iva: boolean;
		recargo_ieps: boolean;
		recargo_isan: boolean;
		recargo_cc: boolean;

		// Factor Incrementable Manual
		factor_incrementable_manual: string;

		// Otros
		agregar_entidad_federativa_proveedor: boolean;
	}

	let {
		pedimento = $bindable(null),
		formData = $bindable({
			tipo_calculo: 'ninguno',
			dta_por_operacion_ag_facturas: false,
			dta_por_numero_vehiculos: false,
			paga_iva: false,
			paga_prevalidacion: false,
			aplicar_dta_8_millar_partida: false,
			incluir_eci: false,
			deducible_recargos: false,
			cuota_fija_adicional_vehiculo: false,
			cuota_fija_adicional_fp: '0',
			actualizar_iva: false,
			actualizar_advalorem: false,
			actualizar_dta: false,
			actualizar_cc: false,
			actualizar_ieps: false,
			es_embajada: false,
			embajada_dta: '0.00',
			regla_3_1_21_factores: false,
			cambio_tarifa_anterior: '',
			actualizar_iva_rect: false,
			actualizar_advalorem_rect: false,
			actualizar_dta_rect: false,
			actualizar_cc_rect: false,
			actualizar_ieps_rect: false,
			calcular_recargos_diferencias: false,
			es_rectificacion: '',
			pedimento_original: '',
			clave_pedimento_original: '',
			fecha_pago_original: '',
			anio_impresion_rect: '',
			aduana_seccion_original: '',
			patente_original: '',
			utilizar_fecha_pago_original: false,
			calculo_manual_contribuciones: false,
			causa: '',
			motivo: '',
			liquidacion_diferencias: [],
			proveedor_nacional_modifico_dta: false,
			calculo_valor_aduana_v2: false,
			calculo_2_decimales_valor_unitario: false,
			calcular_valor_aduana_base_partidas: false,
			recargo_igi: false,
			recargo_iva: false,
			recargo_ieps: false,
			recargo_isan: false,
			recargo_cc: false,
			factor_incrementable_manual: '0.00000000000000000000',
			agregar_entidad_federativa_proveedor: false
		}),
		isActive = false
	}: {
		pedimento?: any;
		formData: OtrosDatosFormData;
		isActive?: boolean;
	} = $props();

	// Variable para rastrear vista activa
	let activeView = $state<
		| 'calculos'
		| 'bitacora'
		| 'partesII'
		| 'rectificacion'
		| 'rectificacionII'
		| 'notas'
		| 'seleccionAutomatizada'
		| 'multas'
	>('calculos');

	// Focus first input when switching sub-views via mouse

	$effect(() => {
		// Accedemos a activeView para que el efecto dependa de él
		if (activeView) {
			// Usamos untrack para que no dependa de interactionMode
			// Esto evita que se dispare el foco al empezar a escribir (cambio de mouse a keyboard)
			const mode = untrack(() => {
				let currentMode;
				interactionMode.subscribe((v) => (currentMode = v))();
				return currentMode;
			});

			if (mode === 'keyboard') {
				focusStore.request('first-input');
			}
		}
	});
	$effect(() => {
		if (isActive) {
			shortcutStore.register(
				'Otros Tab Navigation',
				obtenerAtajosOtrosDatos({
					manejarCalculos: handleCalculos,
					manejarBitacora: handleBitacora,
					manejarPartesII: handlePatesII,
					manejarRectificacion: handleRectificacion,
					manejarRectificacionII: handleRectificacionII,
					manejarNotas: handleNotas,
					manejarSeleccionAutomatizada: handleSeleccionAutomatizada,
					manejarExpDocumentos: handleExpDocumentos,
					manejarMultas: handleMultas
				})
			);
			return () => {
				shortcutStore.clear('Otros Tab Navigation');
			};
		}
	});

	// Estados para vista de Bitácora
	let showBitacora = $state(false);
	let currentBitacoraPage = $state(0);
	let bitacoraPageSize = 10;

	// Estados para vista de Partes II
	let showPartesII = $state(false);
	let currentPartesIIPage = $state(0);
	let partesIIPageSize = 10;
	let selectedEmbarques = $state<number[]>([]);

	// Estados para diálogo de embarque
	let isEmbarqueDialogOpen = $state(false);
	let editingEmbarqueIndex = $state<number | null>(null);

	// Estados para diálogo de mercancía
	let isMercanciaDialogOpen = $state(false);
	let editingMercanciaIndex = $state<number | null>(null);

	// Interfaz para mercancía del embarque
	interface Mercancia {
		descripcion: string;
		cantidad_umc: number;
		cantidad_umt: number;
		peso: number;
	}

	// Lista de mercancías
	let mercancias = $state<Mercancia[]>([]);

	// Estado de la mercancía actual
	let currentMercancia = $state<Mercancia>({
		descripcion: '',
		cantidad_umc: 0,
		cantidad_umt: 0,
		peso: 0
	});

	// Interfaz para embarque parcial
	interface EmbarqueParcial {
		numero: string;
		peso: number;
		operacion_granel: boolean;
		identificacion: string;
		num_contenedor: string;
		operacion_ferrocarril: boolean;
		candados_fiscales: string;
		bl: string;
		total_bls: string;
		operacion_maritima: boolean;
		cantidad_transportes: number;
		cantidad_partidas: number;
		suma_cantidad_umc: number;
		cantidad_embarques: number;
		cantidad_mercancias: number;
		suma_cantidad_umc_embarques: number;
		clave_recinto: string;
	}

	// Estado del embarque actual
	let currentEmbarque = $state<EmbarqueParcial>({
		numero: '',
		peso: 0,
		operacion_granel: false,
		identificacion: '',
		num_contenedor: '',
		operacion_ferrocarril: false,
		candados_fiscales: '',
		bl: '',
		total_bls: '',
		operacion_maritima: false,
		cantidad_transportes: 0,
		cantidad_partidas: 0,
		suma_cantidad_umc: 0,
		cantidad_embarques: 1,
		cantidad_mercancias: 0,
		suma_cantidad_umc_embarques: 0,
		clave_recinto: '0'
	});

	// Estados para vista de Rectificación
	let showRectificacion = $state(false);

	// Estados para diálogo de diferencias en contribuciones
	let isDiferenciasDialogOpen = $state(false);
	let editingDiferenciaIndex = $state<number | null>(null);

	interface DiferenciaContribucion {
		contribucion: string;
		forma_pago: string;
		importe: number;
	}

	let currentDiferencia = $state<DiferenciaContribucion>({
		contribucion: '',
		forma_pago: '',
		importe: 0
	});

	// Estados para vista de Rectificación II
	let showRectificacionII = $state(false);

	// Estados para vista de Notas
	let showNotas = $state(false);
	let currentNotasPage = $state(0);
	let notasPageSize = 10;
	let notasPedimento = $state<
		{ usuario: string; fecha: string; hora: string; comentario: string }[]
	>([]);

	// Estados para diálogo de notas
	let isNotaDialogOpen = $state(false);
	let editingNotaIndex = $state<number | null>(null);

	interface NotaPedimento {
		comentario: string;
	}

	let currentNota = $state<NotaPedimento>({
		comentario: ''
	});

	// Estados para vista de Selección Automatizada
	let showSeleccionAutomatizada = $state(false);
	let seleccionAutomatizadaFormData = $state({
		fecha_cruce: '',
		primera_revision: '',
		comentario_primera_revision: '',
		segunda_revision: '',
		comentario_segunda_revision: ''
	});

	// Estados para vista de Multas
	let showMultas = $state(false);
	let multasFormData = $state({
		cargo: ''
	});

	// Datos de ejemplo para bitácora (en producción vendrían del servidor)
	let bitacoraMovimientos = $state([
		{
			modulo: 'wPedimento',
			pedimento: '16-3633:100:267',
			movimiento: 'Agregar Pedimento 16-3633',
			usuario: 'aleandro',
			fecha: '24/11/2025',
			hora: '03:01PM'
		},
		{
			modulo: 'wPedimento',
			pedimento: '16-3633:100:267',
			movimiento: 'Inicio Pedimento 16-3633 sc',
			usuario: 'aleandro',
			fecha: '24/11/2025',
			hora: '03:13PM'
		},
		{
			modulo: 'wPedimento',
			pedimento: '16-3633:100:267',
			movimiento: 'Agregar Pedimento 16-3633 sc',
			usuario: 'aleandro',
			fecha: '24/11/2025',
			hora: '03:13PM'
		}
	]);

	const totalBitacoraPages = $derived(Math.ceil(bitacoraMovimientos.length / bitacoraPageSize));

	const paginatedBitacoraMovimientos = $derived(
		bitacoraMovimientos.slice(
			currentBitacoraPage * bitacoraPageSize,
			(currentBitacoraPage + 1) * bitacoraPageSize
		)
	);

	// Datos de ejemplo para Partes II (embarques parciales)
	let embarquesParciales = $state([
		{ numero: 1, identificacion: 'EMB001', precintos: 'P001, P002' },
		{ numero: 2, identificacion: 'EMB002', precintos: 'P003' },
		{ numero: 3, identificacion: 'EMB003', precintos: 'P004, P005, P006' }
	]);

	const totalPartesIIPages = $derived(Math.ceil(embarquesParciales.length / partesIIPageSize));

	const paginatedEmbarquesParciales = $derived(
		embarquesParciales.slice(
			currentPartesIIPage * partesIIPageSize,
			(currentPartesIIPage + 1) * partesIIPageSize
		)
	);

	const totalNotasPages = $derived(Math.ceil(notasPedimento.length / notasPageSize));

	const visibleNotas = $derived(
		notasPedimento.slice(currentNotasPage * notasPageSize, (currentNotasPage + 1) * notasPageSize)
	);

	function handleCalculos() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		activeView = 'calculos';
	}

	function handleBitacora() {
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		showBitacora = !showBitacora;
		if (showBitacora) {
			currentBitacoraPage = 0;
			activeView = 'bitacora';
		} else {
			activeView = 'calculos';
		}
	}

	function handleExportarBitacora() {
		alert('Exportar Bitácora no implementado');
	}

	function goToBitacoraFirstPage() {
		currentBitacoraPage = 0;
	}

	function goToBitacoraPreviousPage() {
		if (currentBitacoraPage > 0) currentBitacoraPage--;
	}

	function goToBitacoraNextPage() {
		if (currentBitacoraPage < totalBitacoraPages - 1) currentBitacoraPage++;
	}

	function goToBitacoraLastPage() {
		currentBitacoraPage = totalBitacoraPages - 1;
	}

	function handlePatesII() {
		showBitacora = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		showPartesII = !showPartesII;
		if (showPartesII) {
			currentPartesIIPage = 0;
			selectedEmbarques = [];
			activeView = 'partesII';
		} else {
			activeView = 'calculos';
		}
	}

	function goToPartesIIFirstPage() {
		currentPartesIIPage = 0;
	}

	function goToPartesIIPreviousPage() {
		if (currentPartesIIPage > 0) currentPartesIIPage--;
	}

	function goToPartesIINextPage() {
		if (currentPartesIIPage < totalPartesIIPages - 1) currentPartesIIPage++;
	}

	function goToPartesIILastPage() {
		currentPartesIIPage = totalPartesIIPages - 1;
	}

	function handleNuevoEmbarque() {
		currentEmbarque = {
			numero: '',
			peso: 0,
			operacion_granel: false,
			identificacion: '',
			num_contenedor: '',
			operacion_ferrocarril: false,
			candados_fiscales: '',
			bl: '',
			total_bls: '',
			operacion_maritima: false,
			cantidad_transportes: 0,
			cantidad_partidas: 0,
			suma_cantidad_umc: 0,
			cantidad_embarques: 1,
			cantidad_mercancias: 0,
			suma_cantidad_umc_embarques: 0,
			clave_recinto: '0'
		};
		isEmbarqueDialogOpen = true;
	}

	function toggleSelectAll() {
		if (selectedEmbarques.length === embarquesParciales.length) {
			selectedEmbarques = [];
		} else {
			selectedEmbarques = embarquesParciales.map((_, i) => i);
		}
	}

	function handleEditarEmbarque() {
		alert('Editar Embarque no implementado');
	}

	function saveEmbarque() {
		// Aquí se guardaría el embarque
		isEmbarqueDialogOpen = false;
	}

	function handleNuevaMercancia() {
		currentMercancia = {
			descripcion: '',
			cantidad_umc: 0,
			cantidad_umt: 0,
			peso: 0
		};
		editingMercanciaIndex = null;
		isMercanciaDialogOpen = true;
	}

	function saveMercancia() {
		if (editingMercanciaIndex !== null) {
			mercancias[editingMercanciaIndex] = { ...currentMercancia };
		} else {
			mercancias.push({ ...currentMercancia });
		}
		isMercanciaDialogOpen = false;
	}

	function handleEditarMercancia(index: number) {
		currentMercancia = { ...mercancias[index] };
		editingMercanciaIndex = index;
		isMercanciaDialogOpen = true;
	}

	function handleBorrarMercancia(index: number) {
		mercancias.splice(index, 1);
	}

	function handleNuevaDiferencia() {
		currentDiferencia = {
			contribucion: '',
			forma_pago: '',
			importe: 0
		};
		editingDiferenciaIndex = null;
		isDiferenciasDialogOpen = true;
	}

	function saveDiferencia() {
		const newItem = {
			gravamen: currentDiferencia.contribucion,
			forma_pago: currentDiferencia.forma_pago,
			importe: currentDiferencia.importe.toString()
		};

		if (editingDiferenciaIndex !== null) {
			formData.liquidacion_diferencias[editingDiferenciaIndex] = newItem;
		} else {
			formData.liquidacion_diferencias = [...formData.liquidacion_diferencias, newItem];
		}
		isDiferenciasDialogOpen = false;
	}

	function handleNuevaNota() {
		currentNota = {
			comentario: ''
		};
		editingNotaIndex = null;
		isNotaDialogOpen = true;
	}

	function saveNota() {
		const now = new Date();
		const newNota = {
			usuario: 'Usuario Actual', // En producción vendría del contexto de autenticación
			fecha: now.toLocaleDateString('es-MX'),
			hora: now.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }),
			comentario: currentNota.comentario
		};

		if (editingNotaIndex !== null) {
			notasPedimento[editingNotaIndex] = newNota;
		} else {
			notasPedimento.push(newNota);
		}
		isNotaDialogOpen = false;
	}

	function handleBorrarEmbarque() {
		alert('Borrar Embarque no implementado');
	}

	function handleImprimirEmbarque() {
		alert('Imprimir no implementado');
	}

	function handleImportarExcel() {
		alert('Importar de Excel no implementado');
	}

	function handleTraerContenedores() {
		alert('Traer Contenedores no implementado');
	}

	function handleTraerVehiculos() {
		alert('Traer Vehículos no implementado');
	}

	function handleTraerTransportes() {
		alert('Traer Transportes no implementado');
	}

	function handleRectificacion() {
		showBitacora = false;
		showPartesII = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		showRectificacion = !showRectificacion;
		if (showRectificacion) {
			activeView = 'rectificacion';
		} else {
			activeView = 'calculos';
		}
	}

	function handleRectificacionII() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		showRectificacionII = !showRectificacionII;
		if (showRectificacionII) {
			activeView = 'rectificacionII';
		} else {
			activeView = 'calculos';
		}
	}

	function handleNotas() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		showNotas = !showNotas;
		if (showNotas) {
			currentNotasPage = 0;
			activeView = 'notas';
		} else {
			activeView = 'calculos';
		}
	}

	function goToNotasFirstPage() {
		currentNotasPage = 0;
	}

	function goToNotasPreviousPage() {
		if (currentNotasPage > 0) currentNotasPage--;
	}

	function goToNotasNextPage() {
		if (currentNotasPage < totalNotasPages - 1) currentNotasPage++;
	}

	function goToNotasLastPage() {
		currentNotasPage = totalNotasPages - 1;
	}

	function handleSeleccionAutomatizada() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showMultas = false;
		showSeleccionAutomatizada = !showSeleccionAutomatizada;
		if (showSeleccionAutomatizada) {
			activeView = 'seleccionAutomatizada';
		} else {
			activeView = 'calculos';
		}
	}

	function handleExpDocumentos() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = false;
		activeView = 'calculos';
		alert('Exp. Documentos a Expediente no implementado');
	}

	function handleMultas() {
		showBitacora = false;
		showPartesII = false;
		showRectificacion = false;
		showRectificacionII = false;
		showNotas = false;
		showSeleccionAutomatizada = false;
		showMultas = !showMultas;
		if (showMultas) {
			activeView = 'multas';
		} else {
			activeView = 'calculos';
		}
	}
</script>

<div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_auto]">
	<!-- Panel principal con formularios -->
	<div class="space-y-4">
		{#if !showBitacora && !showPartesII && !showRectificacion && !showRectificacionII && !showNotas && !showSeleccionAutomatizada && !showMultas}
			<!-- Opciones para el cálculo del Pedimento -->
			<Card>
				<CardHeader>
					<CardTitle class="text-base">Opciones para el cálculo del Pedimento</CardTitle>
				</CardHeader>
				<CardContent class="space-y-6">
					<!-- Primera fila: Parámetros de cálculo y Parámetros de Pedimento -->
					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
						<!-- Parámetros de cálculo -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">Parámetros de cálculo:</h3>
							<div class="space-y-2">
								<div class="space-y-1.5">
									<Label for="tipo_calculo" class="text-xs">Tipo de Cálculo</Label>
									<Select.Root
										type="single"
										value={formData?.tipo_calculo}
										onValueChange={(v) => {
											if (formData && v) formData.tipo_calculo = v;
										}}
									>
										<Select.Trigger id="tipo_calculo" class="h-8">
											<span class="truncate">
												{formData?.tipo_calculo === 'ninguno'
													? 'Ninguno'
													: formData?.tipo_calculo === 'Cuota fija'
														? 'Cuota fija'
														: formData?.tipo_calculo === '8 al millar'
															? '8 al millar'
															: formData?.tipo_calculo === '1.76 al millar'
																? '1.76 al millar'
																: formData?.tipo_calculo === 'Estados extranjeros'
																	? 'Estados extranjeros'
																	: 'Seleccionar'}
											</span>
										</Select.Trigger>
										<Select.Content>
											<Select.Item value="ninguno">Ninguno</Select.Item>
											<Select.Item value="Cuota fija">Cuota fija</Select.Item>
											<Select.Item value="8 al millar">8 al millar</Select.Item>
											<Select.Item value="1.76 al millar">1.76 al millar</Select.Item>
											<Select.Item value="Estados extranjeros">Estados extranjeros</Select.Item>
										</Select.Content>
									</Select.Root>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox
										id="dta_operacion"
										bind:checked={formData.dta_por_operacion_ag_facturas}
									/>
									<Label for="dta_operacion" class="cursor-pointer text-xs font-normal">
										DTA Por Operación (Ag. Facturas)
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="dta_vehiculos" bind:checked={formData.dta_por_numero_vehiculos} />
									<Label for="dta_vehiculos" class="cursor-pointer text-xs font-normal">
										DTA por Número de Vehículos
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="paga_iva" bind:checked={formData.paga_iva} />
									<Label for="paga_iva" class="cursor-pointer text-xs font-normal">Paga IVA</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="paga_prev" bind:checked={formData.paga_prevalidacion} />
									<Label for="paga_prev" class="cursor-pointer text-xs font-normal">
										Paga Prevalidación
									</Label>
								</div>
							</div>

							<div class="mt-3 space-y-2 border-t pt-3">
								<div class="flex items-center gap-2">
									<Checkbox id="aplicar_dta" bind:checked={formData.aplicar_dta_8_millar_partida} />
									<Label for="aplicar_dta" class="cursor-pointer text-xs font-normal">
										Aplicar DTA 8 al millar por Partida
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="incluir_eci" bind:checked={formData.incluir_eci} />
									<Label for="incluir_eci" class="cursor-pointer text-xs font-normal">
										Incluir ECI
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="deducible_rec" bind:checked={formData.deducible_recargos} />
									<Label for="deducible_rec" class="cursor-pointer text-xs font-normal">
										Deducible Recargos
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox
										id="cuota_fija_veh"
										bind:checked={formData.cuota_fija_adicional_vehiculo}
									/>
									<Label for="cuota_fija_veh" class="cursor-pointer text-xs font-normal">
										Cuota Fija Adicional por Vehículo
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Label for="cuota_fp" class="text-xs whitespace-nowrap"
										>Cuota Fija Adicional F.P.:</Label
									>
									<Input
										id="cuota_fp"
										type="number"
										step="0.01"
										bind:value={formData.cuota_fija_adicional_fp}
										class="h-7 w-24"
									/>
								</div>
							</div>
						</div>

						<!-- Parámetros de Pedimento -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">Parámetros de Pedimento:</h3>
							<div class="space-y-2">
								<div class="flex items-center gap-2">
									<Checkbox id="es_embajada" bind:checked={formData.es_embajada} />
									<Label for="es_embajada" class="cursor-pointer text-xs font-normal">
										Es Embajada
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Label for="embajada_dta" class="text-xs whitespace-nowrap">Embajada DTA:</Label>
									<Input
										id="embajada_dta"
										type="number"
										step="0.01"
										bind:value={formData.embajada_dta}
										class="h-7 w-24"
									/>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="regla_3121" bind:checked={formData.regla_3_1_21_factores} />
									<Label for="regla_3121" class="cursor-pointer text-xs font-normal">
										Regla 3.1.21 (Factores)
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Label for="cambio_tarifa" class="text-xs whitespace-nowrap">
										Cambio de Tarifa anterior:
									</Label>
									<Input
										id="cambio_tarifa"
										type="date"
										bind:value={formData.cambio_tarifa_anterior}
										class="h-7 w-40"
									/>
								</div>
							</div>
						</div>
					</div>

					<!-- Segunda fila: Parámetros de actualización -->
					<div class="grid grid-cols-1 gap-6 border-t pt-4 md:grid-cols-2">
						<!-- Parámetros para actualización en Pedimento Normal -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">
								Parámetros para actualización en Pedimento Normal:
							</h3>
							<div class="space-y-2">
								<div class="flex items-center gap-2">
									<Checkbox id="act_iva" bind:checked={formData.actualizar_iva} />
									<Label for="act_iva" class="cursor-pointer text-xs font-normal">
										Actualizar IVA
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_adv" bind:checked={formData.actualizar_advalorem} />
									<Label for="act_adv" class="cursor-pointer text-xs font-normal">
										Actualizar Advalorem
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_dta" bind:checked={formData.actualizar_dta} />
									<Label for="act_dta" class="cursor-pointer text-xs font-normal">
										Actualizar DTA
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_cc" bind:checked={formData.actualizar_cc} />
									<Label for="act_cc" class="cursor-pointer text-xs font-normal">
										Actualizar C.C
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_ieps" bind:checked={formData.actualizar_ieps} />
									<Label for="act_ieps" class="cursor-pointer text-xs font-normal">
										Actualizar IEPS
									</Label>
								</div>
							</div>
						</div>

						<!-- Parámetros de actualización en Rectificación -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">Parámetros de actualización en Rectificación:</h3>
							<div class="space-y-2">
								<div class="flex items-center gap-2">
									<Checkbox id="act_iva_rect" bind:checked={formData.actualizar_iva_rect} />
									<Label for="act_iva_rect" class="cursor-pointer text-xs font-normal">
										Actualizar IVA
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_adv_rect" bind:checked={formData.actualizar_advalorem_rect} />
									<Label for="act_adv_rect" class="cursor-pointer text-xs font-normal">
										Actualizar Advalorem
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_dta_rect" bind:checked={formData.actualizar_dta_rect} />
									<Label for="act_dta_rect" class="cursor-pointer text-xs font-normal">
										Actualizar DTA
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_cc_rect" bind:checked={formData.actualizar_cc_rect} />
									<Label for="act_cc_rect" class="cursor-pointer text-xs font-normal">
										Actualizar C.C
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="act_ieps_rect" bind:checked={formData.actualizar_ieps_rect} />
									<Label for="act_ieps_rect" class="cursor-pointer text-xs font-normal">
										Actualizar IEPS
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox
										id="calc_recargos"
										bind:checked={formData.calcular_recargos_diferencias}
									/>
									<Label for="calc_recargos" class="cursor-pointer text-xs font-normal">
										Calcular recargos sobre diferencias
									</Label>
								</div>
							</div>
						</div>
					</div>

					<!-- Tercera fila: Otras opciones -->
					<div class="grid grid-cols-1 gap-6 border-t pt-4 md:grid-cols-2">
						<!-- Parámetro de cambio de DTA -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">Parámetro de cambio de DTA:</h3>
							<div class="flex items-center gap-2">
								<Checkbox
									id="prov_nacional"
									bind:checked={formData.proveedor_nacional_modifico_dta}
								/>
								<Label for="prov_nacional" class="cursor-pointer text-xs font-normal">
									Proveedor Naconal [Modificó también DTA]
								</Label>
							</div>

							<div class="mt-4 space-y-2">
								<div class="flex items-center gap-2">
									<Checkbox id="calc_v2" bind:checked={formData.calculo_valor_aduana_v2} />
									<Label for="calc_v2" class="cursor-pointer text-xs font-normal">
										Calculo del Valor Aduana Version 2.0
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox
										id="calc_2dec"
										bind:checked={formData.calculo_2_decimales_valor_unitario}
									/>
									<Label for="calc_2dec" class="cursor-pointer text-xs font-normal">
										Calculo con 2 decimales de valor unitario
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox
										id="calc_base_part"
										bind:checked={formData.calcular_valor_aduana_base_partidas}
									/>
									<Label for="calc_base_part" class="cursor-pointer text-xs font-normal">
										Calcular Valor Aduana a Base de Partidas
									</Label>
								</div>
							</div>
						</div>

						<!-- Contribuciones tomadas para el Recargo -->
						<div class="space-y-3">
							<h3 class="text-sm font-semibold">
								Contribuciones tomadas para el Recargo en Pedimento Normal:
							</h3>
							<div class="space-y-2">
								<div class="flex items-center gap-2">
									<Checkbox id="rec_igi" bind:checked={formData.recargo_igi} />
									<Label for="rec_igi" class="cursor-pointer text-xs font-normal">
										Recargo IGI
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="rec_iva" bind:checked={formData.recargo_iva} />
									<Label for="rec_iva" class="cursor-pointer text-xs font-normal">
										Recargo IVA
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="rec_ieps" bind:checked={formData.recargo_ieps} />
									<Label for="rec_ieps" class="cursor-pointer text-xs font-normal">
										Recargo IEPS
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="rec_isan" bind:checked={formData.recargo_isan} />
									<Label for="rec_isan" class="cursor-pointer text-xs font-normal">
										Recargo ISAN
									</Label>
								</div>

								<div class="flex items-center gap-2">
									<Checkbox id="rec_cc" bind:checked={formData.recargo_cc} />
									<Label for="rec_cc" class="cursor-pointer text-xs font-normal">Recargo C.C</Label>
								</div>
							</div>
						</div>
					</div>

					<!-- Factor Incrementable y otros -->
					<div class="space-y-3 border-t pt-4">
						<div class="flex items-center gap-2">
							<Label for="factor_inc" class="text-xs whitespace-nowrap">
								Factor Incrementable Manual:
							</Label>
							<Input
								id="factor_inc"
								type="text"
								bind:value={formData.factor_incrementable_manual}
								class="h-7 font-mono text-xs"
								placeholder="0.00000000000000000000"
							/>
						</div>

						<div class="flex items-center gap-2">
							<Checkbox
								id="agregar_entidad"
								bind:checked={formData.agregar_entidad_federativa_proveedor}
							/>
							<Label for="agregar_entidad" class="cursor-pointer text-xs font-normal">
								Agregar entidad federativa de proveedor, registro 505, campo 10
							</Label>
						</div>
					</div>
				</CardContent>
			</Card>
		{:else if showBitacora}
			<!-- Vista de Bitácora -->
			<Card>
				<CardHeader>
					<CardTitle class="text-base">Registro de movimientos sobre el Pedimento</CardTitle>
				</CardHeader>
				<CardContent class="space-y-4">
					<div class="overflow-hidden rounded-lg border">
						<Table>
							<TableHeader>
								<TableRow>
									<TableHead class="w-[120px]">Módulo</TableHead>
									<TableHead class="w-[150px]">Pedimento</TableHead>
									<TableHead>Movimiento</TableHead>
									<TableHead class="w-[100px]">Usuario</TableHead>
									<TableHead class="w-[110px]">Fecha</TableHead>
									<TableHead class="w-[90px]">Hora</TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{#if bitacoraMovimientos.length === 0}
									<TableRow>
										<TableCell colspan={6} class="py-8 text-center text-muted-foreground">
											No hay movimientos registrados
										</TableCell>
									</TableRow>
								{:else if paginatedBitacoraMovimientos.length === 0}
									<TableRow>
										<TableCell colspan={6} class="py-8 text-center text-muted-foreground">
											No hay datos en esta página
										</TableCell>
									</TableRow>
								{:else}
									{#each paginatedBitacoraMovimientos as movimiento}
										<TableRow>
											<TableCell class="font-medium">{movimiento.modulo}</TableCell>
											<TableCell>{movimiento.pedimento}</TableCell>
											<TableCell>{movimiento.movimiento}</TableCell>
											<TableCell>{movimiento.usuario}</TableCell>
											<TableCell>{movimiento.fecha}</TableCell>
											<TableCell>{movimiento.hora}</TableCell>
										</TableRow>
									{/each}
								{/if}
							</TableBody>
						</Table>
					</div>

					<!-- Controles de paginación -->
					{#if bitacoraMovimientos.length > 0}
						<div class="flex items-center justify-center gap-2 border-t pt-3">
							<Button
								size="sm"
								variant="outline"
								onclick={goToBitacoraFirstPage}
								disabled={currentBitacoraPage === 0}
								class="h-8 w-8 p-0"
							>
								<ChevronsLeft size={16} />
							</Button>
							<Button
								size="sm"
								variant="outline"
								onclick={goToBitacoraPreviousPage}
								disabled={currentBitacoraPage === 0}
								class="h-8 w-8 p-0"
							>
								<ChevronLeft size={16} />
							</Button>
							<span class="px-2 text-sm text-muted-foreground">
								Página {currentBitacoraPage + 1} de {totalBitacoraPages || 1}
							</span>
							<Button
								size="sm"
								variant="outline"
								onclick={goToBitacoraNextPage}
								disabled={currentBitacoraPage >= totalBitacoraPages - 1}
								class="h-8 w-8 p-0"
							>
								<ChevronRight size={16} />
							</Button>
							<Button
								size="sm"
								variant="outline"
								onclick={goToBitacoraLastPage}
								disabled={currentBitacoraPage >= totalBitacoraPages - 1}
								class="h-8 w-8 p-0"
							>
								<ChevronsRight size={16} />
							</Button>
						</div>
					{/if}

					<!-- Botón de exportar -->
					<div class="border-t pt-3">
						<Button size="sm" variant="outline" onclick={handleExportarBitacora}>
							<Download class="mr-2" size={14} />
							Exportar Bitácora
						</Button>
					</div>
				</CardContent>
			</Card>
		{:else if showPartesII}
			<!-- Vista de Partes II (Embarques Parciales) -->
			<div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_auto]">
				<!-- Tabla de embarques -->
				<Card>
					<CardHeader>
						<CardTitle class="text-base">Embarques Parciales</CardTitle>
					</CardHeader>
					<CardContent class="space-y-4">
						<div class="overflow-hidden rounded-lg border">
							<Table>
								<TableHeader>
									<TableRow>
										<TableHead class="w-[50px]">
											<Checkbox
												checked={selectedEmbarques.length === embarquesParciales.length &&
													embarquesParciales.length > 0}
												onclick={toggleSelectAll}
											/>
										</TableHead>
										<TableHead class="w-[100px]">Número</TableHead>
										<TableHead>Identificación</TableHead>
										<TableHead>Precintos</TableHead>
									</TableRow>
								</TableHeader>
								<TableBody>
									{#if embarquesParciales.length === 0}
										<TableRow>
											<TableCell colspan={4} class="py-8 text-center text-muted-foreground">
												No hay embarques registrados
											</TableCell>
										</TableRow>
									{:else if paginatedEmbarquesParciales.length === 0}
										<TableRow>
											<TableCell colspan={4} class="py-8 text-center text-muted-foreground">
												No hay datos en esta página
											</TableCell>
										</TableRow>
									{:else}
										{#each paginatedEmbarquesParciales as embarque, index}
											<TableRow>
												<TableCell>
													<Checkbox
														checked={selectedEmbarques.includes(
															currentPartesIIPage * partesIIPageSize + index
														)}
														onclick={() => {
															const globalIndex = currentPartesIIPage * partesIIPageSize + index;
															if (selectedEmbarques.includes(globalIndex)) {
																selectedEmbarques = selectedEmbarques.filter(
																	(i) => i !== globalIndex
																);
															} else {
																selectedEmbarques = [...selectedEmbarques, globalIndex];
															}
														}}
													/>
												</TableCell>
												<TableCell class="font-medium">{embarque.numero}</TableCell>
												<TableCell>{embarque.identificacion}</TableCell>
												<TableCell>{embarque.precintos}</TableCell>
											</TableRow>
										{/each}
									{/if}
								</TableBody>
							</Table>
						</div>

						<!-- Controles de paginación -->
						{#if embarquesParciales.length > 0}
							<div class="flex items-center justify-center gap-2 border-t pt-3">
								<Button
									size="sm"
									variant="outline"
									onclick={goToPartesIIFirstPage}
									disabled={currentPartesIIPage === 0}
									class="h-8 w-8 p-0"
								>
									<ChevronsLeft size={16} />
								</Button>
								<Button
									size="sm"
									variant="outline"
									onclick={goToPartesIIPreviousPage}
									disabled={currentPartesIIPage === 0}
									class="h-8 w-8 p-0"
								>
									<ChevronLeft size={16} />
								</Button>
								<span class="px-2 text-sm text-muted-foreground">
									Página {currentPartesIIPage + 1} de {totalPartesIIPages || 1}
								</span>
								<Button
									size="sm"
									variant="outline"
									onclick={goToPartesIINextPage}
									disabled={currentPartesIIPage >= totalPartesIIPages - 1}
									class="h-8 w-8 p-0"
								>
									<ChevronRight size={16} />
								</Button>
								<Button
									size="sm"
									variant="outline"
									onclick={goToPartesIILastPage}
									disabled={currentPartesIIPage >= totalPartesIIPages - 1}
									class="h-8 w-8 p-0"
								>
									<ChevronsRight size={16} />
								</Button>
							</div>
						{/if}

						<!-- Botones de acción -->
						<div class="flex flex-wrap gap-2 border-t pt-3">
							<Button size="sm" variant="outline" onclick={toggleSelectAll}>
								Seleccionar/Des Todo
							</Button>
							<Button size="sm" onclick={handleNuevoEmbarque}>
								<Plus class="mr-1.5" size={14} />
								Nuevo
							</Button>
							<Button
								size="sm"
								variant="outline"
								disabled={embarquesParciales.length === 0}
								onclick={handleEditarEmbarque}
							>
								<Pencil class="mr-1.5" size={14} />
								Editar
							</Button>
							<Button
								size="sm"
								variant="destructive"
								disabled={selectedEmbarques.length === 0}
								onclick={handleBorrarEmbarque}
							>
								<Trash2 class="mr-1.5" size={14} />
								Borrar
							</Button>
							<Button size="sm" variant="outline" onclick={handleImprimirEmbarque}>
								<Printer class="mr-1.5" size={14} />
								Imprimir
							</Button>
							<Button size="sm" variant="outline" onclick={handleImportarExcel}>
								<Upload class="mr-1.5" size={14} />
								Importar de Excel
							</Button>
						</div>
					</CardContent>
				</Card>

				<!-- Panel derecho con estadísticas y botones -->
				<div class="space-y-4 lg:w-80">
					<!-- Estadísticas -->
					<Card>
						<CardContent class="space-y-4 p-4">
							<div class="space-y-2">
								<div class="flex items-center justify-between">
									<Label class="text-xs">Cantidad de Transportes:</Label>
									<Input value="0" readonly class="h-7 w-20 text-right" />
								</div>
							</div>

							<div class="space-y-2 border-t pt-3">
								<h4 class="text-xs font-semibold">Partidas del Pedimento</h4>
								<div class="flex items-center justify-between">
									<Label class="text-xs">Cantidad de Partidas:</Label>
									<Input value="0" readonly class="h-7 w-20 text-right" />
								</div>
								<div class="flex items-center justify-between">
									<Label class="text-xs">Suma de cantidad UMC:</Label>
									<Input value="0.000" readonly class="h-7 w-24 text-right" />
								</div>
							</div>

							<div class="space-y-2 border-t pt-3">
								<h4 class="text-xs font-semibold">Embarques</h4>
								<div class="flex items-center justify-between">
									<Label class="text-xs">Cantidad de Embarques:</Label>
									<Input value="0" readonly class="h-7 w-20 text-right" />
								</div>
								<div class="flex items-center justify-between">
									<Label class="text-xs">Cantidad de Mercancias:</Label>
									<Input value="0" readonly class="h-7 w-20 text-right" />
								</div>
								<div class="flex items-center justify-between">
									<Label class="text-xs">Suma de cantidad UMC:</Label>
									<Input value="0.000" readonly class="h-7 w-24 text-right" />
								</div>
							</div>

							<div class="space-y-2 border-t pt-3">
								<Button
									size="sm"
									variant="outline"
									class="w-full justify-start"
									onclick={handleTraerContenedores}
								>
									<Package class="mr-2" size={14} />
									Traer Contenedores
								</Button>
								<Button
									size="sm"
									variant="outline"
									class="w-full justify-start"
									onclick={handleTraerVehiculos}
								>
									<Car class="mr-2" size={14} />
									Traer Vehículos
								</Button>
								<Button
									size="sm"
									variant="outline"
									class="w-full justify-start"
									onclick={handleTraerTransportes}
								>
									<Truck class="mr-2" size={14} />
									Traer Transportes
								</Button>
							</div>
						</CardContent>
					</Card>
				</div>
			</div>
		{/if}

		<!-- Vista de Rectificación -->
		{#if showRectificacion}
			<Card>
				<CardHeader>
					<CardTitle>Rectificación</CardTitle>
				</CardHeader>
				<CardContent>
					<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
						<div class="space-y-2">
							<Label for="es-rectificacion">Es Rectificación</Label>
							<Select.Root
								type="single"
								value={formData.es_rectificacion}
								onValueChange={(v) => {
									if (v) formData.es_rectificacion = v;
								}}
							>
								<Select.Trigger id="es-rectificacion" class="w-full">
									<span class="truncate">
										{formData.es_rectificacion === 'si'
											? 'Sí'
											: formData.es_rectificacion === 'no'
												? 'No'
												: 'Seleccionar'}
									</span>
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="si">Sí</Select.Item>
									<Select.Item value="no">No</Select.Item>
								</Select.Content>
							</Select.Root>
						</div>

						<div class="space-y-2">
							<Label for="clave-pedimento-original">Clave de pedimento original</Label>
							<Input
								id="clave-pedimento-original"
								maxlength={2}
								bind:value={formData.clave_pedimento_original}
							/>
						</div>

						<div class="space-y-2">
							<Label for="pedimento-original"
								>Pedimento Original <span class="text-xs text-muted-foreground">(VWnSAAI)</span
								></Label
							>
							<Input
								id="pedimento-original"
								maxlength={7}
								bind:value={formData.pedimento_original}
							/>
						</div>

						<div class="space-y-2">
							<Label for="fecha-pago-original">Fecha de pago original</Label>
							<Input
								id="fecha-pago-original"
								type="date"
								bind:value={formData.fecha_pago_original}
							/>
						</div>

						<div class="space-y-2">
							<Label for="aduana-seccion-original">Aduana/Sección Original</Label>
							<Input
								id="aduana-seccion-original"
								maxlength={3}
								bind:value={formData.aduana_seccion_original}
							/>
						</div>

						<div class="space-y-2">
							<Label for="anio-impresion-rect">Año para impresión de pedimento de Rect</Label>
							<Input
								id="anio-impresion-rect"
								maxlength={2}
								bind:value={formData.anio_impresion_rect}
							/>
						</div>

						<div class="space-y-2">
							<Label for="patente-original">Patente Original</Label>
							<Input id="patente-original" maxlength={4} bind:value={formData.patente_original} />
						</div>
					</div>

					<div class="mb-6">
						<div class="flex items-center space-x-2">
							<Checkbox
								id="utilizar-fecha-pago"
								checked={formData.utilizar_fecha_pago_original}
								onclick={() => {
									formData.utilizar_fecha_pago_original = !formData.utilizar_fecha_pago_original;
								}}
							/>
							<Label for="utilizar-fecha-pago" class="text-sm font-normal">
								Utilizar fecha de pago original para el cálculo del FI y recargos de la
								rectificación
							</Label>
						</div>
					</div>

					<!-- Cuadro de liquidación -->
					<div class="rounded-lg border p-4">
						<div class="mb-4 flex items-center justify-between">
							<h3 class="font-semibold">
								Cuadro de liquidación para diferencias en contribuciones
							</h3>
							<div class="flex items-center space-x-2">
								<Checkbox
									id="calculo-manual"
									checked={formData.calculo_manual_contribuciones}
									onclick={() => {
										formData.calculo_manual_contribuciones =
											!formData.calculo_manual_contribuciones;
									}}
								/>
								<Label for="calculo-manual" class="text-sm font-normal">
									Cálculo manual de contribuciones
								</Label>
							</div>
						</div>

						<!-- Tabla de liquidación -->
						<div class="mb-4 rounded-md border">
							<Table>
								<TableHeader>
									<TableRow>
										<TableHead>Gravamen</TableHead>
										<TableHead>Forma de pago</TableHead>
										<TableHead>Importe</TableHead>
									</TableRow>
								</TableHeader>
								<TableBody>
									{#if formData.liquidacion_diferencias.length === 0}
										<TableRow>
											<TableCell colspan={3} class="text-center text-muted-foreground">
												No hay registros
											</TableCell>
										</TableRow>
									{:else}
										{#each formData.liquidacion_diferencias as item}
											<TableRow>
												<TableCell>{item.gravamen}</TableCell>
												<TableCell>{item.forma_pago}</TableCell>
												<TableCell>{item.importe}</TableCell>
											</TableRow>
										{/each}
									{/if}
								</TableBody>
							</Table>
						</div>

						<!-- Botones de acción -->
						<div class="flex gap-2">
							<Button size="sm" onclick={handleNuevaDiferencia}>
								<Plus class="mr-2" size={14} />
								Nuevo
							</Button>
							<Button size="sm" variant="outline" onclick={() => alert('Editar no implementado')}>
								<Pencil class="mr-2" size={14} />
								Editar
							</Button>
							<Button size="sm" variant="outline" onclick={() => alert('Borrar no implementado')}>
								<Trash2 class="mr-2" size={14} />
								Borrar
							</Button>
						</div>
					</div>
				</CardContent>
			</Card>
		{/if}

		<!-- Vista de Rectificación II -->
		{#if showRectificacionII}
			<Card>
				<CardHeader>
					<CardTitle>Causa de la Rectificación</CardTitle>
				</CardHeader>
				<CardContent>
					<div class="space-y-4">
						<div class="space-y-2">
							<Label for="causa">Causa:</Label>
							<textarea
								id="causa"
								bind:value={formData.causa}
								class="min-h-[120px] w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
								placeholder="Ingrese la causa de la rectificación"
							></textarea>
						</div>

						<div class="space-y-2">
							<Label for="motivo">Motivo:</Label>
							<textarea
								id="motivo"
								bind:value={formData.motivo}
								class="min-h-[120px] w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
								placeholder="Ingrese el motivo de la rectificación"
							></textarea>
						</div>
					</div>
				</CardContent>
			</Card>
		{/if}

		<!-- Vista de Notas del Pedimento -->
		{#if showNotas}
			<Card>
				<CardHeader>
					<CardTitle>Notas del Pedimento</CardTitle>
				</CardHeader>
				<CardContent>
					<!-- Tabla de Notas -->
					<div class="mb-4 rounded-md border">
						<Table>
							<TableHeader>
								<TableRow>
									<TableHead>Usuario</TableHead>
									<TableHead colspan={2}>Creada</TableHead>
									<TableHead>Comentario</TableHead>
								</TableRow>
								<TableRow class="border-t">
									<TableHead class="h-0 border-0 p-0"></TableHead>
									<TableHead class="text-xs">Fecha</TableHead>
									<TableHead class="text-xs">Hora</TableHead>
									<TableHead class="h-0 border-0 p-0"></TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{#if notasPedimento.length === 0}
									<TableRow>
										<TableCell colspan={4} class="h-32 text-center text-muted-foreground">
											No hay notas registradas
										</TableCell>
									</TableRow>
								{:else}
									{#each visibleNotas as nota}
										<TableRow>
											<TableCell>{nota.usuario}</TableCell>
											<TableCell>{nota.fecha}</TableCell>
											<TableCell>{nota.hora}</TableCell>
											<TableCell>{nota.comentario}</TableCell>
										</TableRow>
									{/each}
								{/if}
							</TableBody>
						</Table>
					</div>

					<!-- Paginación -->
					<div class="mb-4 flex items-center justify-between">
						<div class="flex items-center gap-1">
							<Button
								size="sm"
								variant="outline"
								onclick={goToNotasFirstPage}
								disabled={currentNotasPage === 0}
							>
								<ChevronsLeft size={14} />
							</Button>
							<Button
								size="sm"
								variant="outline"
								onclick={goToNotasPreviousPage}
								disabled={currentNotasPage === 0}
							>
								<ChevronLeft size={14} />
							</Button>
							<span class="px-3 text-sm">
								Página {currentNotasPage + 1} de {totalNotasPages || 1}
							</span>
							<Button
								size="sm"
								variant="outline"
								onclick={goToNotasNextPage}
								disabled={currentNotasPage >= totalNotasPages - 1}
							>
								<ChevronRight size={14} />
							</Button>
							<Button
								size="sm"
								variant="outline"
								onclick={goToNotasLastPage}
								disabled={currentNotasPage >= totalNotasPages - 1}
							>
								<ChevronsRight size={14} />
							</Button>
						</div>
					</div>

					<!-- Botones de acción -->
					<div class="flex gap-2">
						<Button size="sm" onclick={handleNuevaNota}>
							<Plus class="mr-2" size={14} />
							Nuevo
						</Button>
						<Button size="sm" variant="outline" onclick={() => alert('Editar no implementado')}>
							<Pencil class="mr-2" size={14} />
							Editar
						</Button>
						<Button size="sm" variant="outline" onclick={() => alert('Borrar no implementado')}>
							<Trash2 class="mr-2" size={14} />
							Borrar
						</Button>
					</div>
				</CardContent>
			</Card>
		{/if}

		<!-- Vista de Selección Automatizada -->
		{#if showSeleccionAutomatizada}
			<Card>
				<CardHeader>
					<CardTitle>Selección Automatizada</CardTitle>
				</CardHeader>
				<CardContent>
					<div class="space-y-6">
						<div class="space-y-2">
							<Label for="fecha-cruce">Fecha de Cruce:</Label>
							<Input
								id="fecha-cruce"
								type="date"
								bind:value={seleccionAutomatizadaFormData.fecha_cruce}
							/>
						</div>

						<div class="space-y-2">
							<Label for="primera-revision">1era Revisión</Label>
							<Select.Root
								type="single"
								value={seleccionAutomatizadaFormData.primera_revision}
								onValueChange={(v) => {
									if (v) seleccionAutomatizadaFormData.primera_revision = v;
								}}
							>
								<Select.Trigger id="primera-revision" class="w-full">
									<span class="truncate">
										{seleccionAutomatizadaFormData.primera_revision || 'Seleccionar'}
									</span>
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="Rojo">Rojo</Select.Item>
									<Select.Item value="Verde">Verde</Select.Item>
								</Select.Content>
							</Select.Root>
						</div>

						<div class="space-y-2">
							<Label for="comentario-primera">Comentario 1era revisión:</Label>
							<textarea
								id="comentario-primera"
								bind:value={seleccionAutomatizadaFormData.comentario_primera_revision}
								class="min-h-[100px] w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
								placeholder="Ingrese el comentario de la primera revisión"
							></textarea>
						</div>

						<div class="space-y-2">
							<Label for="segunda-revision">2a Revisión</Label>
							<Select.Root
								type="single"
								value={seleccionAutomatizadaFormData.segunda_revision}
								onValueChange={(v) => {
									if (v) seleccionAutomatizadaFormData.segunda_revision = v;
								}}
							>
								<Select.Trigger id="segunda-revision" class="w-full">
									<span class="truncate">
										{seleccionAutomatizadaFormData.segunda_revision || 'Seleccionar'}
									</span>
								</Select.Trigger>
								<Select.Content>
									<Select.Item value="Rojo">Rojo</Select.Item>
									<Select.Item value="Verde">Verde</Select.Item>
								</Select.Content>
							</Select.Root>
						</div>

						<div class="space-y-2">
							<Label for="comentario-segunda">Comentario 2a revisión:</Label>
							<textarea
								id="comentario-segunda"
								bind:value={seleccionAutomatizadaFormData.comentario_segunda_revision}
								class="min-h-[100px] w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
								placeholder="Ingrese el comentario de la segunda revisión"
							></textarea>
						</div>
					</div>
				</CardContent>
			</Card>
		{/if}

		<!-- Vista de Multas -->
		{#if showMultas}
			<Card>
				<CardHeader>
					<CardTitle>Multas</CardTitle>
				</CardHeader>
				<CardContent>
					<div class="space-y-2">
						<Label for="cargo-multa">Cargo</Label>
						<Select.Root
							type="single"
							value={multasFormData.cargo}
							onValueChange={(v) => {
								if (v) multasFormData.cargo = v;
							}}
						>
							<Select.Trigger id="cargo-multa" class="w-full">
								<span class="truncate">
									{multasFormData.cargo || 'Seleccionar'}
								</span>
							</Select.Trigger>
							<Select.Content>
								<Select.Item value="cargo oficina">cargo oficina</Select.Item>
								<Select.Item value="cargo cliente">cargo cliente</Select.Item>
							</Select.Content>
						</Select.Root>
					</div>
				</CardContent>
			</Card>
		{/if}
	</div>

	<!-- Panel de botones laterales -->
	<div class="lg:w-48">
		<Card>
			<CardContent class="space-y-2 p-3">
				<Button
					size="sm"
					variant={activeView === 'calculos' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleCalculos}
				>
					<Calculator class="mr-2" size={14} />
					Cálculos
				</Button>

				<Button
					size="sm"
					variant={activeView === 'bitacora' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleBitacora}
				>
					<FileText class="mr-2" size={14} />
					Bitácora
				</Button>

				<Button
					size="sm"
					variant={activeView === 'partesII' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handlePatesII}
				>
					<FileCheck class="mr-2" size={14} />
					Partes II
				</Button>

				<Button
					size="sm"
					variant={activeView === 'rectificacion' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleRectificacion}
				>
					<RotateCw class="mr-2" size={14} />
					Rectificación
				</Button>

				<Button
					size="sm"
					variant={activeView === 'rectificacionII' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleRectificacionII}
				>
					<RotateCw class="mr-2" size={14} />
					Rectificación II
				</Button>

				<Button
					size="sm"
					variant={activeView === 'notas' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleNotas}
				>
					<FileText class="mr-2" size={14} />
					Notas
				</Button>

				<Button
					size="sm"
					variant={activeView === 'seleccionAutomatizada' ? 'default' : 'outline'}
					class="h-auto w-full justify-start py-2 text-xs whitespace-normal"
					onclick={handleSeleccionAutomatizada}
				>
					<AlertCircle class="mr-2 flex-shrink-0" size={14} />
					<span class="text-left">Selección Automatizada</span>
				</Button>

				<Button
					size="sm"
					variant="outline"
					class="h-auto w-full justify-start py-2 text-xs whitespace-normal"
					onclick={handleExpDocumentos}
				>
					<FileText class="mr-2 flex-shrink-0" size={14} />
					<span class="text-left">Exp. Documentos</span>
				</Button>

				<Button
					size="sm"
					variant={activeView === 'multas' ? 'default' : 'outline'}
					class="w-full justify-start"
					onclick={handleMultas}
				>
					<FileX class="mr-2" size={14} />
					Multas
				</Button>
			</CardContent>
		</Card>
	</div>
</div>

<!-- Dialog para Embarque Parcial de Mercancías -->
<Dialog bind:open={isEmbarqueDialogOpen}>
	<DialogContent class="flex h-[95vh] w-[98vw] max-w-none flex-col p-6">
		<DialogHeader>
			<DialogTitle>Embarque Parcial de Mercancías</DialogTitle>
		</DialogHeader>

		<div class="flex-1 space-y-6 overflow-y-auto pr-2">
			<!-- Fila 1: Número, Peso, Checkbox -->
			<div class="grid grid-cols-[200px_200px_1fr] gap-6">
				<div class="space-y-2">
					<Label for="numero">Número:</Label>
					<Input id="numero" bind:value={currentEmbarque.numero} />
				</div>
				<div class="space-y-2">
					<Label for="peso">Peso:</Label>
					<Input
						id="peso"
						type="number"
						step="0.001"
						bind:value={currentEmbarque.peso}
						placeholder="0.000"
					/>
				</div>
				<div class="flex items-end pb-2">
					<Checkbox bind:checked={currentEmbarque.operacion_granel} />
					<Label class="ml-2 text-sm">Operación de Mercancías a Granel</Label>
				</div>
			</div>

			<!-- Fila 2: Identificación, Núm. Contenedor, Checkbox -->
			<div class="grid grid-cols-[200px_200px_1fr] gap-6">
				<div class="space-y-2">
					<Label for="identificacion">Identificación:</Label>
					<Input id="identificacion" bind:value={currentEmbarque.identificacion} />
				</div>
				<div class="space-y-2">
					<Label for="num_contenedor">Núm. de Contenedor:</Label>
					<Input id="num_contenedor" bind:value={currentEmbarque.num_contenedor} />
				</div>
				<div class="flex items-end pb-2">
					<Checkbox bind:checked={currentEmbarque.operacion_ferrocarril} />
					<Label class="ml-2 text-sm">Operación al amparo de la Regla 1.9.12 (Ferrocarril)</Label>
				</div>
			</div>

			<!-- Fila 3: Candados, BL, Total BL'S, Checkbox -->
			<div class="grid grid-cols-[200px_200px_200px_1fr] gap-6">
				<div class="space-y-2">
					<Label for="candados_fiscales">Candados Fiscales:</Label>
					<Input id="candados_fiscales" bind:value={currentEmbarque.candados_fiscales} />
				</div>
				<div class="space-y-2">
					<Label for="bl">BL:</Label>
					<Input id="bl" bind:value={currentEmbarque.bl} />
				</div>
				<div class="space-y-2">
					<Label for="total_bls">Total BL'S:</Label>
					<Input id="total_bls" bind:value={currentEmbarque.total_bls} />
				</div>
				<div class="flex items-end pb-2">
					<Checkbox bind:checked={currentEmbarque.operacion_maritima} />
					<Label class="ml-2 text-sm">Operación Marítima</Label>
				</div>
			</div>

			<!-- Sección: Mercancías del Embarque -->
			<div class="rounded-lg border bg-muted/20 p-4">
				<div class="mb-4 flex items-center justify-between">
					<h3 class="text-sm font-semibold">Mercancías del Embarque</h3>
					<div class="flex gap-2">
						<Button size="sm" onclick={handleNuevaMercancia}>
							<Plus size={14} />
						</Button>
						<Button size="sm" variant="outline">
							<Pencil size={14} />
						</Button>
						<Button size="sm" variant="outline">
							<Trash2 size={14} />
						</Button>
					</div>
				</div>

				<!-- Tabla -->
				<div class="mb-4 overflow-hidden rounded-lg border bg-background">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead class="w-[50px]">#</TableHead>
								<TableHead>Descripción de Mercancía</TableHead>
								<TableHead class="w-[150px] text-right">Cantidad UMC</TableHead>
								<TableHead class="w-[150px] text-right">Cantidad UMT</TableHead>
								<TableHead class="w-[150px] text-right">Peso</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{#if mercancias.length === 0}
								<TableRow>
									<TableCell colspan={5} class="py-8 text-center text-muted-foreground">
										No hay mercancías registradas
									</TableCell>
								</TableRow>
							{:else}
								{#each mercancias as mercancia, index}
									<TableRow>
										<TableCell>{index + 1}</TableCell>
										<TableCell>{mercancia.descripcion}</TableCell>
										<TableCell class="text-right">{mercancia.cantidad_umc.toFixed(3)}</TableCell>
										<TableCell class="text-right">{mercancia.cantidad_umt.toFixed(3)}</TableCell>
										<TableCell class="text-right">{mercancia.peso.toFixed(3)}</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>

				<!-- Controles de paginación -->
				<div class="mb-4 flex items-center justify-center gap-2">
					<Button size="sm" variant="outline" class="h-8 w-8 p-0">
						<ChevronsLeft size={16} />
					</Button>
					<Button size="sm" variant="outline" class="h-8 w-8 p-0">
						<ChevronLeft size={16} />
					</Button>
					<Button size="sm" variant="outline" class="h-8 w-8 p-0">
						<ChevronRight size={16} />
					</Button>
					<Button size="sm" variant="outline" class="h-8 w-8 p-0">
						<ChevronsRight size={16} />
					</Button>
				</div>

				<!-- Estadísticas en 6 columnas -->
				<div class="grid grid-cols-6 gap-4 border-t pt-4">
					<div class="space-y-1">
						<Label class="text-xs">Cantidad de Transportes:</Label>
						<Input
							type="number"
							bind:value={currentEmbarque.cantidad_transportes}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>

					<div class="space-y-1">
						<Label class="text-xs">Cantidad de Partidas:</Label>
						<Input
							type="number"
							bind:value={currentEmbarque.cantidad_partidas}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>

					<div class="space-y-1">
						<Label class="text-xs">Suma cantidad UMC:</Label>
						<Input
							type="number"
							step="0.001"
							value={currentEmbarque.suma_cantidad_umc.toFixed(3)}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>

					<div class="space-y-1">
						<Label class="text-xs">Cantidad de Embarques:</Label>
						<Input
							type="number"
							bind:value={currentEmbarque.cantidad_embarques}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>

					<div class="space-y-1">
						<Label class="text-xs">Cantidad de Mercancías:</Label>
						<Input
							type="number"
							bind:value={currentEmbarque.cantidad_mercancias}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>

					<div class="space-y-1">
						<Label class="text-xs">Suma cantidad UMC:</Label>
						<Input
							type="number"
							step="0.001"
							value={currentEmbarque.suma_cantidad_umc_embarques.toFixed(3)}
							readonly
							class="h-9 text-right text-sm"
						/>
					</div>
				</div>

				<!-- Clave Recinto Fiscalizado -->
				<div class="mt-4 grid grid-cols-6 gap-4">
					<div class="space-y-1">
						<Label class="text-xs">Clave Recinto Fiscalizado:</Label>
						<div class="flex gap-2">
							<Input bind:value={currentEmbarque.clave_recinto} class="h-9" />
							<Button size="sm" variant="outline" class="h-9 w-9 p-0">
								<Search size={14} />
							</Button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<DialogFooter class="mt-4">
			<Button variant="outline" onclick={() => (isEmbarqueDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveEmbarque}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog anidado para Mercancías del Embarque Parcial -->
<Dialog bind:open={isMercanciaDialogOpen}>
	<DialogContent class="z-[100] max-w-lg">
		<DialogHeader>
			<DialogTitle>Mercancías del Embarque Parcial</DialogTitle>
		</DialogHeader>

		<div class="space-y-4 py-4">
			<div class="space-y-2">
				<Label for="descripcion">Descripción de Mercancía:</Label>
				<textarea
					id="descripcion"
					bind:value={currentMercancia.descripcion}
					class="min-h-[120px] w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
					placeholder="Ingrese la descripción de la mercancía"
				></textarea>
			</div>

			<div class="grid grid-cols-3 gap-4">
				<div class="space-y-2">
					<Label for="cantidad_umc">Cantidad UMC:</Label>
					<Input
						id="cantidad_umc"
						type="number"
						step="0.001"
						bind:value={currentMercancia.cantidad_umc}
						placeholder="0.000"
						class="text-right"
					/>
				</div>

				<div class="space-y-2">
					<Label for="cantidad_umt">Cantidad UMT:</Label>
					<Input
						id="cantidad_umt"
						type="number"
						step="0.001"
						bind:value={currentMercancia.cantidad_umt}
						placeholder="0.000"
						class="text-right"
					/>
				</div>

				<div class="space-y-2">
					<Label for="peso_mercancia">Peso:</Label>
					<Input
						id="peso_mercancia"
						type="number"
						step="0.001"
						bind:value={currentMercancia.peso}
						placeholder="0.000"
						class="text-right"
					/>
				</div>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isMercanciaDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveMercancia}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Diferencias en contribuciones -->
<Dialog bind:open={isDiferenciasDialogOpen}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>Diferencias en contribuciones</DialogTitle>
		</DialogHeader>

		<div class="space-y-4 py-4">
			<div class="space-y-2">
				<Label for="contribucion">Contribución:</Label>
				<Input
					id="contribucion"
					bind:value={currentDiferencia.contribucion}
					placeholder="Ej: IVA"
				/>
			</div>

			<div class="space-y-2">
				<Label for="forma_pago_dif">Forma de pago:</Label>
				<Input
					id="forma_pago_dif"
					bind:value={currentDiferencia.forma_pago}
					placeholder="Ej: Efectivo, Transferencia"
				/>
			</div>

			<div class="space-y-2">
				<Label for="importe_dif">Importe:</Label>
				<Input
					id="importe_dif"
					type="number"
					step="0.01"
					bind:value={currentDiferencia.importe}
					placeholder="0.00"
					class="text-right"
				/>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isDiferenciasDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveDiferencia}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Notas del Pedimento -->
<Dialog bind:open={isNotaDialogOpen}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>Notas del Pedimento</DialogTitle>
		</DialogHeader>

		<div class="space-y-4 py-4">
			<div class="space-y-2">
				<Label for="comentario_nota">Comentario:</Label>
				<textarea
					id="comentario_nota"
					bind:value={currentNota.comentario}
					class="min-h-[150px] w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
					placeholder="Ingrese el comentario de la nota"
				></textarea>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isNotaDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveNota}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
