<script lang="ts">
	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 } from 'lucide-svelte';
	import { onMount } from 'svelte';

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

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

	// Labels — mismos que SCAII más los específicos de SCAF
	const FIELD_LABELS: Record<string, string> = {
		// General (heredados de SsisGen)
		factoriva: 'Factor IVA (Aplica en compras)',
		dta: 'DTA',
		actseguridad: 'Activar la seguridad del sistema',
		// SIN mensajevenc / diavencimiento (no aplica en SCAF)
		calvalbasetcped: 'Cálculo en base al TC fecha pago (Importación)',
		calvalbasetcpedexpo: 'Cálculo en base al TC fecha pago (Exportación)',
		controldes: 'Asignar fecha límite para desactualizar facturas',
		diadesactual: 'Días para desactualizar facturas (Impo/Expo)',
		decimalespeso: 'Peso neto y bruto',
		decimalescant: 'Cantidades',
		decimalesvalor: 'Valores y costos',
		filtrocantidad: 'Omitir Cantidades con balance menor a',
		muestraarchcodbarras: 'Muestra archivo TXT al generar factura/remesa',
		// SCAF extra en código de barras
		codigobarrasesp: 'Imprimir 3 en código de barras',

		// Archivos electrónicos
		patharch: 'Generación de los archivos PDF en',
		patharchtransmision: 'Generación de archivos electrónicos para transmitir en',
		pathrespuesta: 'Dirección de espera de la respuesta del broker americano',
		patharchped: 'Generación de archivos electrónicos para pedimentos en',

		// Continuación 1
		pathgenimpotemp: 'Ruta de los archivos CSV para importación temporal',
		pathgenexpo: 'Ruta de los archivos CSV para exportación',
		tipovenro: 'Tipo de validación para regla octava',
		cantvenro: 'Cantidad (Porcentaje/Días)',
		calcdepreciacion: 'Cálculo de la depreciación',
		firmapacking: 'Esconder la Firma en el Packing List',
		escondamepacking: 'Esconde el A. A. Mexicano en Packing List',
		advertenciatm: 'Advertencia el Tipo de Moneda en Facturas',
		valmanifusado: 'Activar Control de Manifiesto',
		repdescargolineal: 'Generar Reporte de Descargo por Orden de factura',
		muestra_copias_codbarras: 'Imprimir Código de Barras en las demás copias, aparte de la copia del transportista',

		// Continuación 2
		validadecencant: 'Invalida la Captura de Decimales en Cantidades con Unidad de Medida Pieza',
		mostraradvertenciaro: 'Mostrar Advertencia de Valores de Regla Octava en Partidas',
		usartranspamedocame: 'Utilizar Transportista Americano en el Packing List y en Bill Of Lading de Exportación',
		cantvscantseries: 'Validar la Cantidad Contra la Cantidad de Series',
		covefechaemision: 'Tomar la Fecha de Emision para la Generación del COVE',
		usarcoveenarchsaaim3: 'Usar E-Document en Lugar del Número de Factura en el Archivo de Transferencia SAAIM3',
		asignainfoparte: 'Asigna en Impo. Temporal, Definitiva y Compras Mex. la información completa del número de parte',
		interfaceaatcfpff: 'En Interfaces (WINSAAI, SAAIM3), usar tipo de cambio de:',
		incluirobscoveobsimpo: 'Incluir las Observaciones del COVE en las Observaciones en Importación',
		agregarincreimpo: 'Agregar Incrementables, Fecha de Emisión y Factor de Multimoneda en las Facturas de Importación',

		// Continuación 3
		identificadornodoseriecove: 'Omitir datos de identificación en COVE (Regla 7.3.3 OEA)',
		pathnaftaccs: 'Ruta NAFTA CSS',
		actpdfreportes: 'Activa para que se generen los PDFs al momento de Actualización',
		patharchpdfimpo: 'Generar Archivos PDF de Importación en',
		patharchpdfexpo: 'Generar Archivos PDF de Exportación en',
		mensajesvurfc: 'Desactivar mensajes de RFC en Transmision de VU',
		mostrarpackinglistingles: 'Mostrar Packing List en Inglés',
		enviarsubpartidascove: 'Enviar Sub Partidas a XML COVE',
		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',

		// Continuación 4
		usartcdelafechapagopedimpoendescarga: 'Usar Tipo de Cambio de la Fecha de Pago de Pedimento de Importación en Impresion de la Descarga',
		usarvude128o256: 'Utilizar Ventanilla Unica con Encriptacion de 256',
		agregarnumeroembarque: 'Agregar Numero Embarque',
		afostrofe: 'Imprimir Caracter Especial en Columna Clase / Num. Parte (Exportar a Excel)',
		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 los Incrementables en el Anexo 3',
		hojacalculodesglosefacturaanexo3: 'En la Hoja de Calculo Desglosar las Facturas en el Anexo 3',
		utilizarnombregenericomainx30: 'Utilizar Nombre Generico Mainx 30',
		utilizartcrespectoatipoped: 'Utilizar TC Respecto Al Tipo de Pedimento',
		utilizarsolopartesnaftaenco: 'Utilizar Solo Partes Nafta En CO',
		cambiarpesosporcostounitario: 'Cambiar Pesos Por Costo Unitario En Exportación',
		bloqueodeediciondefacturas: 'Bloqueo De Edición De Facturas',
		impresionfacturaalterna: 'Imprimir Factura Alterna En Hoja De Calculo Y Manifestación Al Valor',

		// Continuación 5
		transmitirfacalterna: 'Transmitir Factura Alterna en VU',
		validarseries: 'Omitir validación series en facturas',
		emailas: 'Activar ventana EmailAS',
	};

	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;
	};

	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(() => {
		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 });
	}

	// Tab General — igual que SCAII pero SIN mensajevenc/diavencimiento, más codigobarrasEsp
	const GENERAL_SECTIONS = [
		{
			title: 'Parámetros del Sistema',
			fields: ['factoriva', 'dta', 'actseguridad']
		},
		{
			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', 'codigobarrasesp']
		}
	];

	// Tab Archivos — solo 4 rutas (sin pathgenimpotemp/pathgenexpo/patharchpedconsm)
	const ARCHIVOS_SECTIONS = [
		{
			title: 'Gestión de Archivos PDF y Electrónicos',
			fields: [
				'patharch',
				'patharchtransmision',
				'pathrespuesta',
				'patharchped',
			]
		}
	];

	// Continuación 1
	const CONTINUACION_SECTIONS = [
		{
			title: 'Rutas CSV',
			fields: ['pathgenimpotemp', 'pathgenexpo']
		},
		{
			title: 'Tipo de validación para regla octava',
			fields: ['tipovenro', 'cantvenro']
		},
		{
			title: 'Cálculo de la depreciación',
			fields: ['calcdepreciacion']
		},
		{
			title: 'Parámetros Adicionales y Visualización',
			fields: [
				'firmapacking',
				'escondamepacking',
				'advertenciatm',
				'valmanifusado',
				'repdescargolineal',
				'muestra_copias_codbarras',
			]
		}
	];

	// Continuación 2
	const CONT2_SECTIONS = [
		{
			title: 'Configuraciones de Pantalla y Validación',
			fields: [
				'validadecencant',
				'mostraradvertenciaro',
				'usartranspamedocame',
				'cantvscantseries',
				'covefechaemision',
				'usarcoveenarchsaaim3',
			]
		},
		{
			title: 'SCAF.INI',
			fields: ['asignainfoparte']
		},
		{
			title: 'En Interfaces (WINSAAI, SAAIM3), usar tipo de cambio de:',
			fields: ['interfaceaatcfpff']
		},
		{
			title: 'COVE e Importación',
			fields: ['incluirobscoveobsimpo', 'agregarincreimpo']
		}
	];

	// Continuación 3
	const CONT3_SECTIONS = [
		{
			id: 'rutas_pdf',
			title: 'Rutas y Archivos PDF',
			fields: [
				'identificadornodoseriecove',
				'pathnaftaccs',
				'actpdfreportes',
				'patharchpdfimpo',
				'patharchpdfexpo',
			]
		},
		{
			id: 'opciones',
			title: 'Opciones',
			fields: [
				'mensajesvurfc',
				'mostrarpackinglistingles',
				'enviarsubpartidascove',
				'utilizarfechapagopeddeundiaanterior',
				'utilizartitulosalternativosimpresionfactura',
			]
		}
	];

	// Continuación 4
	const CONT4_FIELDS = [
		'usartcdelafechapagopedimpoendescarga',
		'usarvude128o256',
		'agregarnumeroembarque',
		'afostrofe',
		'utilizarumdeexistenciaentransmisionvu',
		'utilizarcodigodebrokerdeclienteenmainx30',
		'hojacalculosepararincrementablesanexo3',
		'hojacalculodesglosefacturaanexo3',
		'utilizarnombregenericomainx30',
		'utilizartcrespectoatipoped',
		'utilizarsolopartesnaftaenco',
		'cambiarpesosporcostounitario',
		'bloqueodeediciondefacturas',
		'impresionfacturaalterna',
	];

	// Continuación 5
	const CONT5_FIELDS = [
		'transmitirfacalterna',
		'validarseries',
		'emailas',
	];

	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' },
	];

	const RULE_VALIDATOR_OPTIONS = [
		{ value: 'Porcentaje', label: 'Porcentaje' },
		{ value: 'Dias', label: 'Días' },
		{ value: 'No aplica', label: 'No aplica' }
	];

	const DEPRECIACION_OPTIONS = [
		{ value: 'MES', label: 'MES' },
		{ value: 'DIA', label: 'DÍA' }
	];

	const INTERFACE_TC_OPTIONS = [
		{ value: 'P', label: 'Fecha de Pago' },
		{ value: 'F', label: 'Fecha de Factura' }
	];
</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-4 lg:grid-cols-7 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>

		<!-- GENERAL -->
		<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)}
									type={field === 'DTA' ? 'number' : undefined}
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<!-- ARCHIVOS ELECTRÓNICOS — solo 4 rutas -->
		<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>

		<!-- CONTINUACIÓN 1 -->
		<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 :
										field === 'CalcDepreciacion' ? DEPRECIACION_OPTIONS :
										undefined
									}
									type={
										field === 'TipoVenRO' ? 'select' :
										field === 'CalcDepreciacion' ? 'radio' :
										field === 'CantVenRO' ? 'number' :
										undefined
									}
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<!-- CONTINUACIÓN 2 -->
		<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)}
									type="switch"
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<!-- CONTINUACIÓN 3 -->
		<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.toLowerCase().includes('path') || field.toLowerCase().includes('nafta') 
										? undefined 
										: 'switch'
									}
								/>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		</Tabs.Content>

		<!-- CONTINUACIÓN 4 -->
		<Tabs.Content value="cont4" class="space-y-6">
			<div class="space-y-6 py-4 max-w-4xl mx-auto">
				<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 gap-4">
					{#each CONT4_FIELDS as field}
						<SettingFormField
							key={field}
							label={FIELD_LABELS[field] || field}
							value={formData[field]}
							onChange={(val) => handleFieldChange(field, val)}
							type="switch"
						/>
					{/each}
				</div>
			</div>
		</Tabs.Content>

		<!-- CONTINUACIÓN 5 -->
		<Tabs.Content value="cont5" class="space-y-6">
			<div class="space-y-6 py-4 max-w-4xl mx-auto">
				<div class="flex items-center gap-4">
					<h3 class="font-medium text-lg">Configuraciones Adicionales</h3>
					<div class="h-px w-full bg-border mt-2"></div>
				</div>
				<div class="grid grid-cols-1 gap-4">
					{#each CONT5_FIELDS as field}
						<SettingFormField
							key={field}
							label={FIELD_LABELS[field] || field}
							value={formData[field]}
							onChange={(val) => handleFieldChange(field, val)}
							type="switch"
						/>
					{/each}
				</div>
			</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>
