<script lang="ts">
	import { Card, CardContent } 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 { Textarea } from '$lib/components/ui/textarea';
	import {
		Plus,
		Pencil,
		Trash2,
		Upload,
		FileText,
		Search,
		FolderOpen,
		CheckCircle,
		ChevronsLeft,
		ChevronLeft,
		ChevronRight,
		ChevronsRight
	} from 'lucide-svelte';
	import { documentTypesDigitizationApi, type DocumentTypeDigitization } from '$lib/api/dashboard/reference_data/document_types_digitization';
	import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';
	import { companyStore } from '$lib/stores/company.svelte';
	import PedimentoSelectorDialog from '$lib/components/dashboard/pedimentos/edit/pedimento-selector-dialog.svelte';

	interface Digitalizacion {
		id?: number;
		linea: number;
		tipo_documento: string;
		pedimento: string;
		ruta_archivo_pdf: string;
		observaciones: string;
		e_document: string;
		numero_operacion_vu: string;
	}

	let {
		formData = $bindable({
			digitalizaciones: [] as Digitalizacion[]
		})
	}: {
		formData: {
			digitalizaciones: Digitalizacion[];
		};
	} = $props();

	// Estados para diálogo
	let isDialogOpen = $state(false);
	let editingIndex = $state<number | null>(null);
	let isTipoDocumentoDialogOpen = $state(false);
	let isPedimentoDialogOpen = $state(false);

	// Tipos de documentos disponibles (cargados desde el backend)
	let tiposDocumentos = $state<DocumentTypeDigitization[]>([]);
	let isLoadingTiposDocumentos = $state(false);
	let errorLoadingTiposDocumentos = $state<string | null>(null);

	// Cargar tipos de documentos desde el backend
	async function cargarTiposDocumentos() {
		try {
			isLoadingTiposDocumentos = true;
			errorLoadingTiposDocumentos = null;
			const companyId = companyStore.activeCompany?.id;
			if (!companyId) {
				errorLoadingTiposDocumentos = 'No hay empresa activa seleccionada';
				tiposDocumentos = [];
				return;
			}
			const response = await documentTypesDigitizationApi.getAll(companyId, true);
			tiposDocumentos = response.data?.items || [];
		} catch (error) {
			console.error('Error al cargar tipos de documentos:', error);
			errorLoadingTiposDocumentos = 'Error al cargar los tipos de documentos';
			// Si falla, usar array vacío para que el componente siga funcionando
			tiposDocumentos = [];
		} finally {
			isLoadingTiposDocumentos = false;
		}
	}

	// Filtro de búsqueda para tipos de documentos
	let tipoDocumentoBusqueda = $state('');

	// Tipos de documentos filtrados
	const tiposDocumentosFiltrados = $derived(
		tipoDocumentoBusqueda.trim() === ''
			? tiposDocumentos
			: tiposDocumentos.filter(
					(td) =>
						td.code.toLowerCase().includes(tipoDocumentoBusqueda.toLowerCase()) ||
						td.description.toLowerCase().includes(tipoDocumentoBusqueda.toLowerCase())
			  )
	);

	// Paginación
	let currentPage = $state(0);
	let pageSize = 10;

	let currentDigitalizacion = $state<Digitalizacion>({
		linea: 0,
		tipo_documento: '',
		pedimento: '',
		ruta_archivo_pdf: '',
		observaciones: '',
		e_document: '',
		numero_operacion_vu: ''
	});

	// Referencias para los inputs de archivo
	let fileInputRef: HTMLInputElement;

	const totalPages = $derived(
		Math.ceil((formData?.digitalizaciones?.length ?? 0) / pageSize)
	);

	const paginatedDigitalizaciones = $derived(
		formData?.digitalizaciones?.slice(
			currentPage * pageSize,
			(currentPage + 1) * pageSize
		) ?? []
	);

	function openNewDigitalizacion() {		
		editingIndex = null;
		const nextLinea = formData?.digitalizaciones?.length
			? Math.max(...formData.digitalizaciones.map((d) => d.linea)) + 1
			: 1;
		currentDigitalizacion = {
			linea: nextLinea,
			tipo_documento: '',
			pedimento: '',
			ruta_archivo_pdf: '',
			observaciones: '',
			e_document: '',
			numero_operacion_vu: ''
		};		
		isDialogOpen = true;		
	}

	function openEditDigitalizacion(index: number) {
		if (!formData?.digitalizaciones) return;
		const realIndex = currentPage * pageSize + index;
		editingIndex = realIndex;
		currentDigitalizacion = { ...formData.digitalizaciones[realIndex] };
		isDialogOpen = true;
	}

	function saveDigitalizacion() {
		if (!formData?.digitalizaciones) return;
		if (editingIndex !== null) {
			formData.digitalizaciones[editingIndex] = { ...currentDigitalizacion };
		} else {
			formData.digitalizaciones = [...formData.digitalizaciones, { ...currentDigitalizacion }];
		}
		isDialogOpen = false;
	}

	function deleteDigitalizacion(index: number) {
		if (!formData?.digitalizaciones) return;
		const realIndex = currentPage * pageSize + index;
		if (confirm('¿Está seguro de eliminar esta digitalización?')) {
			formData.digitalizaciones = formData.digitalizaciones.filter((_, i) => i !== realIndex);
			// Reordenar líneas
			formData.digitalizaciones = formData.digitalizaciones.map((d, idx) => ({
				...d,
				linea: idx + 1
			}));
			// Ajustar página si es necesario
			if (paginatedDigitalizaciones.length === 0 && currentPage > 0) {
				currentPage--;
			}
		}
	}

	function digitalizarVU() {
		alert('Digitalizar en VU no implementado aún');
	}

	function acuseDigitalizacion() {
		alert('Acuse de Digitalización no implementado aún');
	}

	function procesarDigitalizacion() {
		alert('Procesar Digitalización no implementado aún');
	}

	function consultarOperacion() {
		alert('Consultar Operación no implementado aún');
	}

	function abrirDocumento() {
		alert('Abrir Documento no implementado aún');
	}

	function cargarEDocument() {
		alert('Cargar E-Document no implementado aún');
	}

	async function seleccionarRutaArchivo() {
		try {
			// Usar la File System Access API si está disponible
			if ('showSaveFilePicker' in window) {
				// @ts-ignore - API moderna del navegador
				const handle = await window.showSaveFilePicker({
					suggestedName: 'documento.pdf',
					types: [
						{
							description: 'PDF Files',
							accept: { 'application/pdf': ['.pdf'] }
						}
					]
				});
				
				// Obtener la ruta (nombre del archivo seleccionado)
				currentDigitalizacion.ruta_archivo_pdf = handle.name;
			} else {
				// Fallback para navegadores que no soportan la API
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = '.pdf';
				
				input.onchange = (e: Event) => {
					const target = e.target as HTMLInputElement;
					if (target.files && target.files.length > 0) {
						const file = target.files[0];
						currentDigitalizacion.ruta_archivo_pdf = file.name;
					}
				};
				
				input.click();
			}
		} catch (error) {
			// Usuario canceló la selección
			console.error('Selección de archivo cancelada: ', error);
		}
	}

	function goToFirstPage() {
		currentPage = 0;
	}

	function goToPreviousPage() {
		if (currentPage > 0) currentPage--;
	}

	function goToNextPage() {
		if (currentPage < totalPages - 1) currentPage++;
	}

	function goToLastPage() {
		currentPage = totalPages - 1;
	}

	function abrirTiposDocumentos() {
		tipoDocumentoBusqueda = '';
		// Cargar los tipos de documentos si aún no se han cargado
		if (tiposDocumentos.length === 0 && !isLoadingTiposDocumentos) {
			cargarTiposDocumentos();
		}
		isTipoDocumentoDialogOpen = true;
	}

	function seleccionarTipoDocumento(code: string) {
		currentDigitalizacion.tipo_documento = code;
		isTipoDocumentoDialogOpen = false;
	}

	function seleccionarPedimento(pedimento: Pedimento) {
		currentDigitalizacion.pedimento = `${pedimento.customs_office?.slice(0, 2) || ''}-${pedimento.license || ''}-${pedimento.pedimento_number || ''}`.replace(
			/^-+|-+$/g,
			''
		);
	}

</script>

<Card>
	<CardContent class="p-6 space-y-4">
		<!-- Tabla de digitalizaciones -->
		<div class="border rounded-lg overflow-hidden">
			<Table>
				<TableHeader>
					<TableRow>
						<TableHead class="w-[80px]">Línea</TableHead>
									<TableHead>Tipo Documento</TableHead>
									<TableHead>Ruta Archivo PDF</TableHead>
									<TableHead>E-Document</TableHead>
									<TableHead>Núm. Operación V.U</TableHead>
										<TableHead>Observaciones</TableHead>
						<TableHead class="w-[100px]">Acciones</TableHead>
					</TableRow>
				</TableHeader>
				<TableBody>
					{#if !formData?.digitalizaciones || formData.digitalizaciones.length === 0}
						<TableRow>
							<TableCell colspan={7} class="text-center text-muted-foreground py-8">
								No hay digitalizaciones registradas
							</TableCell>
						</TableRow>
					{:else if paginatedDigitalizaciones.length === 0}
						<TableRow>
							<TableCell colspan={7} class="text-center text-muted-foreground py-8">
								No hay datos en esta página
							</TableCell>
						</TableRow>
					{:else}
						{#each paginatedDigitalizaciones as digitalizacion, index}
							<TableRow>
								<TableCell class="font-medium">{digitalizacion.linea}</TableCell>
								<TableCell>{digitalizacion.tipo_documento}</TableCell>
								<TableCell>{digitalizacion.ruta_archivo_pdf}</TableCell>
								<TableCell>{digitalizacion.e_document}</TableCell>
								<TableCell>{digitalizacion.numero_operacion_vu}</TableCell>
								<TableCell class="max-w-[200px] truncate" title={digitalizacion.observaciones}>
									{digitalizacion.observaciones}
								</TableCell>
								<TableCell>
									<div class="flex gap-1">
										<Button
											size="sm"
											variant="ghost"
											onclick={() => openEditDigitalizacion(index)}
										>
											<Pencil size={14} />
										</Button>
										<Button size="sm" variant="ghost" onclick={() => deleteDigitalizacion(index)}>
											<Trash2 size={14} />
										</Button>
									</div>
								</TableCell>
							</TableRow>
						{/each}
					{/if}
				</TableBody>
			</Table>
		</div>

		<!-- Controles de paginación -->
		{#if formData?.digitalizaciones && formData.digitalizaciones.length > 0}
			<div class="flex items-center justify-center gap-2 border-t pt-3">
				<Button
					size="sm"
					variant="outline"
					onclick={goToFirstPage}
					disabled={currentPage === 0}
					class="w-8 h-8 p-0"
				>
					<ChevronsLeft size={16} />
				</Button>
				<Button
					size="sm"
					variant="outline"
					onclick={goToPreviousPage}
					disabled={currentPage === 0}
					class="w-8 h-8 p-0"
				>
					<ChevronLeft size={16} />
				</Button>
				<span class="text-sm text-muted-foreground px-2">
					Página {currentPage + 1} de {totalPages || 1}
				</span>
				<Button
					size="sm"
					variant="outline"
					onclick={goToNextPage}
					disabled={currentPage >= totalPages - 1}
					class="w-8 h-8 p-0"
				>
					<ChevronRight size={16} />
				</Button>
				<Button
					size="sm"
					variant="outline"
					onclick={goToLastPage}
					disabled={currentPage >= totalPages - 1}
					class="w-8 h-8 p-0"
				>
					<ChevronsRight size={16} />
				</Button>
			</div>
		{/if}

		<!-- Botones de acción -->
		<div class="flex flex-wrap gap-2 border-t pt-4">
			<Button size="sm" variant="outline" onclick={digitalizarVU}>
				<Upload class="mr-1.5" size={14} />
				Digitalizar en VU
			</Button>
			<Button size="sm" variant="outline" onclick={acuseDigitalizacion}>
				<CheckCircle class="mr-1.5" size={14} />
				Acuse de Digitalización
			</Button>
			<Button size="sm" variant="outline" onclick={procesarDigitalizacion}>
				<FileText class="mr-1.5" size={14} />
				Procesar Digitalización
			</Button>
			<Button size="sm" onclick={openNewDigitalizacion}>
				<Plus class="mr-1.5" size={14} />
				Nuevo
			</Button>
			<Button
				size="sm"
				variant="outline"
				disabled={formData?.digitalizaciones?.length === 0}
				onclick={() => {
					if (paginatedDigitalizaciones[0]) openEditDigitalizacion(0);
				}}
			>
				<Pencil class="mr-1.5" size={14} />
				Editar
			</Button>
			<Button
				size="sm"
				variant="destructive"
				disabled={formData?.digitalizaciones?.length === 0}
				onclick={() => {
					if (paginatedDigitalizaciones[0]) deleteDigitalizacion(0);
				}}
			>
				<Trash2 class="mr-1.5" size={14} />
				Borrar
			</Button>
			<Button size="sm" variant="outline" onclick={consultarOperacion}>
				<Search class="mr-1.5" size={14} />
				Consultar Operación
			</Button>
			<Button size="sm" variant="outline" onclick={abrirDocumento}>
				<FolderOpen class="mr-1.5" size={14} />
				Abrir Documento
			</Button>
			<Button size="sm" variant="outline" onclick={cargarEDocument}>
				<Upload class="mr-1.5" size={14} />
				Cargar E-Document
			</Button>
		</div>
	</CardContent>
</Card>

<!-- Dialog para Digitalización -->
<Dialog bind:open={isDialogOpen}>
	<DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
		<DialogHeader>
			<DialogTitle>Digitalización {currentDigitalizacion.linea}</DialogTitle>
		</DialogHeader>

		<div class="grid gap-4 py-4">
			<div class="space-y-2">
				<Label for="linea">Línea:</Label>
				<Input
					id="linea"
					type="number"
					bind:value={currentDigitalizacion.linea}
					readonly
					class="bg-muted"
				/>
			</div>

			<div class="space-y-2">
				<Label for="tipo_documento">Tipo Documento:</Label>
				<div class="flex gap-2">
					<Input
						id="tipo_documento"
							value={currentDigitalizacion.tipo_documento}
							placeholder="Selecciona desde el catálogo"
							class="flex-1 bg-muted"
							readonly
							disabled
					/>
						<Button size="icon" variant="outline" onclick={abrirTiposDocumentos} type="button">
						<FolderOpen class="h-4 w-4" />
					</Button>
				</div>
					<p class="text-xs text-muted-foreground">
						Solo lectura. Usa el botón para elegir desde el catálogo de tipos de documento.
					</p>
			</div>

			<div class="space-y-2">
				<Label for="pedimento">Pedimento</Label>
				<div class="flex gap-2">
					<Input
						id="pedimento"
						value={currentDigitalizacion.pedimento}
						placeholder="Selecciona desde el catálogo de pedimentos"
						class="flex-1 bg-muted"
						readonly
						disabled
					/>
					<Button size="icon" variant="outline" onclick={() => (isPedimentoDialogOpen = true)} type="button">
						<Search class="h-4 w-4" />
					</Button>
				</div>
			</div>

			<div class="space-y-2">
				<Label for="ruta_archivo_pdf">Ruta del archivo PDF:</Label>
				<div class="flex gap-2">
					<Input
						id="ruta_archivo_pdf"
						bind:value={currentDigitalizacion.ruta_archivo_pdf}
						placeholder="Escriba la ruta o use el botón para seleccionar"
						class="flex-1"
					/>
					<Button size="icon" variant="outline" onclick={seleccionarRutaArchivo} type="button">
						<FolderOpen class="h-4 w-4" />
					</Button>
				</div>
			</div>

			<div class="space-y-2">
				<Label for="observaciones">Observaciones:</Label>
				<Textarea
					id="observaciones"
					bind:value={currentDigitalizacion.observaciones}
					placeholder=""
					rows={5}
				/>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="e_document">E-Document:</Label>
					<Input
						id="e_document"
						bind:value={currentDigitalizacion.e_document}
						placeholder=""
					/>
				</div>

				<div class="space-y-2">
					<Label for="numero_operacion_vu">Núm. de Operación V.U:</Label>
					<Input
						id="numero_operacion_vu"
						bind:value={currentDigitalizacion.numero_operacion_vu}
						placeholder=""
					/>
				</div>
			</div>
		</div>

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

<PedimentoSelectorDialog bind:open={isPedimentoDialogOpen} onSelect={seleccionarPedimento} />

<!-- Dialog para Seleccionar Tipo de Documento -->
<Dialog bind:open={isTipoDocumentoDialogOpen}>
	<DialogContent class="!max-w-[50vw] !w-[50vw] max-h-[85vh] h-[85vh] flex flex-col p-6">
		<DialogHeader class="shrink-0">
			<DialogTitle>DIGITALIZACIÓN TIPOS DE DOCUMENTOS</DialogTitle>
		</DialogHeader>

		<div class="space-y-4 flex-1 min-h-0 flex flex-col overflow-hidden">
			<!-- Campo de búsqueda -->
			<div class="flex items-center gap-2 shrink-0">
				<Label for="buscar_tipo" class="whitespace-nowrap min-w-[60px]">Buscar:</Label>
				<Input
					id="buscar_tipo"
					bind:value={tipoDocumentoBusqueda}
					placeholder="Buscar por código o descripción..."
					class="flex-1"
				/>
			</div>

			<!-- Tabla de tipos de documentos -->
			<div class="border rounded-lg flex-1 min-h-0 overflow-hidden">
				{#if isLoadingTiposDocumentos}
					<div class="text-center py-8 text-muted-foreground">
						Cargando tipos de documentos...
					</div>
				{:else if errorLoadingTiposDocumentos}
					<div class="text-center py-8 text-destructive">
						{errorLoadingTiposDocumentos}
					</div>
				{:else}
					<div class="overflow-y-auto h-full">
						<Table>
							<TableHeader class="bg-background border-b">
								<TableRow>
									<TableHead class="w-[100px]">Código</TableHead>
									<TableHead>Descripción</TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{#if tiposDocumentosFiltrados.length === 0}
									<TableRow>
										<TableCell colspan={2} class="text-center text-muted-foreground py-8">
											No se encontraron tipos de documentos
										</TableCell>
									</TableRow>
								{:else}
									{#each tiposDocumentosFiltrados as tipo}
										<TableRow 
											class="cursor-pointer hover:bg-muted/50"
											onclick={() => seleccionarTipoDocumento(tipo.code)}
										>
											<TableCell class="font-medium">{tipo.code}</TableCell>
											<TableCell class="break-words whitespace-normal">{tipo.description}</TableCell>
										</TableRow>
									{/each}
								{/if}
							</TableBody>
						</Table>
					</div>
				{/if}
			</div>
		</div>

		<DialogFooter>
			<Button variant="outline" onclick={() => (isTipoDocumentoDialogOpen = false)}>
				Cancelar
			</Button>
			<Button 
				variant="default"
				onclick={() => (isTipoDocumentoDialogOpen = false)}
			>
				Cerrar
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>
