<script lang="ts">
	import { Button } from "$lib/components/ui/button";
	import * as AlertDialog from "$lib/components/ui/alert-dialog";
	import { codePedimentoRegimensApi, type CodePedimentoRegimen } from "$lib/api/dashboard/reference_data/code_pedimento_regimens";
	import { LoaderCircle } from 'lucide-svelte';

	let {
		open = $bindable(false),
		item,
		onSuccess
	}: {
		open: boolean;
		item: CodePedimentoRegimen | null;
		onSuccess?: () => void;
	} = $props();

	let loading = $state(false);
	let error = $state<string | null>(null);

	async function handleDelete() {
		if (!item) return;

		loading = true;
		error = null;

		try {
			const response = await codePedimentoRegimensApi.delete(item.id);

			if (response.error) {
				error = response.error;
				return;
			}

			// Éxito
			open = false;
			if (onSuccess) {
				onSuccess();
			}
		} catch (e) {
			error = e instanceof Error ? e.message : "Error al eliminar";
			console.error("Error deleting:", e);
		} finally {
			loading = false;
		}
	}

	function handleOpenChange(newOpen: boolean) {
		if (!newOpen) {
			error = null;
		}
		open = newOpen;
	}
</script>

<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
			<AlertDialog.Description class="space-y-2">
				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este registro:</p>
				{#if item}
					<div class="mt-2 rounded-lg bg-muted p-3 space-y-1">
						<div class="flex items-center justify-between text-sm">
							<span class="font-medium">ID:</span>
							<span class="font-mono">{item.id}</span>
						</div>
						<div class="flex items-center justify-between text-sm">
							<span class="font-medium">Código Pedimento:</span>
							<code class="font-mono">{item.pedimento_code}</code>
						</div>
						{#if item.regimen_code}
							<div class="flex items-center justify-between text-sm">
								<span class="font-medium">Código Régimen:</span>
								<code class="font-mono">{item.regimen_code}</code>
							</div>
						{/if}
					</div>
				{/if}
				{#if error}
					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
						{error}
					</div>
				{/if}
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
			<AlertDialog.Action
				onclick={handleDelete}
				disabled={loading}
				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
			>
				{#if loading}
					<svg
						class="mr-2 h-4 w-4 animate-spin"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
					>
						<circle
							class="opacity-25"
							cx="12"
							cy="12"
							r="10"
							stroke="currentColor"
							stroke-width="4"
						></circle>
						<path
							class="opacity-75"
							fill="currentColor"
							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
						></path>
					</svg>
				{/if}
				Eliminar
			</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>
