<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Input, FilePickerInput } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import { LoaderCircle } from 'lucide-svelte';
	import {
		expedienteArchivosApi,
		type ExpedienteArchivo,
		type DigitalizarRequest
	} from '$lib/api/dashboard/a76/expediente-archivos';
	import { companyStore } from '$lib/stores/company.svelte';
	import { m } from '$lib/i18n/messages';

	let {
		open = $bindable(false),
		item,
		onSuccess
	}: {
		open: boolean;
		item: ExpedienteArchivo;
		onSuccess?: (taskId: string) => void;
	} = $props();

	let rfcConsulta = $state(item.rfc_consulta ?? '');
	let claveDocumento = $state(item.tipo_documento ?? '');
	let nombreArchivo = $state('');
	let archivoBase64 = $state('');
	let loading = $state(false);
	let error = $state<string | null>(null);

	$effect(() => {
		if (!open) {
			error = null;
			loading = false;
			nombreArchivo = '';
			archivoBase64 = '';
		} else {
			// Refrescar valores del item
			rfcConsulta = item.rfc_consulta ?? '';
			claveDocumento = item.tipo_documento ?? '';
		}
	});

	function handleFileChange(file: File) {
		if (!file) return;
		nombreArchivo = file.name;
		const reader = new FileReader();
		reader.onload = (e) => {
			const result = e.target?.result as string;
			// Strip "data:...;base64," prefix
			const idx = result.indexOf(',');
			archivoBase64 = idx >= 0 ? result.slice(idx + 1) : result;
		};
		reader.readAsDataURL(file);
	}

	async function handleSubmit() {
		if (loading) return;
		error = null;

		if (!rfcConsulta.trim()) {
			error = 'El RFC Consulta es obligatorio';
			return;
		}
		if (!claveDocumento.trim()) {
			error = 'La Clave Documento es obligatoria';
			return;
		}
		if (!archivoBase64) {
			error = 'Selecciona un archivo para digitalizar';
			return;
		}

		loading = true;
		try {
			const company = companyStore.activeCompany;
			if (!company) throw new Error('No hay compañía seleccionada');

			const body: DigitalizarRequest = {
				rfc_consulta: rfcConsulta.trim(),
				clave_documento: claveDocumento.trim(),
				nombre_archivo: nombreArchivo,
				archivo_base64: archivoBase64
			};

			const response = await expedienteArchivosApi.digitalizar(item.id, body, company.id);
			if (response.error) {
				const ve = (response as any).validationErrors;
				if (ve?.length) throw new Error(ve.map((e: any) => e.msg).join(' · '));
				throw new Error(response.error);
			}

			const taskId = response.data?.task_id;
			if (!taskId) throw new Error('No se recibió task_id del servidor');

			open = false;
			onSuccess?.(taskId);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Error desconocido';
		} finally {
			loading = false;
		}
	}
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
		<Dialog.Header>
			<Dialog.Title>{m['sidebar.digitalizacion.digitalizar_title']()}</Dialog.Title>
			<Dialog.Description>{m['sidebar.digitalizacion.digitalizar_subtitle']()}</Dialog.Description>
		</Dialog.Header>

		<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-6">
			{#if error}
				<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
					{error}
				</div>
			{/if}

			<div class="grid gap-4 py-4">
			<!-- RFC Consulta -->
			<div class="space-y-2">
				<Label for="dg_rfc_consulta">{m['sidebar.digitalizacion.digitalizar_rfc_consulta']()}</Label>
				<Input
					id="dg_rfc_consulta"
					bind:value={rfcConsulta}
					placeholder="RFC"
					maxlength={13}
					disabled={loading}
				/>
			</div>

			<!-- Clave Documento -->
			<div class="space-y-2">
				<Label for="dg_clave_documento">{m['sidebar.digitalizacion.digitalizar_clave_documento']()}</Label>
				<Input
					id="dg_clave_documento"
					bind:value={claveDocumento}
					placeholder="Ej. A1"
					maxlength={10}
					disabled={loading}
				/>
			</div>

			<!-- Archivo -->
			<div class="space-y-2">
				<Label for="dg_file">{m['sidebar.digitalizacion.digitalizar_file_label']()}</Label>
				<FilePickerInput
					id="dg_file"
					value={nombreArchivo}
					placeholder="Seleccionar archivo para digitalizar"
					accept=".pdf,.xml,.png,.jpg,.jpeg"
					disabled={loading}
					onchange={handleFileChange}
				/>
				{#if nombreArchivo}
					<p class="mt-1 text-xs text-muted-foreground">{nombreArchivo}</p>
				{/if}
			</div>
			</div>

			<Dialog.Footer class="flex justify-end gap-2 pt-2">
				<Button type="button" variant="outline" onclick={() => (open = false)} disabled={loading}>
					Cancelar
				</Button>
				<Button type="submit" disabled={loading || !archivoBase64}>
					{#if loading}
						<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
					{/if}
					Digitalizar
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>
