<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import { EllipsisVertical, Pencil, Trash2, LoaderCircle } from 'lucide-svelte';
	import type { Seal } from '$lib/api/dashboard/a76/general_catalogs/seal';
	import { deleteSeal } from '$lib/api/dashboard/a76/general_catalogs/seal';
	import { companyStore } from '$lib/stores/company.svelte';
	import CreateEditDialog from './create-edit-dialog.svelte';

	let {
		item,
		onSuccess
	}: {
		item: Seal;
		onSuccess?: () => void;
	} = $props();

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

	async function handleDelete() {
		if (!confirm('¿Está seguro de que desea eliminar este sello?')) {
			return;
		}

		const companyId = companyStore.activeCompany?.id;
		if (!companyId) {
			alert('No hay compañía seleccionada');
			return;
		}

		loading = true;
		error = null;

		try {
			await deleteSeal(item.id, companyId);
			
			if (onSuccess) {
				onSuccess();
			}
		} catch (err: any) {
			error = err.message || 'Error al eliminar el sello';
			alert(`Error: ${error}`);
			console.error('Error deleting:', err);
		} finally {
			loading = false;
		}
	}

	function handleEdit() {
		selectedItem = item;
		dialogOpen = true;
	}

	function handleDialogSuccess() {
		dialogOpen = false;
		selectedItem = null;
		if (onSuccess) {
			onSuccess();
		}
	}
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		{#snippet child({ props })}
			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
				<span class="sr-only">Abrir menú</span>
				<EllipsisVertical size={16} />
			</Button>
		{/snippet}
	</DropdownMenu.Trigger>
	<DropdownMenu.Content align="end" class="w-[160px]">
		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
		<DropdownMenu.Separator />
		<DropdownMenu.Item onclick={handleEdit}>
			<Pencil size={16} class="mr-2" />
			Editar
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item onclick={handleDelete} class="text-destructive" disabled={loading}>
			{#if loading}
				<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
			{:else}
				<Trash2 size={16} class="mr-2" />
			{/if}
			Eliminar
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

<CreateEditDialog
	bind:open={dialogOpen}
	item={selectedItem}
	onSuccess={handleDialogSuccess}
/>
