<script lang="ts">
	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 {
		Table,
		TableBody,
		TableCell,
		TableHead,
		TableHeader,
		TableRow
	} from '$lib/components/ui/table';
	import {
		Dialog,
		DialogContent,
		DialogHeader,
		DialogTitle,
		DialogFooter
	} from '$lib/components/ui/dialog';
	import * as Select from '$lib/components/ui/select';
	import {
		Plus,
		Pencil,
		Trash2,
		FileText,
		Copy,
		Upload
	} from 'lucide-svelte';
	import { onMount } from 'svelte';

	interface Transporte {
		id?: number;
		transportista: string;
		rfc: string;
		curp: string;
		nombre: string;
		domicilio: string;
		ciudad: string;
		estado: string;
		pais: string;
		identificacion_fiscal: string;
		total_bultos: number;
		identificacion: string;
	}

	interface Guia {
		id?: number;
		guia: string;
		identificador: string;
	}

	interface Precinto {
		id?: number;
		numero: string;
		identificacion: string;
	}

	interface Contenedor {
		id?: number;
		numero: string;
		identificacion: string;
		tipo: string;
	}

	let {
		pedimento = $bindable(null),
		formData = $bindable({
			bultos: {
				cantidad: 0,
				marcas: 'S/M',
				numero: 'S/N',
				vehiculos: 1
			},
			transportes: [] as Transporte[],
			guias: [] as Guia[],
			precintos: [] as Precinto[],
			contenedores: [] as Contenedor[]
		})
	}: {
		pedimento?: any;
		formData: {
			bultos: {
				cantidad: number;
				marcas: string;
				numero: string;
				vehiculos: number;
			};
			transportes: Transporte[];
			guias: Guia[];
			precintos: Precinto[];
			contenedores: Contenedor[];
		};
	} = $props();

	// Flag para evitar loops infinitos al cargar datos
	let dataLoaded = false;
	let lastPedimentoId: number | null = null;

	// Cargar datos del pedimento cuando está disponible (solo una vez)
	$effect(() => {
		const pedimentoId = pedimento?.id ?? null;
		
		// Si el pedimento cambió, resetear el flag
		if (pedimentoId !== lastPedimentoId) {
			lastPedimentoId = pedimentoId;
			dataLoaded = false;
		}
		
		if (pedimento && !dataLoaded) {
			dataLoaded = true;			
			
			// Cargar datos de bultos desde pedimento_packages
			if (pedimento.pedimento_packages) {
				const bultos = pedimento.pedimento_packages;
				formData.bultos = {
					cantidad: bultos.quantity ?? 0,
					marcas: bultos.brand || 'S/M',
					numero: bultos.number || 'S/N',
					vehiculos: bultos.vehicles ?? 1
				};
			}
			
			// Cargar transportes desde pedimento_transport_carriers
			if (pedimento.pedimento_transport_carriers && Array.isArray(pedimento.pedimento_transport_carriers)) {
				formData.transportes = pedimento.pedimento_transport_carriers.map((t: any) => ({
					id: t.id,
					transportista: t.carrier || '',
					rfc: t.rfc || '',
					curp: t.curp || '',
					nombre: t.name || '',
					domicilio: t.address || '',
					ciudad: t.city || '',
					estado: t.state || '',
					pais: t.country || '',
					identificacion_fiscal: t.tax_id || '',
					total_bultos: t.total_packages ?? 0,
					identificacion: t.identification || ''
				}));
			}

			// Cargar guías desde pedimento_guides
			if (pedimento.pedimento_guides && Array.isArray(pedimento.pedimento_guides)) {
				formData.guias = pedimento.pedimento_guides.map((g: any) => ({
					id: g.id,
					guia: g.guide || '',
					identificador: g.identifier || ''
				}));
			}
			
			// Cargar precintos desde pedimento_seals
			if (pedimento.pedimento_seals && Array.isArray(pedimento.pedimento_seals)) {
				formData.precintos = pedimento.pedimento_seals.map((p: any) => ({
					id: p.id,
					numero: p.number || '',
					identificacion: p.identification || ''
				}));
			}
			
			// Cargar contenedores desde pedimento_containers
			if (pedimento.pedimento_containers && Array.isArray(pedimento.pedimento_containers)) {
				formData.contenedores = pedimento.pedimento_containers.map((c: any) => ({
					id: c.id,
					numero: c.number || '',
					identificacion: c.identification || '',
					tipo: c.type || ''
				}));
			}			
		}
	});

	// Cargar países al montar el componente
	onMount(async () => {
		try {			
			const response = await fetch('/api-sveltekit/countries');
			
			if (!response.ok) {
				console.error('❌ Error al cargar países:', response.status);
				return;
			}
			
			const data = await response.json();
			countries = data;			
		} catch (error) {
			console.error('❌ Error al cargar países:', error);
		}
	});

	// Estados para diálogos
	let isTransporteDialogOpen = $state(false);
	let isPrecintoDialogOpen = $state(false);
	let isContenedorDialogOpen = $state(false);
	let isTransportesPrecintosDialogOpen = $state(false);
	let isGuiasDialogOpen = $state(false);
	let isTransportistasDialogOpen = $state(false);
	let isTransportistaFormDialogOpen = $state(false);
	let isGafeteDialogOpen = $state(false);
	let editingGafeteIndex = $state<number | null>(null);

	// Estado para gafete actual
	let currentGafete = $state({
		claveTransportista: '',
		linea: '',
		numeroGafeteUnico: '',
		nombreTransportista: ''
	});

	// Catálogo de transportistas (datos del catálogo del sistema)
	let transportistasCatalog = $state<any[]>([
		{
			id: 1,
			clave: '159A',
			nombre: 'MANUEL ALEJANDRO VENGA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: 'MEX',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 2,
			clave: '159T',
			nombre: 'TRANSPORTES HERMA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 3,
			clave: '159V',
			nombre: 'Concepción Peña Grijalva',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 4,
			clave: '158A',
			nombre: 'PERALTA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 5,
			clave: '15C1',
			nombre: 'MOLSA MOVIMIENTO LOGISTI',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 6,
			clave: '15CG',
			nombre: 'UNION DE FLETEROS DE TAN',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 7,
			clave: '15D5',
			nombre: 'Carlos Alejandro Baeta Sánchez',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 8,
			clave: '15E6',
			nombre: 'JUAN SEBASTIAN MERA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 9,
			clave: '15FB',
			nombre: 'FLORENTIN N HERNANDEZ',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 10,
			clave: '15G0',
			nombre: 'JOSE GABRIEL ZEPEDA DIAZ',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 11,
			clave: '15G2',
			nombre: 'PERALTA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 12,
			clave: '15I9',
			nombre: 'Blanca Fabiola Figueroa Mende',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: 'MEX',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 13,
			clave: '15JD',
			nombre: 'José García Cruz',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		},
		{
			id: 14,
			clave: '15JF',
			nombre: 'TRANSPORTES ESPAÑA',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			telefono: '',
			caat_code: '',
			gafetes: []
		}
	]);
	let searchTransportista = $state('');
	let currentCatalogoTransportista = $state<any | null>(null);
	let editingTransportistaIndex = $state<number | null>(null);

	// Filtrar transportistas según búsqueda
	let filteredTransportistas = $derived(
		transportistasCatalog.filter((t) => {
			if (!searchTransportista) return true;
			const search = searchTransportista.toLowerCase();
			return (
				t.clave?.toLowerCase().includes(search) ||
				t.nombre?.toLowerCase().includes(search) ||
				t.rfc?.toLowerCase().includes(search)
			);
		})
	);

	// Lista de países desde el backend
	let countries = $state<Array<{m3_key: string; description_es: string}>>([]);
	let searchCountry = $state('');
	let showCountryDropdown = $state(false);

	// Filtrar países según búsqueda
	let filteredCountries = $derived(
		countries.filter((c) => {
			if (!searchCountry) return true;
			const search = searchCountry.toLowerCase();
			return (
				c.description_es?.toLowerCase().includes(search) ||
				c.m3_key?.toLowerCase().includes(search)
			);
		})
	);

	// Estados para diálogo de Transportes y Precintos separados por comas
	let transportesPrecintosData = $state({
		pais: '',
		lista_transportes: '',
		lista_precintos: ''
	});

	// Estados para diálogo de Guías
	let editingGuiaIndex = $state<number | null>(null);
	let currentGuia = $state<Guia>({
		guia: '',
		identificador: ''
	});

	// Estados para edición
	let editingTransporteIndex = $state<number | null>(null);
	let editingPrecintoIndex = $state<number | null>(null);
	let editingContenedorIndex = $state<number | null>(null);

	// Estados actuales
	let currentTransporte = $state<Transporte>({
		transportista: '',
		rfc: '',
		curp: '',
		nombre: '',
		domicilio: '',
		ciudad: '',
		estado: '',
		pais: '',
		identificacion_fiscal: '',
		total_bultos: 0,
		identificacion: ''
	});

	let currentPrecinto = $state<Precinto>({
		numero: '',
		identificacion: ''
	});

	let currentContenedor = $state<Contenedor>({
		numero: '',
		identificacion: '',
		tipo: ''
	});

	const paises = [
		'Estados Unidos',
		'México',
		'Canadá',
		'China',
		'Alemania',
		'Japón',
		'Reino Unido',
		'Francia',
		'Italia',
		'España'
	];

	const estadosMexico = [
		{ clave: 'AGS', nombre: 'Aguascalientes' },
		{ clave: 'BC', nombre: 'Baja California' },
		{ clave: 'BCS', nombre: 'Baja California Sur' },
		{ clave: 'CAM', nombre: 'Campeche' },
		{ clave: 'CHS', nombre: 'Chiapas' },
		{ clave: 'CHI', nombre: 'Chihuahua' },
		{ clave: 'CDMX', nombre: 'Ciudad de México' },
		{ clave: 'COA', nombre: 'Coahuila' },
		{ clave: 'COL', nombre: 'Colima' },
		{ clave: 'DGO', nombre: 'Durango' },
		{ clave: 'GTO', nombre: 'Guanajuato' },
		{ clave: 'GRO', nombre: 'Guerrero' },
		{ clave: 'HGO', nombre: 'Hidalgo' },
		{ clave: 'JAL', nombre: 'Jalisco' },
		{ clave: 'MEX', nombre: 'México' },
		{ clave: 'MIC', nombre: 'Michoacán' },
		{ clave: 'MOR', nombre: 'Morelos' },
		{ clave: 'NAY', nombre: 'Nayarit' },
		{ clave: 'NL', nombre: 'Nuevo León' },
		{ clave: 'OAX', nombre: 'Oaxaca' },
		{ clave: 'PUE', nombre: 'Puebla' },
		{ clave: 'QRO', nombre: 'Querétaro' },
		{ clave: 'QR', nombre: 'Quintana Roo' },
		{ clave: 'SLP', nombre: 'San Luis Potosí' },
		{ clave: 'SIN', nombre: 'Sinaloa' },
		{ clave: 'SON', nombre: 'Sonora' },
		{ clave: 'TAB', nombre: 'Tabasco' },
		{ clave: 'TAM', nombre: 'Tamaulipas' },
		{ clave: 'TLX', nombre: 'Tlaxcala' },
		{ clave: 'VER', nombre: 'Veracruz' },
		{ clave: 'YUC', nombre: 'Yucatán' },
		{ clave: 'ZAC', nombre: 'Zacatecas' }
	];

	const tiposContenedor = [
		"1 - CONTENEDOR ESTANDAR 20' (STANDARD CONTAINER 20')",
		'2 - CONTENEDOR ESTANDAR 40 (STANDARD CONTAINER)',
		"3 - CONTENEDOR ESTANDAR DE CUBO ALTO 40' (HIGH CUBE ST",
		"4 - CONTENEDOR TAPA DURA 20' (HARDTOP CONTAINER 20')",
		"5 - CONTENEDOR TAPA DURA 40' (HARDTOP CONTAINER 40')",
		"6 - CONTENEDOR TAPA ABIERTA 20' (OPEN TOP CONTAINER 20",
		"7 - CONTENEDOR TAPA ABIERTA 40' (OPEN TOP CONTAINER 40",
		"8 - FLAT 20' (FLAT 20')",
		"9 - FLAT 40' (FLAT 40')",
		"10 - PLATAFORMA 20' (PLATFORM 20')",
		"11 - PLATAFORMA 40' (PLATFORM 48')",
		"12 - CONTENEDOR VENTILADO 20' (VENTILATED CONTAINER 20'",
		"13 - CONTENEDOR TERMICO 20' (INSULATED CONTAINER 20')",
		"14 - CONTENEDOR TERMICO 40' (INSULATED CONTAINER 40')",
		"15 - CONTENEDOR REFRIGERANTE 20' (REFRIGERATED CONTAINE",
		"16 - CONTENEDOR REFRIGERANTE 40' (REFRIGERATED CONTAINE",
		"17 - CONTENEDOR REFRIGERANTE CUBO ALTO 40' (HIGH CUBE R",
		"18 - CONTENEDOR CARGA A GRANEL 20' (BULK CONTAINER 20')",
		"19 - CONTENEDOR TIPO TANQUE 20' (TANK CONTAINER 20')",
		"20 - CONTENEDOR ESTANDAR 53' (STANDARD CONTAINER 53')",
		"21 - CONTENEDOR ESTANDAR 45' (STANDARD CONTAINER 45')",
		"22 - CONTENEDOR ESTANDAR 48' (STANDARD CONTAINER 48')",
		"23 - CONTENEDOR ESTANDAR 8' (STANDARD CONTAINER 8')",
		"24 - CONTENEDOR ESTANDAR 10' (STANDARD CONTAINER 10')",
		"25 - CONTENEDOR ESTANDAR DE CUBO ALTO 45' (HIGH CUBE ST",
		'26 - SEMIRREMOLQUE CON PACKS PARA ENVASIOS DE BEBIDAS.',
		'27 - SEMIRREMOLQUE CUELLO DE GANZO.',
		'28 - SEMIRREMOLQUE CUELLO MUERTO.',
		'29 - SEMIRREMOLQUE TOLVA (ABIETTU)',
		'30 - AUTO TOLVA CUBIERTA (DE CARGA NEUMATICA',
		'31 - SEMIRREMOLQUE CHASIS',
		'32 - SEMIRREMOLQUE AUTOBAJABLE (CON SISTEMA DE ELEVACI',
		'33 - CON TEMPERATURA CONTROLADA.',
		'34 - SEMIRREMOLQUE DE CORTO TRAMO',
		'35 - SEMIRREMOLQUE DE CAMA BAJA.',
		"36 - PLATAFORMA DE 28'.",
		"37 - PLATAFORMA DE 45'.",
		"38 - PLATAFORMA DE 48'.",
		'39 - SEMIRREMOLQUE PARA TRANSPORTE DE CABALLOS.',
		'40 - SEMIRREMOLQUE PARA TRANSPORTE DE GANADO.',
		'41 - SEMIRREMOLQUE TANQUE (LIQUIDOS) / SIN CALEFACCION',
		'42 - SEMIRREMOLQUE TANQUE (LIQUIDOS) / CON CALEFACCION /',
		'43 - SEMIRREMOLQUE TANQUE (LIQUIDOS) / SIN CALEFACCION',
		'44 - SEMIRREMOLQUE TANQUE (LIQUIDOS) / CON CALEFACCION',
		'45 - SEMIRREMOLQUE TANQUE (GAS) / SIN CALEFACCION / SIN',
		'46 - SEMIRREMOLQUE TANQUE (GAS) / CON CALEFACCION / SIN',
		'47 - SEMIRREMOLQUE TANQUE (GAS) / SIN CALEFACCION / A/S',
		'48 - SEMIRREMOLQUE TANQUE (GAS) / CON CALEFACCION / A/S',
		'49 - SEMIRREMOLQUE TANQUE (QUIMICOS) / SIN CALEFACCION',
		'50 - SEMIRREMOLQUE TANQUE (QUIMICOS) / CON CALEFACCION',
		'51 - SEMIRREMOLQUE TANQUE (QUIMICOS) / SIN CALEFACCION',
		'52 - SEMIRREMOLQUE TANQUE (QUIMICOS) / CON CALEFACCION',
		'53 - SEMIRREMOLQUE GONDOLA-CERRADA.',
		'54 - SEMIRREMOLQUE GONDOLA-ABIERTA.',
		'55 - SEMIRREMOLQUE TIPO CAJA CERRADA 48\'.',
		'56 - SEMIRREMOLQUE TIPO CAJA CERRADA 53\'.',
		'57 - SEMIRREMOLQUE TIPO CAJA REFRIGERADA 48\'.',
		'58 - SEMIRREMOLQUE TIPO CAJA REFRIGERADA 53\'.',
		'59 - DOBLE SEMIRREMOLQUE.',
		'60 - OTROS.',
		"61 - TANQUE 20'",
		"62 - TANQUE 40'",
		'63 - CARRO DE FERROCARRIL',
		"64 - HIGH CUBE DE 20'",
		'65 - AUTOMOVIL',
		'66 - CAMION UNITARIO DE DOS EJES',
		'67 - CAMION UNITARIO DE TRES EJES',
		'68 - VEHICULOS CON CAPACIDAD DE CARGA DE HASTA 3.5. TON',
		'69 - TRACTOCAMION'
	];

	// Funciones para Transportes
	function openNewTransporte() {
		editingTransporteIndex = null;
		currentTransporte = {
			transportista: '',
			rfc: '',
			curp: '',
			nombre: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: '',
			identificacion_fiscal: '',
			total_bultos: 0,
			identificacion: ''
		};
		isTransporteDialogOpen = true;
	}

	function openTransportesPrecintosDialog() {
		isTransportesPrecintosDialogOpen = true;
	}

	// Funciones para Guías
	function openNewGuia() {
		editingGuiaIndex = null;
		currentGuia = {
			guia: '',
			identificador: ''
		};
		isGuiasDialogOpen = true;
	}

	function openEditGuia(index: number) {
		if (!formData?.guias) return;
		editingGuiaIndex = index;
		currentGuia = { ...formData.guias[index] };
		isGuiasDialogOpen = true;
	}

	function saveGuia() {
		if (!formData) return;
		
		// Asegurar que existe el array de guías
		if (!formData.guias) {
			formData.guias = [];
		}
		
		if (editingGuiaIndex !== null) {
			formData.guias[editingGuiaIndex] = { ...currentGuia };
		} else {
			formData.guias = [...formData.guias, { ...currentGuia }];
		}
		isGuiasDialogOpen = false;
	}

	function deleteGuia(index: number) {
		if (!formData?.guias) return;
		if (confirm('¿Está seguro de eliminar esta guía?')) {
			formData.guias = formData.guias.filter((_, i) => i !== index);
		}
	}

	function openEditTransporte(index: number) {
		if (!formData?.transportes) return;
		editingTransporteIndex = index;
		currentTransporte = { ...formData.transportes[index] };
		isTransporteDialogOpen = true;
	}

	function saveTransporte() {
		if (!formData?.transportes) return;
		if (editingTransporteIndex !== null) {
			formData.transportes[editingTransporteIndex] = { ...currentTransporte };
		} else {
			formData.transportes = [...formData.transportes, { ...currentTransporte }];
		}
		isTransporteDialogOpen = false;
	}

	function deleteTransporte(index: number) {
		if (!formData?.transportes) return;
		if (confirm('¿Está seguro de eliminar este transporte?')) {
			formData.transportes = formData.transportes.filter((_, i) => i !== index);
		}
	}

	// Funciones para Precintos
	function openNewPrecinto() {
		editingPrecintoIndex = null;
		currentPrecinto = {
			numero: '',
			identificacion: ''
		};
		isPrecintoDialogOpen = true;
	}

	function openEditPrecinto(index: number) {
		if (!formData?.precintos) return;
		editingPrecintoIndex = index;
		currentPrecinto = { ...formData.precintos[index] };
		isPrecintoDialogOpen = true;
	}

	function savePrecinto() {
		if (!formData?.precintos) return;
		if (editingPrecintoIndex !== null) {
			formData.precintos[editingPrecintoIndex] = { ...currentPrecinto };
		} else {
			formData.precintos = [...formData.precintos, { ...currentPrecinto }];
		}
		isPrecintoDialogOpen = false;
	}

	function deletePrecinto(index: number) {
		if (!formData?.precintos) return;
		if (confirm('¿Está seguro de eliminar este precinto?')) {
			formData.precintos = formData.precintos.filter((_, i) => i !== index);
		}
	}

	// Funciones para gestionar catálogo de transportistas
	function openNewTransportistaForm() {
		currentCatalogoTransportista = {
			clave: '',
			nombre: '',
			rfc: '',
			curp: '',
			domicilio: '',
			ciudad: '',
			estado: '',
			pais: ''
		};
		editingTransportistaIndex = null;
		isTransportistaFormDialogOpen = true;
	}

	function editCatalogoTransportista(index: number) {
		currentCatalogoTransportista = { ...transportistasCatalog[index] };
		editingTransportistaIndex = index;
		isTransportistaFormDialogOpen = true;
	}

	function saveCatalogoTransportista() {
		if (editingTransportistaIndex !== null) {
			transportistasCatalog[editingTransportistaIndex] = { ...currentCatalogoTransportista };
		} else {
			transportistasCatalog.push({ ...currentCatalogoTransportista, id: Date.now() });
		}
		isTransportistaFormDialogOpen = false;
		currentCatalogoTransportista = null;
		editingTransportistaIndex = null;
	}

	function deleteCatalogoTransportista(index: number) {
		if (confirm('¿Está seguro de eliminar este transportista?')) {
			transportistasCatalog.splice(index, 1);
		}
	}

	function selectTransportista(transportista: any) {
		currentTransporte.transportista = transportista.nombre;
		currentTransporte.rfc = transportista.rfc;
		currentTransporte.curp = transportista.curp || '';
		isTransportistasDialogOpen = false;
	}

	// Funciones para gafetes
	function openNewGafeteDialog() {
		editingGafeteIndex = null;
		currentGafete = {
			claveTransportista: currentCatalogoTransportista?.clave || '',
			linea: '0',
			numeroGafeteUnico: '',
			nombreTransportista: currentCatalogoTransportista?.nombre || ''
		};
		isGafeteDialogOpen = true;
	}

	function editGafete(index: number) {
		if (!currentCatalogoTransportista?.gafetes) return;
		editingGafeteIndex = index;
		const gafete = currentCatalogoTransportista.gafetes[index];
		currentGafete = {
			claveTransportista: currentCatalogoTransportista.clave || '',
			linea: gafete.linea.toString(),
			numeroGafeteUnico: gafete.numeroGafeteUnico,
			nombreTransportista: gafete.nombreTransportista
		};
		isGafeteDialogOpen = true;
	}

	function deleteGafete(index: number) {
		if (!currentCatalogoTransportista?.gafetes) return;
		
		if (!confirm('¿Está seguro de que desea borrar este gafete?')) {
			return;
		}
		
		currentCatalogoTransportista.gafetes.splice(index, 1);
		// Reordenar las líneas
		currentCatalogoTransportista.gafetes.forEach((gafete: any, i: number) => {
			gafete.linea = i + 1;
		});
	}

	function saveGafete() {
		if (!currentCatalogoTransportista) return;
		
		// Asegurar que existe el array de gafetes
		if (!currentCatalogoTransportista.gafetes) {
			currentCatalogoTransportista.gafetes = [];
		}
		
		if (editingGafeteIndex !== null) {
			// Editar gafete existente
			currentCatalogoTransportista.gafetes[editingGafeteIndex] = {
				linea: currentCatalogoTransportista.gafetes[editingGafeteIndex].linea,
				numeroGafeteUnico: currentGafete.numeroGafeteUnico,
				nombreTransportista: currentGafete.nombreTransportista
			};
		} else {
			// Agregar nuevo gafete
			currentCatalogoTransportista.gafetes.push({
				linea: currentCatalogoTransportista.gafetes.length + 1,
				numeroGafeteUnico: currentGafete.numeroGafeteUnico,
				nombreTransportista: currentGafete.nombreTransportista
			});
		}
		
		editingGafeteIndex = null;
		isGafeteDialogOpen = false;
	}

	// Funciones para Contenedores
	function openNewContenedor() {
		editingContenedorIndex = null;
		currentContenedor = {
			numero: '',
			identificacion: '',
			tipo: ''
		};
		isContenedorDialogOpen = true;
	}

	function openEditContenedor(index: number) {
		if (!formData?.contenedores) return;
		editingContenedorIndex = index;
		currentContenedor = { ...formData.contenedores[index] };
		isContenedorDialogOpen = true;
	}

	function saveContenedor() {
		if (!formData?.contenedores) return;
		if (editingContenedorIndex !== null) {
			formData.contenedores[editingContenedorIndex] = { ...currentContenedor };
		} else {
			formData.contenedores = [...formData.contenedores, { ...currentContenedor }];
		}
		isContenedorDialogOpen = false;
	}

	function deleteContenedor(index: number) {
		if (!formData?.contenedores) return;
		if (confirm('¿Está seguro de eliminar este contenedor?')) {
			formData.contenedores = formData.contenedores.filter((_, i) => i !== index);
		}
	}

	function copiarATransporte() {
		if (!formData?.contenedores || formData.contenedores.length === 0) {
			alert('No hay contenedores para copiar');
			return;
		}
		alert('Copiar a Transporte no implementado aún');
	}

	function importarContenedores() {
		// Disparar el input file oculto
		const fileInput = document.getElementById('importar-contenedores-file') as HTMLInputElement;
		if (fileInput) {
			fileInput.click();
		}
	}

	function handleFileImport(event: Event) {
		const input = event.target as HTMLInputElement;
		const file = input.files?.[0];
		if (!file) return;

		// Aquí iría la lógica para procesar el archivo
		// Por ahora solo mostramos el nombre del archivo seleccionado
		alert(`Archivo seleccionado: ${file.name}\n\nProcesamiento de archivo pendiente de implementación`);
		
		// Limpiar el input para permitir seleccionar el mismo archivo de nuevo
		input.value = '';
	}
</script>

<!-- Input file oculto para importar contenedores -->
<input
	id="importar-contenedores-file"
	type="file"
	accept=".csv,.xlsx,.xls,.txt"
	class="hidden"
	onchange={handleFileImport}
/>

<div class="space-y-4">
	<!-- Sección de Bultos y Transportes principales -->
	<div class="grid grid-cols-2 gap-4">
		<!-- Bultos -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Bultos</CardTitle>
			</CardHeader>
			<CardContent class="space-y-3">
				<div class="space-y-2">
					<Label for="cantidad">Cantidad</Label>
					<Input
						id="cantidad"
						type="number"
						bind:value={formData.bultos.cantidad}
						placeholder="0"
					/>
				</div>
				<div class="space-y-2">
					<Label for="marcas">Marcas</Label>
					<Input id="marcas" bind:value={formData.bultos.marcas} placeholder="S/M" />
				</div>
				<div class="space-y-2">
					<Label for="numero">Número</Label>
					<Input id="numero" bind:value={formData.bultos.numero} placeholder="S/N" />
				</div>
				<div class="space-y-2">
					<Label for="vehiculos">Vehículos</Label>
					<Input
						id="vehiculos"
						type="number"
						bind:value={formData.bultos.vehiculos}
						placeholder="1"
					/>
				</div>
			</CardContent>
		</Card>

		<!-- Transportes -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Transportes</CardTitle>
			</CardHeader>
			<CardContent>
				<div class="border rounded-lg overflow-hidden">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Identificación</TableHead>
								<TableHead>País</TableHead>
								<TableHead class="w-[100px]">Acciones</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{#if !formData?.transportes || formData.transportes.length === 0}
								<TableRow>
									<TableCell colspan={3} class="text-center text-muted-foreground py-4">
										No hay transportes registrados
									</TableCell>
								</TableRow>
							{:else}
								{#each formData.transportes as transporte, index}
									<TableRow>
										<TableCell>{transporte.identificacion_fiscal}</TableCell>
										<TableCell>{transporte.pais}</TableCell>
										<TableCell>
											<div class="flex gap-1">
												<Button size="sm" variant="ghost" onclick={() => openEditTransporte(index)}>
													<Pencil size={14} />
												</Button>
												<Button size="sm" variant="ghost" onclick={() => deleteTransporte(index)}>
													<Trash2 size={14} />
												</Button>
											</div>
										</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>
				<div class="flex gap-2 mt-3">
					<Button size="sm" onclick={openNewTransporte}>
						<Plus class="mr-1.5" size={14} />
						Nuevo
					</Button>
					<Button
						size="sm"
						variant="outline"
						disabled={formData?.transportes?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.transportes?.[index]) openEditTransporte(index);
						}}
					>
						<Pencil class="mr-1.5" size={14} />
						Editar
					</Button>
					<Button
						size="sm"
						variant="destructive"
						disabled={formData?.transportes?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.transportes?.[index]) deleteTransporte(index);
						}}
					>
						<Trash2 class="mr-1.5" size={14} />
						Borrar
					</Button>
				<Button size="sm" variant="outline" onclick={openTransportesPrecintosDialog}>
						<FileText class="mr-1.5" size={14} />
						Transportes, Precintos
					</Button>
				</div>
			</CardContent>
		</Card>
	</div>

	<!-- Sección de Guías -->
	<Card>
		<CardHeader class="pb-3">
			<CardTitle class="text-base">Guías</CardTitle>
		</CardHeader>
		<CardContent>
			<div class="border rounded-lg overflow-hidden">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Guía</TableHead>
							<TableHead>Identificador</TableHead>
							<TableHead class="w-[100px]">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if !formData?.guias || formData.guias.length === 0}
							<TableRow>
								<TableCell colspan={3} class="text-center text-muted-foreground py-4">
									No hay guías registradas
								</TableCell>
							</TableRow>
						{:else}
							{#each formData.guias as guia, index}
								<TableRow>
									<TableCell>{guia.guia}</TableCell>
									<TableCell>{guia.identificador}</TableCell>
									<TableCell>
										<div class="flex gap-1">
											<Button size="sm" variant="ghost" onclick={() => openEditGuia(index)}>
												<Pencil size={14} />
											</Button>
											<Button size="sm" variant="ghost" onclick={() => deleteGuia(index)}>
												<Trash2 size={14} />
											</Button>
										</div>
									</TableCell>
								</TableRow>
							{/each}
						{/if}
					</TableBody>
				</Table>
			</div>
			<div class="flex gap-2 mt-3">
				<Button size="sm" onclick={openNewGuia}>
					<Plus class="mr-1.5" size={14} />
					Nuevo
				</Button>
				<Button
					size="sm"
					variant="outline"
					disabled={formData?.guias?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.guias?.[index]) openEditGuia(index);
					}}
				>
					<Pencil class="mr-1.5" size={14} />
					Editar
				</Button>
				<Button
					size="sm"
					variant="destructive"
					disabled={formData?.guias?.length === 0}
					onclick={() => {
						const index = 0;
						if (formData?.guias?.[index]) deleteGuia(index);
					}}
				>
					<Trash2 class="mr-1.5" size={14} />
					Borrar
				</Button>
			</div>
		</CardContent>
	</Card>

	<!-- Sección de Precintos y Contenedores -->
	<div class="grid grid-cols-2 gap-4">
		<!-- Transportes, Precintos -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Transportes, Precintos</CardTitle>
			</CardHeader>
			<CardContent>
				<div class="border rounded-lg overflow-hidden">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Número</TableHead>
								<TableHead>Identificación</TableHead>
								<TableHead class="w-[100px]">Acciones</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{#if !formData?.precintos || formData.precintos.length === 0}
								<TableRow>
									<TableCell colspan={3} class="text-center text-muted-foreground py-4">
										No hay precintos registrados
									</TableCell>
								</TableRow>
							{:else}
								{#each formData.precintos as precinto, index}
									<TableRow>
										<TableCell>{precinto.numero}</TableCell>
										<TableCell>{precinto.identificacion}</TableCell>
										<TableCell>
											<div class="flex gap-1">
												<Button size="sm" variant="ghost" onclick={() => openEditPrecinto(index)}>
													<Pencil size={14} />
												</Button>
												<Button size="sm" variant="ghost" onclick={() => deletePrecinto(index)}>
													<Trash2 size={14} />
												</Button>
											</div>
										</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>
				<div class="flex gap-2 mt-3">
					<Button size="sm" onclick={openNewPrecinto}>
						<Plus class="mr-1.5" size={14} />
						Nuevo
					</Button>
					<Button
						size="sm"
						variant="outline"
						disabled={formData?.precintos?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.precintos?.[index]) openEditPrecinto(index);
						}}
					>
						<Pencil class="mr-1.5" size={14} />
						Editar
					</Button>
					<Button
						size="sm"
						variant="destructive"
						disabled={formData?.precintos?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.precintos?.[index]) deletePrecinto(index);
						}}
					>
						<Trash2 class="mr-1.5" size={14} />
						Borrar
					</Button>
				</div>
			</CardContent>
		</Card>

		<!-- Contenedores -->
		<Card>
			<CardHeader class="pb-3">
				<CardTitle class="text-base">Contenedores</CardTitle>
			</CardHeader>
			<CardContent>
				<div class="border rounded-lg overflow-hidden">
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Número</TableHead>
								<TableHead>Tipo</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{#if !formData?.contenedores || formData.contenedores.length === 0}
								<TableRow>
									<TableCell colspan={4} class="text-center text-muted-foreground py-4">
										No hay contenedores registrados
									</TableCell>
								</TableRow>
							{:else}
								{#each formData.contenedores as contenedor, index}
									<TableRow>
										<TableCell>{contenedor.numero}</TableCell>
										<TableCell>{contenedor.tipo}</TableCell>
										<TableCell>
											<div class="flex gap-1">
												<Button size="sm" variant="ghost" onclick={() => openEditContenedor(index)}>
													<Pencil size={14} />
												</Button>
												<Button size="sm" variant="ghost" onclick={() => deleteContenedor(index)}>
													<Trash2 size={14} />
												</Button>
											</div>
										</TableCell>
									</TableRow>
								{/each}
							{/if}
						</TableBody>
					</Table>
				</div>
				<div class="flex gap-2 mt-3">
					<Button size="sm" onclick={openNewContenedor}>
						<Plus class="mr-1.5" size={14} />
						Nuevo
					</Button>
					<Button
						size="sm"
						variant="outline"
						disabled={formData?.contenedores?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.contenedores?.[index]) openEditContenedor(index);
						}}
					>
						<Pencil class="mr-1.5" size={14} />
						Editar
					</Button>
					<Button
						size="sm"
						variant="destructive"
						disabled={formData?.contenedores?.length === 0}
						onclick={() => {
							const index = 0;
							if (formData?.contenedores?.[index]) deleteContenedor(index);
						}}
					>
						<Trash2 class="mr-1.5" size={14} />
						Borrar
					</Button>
					<Button size="sm" variant="outline" onclick={copiarATransporte}>
						<Copy class="mr-1.5" size={14} />
						Copiar a Transp.
					</Button>
					<Button size="sm" variant="outline" onclick={importarContenedores}>
						<Upload class="mr-1.5" size={14} />
						Importar
					</Button>
				</div>
			</CardContent>
		</Card>
	</div>
</div>

<!-- Dialog para Transportes -->
<Dialog bind:open={isTransporteDialogOpen}>
	<DialogContent class="max-w-3xl">
		<DialogHeader>
			<DialogTitle>Transportes del Pedimento</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="space-y-2">
				<Label for="t_transportista">Transportista:</Label>
				<div class="flex gap-2">
					<Input
						id="t_transportista"
						bind:value={currentTransporte.transportista}
						placeholder="Transportista"
						class="flex-1"
					/>
					<Button size="icon" variant="outline" onclick={() => (isTransportistasDialogOpen = true)}>
						<FileText size={16} />
					</Button>
				</div>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="t_rfc">RFC:</Label>
					<Input id="t_rfc" bind:value={currentTransporte.rfc} placeholder="RFC" />
				</div>
				<div class="space-y-2">
					<Label for="t_curp">CURP:</Label>
					<Input id="t_curp" bind:value={currentTransporte.curp} placeholder="CURP" />
				</div>
			</div>

			<div class="space-y-2">
				<Label for="t_nombre">Nombre:</Label>
				<Input id="t_nombre" bind:value={currentTransporte.nombre} placeholder="Nombre" />
			</div>

			<div class="space-y-2">
				<Label for="t_domicilio">Domicilio:</Label>
				<Input
					id="t_domicilio"
					bind:value={currentTransporte.domicilio}
					placeholder="Domicilio"
				/>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="t_ciudad">Ciudad:</Label>
					<Input id="t_ciudad" bind:value={currentTransporte.ciudad} placeholder="Ciudad" />
				</div>
				<div class="space-y-2">
					<Label for="t_estado">Estado:</Label>
					<Select.Root
						type="single"
						value={currentTransporte.estado}
						onValueChange={(v: string | undefined) => v && (currentTransporte.estado = v)}
					>
						<Select.Trigger id="t_estado" class="w-full">
							<span class="truncate">{currentTransporte.estado ? estadosMexico.find(e => e.clave === currentTransporte.estado)?.nombre || currentTransporte.estado : 'Seleccionar estado'}</span>
						</Select.Trigger>
						<Select.Content>
							{#each estadosMexico as estado}
								<Select.Item value={estado.clave}>{estado.clave} - {estado.nombre}</Select.Item>
							{/each}
						</Select.Content>
					</Select.Root>
				</div>
			</div>

			<div class="space-y-2 relative">
				<Label for="t_pais">País:</Label>
				<div class="relative">
					<Input
						id="t_pais"
						type="text"
						placeholder="Buscar país..."
						value={searchCountry || (currentTransporte.pais ? countries.find(c => c.m3_key === currentTransporte.pais)?.description_es || currentTransporte.pais : '')}
						oninput={(e) => (searchCountry = (e.target as HTMLInputElement).value)}
						onfocus={() => (showCountryDropdown = true)}
						onblur={() => setTimeout(() => (showCountryDropdown = false), 200)}
						class="w-full"
					/>
					{#if showCountryDropdown && filteredCountries.length > 0}
						<div class="absolute z-50 w-full mt-1 bg-popover border border-border rounded-md shadow-lg max-h-[300px] overflow-auto">
							{#each filteredCountries as country}
								<button
									type="button"
									class="w-full text-left px-3 py-2 hover:bg-accent hover:text-accent-foreground text-sm text-popover-foreground transition-colors"
									onclick={() => {
										currentTransporte.pais = country.m3_key;
										searchCountry = '';
										showCountryDropdown = false;
									}}
								>
									{country.description_es}
								</button>
							{/each}
						</div>
					{/if}
				</div>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="t_identificacion_fiscal">Identificación Fiscal:</Label>
					<Input
						id="t_identificacion_fiscal"
						bind:value={currentTransporte.identificacion_fiscal}
						placeholder="Identificación Fiscal"
					/>
				</div>
				<div class="space-y-2">
					<Label for="t_total_bultos">Total de bultos:</Label>
					<Input
						id="t_total_bultos"
						type="number"
						bind:value={currentTransporte.total_bultos}
						placeholder="0"
					/>
				</div>
			</div>
		</div>

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

<!-- Dialog para Precintos -->
<Dialog bind:open={isPrecintoDialogOpen}>
	<DialogContent class="max-w-lg">
		<DialogHeader>
			<DialogTitle>
				{editingPrecintoIndex !== null ? 'Editar Precinto' : 'Nuevo Precinto'}
			</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="space-y-2">
				<Label for="p_numero">Número *</Label>
				<Input id="p_numero" bind:value={currentPrecinto.numero} placeholder="Número de precinto" />
			</div>

			<div class="space-y-2">
				<Label for="p_identificacion">Identificación *</Label>
				<Input
					id="p_identificacion"
					bind:value={currentPrecinto.identificacion}
					placeholder="Identificación"
				/>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isPrecintoDialogOpen = false)}>Cancelar</Button>
			<Button
				onclick={savePrecinto}
				disabled={!currentPrecinto.numero || !currentPrecinto.identificacion}
			>
				{editingPrecintoIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Dialog para Contenedores -->
<Dialog bind:open={isContenedorDialogOpen}>
	<DialogContent class="max-w-lg">
		<DialogHeader>
			<DialogTitle>
				{editingContenedorIndex !== null ? 'Editar Contenedor' : 'Nuevo Contenedor'}
			</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="space-y-2">
				<Label for="c_numero">Número *</Label>
				<Input
					id="c_numero"
					bind:value={currentContenedor.numero}
					placeholder="Número de contenedor"
				/>
			</div>

			<div class="space-y-2">
				<Label for="c_tipo">Tipo *</Label>
				<Select.Root
					type="single"
					value={currentContenedor.tipo}
					onValueChange={(v: string | undefined) => v && (currentContenedor.tipo = v)}
				>
					<Select.Trigger id="c_tipo">
						{currentContenedor.tipo || 'Seleccionar tipo'}
					</Select.Trigger>
					<Select.Content>
						{#each tiposContenedor as tipo}
							<Select.Item value={tipo}>{tipo}</Select.Item>
						{/each}
					</Select.Content>
				</Select.Root>
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isContenedorDialogOpen = false)}>Cancelar</Button>
			<Button
				onclick={saveContenedor}
				disabled={!currentContenedor.numero ||
					!currentContenedor.tipo}
			>
				{editingContenedorIndex !== null ? 'Actualizar' : 'Guardar'}
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Diálogo de Transportes y Precintos separados por comas -->
<Dialog open={isTransportesPrecintosDialogOpen} onOpenChange={(open) => (isTransportesPrecintosDialogOpen = open)}>
	<DialogContent class="max-w-2xl">
		<DialogHeader>
			<DialogTitle>Transportes y Precintos</DialogTitle>
		</DialogHeader>
		<div class="space-y-6">
			<!-- Listado de transportes -->
			<div class="border rounded-lg p-4 bg-muted/30">
				<h3 class="text-sm font-semibold mb-3">Listado de transportes separados por comas</h3>
				<div class="space-y-3">
					<div class="flex items-center gap-2">
						<Label for="pais-transportes" class="w-12">País:</Label>
						<Input
							id="pais-transportes"
							bind:value={transportesPrecintosData.pais}
							class="flex-1"
						/>
						<button
							class="text-xs text-blue-600 hover:underline whitespace-nowrap"
							onclick={() => alert('País en común para todos los transportes')}
						>
							[ País en común para todos los transportes ]
						</button>
					</div>
					<div class="space-y-1">
						<Label for="lista-transportes">Lista:</Label>
						<textarea
							id="lista-transportes"
							bind:value={transportesPrecintosData.lista_transportes}
							class="w-full min-h-[120px] 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"
							placeholder="Ingrese los transportes separados por comas"
						></textarea>
					</div>
				</div>
			</div>

			<!-- Listado de precintos -->
			<div class="border rounded-lg p-4 bg-muted/30">
				<h3 class="text-sm font-semibold mb-3">Listado de precintos separados por comas</h3>
				<div class="space-y-1">
					<Label for="lista-precintos">Lista:</Label>
					<textarea
						id="lista-precintos"
						bind:value={transportesPrecintosData.lista_precintos}
						class="w-full min-h-[120px] 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"
						placeholder="Ingrese los precintos separados por comas"
					></textarea>
				</div>
			</div>
		</div>
		<DialogFooter class="flex justify-end gap-2 mt-6">
			<Button
				variant="outline"
				onclick={() => {
					isTransportesPrecintosDialogOpen = false;
				}}
			>
				Cancelar
			</Button>
			<Button
				onclick={() => {
					// Aquí iría la lógica para procesar las listas y crear transportes/precintos
					isTransportesPrecintosDialogOpen = false;
				}}
			>
				Aceptar
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Diálogo Catálogo de Transportistas -->
<Dialog open={isTransportistasDialogOpen} onOpenChange={(open) => (isTransportistasDialogOpen = open)}>
	<DialogContent class="max-w-4xl max-h-[80vh] overflow-y-auto">
		<DialogHeader>
			<DialogTitle>Catálogo de Transportistas</DialogTitle>
		</DialogHeader>
		<div class="space-y-4">
			<div class="flex gap-2">
				<div class="flex-1 space-y-2">
					<Label for="search-transportista">Buscar:</Label>
					<Input
						id="search-transportista"
						bind:value={searchTransportista}
						placeholder="Buscar por clave, nombre o RFC..."
					/>
				</div>
				<div class="flex items-end">
					<Button onclick={openNewTransportistaForm}>
						<Plus size={16} class="mr-2" />
						Nuevo
					</Button>
				</div>
			</div>
			<div class="border rounded-lg">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Clave</TableHead>
							<TableHead>Nombre</TableHead>
							<TableHead>RFC</TableHead>
							<TableHead class="text-center">Acciones</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{#if filteredTransportistas.length === 0}
							<TableRow>
								<TableCell colspan={4} class="text-center text-muted-foreground">
									{searchTransportista ? 'No se encontraron transportistas con ese criterio.' : 'No hay transportistas en el catálogo. Haz clic en "Nuevo" para agregar.'}
								</TableCell>
							</TableRow>
						{:else}
							{#each filteredTransportistas as transportista, index}
								<TableRow>
									<TableCell>{transportista.clave}</TableCell>
									<TableCell>{transportista.nombre}</TableCell>
									<TableCell>{transportista.rfc}</TableCell>
									<TableCell>
										<div class="flex justify-center gap-1">
											<Button
												size="icon"
												variant="ghost"
												onclick={() => selectTransportista(transportista)}
												title="Seleccionar"
											>
												<FileText size={16} />
											</Button>
											<Button
												size="icon"
												variant="ghost"
												onclick={() => editCatalogoTransportista(transportistasCatalog.indexOf(transportista))}
												title="Editar"
											>
												<Pencil size={16} />
											</Button>
											<Button
												size="icon"
												variant="ghost"
												onclick={() => deleteCatalogoTransportista(transportistasCatalog.indexOf(transportista))}
												title="Eliminar"
											>
												<Trash2 size={16} />
											</Button>
										</div>
									</TableCell>
								</TableRow>
							{/each}
						{/if}
					</TableBody>
				</Table>
			</div>
		</div>
		<DialogFooter class="flex justify-end gap-2 mt-6">
			<Button variant="outline" onclick={() => (isTransportistasDialogOpen = false)}>
				Cerrar
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Diálogo Formulario de Transportista -->
<Dialog open={isTransportistaFormDialogOpen} onOpenChange={(open) => (isTransportistaFormDialogOpen = open)}>
	<DialogContent class="max-w-2xl max-h-[80vh] overflow-y-auto">
		<DialogHeader>
			<DialogTitle>{editingTransportistaIndex !== null ? 'Editar' : 'Nuevo'} Transportista</DialogTitle>
		</DialogHeader>
		{#if currentCatalogoTransportista}
			<div class="grid gap-4 py-4">
				<!-- Clave y Nombre -->
				<div class="space-y-2">
					<Label for="ct_clave">Clave:</Label>
					<Input
						id="ct_clave"
						bind:value={currentCatalogoTransportista.clave}
						placeholder="Clave"
					/>
				</div>
				<div class="space-y-2">
					<Label for="ct_nombre">Nombre:</Label>
					<Input
						id="ct_nombre"
						bind:value={currentCatalogoTransportista.nombre}
						placeholder="Nombre completo"
					/>
				</div>
				
				<!-- RFC y CURP -->
				<div class="grid grid-cols-2 gap-4">
					<div class="space-y-2">
						<Label for="ct_rfc">RFC:</Label>
						<Input
							id="ct_rfc"
							bind:value={currentCatalogoTransportista.rfc}
							placeholder="RFC"
						/>
					</div>
					<div class="space-y-2">
						<Label for="ct_curp">CURP:</Label>
						<Input
							id="ct_curp"
							bind:value={currentCatalogoTransportista.curp}
							placeholder="CURP"
						/>
					</div>
				</div>
				
				<!-- Domicilio -->
				<div class="space-y-2">
					<Label for="ct_domicilio">Domicilio:</Label>
					<Input
						id="ct_domicilio"
						bind:value={currentCatalogoTransportista.domicilio}
						placeholder="Domicilio"
					/>
				</div>
				
				<!-- País y Entidad Federativa -->
				<div class="grid grid-cols-2 gap-4">
					<div class="space-y-2 relative">
						<Label for="ct_pais">País:</Label>
						<Select.Root
							type="single"
							value={currentCatalogoTransportista.pais}
							onValueChange={(v: string | undefined) => v && (currentCatalogoTransportista.pais = v)}
						>
							<Select.Trigger id="ct_pais" class="w-full">
								<span class="truncate">{currentCatalogoTransportista.pais ? countries.find(c => c.m3_key === currentCatalogoTransportista.pais)?.description_es || currentCatalogoTransportista.pais : 'Seleccionar país'}</span>
							</Select.Trigger>
							<Select.Content class="max-h-[300px]">
								{#if countries.length === 0}
									<Select.Item value="" disabled>Cargando países...</Select.Item>
								{:else}
									{#each countries as country}
										<Select.Item value={country.m3_key}>{country.description_es}</Select.Item>
									{/each}
								{/if}
							</Select.Content>
						</Select.Root>
					</div>
					<div class="space-y-2">
						<Label for="ct_estado">Entidad Federativa:</Label>
						<Select.Root
							type="single"
							value={currentCatalogoTransportista.estado}
							onValueChange={(v: string | undefined) => v && (currentCatalogoTransportista.estado = v)}
						>
							<Select.Trigger id="ct_estado" class="w-full">
								<span class="truncate">{currentCatalogoTransportista.estado ? estadosMexico.find(e => e.clave === currentCatalogoTransportista.estado)?.nombre || currentCatalogoTransportista.estado : 'Seleccionar estado'}</span>
							</Select.Trigger>
							<Select.Content class="max-h-[300px]">
								{#each estadosMexico as estado}
									<Select.Item value={estado.clave}>{estado.clave} - {estado.nombre}</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
				</div>
				
				<!-- Ciudad -->
				<div class="space-y-2">
					<Label for="ct_ciudad">Ciudad:</Label>
					<Input
						id="ct_ciudad"
						bind:value={currentCatalogoTransportista.ciudad}
						placeholder="Ciudad"
					/>
				</div>
				
				<!-- Teléfono y CAAT -->
				<div class="grid grid-cols-2 gap-4">
					<div class="space-y-2">
						<Label for="ct_telefono">Teléfono:</Label>
						<Input
							id="ct_telefono"
							bind:value={currentCatalogoTransportista.telefono}
							placeholder="Teléfono"
						/>
					</div>
					<div class="space-y-2">
						<Label for="ct_caat">CAAT:</Label>
						<Input
							id="ct_caat"
							bind:value={currentCatalogoTransportista.caat_code}
							placeholder="(Código Alfanumérico Armonizado de Transportista)"
						/>
					</div>
				</div>
				
				<!-- Sección DE GAFETES -->
				<div class="border-t pt-4 mt-4">
					<div class="flex justify-between items-center mb-2">
						<h3 class="text-lg font-semibold"># DE GAFETES</h3>
						<div class="flex gap-2">
							<Button size="sm" variant="outline" onclick={openNewGafeteDialog}>
								<Plus class="h-4 w-4 mr-1" /> Nuevo
							</Button>
						</div>
					</div>
					
					<div class="border rounded-md">
						<Table>
							<TableHeader>
								<TableRow>
									<TableHead>Línea</TableHead>
									<TableHead>Número Gafete Único</TableHead>
									<TableHead>Nombre</TableHead>
									<TableHead class="text-center">Acciones</TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{#if currentCatalogoTransportista.gafetes && currentCatalogoTransportista.gafetes.length > 0}
									{#each currentCatalogoTransportista.gafetes as gafete, index}
										<TableRow>
											<TableCell>{gafete.linea}</TableCell>
											<TableCell>{gafete.numeroGafeteUnico}</TableCell>
											<TableCell>{gafete.nombreTransportista}</TableCell>
											<TableCell class="text-center">
												<div class="flex gap-1 justify-center">
													<Button size="icon" variant="ghost" onclick={() => editGafete(index)}>
														<Pencil class="h-4 w-4" />
													</Button>
													<Button size="icon" variant="ghost" onclick={() => deleteGafete(index)}>
														<Trash2 class="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									{/each}
								{:else}
									<TableRow>
										<TableCell colspan={4} class="text-center text-muted-foreground">
											Sin gafetes registrados
										</TableCell>
									</TableRow>
								{/if}
							</TableBody>
						</Table>
					</div>
					
					<div class="mt-2">
						<Label for="buscar_gafete">Buscar:</Label>
						<Input
							id="buscar_gafete"
							placeholder="Buscar gafete..."
						/>
					</div>
				</div>
			</div>
		{/if}
		<DialogFooter class="flex justify-end gap-2 mt-6">
			<Button variant="outline" onclick={() => (isTransportistaFormDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveCatalogoTransportista}>Guardar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Diálogo de Guías de Pedimento -->
<Dialog open={isGuiasDialogOpen} onOpenChange={(open) => (isGuiasDialogOpen = open)}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>Guías de Pedimento</DialogTitle>
		</DialogHeader>
		<div class="space-y-4">
			<div class="space-y-2">
				<Label for="guia">Guía:</Label>
				<Input
					id="guia"
					bind:value={currentGuia.guia}
					placeholder="Ingrese guía"
				/>
			</div>

			<div class="space-y-2">
				<Label for="identificador">Identificador:</Label>
				<Select.Root
					type="single"
					value={currentGuia.identificador}
					onValueChange={(v: string | undefined) => v && (currentGuia.identificador = v)}
				>
					<Select.Trigger id="identificador">
						<span class="truncate">{currentGuia.identificador || 'Seleccionar identificador'}</span>
					</Select.Trigger>
					<Select.Content>
						<Select.Item value="Maestra">Maestra</Select.Item>
					</Select.Content>
				</Select.Root>
			</div>
		</div>

		<DialogFooter class="flex justify-end gap-2 mt-6">
			<Button variant="outline" onclick={() => (isGuiasDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveGuia}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

<!-- Diálogo de Gafetes Únicos -->
<Dialog open={isGafeteDialogOpen} onOpenChange={(open) => (isGafeteDialogOpen = open)}>
	<DialogContent class="max-w-md">
		<DialogHeader>
			<DialogTitle>GAFETES UNICOS</DialogTitle>
		</DialogHeader>
		<div class="space-y-4">
			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="gafete_clave_transportista">Clave Transportista:</Label>
					<Input
						id="gafete_clave_transportista"
						value={currentGafete.claveTransportista}
						placeholder="Clave"
						disabled
					/>
				</div>
				<div class="space-y-2">
					<Label for="gafete_linea">Línea:</Label>
					<Input
						id="gafete_linea"
						bind:value={currentGafete.linea}
						placeholder="0"
					/>
				</div>
			</div>

			<div class="space-y-2">
				<Label for="gafete_numero">Número Gafete Único:</Label>
				<Input
					id="gafete_numero"
					bind:value={currentGafete.numeroGafeteUnico}
					placeholder="Número de gafete"
				/>
			</div>

			<div class="space-y-2">
				<Label for="gafete_nombre">Nombre Transportista:</Label>
				<Input
					id="gafete_nombre"
					value={currentGafete.nombreTransportista}
					placeholder="Nombre"
					disabled
				/>
			</div>
		</div>

		<DialogFooter class="flex justify-end gap-2 mt-6">
			<Button variant="outline" onclick={() => (isGafeteDialogOpen = false)}>Cancelar</Button>
			<Button onclick={saveGafete}>Aceptar</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
