<script lang="ts">
    import { Button } from "$lib/components/ui/button";
    import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
    // 1. Cambiamos la API y el Tipo a Part
    import { partsApi, type Part } from "$lib/api/dashboard/a76/parts";
    import { companyStore } from "$lib/stores/company.svelte";
    import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
    import { goto } from "$app/navigation";

    let {
        item,
        onSuccess,
        canEdit = false,
        canDelete = false
    }: {
        item: Part; // Cambiado a Part
        onSuccess?: () => void;
        canEdit?: boolean;
        canDelete?: boolean;
    } = $props();

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

    async function handleDelete() {
        if (!canDelete) return;
        // 2. Ajustamos el mensaje de confirmación para que muestre el No. Parte
        if (!confirm(`¿Estás seguro de eliminar la parte "${item.part_number}"?`)) {
            return;
        }

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

        loading = true;
        error = null;

        try {
            // 3. Llamamos a la API de PARTES
            const response = await partsApi.delete(item.id, companyId);

            if (response.error) {
                if (response.status === 401) {
                    error = 'Sesión expirada. Recargando página...';
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    error = response.error;
                    alert(`Error al eliminar: ${response.error}`);
                }
                return;
            }

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

    function handleEdit() {
        if (!canEdit) return;
        // Redirigimos a la página de edición usando el ID
        goto(`/dashboard/goods/parts/edit/${item.id}`);
    }
</script>

{#if canEdit || canDelete}
<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 />
        {#if canEdit}
        <DropdownMenu.Item onSelect={handleEdit}>
            <Pencil size={16} class="mr-2" />
            <span>Editar</span>
        </DropdownMenu.Item>
        {/if}
        {#if canDelete}
        {#if canEdit}<DropdownMenu.Separator />{/if}
        <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>
        {/if}
    </DropdownMenu.Content>
</DropdownMenu.Root>
{/if}