<script lang="ts">
	import { fade } from 'svelte/transition';
	import * as Tabs from '$lib/components/ui/tabs';
	import SettingFormField from './SettingFormField.svelte';
	import { Button } from '$lib/components/ui/button';
	import { 
		AlertTriangle, 
		CreditCard, 
		FileEdit, 
		RefreshCw,
		Layers
	} from 'lucide-svelte';
	import { onMount } from 'svelte';

	interface Props {
		currentData: any;
		onUpdate: (data: any) => void;
	}

	let { currentData = {}, onUpdate }: Props = $props();

	// Translation Mapping for SSisGen
	const FIELD_LABELS: Record<string, string> = {
		consecutivo: "Número Consecutivo",
		dta: "DTA (Derecho Trámite Aduanero)",
		dtaexpo: "DTA Exportación",
		subempresa: "Sub-Empresa / División",
		patharch: "Generación de los archivos PDF por",
		patharchtransmision: "Generación de archivos electrónicos por transmitir en",
		pathtransexpo: "Ruta: Transmisión Exportación",
		pathrespuesta: "Ruta: Respuestas SAAI",
		patharchped: "Generación de archivos electrónicos para pedimentos en",
		patharchpedconsm: "Ruta de los archivos TXT de los archivos previos para pedimentos consolidados",
		pathgenimpotemp: "Ruta de los archivos CSV para importaciones",
		pathgenexpo: "Ruta de los archivos CSV para exportación",
		actseguridad: "Activar la seguridad del sistema",
		controldes: "Asignar fecha límite para desactualizar facturas",
		diadesactual: "Días para desactualizar facturas (Impo/Expo)",
		diavencimiento: "Días de anticipación (vencimiento)",
		mensajevenc: "Activar la advertencia de saldos vencidos",
		fechades: "Fecha de Desactualización Automática",
		factoriva: "Factor IVA (Aplica en compras)",
		validasifra: "Validar Fracciones con SIFRA",
		decimalespeso: "Peso neto y bruto",
		decimalescant: "Cantidades",
		decimalesvalor: "Valores y costos",
		calvalbasetcped: "Cálculo en base al TC fecha pago (Importación)",
		calvalbasetcpedexpo: "Cálculo en base al TC fecha pago (Exportación)",
		filtrocantidad: "Omitir Cantidades con balance menor a",
		muestraarchcodbarras: "Muestra archivo TXT al generar factura/remesa",
		datoshist: "Permitir Datos Históricos",
		tipovenro: "Tipo de validación para regla octava",
		cantvenro: "Cantidad para validación (Porcentaje/Días)",
		costoplanta: "Costo Directo en Planta",
		firmapacking: "Esconder la firma en el packing list",
		escondaamexpacking: "Esconde el agente aduanal mexicano en el packing list",
		advertenciatm: "Advertencia del uso del tipo de moneda en facturas",
		costoimpofijo: "Valida como inconsistencia si el costo de la parte es diferente al costo de la partida al actualizar la factura de importación",
		tomarsaldosvenc: "Activar si desea tomar saldos temporales o vencidos para descargar",
		valmanifusado: "Activar control de asignación de manifiestos en factura",
		valparteexiste: "No mostrar ventanas de auto selección de partes y marcar error en caso de que no exista",
		temporalfechapago: "Tomar temporalidad en base a la fecha de pago del pedimento",
		muestra_copias_codbarras: "Imprimir código de barras en las demas copias, aparte de la copia del transportista",
		mostrarpackinglistingles: "Mostrar packing list en inglés",
		activar_revision_fracciones: "Activar revisión de fracciones",
		transmitirfacalterna: "Transmitir Factura Alterna en VU",
		deshabilitardescparte: "Deshabilitar la Descripción en Español del Número de Parte",
		deshabilitardescparteing: "Deshabilitar la Descripción en Inglés del Número de Parte",
		asignafracameparte: "Asignar Automáticamente Fracción Americana de Expo US Dutible en Base a la información de la Clase y Parte",
		validadecencant: "En las Partidas de Factura se Restringe la Captura de Decimales en el Campo de Unidad de Medida Pza",
		mostraradvertenciaro: "Mostrar Advertencia si el Costo del Permiso de Regla Octava es Diferente al Costo de la Partida al Momento de Guardarla",
		mostraradvertenciarovalor: "Mostrar Advertencia si el Valor del Permiso de Regla Octava es Diferente al Valor de la Partida al Momento de Guardarla",
		usartranspamedocame: "Mostrar Transportista Americano en vez del Mexicano en Packing List y Bill Of Lading de Exportación",
		calcdutypacking: "Agregar el Valor de US Packing como Complemento del Valor Dutible para Exportación.",
		parammultiples: "Activar Uso de Parámetros Multiples en Catálogos de Facturas Impo/Expo.",
		fraccnivelpais: "Activar la Asignación de Fracción a Nivel Parte-Pais.",
		valordllstcfacturaexpo: "Mostrar Valor en dolares conforme al Tipo de Cambio de Exportación (Facturas, Códigos de Barra y COVE)",
		covefechaemision: "Tomar la fecha de Emision para la generación del COVE.",
		usarcoveenarchsaaim3: "Usar COVE en Lugar del Número de Factura en el Archivo de Transferencia SAAIM3.",
		interfaceaaconsolidada: "Generar la Interface Consolidada por Clase para el Agente Aduanal.",
		incluirobscoveobsimpo: "Incluir las Observaciones del COVE en las Observaciones en Importación.",
		activarcatalogofraccionesamericanassifra: "Activar Catálogo Fracciones Americanas Sifra",
		mostrarprogramaimmexprosec: "Mostrar Autorización Prosec en Reportes de Saldos y Descargos",
		costounitarioporempaquefac: "Mostrar Costo Unitario Por Empaque en Impresión de Facturas de Exportación",
		actvaloragre: "Activar Valor Agregado General",
		valoragregadogen: "Valor Agregado General",
		interfaceaatcfpff: "En Interfaces (WINSAAI, SAAIM3), Usar Tipo de Cambio de:",
		agregarincreimpo: "Agregar Incrementables, Fecha de Emisión y Factor Tipo de Cambio en Facturas de Importación",
		componentebom: "No Permitir Capturar Componentes Diferentes en BOMs (Materias Primas)",
		limitesubensamble: "Límite Sub Ensamble",
		partesypedimentosporcliente: "Agregar y Filtrar Catálogo de Partes y Pedimentos por Cliente",
		mensajesvurfc: "Desactivar Mensajes de RFC en transmisión de VU",
		omitirempaqueencodigobarras: "Omitir en el Código de Barras el Valor del Empaque",
		actpdfreportes: "Generar PDFs al momento de Actualización",
		patharchpdfimpo: "Generar Archivos PDF de Importación en:",
		patharchpdfexpo: "Generar Archivos PDF de Exportación en:",
		downloadftp: "¿Desea Activar Descarga Desde Sitio FTP o Localmente?",
		minsdownlftp: "En Intervalos de (Minutos)",
		downloadftppath: "Descargar Archivos en",
		descargarftpolocal: "Descargar Archivos Desde",
		serverftp: "Servidor",
		userftp: "Usuario",
		passwordftp: "Contraseña",
		directorioftp: "Directorio en FTP",
		pathlocalparadescde: "Ruta Local",
		agregarremplazarautomatico: "Agregar/Remplazar Aut",
		activarprocesovequipment: "Activar/Desactivar proceso para JD Edwards",
		activarprocesodesperdiciojdedwards: "Activar proceso de desperdicio para JD Edwards",
		utilizarnombregenericomainx30: "Utilizar Nombre Genérico Mainx 30",
		utilizartcrespectoatipoped: "Utilizar TC Respecto Al Tipo de Pedimento",
		tomardecimalescompletos: "Tomar Decimales Completos en las Impresiones de Facturas de Importación y Exportación",
		incluirremesaeninterfazaawinsaai: "Incluir Remesa en Interfaz AA (WINSAAI)",
		cambiarpesosporcostounitario: "Cambiar Pesos Por Costo Unitario en Exportaciones Mexicanas y Bilingües",
		utilizarsolopartesnaftaenco: "Utilizar Solo Partes Nafta En CO",
		bloqueodeediciondefacturas: "Bloqueo De Edición De Facturas",
		reasignafraccionclase: "Reasigna Fracción en Reporte de Descargos",
		calcularcostounitarioenbaseavalortotal: "Calcula Costo Unitario en Base a Valor Total Capturado",
		parametroauxiliar: "Seleccionar versión de B.O.M a Descargar",
		usarcontroldefechasdeversion: "Control de Versiones de Bom por Fechas",
		desactivaciondemodulos: "Activar/Desactivar Módulos",
		restringepaisimpo: "Restringir país de Korea para operaciones de Importación.",
		restringpaisexpo: "Restringir país de Korea para operaciones de Exportación.",
		bloqueoaldesactivarnumerodeparte: "Bloqueo para Desactivación y Activación de Número De Parte",
		geninformeanexo31: "Inventario Inicial en Base al Sistema",
		usarfechaemisionfactura: "Usar Fecha de Emision Factura en Manifestacion al Valor",
		utilizarfechapagopeddeundiaanterior: "Utilizar Tipo de Cambio de la Fecha de Pago de Pedimento De Un Dia Anterior",
		utilizartitulosalternativosimpresionfactura: "Utilizar Títulos Alternativos en la Impresión de las Facturas",
		utilizarequivalenciasdeumpornumerodeparte: "Utilizar factor de conversión en número de parte para Importación y exportación.",
		usarfactorconversionpornumerodeparte: "Usar Factor de Conversión Por Número De Parte",
		usartcdelafechapagopedimpoendescarga: "Usar Tipo de Cambio de la Fecha de Pago Pedimento de Importación en Descarga",
		usarvude128o256: "Utilizar Ventanilla Unica con Encriptacion de 256",
		agregarnumeroembarque: "Agregar Número Embarque",
		utilizarumdeexistenciaentransmisionvu: "Utilizar UM de Existencia En Transmision VU",
		utilizarcodigodebrokerdeclienteenmainx30: "Utilizar Codigo De Broker De Cliente En Main X 30",
		hojacalculosepararincrementablesanexo3: "En la Hoja de Calculo Separar Incrementables en el Anexo 3",
		hojacalculodesglosefacturaanexo3: "En la Hoja de Calculo Desglosar Facturas en el Anexo 3",
		usarvaloragregadoenfacturaamericana: "Usar Valor Agregado En Factura Americana",
		ocultarinformacionfraccion: "Ocultar Información Fracción",
		resaltarsaldostempconcolor: "Resaltar Saldos Temporales con Color",
		validarsectorprosecr8: "Validar Sector Prosec R8",
		agregarsubtotalinterfazaa: "Agregar Sub Total al archivo TXT para la Interfaz del Agente Aduanal",
		imprimirfacturaalterna: "Imprimir factura alterna en manifestación al valor y hoja de calculo",
		informacionamericanasubtotal: "Mostrar Información Extra En Factura Americana SubTotal",
		activarexpedienteelectronico: "Activar Expediente Electrónico",
		campo18valsaaim3: "Mostrar Campo 18 en 551 Valsaaim3"
	};

	const canonicalize = (data: any) => {
		const result: any = {};
		const recognizedKeys = Object.keys(FIELD_LABELS);
		for (const rawKey in data) {
			const canonicalKey = recognizedKeys.find((k) => k.toLowerCase() === rawKey.toLowerCase());
			if (canonicalKey) {
				result[canonicalKey] = data[rawKey];
			} else {
				result[rawKey] = data[rawKey];
			}
		}
		return result;
	};

	// Initialize local/loc fields with defaults and keep in sync with currentData prop
	let formData: any = $state({
		downloadftp: 'No',
		descargarftpolocal: 'FTP',
		minsdownlftp: 0,
		usarfechaemisionfactura: 0,
		campo18valsaaim3: 0,
		...canonicalize(currentData)
	});

	// Guarda la última versión recibida del padre para detectar cambios reales vs. echo circular
	let lastExternalData: string = JSON.stringify({ ...currentData });

	$effect(() => {
		// Update state when currentData prop changes from outside
		const newData = { ...currentData };
		const newDataStr = JSON.stringify(newData);
		// Solo sincroniza si el dato cambió externamente (no es un echo de nuestro propio onUpdate)
		if (newDataStr === lastExternalData) return;
		lastExternalData = newDataStr;

		const mapped = canonicalize(newData);
		for (const key in mapped) {
			formData[key] = mapped[key];
		}
	});

	// Notifica al padre del estado completo al montar (incluyendo defaults)
	onMount(() => {
		lastExternalData = JSON.stringify({ ...currentData });
		onUpdate({ ...formData });
	});

	function handleFieldChange(key: string, value: any) {
		formData[key] = value;
		onUpdate({ ...formData });
	}

	// Grouped sections for the "General" tab
	const GENERAL_SECTIONS = [
		{
			title: 'Parámetros del Sistema',
			fields: ['factoriva', 'actseguridad']
		},
		{
			title: 'Advertencias de Vencimiento',
			fields: ['mensajevenc', 'diavencimiento']
		},
		{
			title: 'Tipos de Cambio',
			fields: ['calvalbasetcped', 'calvalbasetcpedexpo']
		},
		{
			title: 'Desactualización de Facturas',
			fields: ['controldes', 'diadesactual']
		},
		{
			title: 'Número de decimales en reportes generales en',
			fields: ['decimalespeso', 'decimalescant', 'decimalesvalor']
		},
		{
			title: 'Filtrar por la cantidad',
			fields: ['filtrocantidad']
		},
		{
			title: 'Código de barras',
			fields: ['muestraarchcodbarras']
		}
	];

	// Grouped sections for "Archivos electrónicos" tab
	const ARCHIVOS_SECTIONS = [
		{
			title: 'Gestión de Archivos PDF y Electrónicos',
			fields: [
				'patharch',
				'patharchtransmision',
				'patharchped',
				'pathgenimpotemp',
				'pathgenexpo',
				'patharchpedconsm',
			]
		}
	];

	// Grouped sections for "Continuación" tab
	const CONTINUACION_SECTIONS = [
		{
			title: 'Tipo de validación para regla octava',
			fields: ['tipovenro', 'cantvenro']
		},
		{
			title: 'Parámetros Adicionales y Visualización',
			fields: [
				'firmapacking', 
				'escondaamexpacking', 
				'advertenciatm', 
				'costoimpofijo', 
				'tomarsaldosvenc', 
				'valmanifusado', 
				'valparteexiste', 
				'temporalfechapago',
				'muestra_copias_codbarras',
				'mostrarpackinglistingles',
				'activar_revision_fracciones'
			]
		}
	];

	// Grouped sections for "Cont 2" tab
	const CONT2_SECTIONS = [
		{
			title: 'Configuraciones de Pantalla y Validación Avanzada',
			fields: [
				'deshabilitardescparte',
				'deshabilitardescparteing',
				'asignafracameparte',
				'validadecencant',
				'mostraradvertenciaro',
				'mostraradvertenciarovalor',
				'usartranspamedocame',
				'calcdutypacking',
				'parammultiples',
				'fraccnivelpais',
				'valordllstcfacturaexpo',
				'covefechaemision',
				'usarcoveenarchsaaim3',
				'interfaceaaconsolidada',
				'incluirobscoveobsimpo'
			]
		}
	];

	// Sections for "Cont 3" tab
	const CONT3_SECTIONS = [
		{
			id: 'interface_tc',
			title: 'Tipo de Cambio en Interfaces',
			fields: ['interfaceaatcfpff']
		},
		{
			id: 'config_general',
			title: 'Opciones de Configuración General',
			fields: [
				'agregarincreimpo',
				'componentebom',
				'limitesubensamble',
				'partesypedimentosporcliente',
				'mensajesvurfc',
				'omitirempaqueencodigobarras'
			]
		},
		{
			id: 'rutas_pdf',
			title: 'Rutas y Archivos PDF',
			fields: [
				'actpdfreportes',
				'patharchpdfimpo',
				'patharchpdfexpo'
			]
		}
	];

	// Groups for Cont 4
	const CONT4_SECTIONS = [
		{
			id: 'ftp_master',
			title: 'Activación y Frecuencia',
			fields: ['downloadftp', 'minsdownlftp']
		},
		{
			id: 'ftp_destino',
			title: 'Destino de Descarga',
			fields: ['downloadftppath']
		},
		{
			id: 'ftp_origen',
			title: 'Origen de Descarga',
			fields: ['descargarftpolocal']
		},
		{
			id: 'ftp_config',
			title: 'Configuración FTP',
			fields: ['serverftp', 'userftp', 'passwordftp', 'directorioftp']
		},
		{
			id: 'local_config',
			title: 'Configuración de Ruta Local',
			fields: ['pathlocalparadescde']
		},
		{
			id: 'additional_options',
			title: 'Opciones Adicionales',
			fields: ['agregarremplazarautomatico', 'activarprocesovequipment', 'activarprocesodesperdiciojdedwards']
		}
	];

	// Sections for redefined "Cont 5" tab
	const CONT5_SECTIONS = [
		{
			id: 'restricciones',
			title: 'Restricciones y Bloqueos Iniciales',
			fields: ['restringepaisimpo', 'restringpaisexpo', 'bloqueoaldesactivarnumerodeparte']
		},
		{
			id: 'inv_inicial',
			title: 'Inventario Inicial (Agrupación)',
			fields: ['geninformeanexo31']
		},
		{
			id: 'config_adicionales',
			title: 'Configuraciones Adicionales',
			fields: [
				'usarfechaemisionfactura',
				'utilizarfechapagopeddeundiaanterior',
				'utilizartitulosalternativosimpresionfactura',
				'utilizarequivalenciasdeumpornumerodeparte',
				'usarfactorconversionpornumerodeparte',
				'usartcdelafechapagopedimpoendescarga',
				'usarvude128o256',
				'agregarnumeroembarque',
				'utilizarumdeexistenciaentransmisionvu',
				'utilizarcodigodebrokerdeclienteenmainx30',
				'hojacalculosepararincrementablesanexo3',
				'hojacalculodesglosefacturaanexo3'
			]
		}
	];

	// Sections for redefined "Cont 6" tab
	const CONT6_SECTIONS = [
		{
			id: 'configuracion',
			title: 'Opciones de Configuración',
			fields: [
				'usarvaloragregadoenfacturaamericana',
				'ocultarinformacionfraccion',
				'resaltarsaldostempconcolor',
				'validarsectorprosecr8',
				'agregarsubtotalinterfazaa',
				'utilizarnombregenericomainx30',
				'utilizartcrespectoatipoped',
				'tomardecimalescompletos',
				'cambiarpesosporcostounitario',
				'utilizarsolopartesnaftaenco',
				'bloqueodeediciondefacturas',
				'reasignafraccionclase',
				'calcularcostounitarioenbaseavalortotal',
				'parametroauxiliar',
				'usarcontroldefechasdeversion',
				'imprimirfacturaalterna',
				'informacionamericanasubtotal'
			]
		},
		{
			id: 'acciones_modulos',
			title: 'Acciones y Módulos',
			fields: [
				'desactivaciondemodulos',
				'activarexpedienteelectronico',
				'campo18valsaaim3'
			]
		}
	];

	// Grouped sections for "Cont 7" tab
	const CONT7_SECTIONS = [
		{
			title: 'Configuraciones de Fracciones y Transmisión',
			fields: [
				'activarcatalogofraccionesamericanassifra',
				'mostrarprogramaimmexprosec',
				'costounitarioporempaquefac',
				'transmitirfacalterna'
			]
		}
	];

	const TABS = [
		{ id: 'general', label: 'General' },
		{ id: 'archivos', label: 'Archivos electrónicos' },
		{ id: 'continuacion', label: 'Continuación' },
		{ id: 'cont2', label: 'Cont 2' },
		{ id: 'cont3', label: 'Cont 3' },
		{ id: 'cont4', label: 'Cont 4' },
		{ id: 'cont5', label: 'Cont 5' },
		{ id: 'cont6', label: 'Cont 6' },
		{ id: 'cont7', label: 'cont 7' }
	];

	// Options for the rule validator select
	const RULE_VALIDATOR_OPTIONS = [
		{ value: 'Porcentaje', label: 'Porcentaje' },
		{ value: 'Dias', label: 'Días' },
		{ value: 'No aplica', label: 'No aplica' }
	];

	// Options for the interface TC radio buttons
	const INTERFACE_TC_OPTIONS = [
		{ value: 'P', label: 'Fecha de Pago' },
		{ value: 'F', label: 'Fecha de Factura' }
	];

	// Options for radio groups in Cont 4
	const YES_NO_OPTIONS = [
		{ value: 'Si', label: 'Si' },
		{ value: 'No', label: 'No' }
	];

	const FTP_LOCAL_OPTIONS = [
		{ value: 'FTP', label: 'FTP' },
		{ value: 'Ruta Local', label: 'Ruta Local' }
	];

	// Options for Inventario Inicial in Cont 5
	const INICIAL_INV_OPTIONS = [
		{ value: 'AMBOS', label: 'AMBOS' },
		{ value: 'SCAII', label: 'SCAII' },
		{ value: 'SCAF', label: 'SCAF' }
	];
</script>

<div class="w-full">
	<Tabs.Root value="general" class="flex flex-col h-full">
		<Tabs.List class="grid w-full grid-cols-3 md:grid-cols-5 lg:grid-cols-9 bg-muted rounded-md p-1 mb-4">
			{#each TABS as tab}
				<Tabs.Trigger 
					value={tab.id}
					class="w-full px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
				>
					{tab.label}
				</Tabs.Trigger>
			{/each}
		</Tabs.List>

		<Tabs.Content value="general" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each GENERAL_SECTIONS as section}
					<div class="space-y-4">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<Tabs.Content value="archivos" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each ARCHIVOS_SECTIONS as section}
					<div class="space-y-6 max-w-3xl mx-auto">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 gap-4">
							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<Tabs.Content value="continuacion" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each CONTINUACION_SECTIONS as section}
					<div class="space-y-4">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
									options={field === 'tipovenro' ? RULE_VALIDATOR_OPTIONS : undefined}
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont2" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each CONT2_SECTIONS as section}
					<div class="space-y-6 max-w-4xl mx-auto">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 gap-4">
							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont3" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each CONT3_SECTIONS as section}
					<div class="space-y-6 max-w-4xl mx-auto">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>

						<div class="grid grid-cols-1 gap-4">
							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
									type={
										field === 'interfaceaatcfpff' ? 'radio' : 
										(field === 'limitesubensamble' ? 'input' : 
										(['agregarincreimpo', 'componentebom', 'partesypedimentosporcliente'].includes(field) ? 'switch' : undefined))
									}
									options={field === 'interfaceaatcfpff' ? INTERFACE_TC_OPTIONS : undefined}
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont4" class="space-y-6">
			<div class="space-y-6 py-4">
				<div class="max-w-4xl mx-auto space-y-6">
					<div class="space-y-6 p-6 rounded-2xl border border-border bg-muted/20">
						
						{#each CONT4_SECTIONS.filter(s => s.id !== 'additional_options') as section}
							<div class="space-y-6">
								<div class="flex items-center gap-4">
									<h3 class="font-medium text-lg">
										{section.title}
									</h3>
									<div class="h-px w-full bg-border mt-2"></div>
								</div>
								
								<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
									{#each section.fields as field}
										<SettingFormField 
											key={field} 
											label={FIELD_LABELS[field] || field}
											value={formData[field]} 
											onChange={(val) => handleFieldChange(field, val)} 
											disabled={formData.downloadftp !== 'Si' && field !== 'downloadftp'}
									type={
												field === 'downloadftp' || field === 'descargarftpolocal' ? 'radio' :
												field === 'minsdownlftp' ? 'number' :
												field === 'passwordftp' ? 'password' :
												undefined
											}
											options={
												field === 'downloadftp' ? YES_NO_OPTIONS :
												field === 'descargarftpolocal' ? FTP_LOCAL_OPTIONS :
												undefined
											}
											hint={
												field === 'directorioftp' ? 'Ejemplo: /Folder 1/SubFolder' :
												field === 'pathlocalparadescde' ? 'Ejemplo: C:\\Aduanas\\SCAIISQL' :
												undefined
											}
											{...(section.id === 'ftp_config' && formData.descargarftpolocal === 'Ruta Local' ? { disabled: true } : {})}
											{...(section.id === 'local_config' && formData.descargarftpolocal === 'FTP' ? { disabled: true } : {})}
										/>
									{/each}
								</div>
							</div>
						{/each}
					</div>

					<!-- Outside Options -->
					<div class="space-y-6">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								Opciones Adicionales
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
							{#each CONT4_SECTIONS.find(s => s.id === 'additional_options')?.fields || [] as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
								/>
							{/each}
						</div>
					</div>
				</div>
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont5" class="space-y-6">
			<div class="space-y-6 py-4">
				<div class="max-w-4xl mx-auto space-y-6">
					{#each CONT5_SECTIONS as section}
						<div class="space-y-6 p-6 rounded-2xl border border-border bg-muted/20">
							<div class="flex items-center gap-4">
								<h3 class="font-medium text-lg">
									{section.title}
								</h3>
								<div class="h-px w-full bg-border mt-2"></div>
							</div>
							
							<div class="grid grid-cols-1 {section.id === 'inv_inicial' ? '' : 'md:grid-cols-2 lg:grid-cols-3'} gap-6">
								{#each section.fields as field}
									<SettingFormField 
										key={field} 
										label={FIELD_LABELS[field] || field}
										value={formData[field]} 
										onChange={(val) => handleFieldChange(field, val)} 
										type={
											field === 'geninformeanexo31' ? 'radio' : 
											(['usarfechaemisionfactura', 'agregarnumeroembarque', 'hojacalculosepararincrementablesanexo3', 'hojacalculodesglosefacturaanexo3'].includes(field) ? 'switch' : undefined)
										}
										options={field === 'geninformeanexo31' ? INICIAL_INV_OPTIONS : undefined}
									/>
								{/each}
							</div>
						</div>
					{/each}
				</div>
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont6" class="space-y-6">
			<div class="space-y-6 py-4">
				<div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
					<!-- Columna Izquierda: Opciones de Configuración -->
					<div class="space-y-8">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								Opciones de Configuración
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="space-y-4">
							{#each CONT6_SECTIONS.find(s => s.id === 'configuracion')?.fields || [] as field}
								<div class="{field === 'usarcontroldefechasdeversion' ? 'ml-8 opacity-60' : ''} transition-opacity">
									<SettingFormField 
										key={field} 
										label={FIELD_LABELS[field] || field}
										value={formData[field]} 
										onChange={(val) => handleFieldChange(field, val)} 
										disabled={field === 'usarcontroldefechasdeversion' && !formData.parametroauxiliar}
										type="switch"
									/>
								</div>
							{/each}
						</div>
					</div>

					<!-- Columna Derecha: Acciones y Módulos -->
					<div class="space-y-6">
						<!-- Módulos -->
						<div class="space-y-8">
							<div class="flex items-center gap-4">
								<h3 class="font-medium text-lg">
									Módulos del Sistema
								</h3>
								<div class="h-px w-full bg-border mt-2"></div>
							</div>
							
							<div class="space-y-4">
								{#each CONT6_SECTIONS.find(s => s.id === 'acciones_modulos')?.fields || [] as field}
									<SettingFormField 
										key={field} 
										label={FIELD_LABELS[field] || field}
										value={formData[field]} 
										onChange={(val) => handleFieldChange(field, val)} 
										type={field === 'campo18valsaaim3' ? 'switch' : undefined}
									/>
								{/each}
							</div>
						</div>

						<!-- Acciones -->
						<div class="space-y-8">
							<div class="flex items-center gap-4">
								<h3 class="font-medium text-lg">
									Acciones de Gestión
								</h3>
								<div class="h-px w-full bg-border mt-2"></div>
							</div>
							
							<div class="grid grid-cols-1 gap-4">
								<Button variant="outline" class="w-full flex items-center justify-start gap-4 h-12 rounded-xl border-border bg-background hover:bg-accent text-foreground group">
									<AlertTriangle class="w-5 h-5 text-red-500 group-hover:scale-110 transition-transform" />
									Eliminar Accesos Abiertos
								</Button>
								
								<Button variant="outline" class="w-full flex items-center justify-start gap-4 h-12 rounded-xl border-border bg-background hover:bg-accent text-foreground group">
									<CreditCard class="w-5 h-5 text-primary group-hover:scale-110 transition-transform" />
									Asignar Formas de Pago Para Anexo 31
								</Button>

								<Button variant="outline" class="w-full flex items-center justify-start gap-4 h-12 rounded-xl border-border bg-background hover:bg-accent text-foreground group">
									<FileEdit class="w-5 h-5 text-primary group-hover:scale-110 transition-transform" />
									Corrección de partidas expo
								</Button>

								<Button variant="outline" class="w-full flex items-center justify-start gap-4 h-12 rounded-xl border-border bg-background hover:bg-accent text-foreground group">
									<RefreshCw class="w-5 h-5 text-primary group-hover:scale-110 transition-transform" />
									Actualizar Tarifa
								</Button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Tabs.Content>

		<Tabs.Content value="cont7" class="space-y-6">
			<div class="space-y-6 py-4">
				{#each CONT7_SECTIONS as section}
					<div class="space-y-6 max-w-4xl mx-auto">
						<div class="flex items-center gap-4">
							<h3 class="font-medium text-lg">
								{section.title}
							</h3>
							<div class="h-px w-full bg-border mt-2"></div>
						</div>
						
						<div class="grid grid-cols-1 gap-4">
							<!-- Especial Row: Activar Valor Agregado Gral + Numeric Input -->
							<div class="flex flex-col md:flex-row items-center gap-4 p-4 rounded-xl border border-border bg-background">
								<div class="flex-1">
									<SettingFormField 
										key="actvaloragre" 
										label={FIELD_LABELS.actvaloragre}
										value={formData.actvaloragre} 
										onChange={(val) => handleFieldChange('actvaloragre', val)} 
									/>
								</div>
								<div class="w-full md:w-32">
									<SettingFormField 
										key="valoragregadogen" 
										label={FIELD_LABELS.valoragregadogen}
										value={formData.valoragregadogen} 
										onChange={(val) => handleFieldChange('valoragregadogen', val)} 
										type="input"
									/>
								</div>
							</div>

							{#each section.fields as field}
								<SettingFormField 
									key={field} 
									label={FIELD_LABELS[field] || field}
									value={formData[field]} 
									onChange={(val) => handleFieldChange(field, val)} 
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

	</Tabs.Root>
</div>

<style>
	:global([data-radix-scroll-area-viewport]) {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	:global([data-radix-scroll-area-viewport]::-webkit-scrollbar) {
		display: none;
	}
</style>
