<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import {
		Loader2,
		CheckCircle2,
		AlertTriangle,
		XCircle,
		FileText,
		UploadCloud
	} from 'lucide-svelte';
	import { tick } from 'svelte';
	import { api } from '$lib/api';

	let {
		open = $bindable(false),
		scanResults = null,
		commitResults = null,
		isUploading = false,
		scanErrorsDownloadType = 'imports',
		onConfirm,
		onCancel,
		onClose
	}: {
		open: boolean;
		scanResults: any;
		commitResults: any;
		isUploading: boolean;
		scanErrorsDownloadType?:
			| 'imports'
			| 'exportacion'
			| 'customs_brokers'
			| 'clients_providers'
			| 'exchange_rate'
			| 'us_tariff_fractions'
			| 'pedimentos'
			| 'classes'
			| 'vehicles'
			| 'drivers'
			| 'trailers'
			| 'transporters'
			| 'parts'
			| 'boms';
		onConfirm: () => void;
		onCancel: () => void;
		onClose: () => void;
	} = $props();

	// Determine state
	let isPending = $derived(!!scanResults && !commitResults);
	let isFinished = $derived(!!commitResults);

	// Derived metrics for UI logic
	let hasErrors = $derived(
		scanResults?.error_count > 0 ||
			commitResults?.skipped_invalid > 0 ||
			commitResults?.skipped_missing_fk > 0
	);

	let scanErrorsShown = $derived(Array.isArray(scanResults?.errors) ? scanResults.errors.length : 0);
	let scanErrorsTotal = $derived(scanResults?.error_count || 0);
	let scanErrorsTruncated = $derived(scanErrorsShown > 0 && scanErrorsShown < scanErrorsTotal);

	let totalSkipped = $derived(
		(commitResults?.skipped_invalid || 0) +
			(commitResults?.skipped_missing_fk || 0) +
			(commitResults?.skipped_missing_invoice || 0) +
			(commitResults?.skipped_duplicate || 0)
	);

	let insertedCount = $derived(commitResults?.inserted || 0);
	let updatedCount = $derived(commitResults?.updated || 0);
	// Algunos módulos usan `inserted` solo para altas y `updated` para modo "actualizar".
	// Para la UI, reflejamos "cambios positivos" como insertados + actualizados.
	let insertedOrUpdatedCount = $derived(insertedCount + updatedCount);

	function handleOpenChange(newOpen: boolean) {
		if (!newOpen) {
			if (isPending) onCancel();
			else onClose();
		}
		open = newOpen;
	}

	function csvEscape(value: unknown): string {
		const s = value === null || value === undefined ? '' : String(value);
		// Quote fields when they contain CSV-breaking characters.
		if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
		return s;
	}

	function downloadCsv(filename: string, headers: string[], rows: Array<Record<string, unknown>>, columns: string[]) {
		const delimiter = ','; // CSV por comas
		const lines: string[] = [];
		lines.push(headers.map(csvEscape).join(delimiter));
		for (const r of rows) {
			lines.push(columns.map((k) => csvEscape(r?.[k])).join(delimiter));
		}
		const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' });
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = filename;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
		URL.revokeObjectURL(url);
	}

	async function handleDownloadScanErrorsCsv() {
		const errors = scanResults?.errors;
		if (!Array.isArray(errors) || errors.length === 0) return;

		const jobId = scanResults?.job_id;

		// Try backend download (sin límite). If it fails, fallback to preview CSV.
		if (jobId) {
			try {
				let blob: Blob;
				switch (scanErrorsDownloadType) {
					case 'exportacion':
						blob = await api.exportacionImports.downloadScanErrorsCsv(jobId);
						break;
					case 'customs_brokers':
						blob = await api.customsBrokerImports.downloadScanErrorsCsv(jobId);
						break;
					case 'clients_providers':
						blob = await api.clientProviderImports.downloadScanErrorsCsv(jobId);
						break;
					case 'exchange_rate':
						blob = await api.exchangeRateImports.downloadScanErrorsCsv(jobId);
						break;
					case 'us_tariff_fractions':
						blob = await api.americanFractionImports.downloadScanErrorsCsv(jobId);
						break;
					case 'pedimentos':
						blob = await api.pedimentosImports.downloadScanErrorsCsv(jobId);
						break;
					case 'classes':
						blob = await api.materialClassImports.downloadScanErrorsCsv(jobId);
						break;
					case 'vehicles':
						blob = await api.vehicleImports.downloadScanErrorsCsv(jobId);
						break;
					case 'drivers':
						blob = await api.driverImports.downloadScanErrorsCsv(jobId);
						break;
					case 'trailers':
						blob = await api.trailerImports.downloadScanErrorsCsv(jobId);
						break;
					case 'transporters':
						blob = await api.transporterImports.downloadScanErrorsCsv(jobId);
						break;
					case 'parts':
						blob = await api.partNumberImports.downloadScanErrorsCsv(jobId);
						break;
					case 'boms':
						blob = await api.bomImports.downloadScanErrorsCsv(jobId);
						break;
					case 'imports':
					default:
						blob = await api.imports.downloadScanErrorsCsv(jobId);
						break;
				}

				const url = URL.createObjectURL(blob);
				const a = document.createElement('a');
				a.href = url;
				a.download = `errores_${jobId}.csv`;
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
				URL.revokeObjectURL(url);
				return;
			} catch (e) {
				// fallback below
			}
		}

		const filename = `errores_${Date.now()}.csv`;
		downloadCsv(
			filename,
			['linea', 'columna', 'mensaje', 'solucion'],
			errors,
			['line', 'col', 'msg', 'solution']
		);
	}

	function handleDownloadCommitSkippedDetailsCsv() {
		const details = commitResults?.skipped_details;
		if (!Array.isArray(details) || details.length === 0) return;

		// Table columns: line, invoice, reason, solution
		const filename = `errores_importacion_${Date.now()}.csv`;
		downloadCsv(
			filename,
			['linea', 'referencia', 'motivo', 'solucion'],
			details,
			['line', 'invoice', 'reason', 'solution']
		);
	}

	// When modal shows finished state with rejection details, scroll the detail table into view
	$effect(() => {
		if (open && isFinished && commitResults?.skipped_details?.length > 0) {
			tick().then(() => {
				const el = document.getElementById('detalle-errores-import');
				el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
			});
		}
	});
</script>

<Dialog.Root bind:open onOpenChange={handleOpenChange}>
	<Dialog.Content
		class="sm:max-w-[650px] p-0 gap-0 overflow-hidden border-0 shadow-xl flex flex-col max-h-[90vh] bg-background text-foreground"
	>
		<!-- Header Section with Theme Colors -->
		<div
			class="px-6 py-5 border-b flex items-start gap-4
			{isPending
				? 'bg-primary/5'
				: isFinished && !hasErrors
					? 'bg-green-50/50 dark:bg-green-900/10'
					: 'bg-destructive/5'}"
		>
			<div
				class="p-2 rounded-full ring-1 ring-inset
				{isPending
					? 'bg-primary/10 text-primary ring-primary/20'
					: isFinished && !hasErrors
						? 'bg-green-100 text-green-700 ring-green-200 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-900/40'
						: 'bg-destructive/10 text-destructive ring-destructive/20'}"
			>
				{#if isPending}
					<FileText class="w-6 h-6" />
				{:else if isFinished && !hasErrors}
					<CheckCircle2 class="w-6 h-6" />
				{:else}
					<AlertTriangle class="w-6 h-6" />
				{/if}
			</div>

			<div class="flex-1">
				<Dialog.Title class="text-xl font-semibold tracking-tight text-foreground">
					{#if isPending}
						Validación de Importación
					{:else if isFinished}
						{hasErrors ? 'Importación con Observaciones' : 'Importación Exitosa'}
					{/if}
				</Dialog.Title>
				<Dialog.Description class="mt-1 text-muted-foreground">
					{#if isPending}
						Revise el análisis preliminar antes de confirmar la carga de datos.
					{:else if isFinished}
						El proceso de importación ha finalizado.
					{/if}
				</Dialog.Description>
			</div>
		</div>

		<!-- Scrollable Content -->
		<div class="px-6 py-6 overflow-y-auto">
			<!-- PENDING STATE CONTENT -->
			{#if isPending}
				<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
					<!-- Card: Total -->
					<div
						class="bg-card p-4 rounded-lg border flex flex-col items-center justify-center text-center shadow-sm"
					>
						<span class="text-muted-foreground text-xs uppercase font-bold tracking-wider mb-1"
							>Total Filas</span
						>
						<span class="text-2xl font-bold text-foreground">{scanResults.total_rows || 0}</span>
					</div>

					<!-- Card: Valid -->
					<div
						class="bg-green-50/50 dark:bg-green-900/10 p-4 rounded-lg border border-green-100 dark:border-green-900/30 flex flex-col items-center justify-center text-center shadow-sm"
					>
						<span
							class="text-green-600 dark:text-green-400 text-xs uppercase font-bold tracking-wider mb-1"
							>Válidos</span
						>
						<span class="text-2xl font-bold text-green-700 dark:text-green-300"
							>{scanResults.valid_rows || 0}</span
						>
					</div>

					<!-- Card: Errors -->
					<div
						class="bg-destructive/5 p-4 rounded-lg border border-destructive/10 flex flex-col items-center justify-center text-center shadow-sm"
					>
						<span class="text-destructive text-xs uppercase font-bold tracking-wider mb-1"
							>Errores</span
						>
						<span class="text-2xl font-bold text-destructive">{scanResults.error_count || 0}</span>
					</div>
				</div>

				{#if scanResults.error_count > 0}
					<div
						class="rounded-md bg-destructive/5 border border-destructive/10 p-4 flex items-start gap-3 mb-4"
					>
						<XCircle class="w-5 h-5 text-destructive mt-0.5 shrink-0" />
						<div class="text-sm text-destructive-foreground/90">
							<p class="font-semibold mb-1">Se detectaron problemas en el archivo</p>
							<p>
								Corrija los datos indicados abajo en su CSV y vuelva a subir, o confirme para
								importar solo las filas válidas (las erróneas se omitirán).
							</p>
						</div>
					</div>
				{#if scanResults.errors && scanResults.errors.length > 0}
					<div class="border rounded-lg overflow-hidden shadow-sm">
						<div class="bg-muted/50 px-4 py-2 border-b flex justify-between items-center">
							<h5 class="text-xs font-bold text-foreground uppercase tracking-wide">
								Detalle de errores (para corregir en el CSV)
							</h5>
							<div class="flex items-center gap-2">
								<span
									class="text-[10px] bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full border"
								>
									{scanErrorsShown} de {scanErrorsTotal} error(es)
								</span>
								<Button
									variant="ghost"
									onclick={handleDownloadScanErrorsCsv}
									class="h-7 px-2 text-xs"
								>
									<FileText class="w-3.5 h-3.5 mr-1" />
									Descargar CSV
								</Button>
							</div>
						</div>
						<div class="max-h-60 overflow-y-auto bg-card relative">
							<table class="w-full text-xs text-left">
								<thead
									class="text-muted-foreground font-medium bg-muted/30 sticky top-0 z-10 shadow-sm backdrop-blur-sm"
								>
									<tr>
										<th class="px-4 py-2 w-16">Línea</th>
										<th class="px-4 py-2 w-40">Columna</th>
										<th class="px-4 py-2">Mensaje</th>
									<th class="px-4 py-2 min-w-[240px]">Solución</th>
									</tr>
								</thead>
								<tbody class="divide-y">
									{#each scanResults.errors as err}
										<tr class="hover:bg-muted/30 transition-colors {err.warning ? 'opacity-70' : ''}">
											<td class="px-4 py-2 font-mono text-muted-foreground">{err.line}</td>
											<td class="px-4 py-2 font-mono font-medium text-foreground">{err.col || '-'}</td>
											<td class="px-4 py-2 {err.warning ? 'text-amber-600 dark:text-amber-400' : 'text-destructive'}">{err.msg || '-'}</td>
										<td class="px-4 py-2 text-muted-foreground whitespace-pre-wrap">{err.solution || '-'}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
						{#if scanErrorsTruncated}
							<p class="text-xs text-muted-foreground px-4 py-2">
								Para consultar el resto de errores, descargue el CSV.
							</p>
						{/if}
					</div>
				{:else}
					<p class="text-sm text-muted-foreground mt-1">
						Se detectaron {scanResults.error_count} fila(s) con errores pero el detalle no está disponible. Asegúrese de que el servidor esté actualizado y vuelva a subir el archivo.
					</p>
				{/if}
				{:else}
					<div class="rounded-md bg-primary/5 border border-primary/10 p-4 flex items-start gap-3">
						<CheckCircle2 class="w-5 h-5 text-primary mt-0.5 shrink-0" />
						<div class="text-sm text-primary/90">
							<p class="font-semibold mb-1">Archivo validado correctamente</p>
							<p>Todos los registros parecen correctos y listos para importar.</p>
						</div>
					</div>
				{/if}
			{/if}

			<!-- FINISHED STATE CONTENT -->
			{#if isFinished}
				<div class="space-y-6">
					<!-- Simplified 2-Column Stats Grid -->
					<div class="grid grid-cols-2 gap-4">
						<!-- Inserted (Green) -->
						<div
							class="bg-green-50/50 dark:bg-green-900/10 p-4 rounded-lg border border-green-100 dark:border-green-900/30 flex flex-col items-center justify-center text-center shadow-sm"
						>
							<div class="flex items-center gap-2 mb-1">
								<CheckCircle2 class="w-4 h-4 text-green-600 dark:text-green-400" />
								<span
									class="text-green-600 dark:text-green-400 text-xs uppercase font-bold tracking-wider"
									>Insertados</span
								>
							</div>
							<span class="text-3xl font-bold text-green-700 dark:text-green-300"
								>{insertedOrUpdatedCount}</span
							>
							{#if updatedCount > 0}
								<p class="text-xs text-green-700 dark:text-green-300 mt-2">
									{insertedCount} insertados, {updatedCount} actualizados
								</p>
							{/if}
						</div>

						<!-- Rejected (Red) -->
						<div
							class="bg-destructive/5 p-4 rounded-lg border border-destructive/10 flex flex-col items-center justify-center text-center shadow-sm"
						>
							<div class="flex items-center gap-2 mb-1">
								<XCircle class="w-4 h-4 text-destructive" />
								<span class="text-destructive text-xs uppercase font-bold tracking-wider"
									>Rechazados</span
								>
							</div>
							<span class="text-3xl font-bold text-destructive">{totalSkipped}</span>
							{#if totalSkipped > 0 && commitResults.skipped_details && commitResults.skipped_details.length > 0}
								<p class="text-xs text-muted-foreground mt-2">
									Revisa el detalle por línea en la tabla inferior.
								</p>
							{/if}
						</div>
					</div>

					<!-- Error Details Table -->
					{#if commitResults.skipped_details && commitResults.skipped_details.length > 0}
						<div id="detalle-errores-import" class="border rounded-lg overflow-hidden mt-2 shadow-sm">
							<div class="bg-muted/50 px-4 py-2 border-b flex justify-between items-center">
								<h5 class="text-xs font-bold text-foreground uppercase tracking-wide">
									Detalle de Errores
								</h5>
						<div class="flex items-center gap-2">
							<span
								class="text-[10px] bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full border"
							>
								{commitResults.skipped_details.length} filas
							</span>
							<Button
								variant="ghost"
								onclick={handleDownloadCommitSkippedDetailsCsv}
								class="h-7 px-2 text-xs"
							>
								<FileText class="w-3.5 h-3.5 mr-1" />
								Descargar CSV
							</Button>
						</div>
							</div>
							<div class="max-h-60 overflow-y-auto bg-card relative">
								<table class="w-full text-xs text-left">
									<thead
										class="text-muted-foreground font-medium bg-muted/30 sticky top-0 z-10 shadow-sm backdrop-blur-sm"
									>
										<tr>
											<th class="px-4 py-2 w-20">Línea</th>
											<th class="px-4 py-2 w-32">Referencia</th>
											<th class="px-4 py-2">Motivo</th>
											<th class="px-4 py-2 min-w-[240px]">Solución</th>
										</tr>
									</thead>
									<tbody class="divide-y">
										{#each commitResults.skipped_details as detail}
											<tr class="hover:bg-muted/30 transition-colors">
												<td class="px-4 py-2 font-mono text-muted-foreground">{detail.line}</td>
												<td class="px-4 py-2 font-mono font-medium text-foreground"
													>{detail.invoice || '-'}</td
												>
												<td class="px-4 py-2 text-destructive">{detail.reason}</td>
												<td class="px-4 py-2 text-muted-foreground whitespace-pre-wrap">{detail.solution || '-'}</td>
											</tr>
										{/each}
									</tbody>
								</table>
							</div>
						</div>
					{/if}
				</div>
			{/if}
		</div>

		<!-- Footer Actions -->
		<div class="px-6 py-4 bg-muted/20 border-t flex items-center justify-end gap-3">
			{#if isPending}
				<Button
					variant="ghost"
					onclick={onCancel}
					disabled={isUploading}
					class="text-muted-foreground hover:bg-muted/50"
				>
					Cancelar Operación
				</Button>
				<Button
					onclick={onConfirm}
					disabled={isUploading}
					class="bg-primary hover:bg-primary/90 text-primary-foreground min-w-[140px] shadow-sm"
				>
					{#if isUploading}
						<Loader2 class="mr-2 h-4 w-4 animate-spin" />
						Procesando...
					{:else}
						<UploadCloud class="mr-2 h-4 w-4" />
						Confirmar Carga
					{/if}
				</Button>
			{:else if isFinished}
				<Button variant="outline" onclick={onClose} class="min-w-[100px]">Cerrar</Button>
			{/if}
		</div>
	</Dialog.Content>
</Dialog.Root>
