@php
    // Rendered via App\View\Components\ActionsButtons, which supplies
    // these as public properties. The null-coalescing keeps the view
    // safe if a value is ever missing.
    $entityName = $entityName ?? ($name ?? '');
    $viewEvent = $viewEvent ?? '';
    $editEvent = $editEvent ?? '';
    $deleteEvent = $deleteEvent ?? '';
    $route = $route ?? null;
    $routeParam = $routeParam ?? null;
    $makeDefault = $makeDefault ?? false;
    $cannotDelete = $cannotDelete ?? false;
    $cannotDeleteMessage = $cannotDeleteMessage ?? 'This item cannot be deleted.';

    // When no explicit route param name is given, bind the entity
    // positionally so the URL generates regardless of the parameter
    // name ({ticket}, {pipeline}, {company}, ...).
    $routeUrl = null;
    if ($route) {
        $routeUrl = $routeParam
            ? route($route, [$routeParam => $entity->id, 'tab' => 'details'])
            : route($route, [$entity, 'tab' => 'details']);
    }
@endphp

<div
    wire:ignore.self
    x-data="{
        open: false,
        editEvent: @js($editEvent),
        deleteEvent: @js($deleteEvent),
        viewEvent: @js($viewEvent),
        entityName: @js($entityName),
        cannotDelete: @js((bool) $cannotDelete),
        cannotDeleteMessage: @js($cannotDeleteMessage),
        entityId: @js($entity->id),

        toggleDropdown($el) {
            this.open = !this.open;
            if (this.open) {
                this.$nextTick(() => {
                    const btn = $el.getBoundingClientRect();
                    const dropdown = this.$refs.dropdown;
                    const dropdownHeight = dropdown.offsetHeight;
                    const dropdownWidth = dropdown.offsetWidth;
                    const viewportHeight = window.innerHeight;
                    const viewportWidth = window.innerWidth;

                    let top = btn.bottom + 6;
                    let left = btn.right - dropdownWidth;

                    if (btn.bottom + dropdownHeight > viewportHeight - 10) {
                        top = btn.top - dropdownHeight - 6;
                    }

                    if (left < 10) left = 10;
                    if (btn.right > viewportWidth - 10)
                        left = viewportWidth - dropdownWidth - 10;

                    Object.assign(dropdown.style, {
                        position: 'fixed',
                        top: `${top}px`,
                        left: `${left}px`,
                    });
                });
            }
        },

        handleDelete() {
            this.open = false;

            Swal.fire({
                text: 'Are you sure you want to delete selected ' + this.entityName + '?',
                icon: 'warning',
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: 'Yes, delete!',
                cancelButtonText: 'No, cancel',
                customClass: {
                    confirmButton: 'btn fw-bold btn-danger',
                    cancelButton: 'btn fw-bold btn-active-light-primary'
                }
            }).then((result) => {
                if (result.value) {
                    if (!this.cannotDelete) {
                        Livewire.dispatch(this.deleteEvent, { id: this.entityId });

                        Swal.fire({
                            text: 'Selected ' + this.entityName + ' was deleted!',
                            icon: 'success',
                            buttonsStyling: false,
                            confirmButtonText: 'Ok, got it!',
                            customClass: { confirmButton: 'inline-flex items-center gap-2 rounded-xl bg-red-1 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-indigo-700 hover:shadow-md' }
                        });

                    } else {

                        Swal.fire({
                            text: this.cannotDeleteMessage,
                            icon: 'error',
                            buttonsStyling: false,
                            confirmButtonText: 'Ok, got it!',
                            customClass: {
                                confirmButton: 'inline-flex items-center gap-2 rounded-xl bg-red-1 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-indigo-700 hover:shadow-md',
                            }
                        })

                    }


                } else if (result.dismiss === 'cancel') {
                    Swal.fire({
                        text: this.entityName.charAt(0).toUpperCase() + this.entityName.slice(1) + ' was not deleted.',
                        icon: 'error',
                        buttonsStyling: false,
                        confirmButtonText: 'Ok, got it!',
                        customClass: { confirmButton: 'inline-flex items-center gap-2 rounded-xl bg-red-1 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-indigo-700 hover:shadow-md' }
                    });
                }
            });
        },
    }"
    class="relative inline-flex"
>
    <!-- Toggle Button -->
    <button
        type="button"
        @click="toggleDropdown($el)"
        class="py-2.5 px-4 inline-flex items-center gap-x-2 text-sm font-medium bg-white text-gray-800 focus:outline-hidden hover:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
        aria-haspopup="menu"
        :aria-expanded="open"
    >
        <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" />
        </svg>
    </button>

    <!-- Dropdown -->
    <template x-teleport="body">
        <div
            x-show="open"
            x-ref="dropdown"
            x-transition.origin.top.right
            x-cloak
            @click.outside="open = false"
            @keydown.escape.window="open = false"
            class="z-[9999] w-36 bg-white shadow-lg rounded-lg divide-y divide-gray-200 dark:bg-neutral-800 dark:divide-neutral-700 dark:border dark:border-neutral-700"
            style="display: none; position: fixed; top: 0; left: 0;"
            role="menu"
            aria-orientation="vertical"
        >
            <!-- Section 1 -->
            <div class="p-1 space-y-0.5">
                @if ($routeUrl || $viewEvent)
                    <a
                        @if ($routeUrl)
                            href="{{ $routeUrl }}"
                            @click="open = false"
                        @else
                            @click="open = false; Livewire.dispatch(viewEvent, { id: entityId })"
                        @endif
                        class="cursor-pointer flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700"
                    >
                        View {{ ucfirst($entityName) }}
                    </a>
                @endif

                <button
                    type="button"
                    @click="open = false; Livewire.dispatch(editEvent, { id: entityId })"
                    class="w-full text-left flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700"
                >
                    Edit {{ ucfirst($entityName) }}
                </button>

                @if ($makeDefault)

                    <button
                        type="button"
                        @click="open = false; Livewire.dispatch('makeDefault', { id: entityId })"
                        class="w-full text-left flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700"
                    >
                        Make Default
                    </button>
                @endif
            </div>

            <!-- Section 2 -->
            <div class="p-1 space-y-0.5">
                <button
                    type="button"
                    @click="handleDelete()"
                    class="w-full text-left flex items-center nowrap gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700"
                >
                    Delete {{ ucfirst($entityName) }}
                </button>
            </div>
        </div>
    </template>
</div>