<script lang="ts">
    import type { Invoice } from '$lib/api/dashboard/a76/invoices';
    import { Button } from '$lib/components/ui/button';
    import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
    // 1. Agregamos FileDown a los imports
    import { Ellipsis, Eye, Pencil, Trash2 } from 'lucide-svelte';
    import DetailsDialog from './details-dialog.svelte';
    import DeleteDialog from './delete-dialog.svelte';

    interface Props {
        invoice: Invoice;
        onSuccess?: () => void;
    }

    // 3. Desestructuramos onDownload de los props
    let { invoice, onSuccess }: Props = $props();
    
    let showDetails = $state(false);
    let showDelete = $state(false);

    function handleEdit() {
        window.location.href = `/dashboard/invoices/edit/${invoice.id}`;
    }

</script>

<DropdownMenu.Root>
    <DropdownMenu.Trigger>
        {#snippet child({ props })}
            <Button {...props} variant="ghost" size="icon" class="h-8 w-8 p-0">
                <span class="sr-only">Abrir menú</span>
                <Ellipsis class="h-4 w-4" />
            </Button>
        {/snippet}
    </DropdownMenu.Trigger>
    <DropdownMenu.Content align="end">
        <DropdownMenu.Label>Acciones</DropdownMenu.Label>
        <DropdownMenu.Separator />
        
        <DropdownMenu.Item onclick={() => showDetails = true}>
            <Eye class="mr-2 h-4 w-4" />
            Ver Detalles
        </DropdownMenu.Item>


        <DropdownMenu.Item onclick={handleEdit}>
            <Pencil class="mr-2 h-4 w-4" />
            Editar
        </DropdownMenu.Item>

        <DropdownMenu.Separator />
        <DropdownMenu.Item onclick={() => showDelete = true} class="text-destructive">
            <Trash2 class="mr-2 h-4 w-4" />
            Eliminar
        </DropdownMenu.Item>
    </DropdownMenu.Content>
</DropdownMenu.Root>

{#if showDetails}
    <DetailsDialog 
        invoice={invoice}
        onClose={() => showDetails = false}
    />
{/if}

{#if showDelete}
    <DeleteDialog
        invoice={invoice}
        onClose={() => showDelete = false}
        {onSuccess}
    />
{/if}