<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs';
	import { ClipboardList, FileText, Globe, Layers, ShieldCheck } from 'lucide-svelte';
	import type { TariffFraction } from '$lib/api/dashboard/a76/general_catalogs/tariff-fractions';
	import {
		getSitarALADI,
		getSitarPROSEC,
		getSitarTLCS,
		getSitarDataset,
		type SitarALADI,
		type SitarPROSEC,
		type SitarTLCS,
		type SitarGenericRecord
	} from '$lib/api/dashboard/a76/sitar';
	import {
		buildMexTariffDigitsFromCatalogRow,
		formatMexTariffDigitsForDisplay,
		splitMexTariffDigitsForSitar
	} from '$lib/utils/mexican-tariff-fraction';

	type TabKey = 'descripcion' | 'tlcs' | 'prosec' | 'aladi' | 'immex' | 'acuerdos';
	type NonDescTabKey = Exclude<TabKey, 'descripcion'>;

	let { selectedFraction, catalog = 'mex' }: {
		selectedFraction: TariffFraction | null;
		catalog?: string;
	} = $props();

	let activeTab = $state<TabKey>('descripcion');
	let isResolvingTabs = $state(false);

	let tlcsCache = $state<Record<string, SitarTLCS[]>>({});
	let prosecCache = $state<Record<string, SitarPROSEC[]>>({});
	let aladiCache = $state<Record<string, SitarALADI[]>>({});
	let immexCache = $state<Record<string, SitarGenericRecord[]>>({});
	let acuerdosCache = $state<Record<string, SitarGenericRecord[]>>({});

	let sitarTLCSData = $state<SitarTLCS[]>([]);
	let sitarPROSECData = $state<SitarPROSEC[]>([]);
	let sitarALADIData = $state<SitarALADI[]>([]);
	let sitarIMMEXData = $state<SitarGenericRecord[]>([]);
	let sitarAcuerdosData = $state<SitarGenericRecord[]>([]);
	let activeError = $state('');

	// All non-description tabs start blocked; resolveTabAvailability updates them after selection.
	let noDataTabs = $state<Record<TabKey, boolean>>({
		descripcion: false,
		tlcs: true,
		prosec: true,
		aladi: true,
		immex: true,
		acuerdos: true
	});

	// Monotonically incrementing token to discard stale async responses on rapid row changes.
	let resolveToken = 0;

	const fractionDigits = $derived(
		catalog === 'mex' && selectedFraction
			? splitMexTariffDigitsForSitar(buildMexTariffDigitsFromCatalogRow(selectedFraction))
			: null
	);

	const hasSelection = $derived(!!selectedFraction);

	const headerFraction = $derived(
		selectedFraction
			? catalog === 'mex' && fractionDigits
				? formatMexTariffDigitsForDisplay(buildMexTariffDigitsFromCatalogRow(selectedFraction))
				: selectedFraction.fraction || selectedFraction.code || ''
			: ''
	);

	function buildCacheKey(
		fracDigits: NonNullable<typeof fractionDigits>,
		frac: TariffFraction,
		tab: NonDescTabKey
	): string {
		return `${fracDigits.fraccion8}:${frac.nico || fracDigits.nico2 || ''}:${tab}`;
	}

	// Hydrates display state from cache when the user navigates to a tab.
	// By the time a tab is enabled, its data is already in cache from resolveTabAvailability.
	function hydrateTabFromCache(tab: NonDescTabKey) {
		if (!fractionDigits || !selectedFraction) return;
		const key = buildCacheKey(fractionDigits, selectedFraction, tab);
		if (tab === 'tlcs') sitarTLCSData = tlcsCache[key] ?? [];
		else if (tab === 'prosec') sitarPROSECData = prosecCache[key] ?? [];
		else if (tab === 'aladi') sitarALADIData = aladiCache[key] ?? [];
		else if (tab === 'immex') sitarIMMEXData = immexCache[key] ?? [];
		else if (tab === 'acuerdos') sitarAcuerdosData = acuerdosCache[key] ?? [];
	}

	// Fires all 5 tab queries in parallel after a fraction is selected, updates noDataTabs
	// and populates caches so tab navigation is instant and never re-queries.
	async function resolveTabAvailability(
		token: number,
		fracDigits: NonNullable<typeof fractionDigits>,
		frac: TariffFraction
	) {
		const filters = { fraccion: fracDigits.fraccion8 };

		const [tlcsRes, prosecRes, aladiRes, immexRes, acuerdosRes] = await Promise.allSettled([
			getSitarTLCS(filters),
			getSitarPROSEC(filters),
			getSitarALADI(filters),
			getSitarDataset('reit', filters),
			getSitarDataset('requisito-previo', filters)
		]);

		// Discard results if the fraction changed while waiting
		if (resolveToken !== token) return;

		const tlcsRows = tlcsRes.status === 'fulfilled' ? ((tlcsRes.value.data ?? []) as SitarTLCS[]) : [];
		const prosecRows = prosecRes.status === 'fulfilled' ? ((prosecRes.value.data ?? []) as SitarPROSEC[]) : [];
		const aladiRows = aladiRes.status === 'fulfilled' ? ((aladiRes.value.data ?? []) as SitarALADI[]) : [];
		const immexRows = immexRes.status === 'fulfilled' ? (immexRes.value.data ?? []) : [];
		const acuerdosRows = acuerdosRes.status === 'fulfilled' ? (acuerdosRes.value.data ?? []) : [];

		tlcsCache = { ...tlcsCache, [buildCacheKey(fracDigits, frac, 'tlcs')]: tlcsRows };
		prosecCache = { ...prosecCache, [buildCacheKey(fracDigits, frac, 'prosec')]: prosecRows };
		aladiCache = { ...aladiCache, [buildCacheKey(fracDigits, frac, 'aladi')]: aladiRows };
		immexCache = { ...immexCache, [buildCacheKey(fracDigits, frac, 'immex')]: immexRows };
		acuerdosCache = { ...acuerdosCache, [buildCacheKey(fracDigits, frac, 'acuerdos')]: acuerdosRows };

		noDataTabs = {
			descripcion: false,
			tlcs: tlcsRows.length === 0,
			prosec: prosecRows.length === 0,
			aladi: aladiRows.length === 0,
			immex: immexRows.length === 0,
			acuerdos: acuerdosRows.length === 0
		};

		isResolvingTabs = false;
	}

	$effect(() => {
		const frac = selectedFraction;
		const fracDigits = fractionDigits;

		activeTab = 'descripcion';
		sitarTLCSData = [];
		sitarPROSECData = [];
		sitarALADIData = [];
		sitarIMMEXData = [];
		sitarAcuerdosData = [];
		activeError = '';

		if (catalog !== 'mex') {
			isResolvingTabs = false;
			noDataTabs = { descripcion: false, tlcs: true, prosec: true, aladi: true, immex: true, acuerdos: true };
			return;
		}

		if (!frac || !fracDigits) {
			isResolvingTabs = false;
			noDataTabs = { descripcion: false, tlcs: true, prosec: true, aladi: true, immex: true, acuerdos: true };
			return;
		}

		// Block all non-description tabs while resolving availability for the new selection
		noDataTabs = { descripcion: false, tlcs: true, prosec: true, aladi: true, immex: true, acuerdos: true };
		isResolvingTabs = true;
		const token = ++resolveToken;
		void resolveTabAvailability(token, fracDigits, frac);
	});

	$effect(() => {
		if (!selectedFraction || activeTab === 'descripcion') return;
		hydrateTabFromCache(activeTab);
	});
</script>

<div class="flex h-full flex-col gap-4 overflow-hidden">
		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
			<div class="border-b bg-muted/50 p-3">
				<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider uppercase">
					<ClipboardList class="h-4 w-4" /> Información Arancelaria (Solo Consulta)
				</h3>
			</div>
			<div class="overflow-x-auto">
				<table class="w-full text-xs">
					<thead class="border-b bg-muted/30">
						<tr>
							<th class="px-4 py-2 text-left font-bold">Fracción</th>
							<th class="px-4 py-2 text-center font-bold">UMT</th>
							<th class="px-4 py-2 text-center font-bold">UM</th>
							<th class="px-4 py-2 text-center font-bold">Advalorem Impo</th>
							<th class="px-4 py-2 text-center font-bold">Advalorem Expo</th>
						</tr>
					</thead>
					<tbody class="divide-y">
						<tr>
							<td class="px-4 py-3 font-mono text-sm font-bold">
								{headerFraction || '-'}
							</td>
							<td class="px-4 py-3 text-center">{selectedFraction?.umt || '-'}</td>
							<td class="px-4 py-3 text-center">{selectedFraction?.um_code || '-'}</td>
							<td class="px-4 py-3 text-center font-bold text-blue-600">{selectedFraction?.adv_impo || '-'}</td>
							<td class="px-4 py-3 text-center font-bold text-orange-600">{selectedFraction?.adv_expo || '-'}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

	{#if !hasSelection}
		<div class="flex-1 rounded-xl border border-dashed bg-muted/10 p-4 text-xs text-muted-foreground">
			{catalog === 'mex'
				? 'Selecciona una fracción de la tabla para ver su detalle SITAR (Descripción, TLCS, PROSEC, ALADI).'
				: 'Selecciona una fracción de la tabla para ver su descripción.'}
		</div>
	{:else if catalog !== 'mex'}
	<div class="flex-1 min-h-0 overflow-hidden rounded-xl border bg-card">
		<div class="flex items-center justify-between border-b bg-muted/30 p-3">
			<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
				<FileText class="h-4 w-4" /> Descripción de la Fracción
			</h3>
		</div>
		<div class="p-4 text-sm leading-relaxed font-medium whitespace-pre-wrap text-slate-600 dark:text-slate-400">
			{selectedFraction?.description || 'No hay descripción disponible para esta fracción.'}
		</div>
	</div>
	{:else}
	<div class="flex-1 min-h-0">
	<Tabs.Root value={activeTab} onValueChange={(v) => (activeTab = v as TabKey)} class="h-full w-full flex flex-col">
			<Tabs.List class="mb-2 grid w-full grid-cols-6">
				<Tabs.Trigger value="descripcion" class="text-[10px] font-bold uppercase">Descripción</Tabs.Trigger>
				<Tabs.Trigger value="tlcs" class="text-[10px] font-bold uppercase" disabled={noDataTabs.tlcs || isResolvingTabs}>TLCS</Tabs.Trigger>
				<Tabs.Trigger value="prosec" class="text-[10px] font-bold uppercase" disabled={noDataTabs.prosec || isResolvingTabs}>PROSEC</Tabs.Trigger>
				<Tabs.Trigger value="aladi" class="text-[10px] font-bold uppercase" disabled={noDataTabs.aladi || isResolvingTabs}>ALADI</Tabs.Trigger>
				<Tabs.Trigger value="immex" class="text-[10px] font-bold uppercase" disabled={noDataTabs.immex || isResolvingTabs}>IMMEX</Tabs.Trigger>
				<Tabs.Trigger value="acuerdos" class="text-[10px] font-bold uppercase" disabled={noDataTabs.acuerdos || isResolvingTabs}>ACUERDOS</Tabs.Trigger>
			</Tabs.List>

			{#if activeError}
				<div class="mb-2 rounded-md border border-destructive p-2 text-xs text-destructive">{activeError}</div>
			{/if}

			<Tabs.Content value="descripcion" class="min-h-0 flex-1">
				<div class="min-h-[120px] rounded-xl border bg-slate-50/50 p-4 dark:bg-slate-900/10">
					<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
						<FileText class="h-4 w-4" /> Descripción de la Fracción
					</h3>
					<div class="mt-2 text-sm leading-relaxed font-medium whitespace-pre-wrap text-slate-600 dark:text-slate-400">
						{selectedFraction?.description || 'No hay descripción disponible para esta fracción.'}
					</div>
				</div>
			</Tabs.Content>

			<Tabs.Content value="tlcs" class="min-h-0 flex-1">
				<div class="min-h-[120px] h-full overflow-hidden rounded-xl border bg-card">
					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
						<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
							<ShieldCheck class="h-4 w-4" /> Información TLCS
						</h3>
					</div>
					<div class="h-full overflow-y-auto overflow-x-auto">
						<table class="w-full text-xs">
							<thead class="border-b bg-muted/10">
								<tr>
									<th class="px-4 py-2 text-left font-bold">País</th>
									<th class="px-4 py-2 text-center font-bold">Tasa</th>
									<th class="px-4 py-2 text-center font-bold">D.O.F</th>
									<th class="px-4 py-2 text-left font-bold">Notas</th>
								</tr>
							</thead>
							<tbody class="divide-y">
								{#each sitarTLCSData as item}
									<tr>
										<td class="px-4 py-2 font-bold">{item.PAIS}</td>
										<td class="px-4 py-2 text-center font-mono text-blue-600">{item.TASATXT}</td>
										<td class="px-4 py-2 text-center font-mono">{item.DOF || '-'}</td>
										<td class="max-w-xs truncate px-4 py-2 text-left text-[10px]" title={item.NOTAS || ''}>{item.NOTAS || '-'}</td>
									</tr>
								{:else}
									<tr><td colspan="4" class="px-4 py-8 text-center text-muted-foreground italic">No hay información de TLCS disponible para esta fracción.</td></tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</Tabs.Content>

			<Tabs.Content value="prosec" class="min-h-0 flex-1">
				<div class="min-h-[120px] h-full overflow-hidden rounded-xl border bg-card">
					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
						<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
							<Layers class="h-4 w-4" /> Programa PROSEC
						</h3>
					</div>
					<div class="h-full overflow-y-auto overflow-x-auto">
						<table class="w-full text-xs">
							<thead class="border-b bg-muted/10">
								<tr>
									<th class="px-4 py-2 text-left font-bold">Artículo</th>
									<th class="px-4 py-2 text-center font-bold">Sector</th>
									<th class="px-4 py-2 text-center font-bold">Tasa Txt</th>
									<th class="px-4 py-2 text-center font-bold">D.O.F</th>
								</tr>
							</thead>
							<tbody class="divide-y">
								{#each sitarPROSECData as item}
									<tr>
										<td class="max-w-xs truncate px-4 py-2 text-left font-medium" title={item.ARTICULO}>{item.ARTICULO}</td>
										<td class="px-4 py-2 text-center font-mono">{item.SECTOR}</td>
										<td class="px-4 py-2 text-center font-mono font-bold text-orange-600">{item.TASATXT}</td>
										<td class="px-4 py-2 text-center font-mono">{item.DOF || '-'}</td>
									</tr>
								{:else}
									<tr><td colspan="4" class="px-4 py-8 text-center text-muted-foreground italic">No hay información de PROSEC disponible para esta fracción.</td></tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</Tabs.Content>

			<Tabs.Content value="aladi" class="min-h-0 flex-1">
				<div class="min-h-[120px] h-full overflow-hidden rounded-xl border bg-card">
					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
						<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
							<Globe class="h-4 w-4" /> Acuerdo ALADI
						</h3>
					</div>
					<div class="h-full overflow-y-auto overflow-x-auto">
						<table class="w-full text-xs">
							<thead class="border-b bg-muted/10">
								<tr>
									<th class="px-4 py-2 text-left font-bold">Acuerdo</th>
									<th class="px-4 py-2 text-center font-bold">País</th>
									<th class="px-4 py-2 text-center font-bold">Tasa</th>
									<th class="px-4 py-2 text-center font-bold">D.O.F</th>
								</tr>
							</thead>
							<tbody class="divide-y">
								{#each sitarALADIData as item}
									<tr>
										<td class="px-4 py-2 text-left font-medium">{item.ACUERDO}</td>
										<td class="px-4 py-2 text-center font-bold">{item.PAIS}</td>
										<td class="px-4 py-2 text-center font-mono text-green-600">{item.TASATXT}</td>
										<td class="px-4 py-2 text-center font-mono">{item.DOF || '-'}</td>
									</tr>
								{:else}
									<tr><td colspan="4" class="px-4 py-8 text-center text-muted-foreground italic">No hay información de ALADI disponible para esta fracción.</td></tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</Tabs.Content>
			<!-- IMMEX / REIT -->
			<Tabs.Content value="immex" class="min-h-0 flex-1">
				<div class="min-h-[120px] h-full overflow-hidden rounded-xl border bg-card">
					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
						<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
							IMMEX / REIT
						</h3>
					</div>
					<div class="h-full overflow-y-auto overflow-x-auto">
						<table class="w-full text-xs">
							<thead class="border-b bg-muted/10">
								<tr>
									<th class="px-4 py-2 text-left font-bold">Artículo</th>
									<th class="px-4 py-2 text-left font-bold">Fundamento</th>
									<th class="px-4 py-2 text-left font-bold">Acuerdo</th>
									<th class="px-4 py-2 text-center font-bold">Permiso</th>
									<th class="px-4 py-2 text-center font-bold">D.O.F</th>
								</tr>
							</thead>
							<tbody class="divide-y">
								{#each sitarIMMEXData as item}
									<tr>
										<td class="px-4 py-2 text-left">{item.ARTICULO || ''}</td>
										<td class="px-4 py-2 text-left">{item.FUNDAMENTO || ''}</td>
										<td class="px-4 py-2 text-left">{item.ACUERDO || ''}</td>
										<td class="px-4 py-2 text-center font-mono">{item.PERMISO || '-'}</td>
										<td class="px-4 py-2 text-center font-mono">{item.DOF || '-'}</td>
									</tr>
								{:else}
									<tr>
										<td colspan="5" class="px-4 py-8 text-center text-muted-foreground italic">
											No hay información de IMMEX disponible para esta fracción.
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</Tabs.Content>
			<!-- ACUERDOS / Requisito previo -->
			<Tabs.Content value="acuerdos" class="min-h-0 flex-1">
				<div class="min-h-[120px] h-full overflow-hidden rounded-xl border bg-card">
					<div class="flex items-center justify-between border-b bg-muted/30 p-3">
						<h3 class="flex items-center gap-2 text-xs font-bold tracking-wider text-muted-foreground uppercase">
							Acuerdos / Requisitos previos
						</h3>
					</div>
					<div class="h-full overflow-y-auto overflow-x-auto">
						<table class="w-full text-xs">
							<thead class="border-b bg-muted/10">
								<tr>
									<th class="px-4 py-2 text-left font-bold">Descripción</th>
									<th class="px-4 py-2 text-center font-bold">Permiso</th>
									<th class="px-4 py-2 text-center font-bold">D.O.F</th>
									<th class="px-4 py-2 text-center font-bold">Vigencia</th>
								</tr>
							</thead>
							<tbody class="divide-y">
								{#each sitarAcuerdosData as item}
									<tr>
										<td class="px-4 py-2 text-left">{item.DESCRIPCION || ''}</td>
										<td class="px-4 py-2 text-center font-mono">{item.PERMISO || '-'}</td>
										<td class="px-4 py-2 text-center font-mono">{item.DOF || '-'}</td>
										<td class="px-4 py-2 text-center font-mono">{item.VIGENCIA || '-'}</td>
									</tr>
								{:else}
									<tr>
										<td colspan="4" class="px-4 py-8 text-center text-muted-foreground italic">
											No hay información de ACUERDOS disponible para esta fracción.
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				</div>
			</Tabs.Content>
		</Tabs.Root>
		</div>
		{/if}
</div>
