<div
    x-data="propertyQuickActions({
        propertyId: @js($property->id),
        deleteUrl: @js(route('properties.destroy', $property)),
        redirectAfterDelete: @js($redirectAfterDelete ?? null),
        removeRowOnDelete: @js($removeRowOnDelete ?? false),
    })"
    class="inline-flex"
    @keydown.escape.window="confirmDelete = false"
>
    <button
        type="button"
        class="rounded-lg border border-red-200 p-1.5 text-red-600 hover:bg-red-50 disabled:opacity-60"
        :disabled="loading"
        @click="confirmDelete = true"
        title="Excluir imóvel"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.084 0 .167.002.25.006V3.75a1.25 1.25 0 00-2.5 0v.256A41.03 41.03 0 0110 4zm-1.25 5.25a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5zm4.5 0a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5z" clip-rule="evenodd" />
        </svg>
    </button>

    <div
        x-show="confirmDelete"
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4"
        @click.self="confirmDelete = false"
    >
        <div class="w-full max-w-sm rounded-xl bg-white p-5 shadow-lg" role="dialog" aria-modal="true">
            <h3 class="text-base font-semibold text-slate-900">Excluir imóvel?</h3>
            <p class="mt-2 text-sm text-slate-600">Esta ação remove o anúncio da carteira. Você pode cadastrá-lo novamente depois.</p>
            <p x-show="error" x-text="error" class="mt-2 text-sm text-red-600"></p>
            <div class="mt-4 flex justify-end gap-2">
                <button type="button" class="rounded-lg border border-slate-300 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50" @click="confirmDelete = false">
                    Cancelar
                </button>
                <button type="button" class="rounded-lg bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-500 disabled:opacity-60" :disabled="loading" @click="deleteProperty()">
                    Sim, excluir
                </button>
            </div>
        </div>
    </div>
</div>

@once
    @push('scripts')
        <script>
            function propertyQuickActions(config) {
                return {
                    ...config,
                    loading: false,
                    confirmDelete: false,
                    error: '',
                    csrfToken() {
                        return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
                    },
                    async deleteProperty() {
                        this.loading = true;
                        this.error = '';

                        try {
                            const response = await fetch(this.deleteUrl, {
                                method: 'DELETE',
                                headers: {
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': this.csrfToken(),
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                            });

                            if (!response.ok) {
                                throw new Error('Não foi possível excluir o imóvel.');
                            }

                            if (this.removeRowOnDelete) {
                                this.$root.closest('tr')?.remove();
                                this.confirmDelete = false;
                                return;
                            }

                            if (this.redirectAfterDelete) {
                                window.location.href = this.redirectAfterDelete;
                                return;
                            }

                            this.$dispatch('property-deleted', { id: this.propertyId });
                        } catch (error) {
                            this.error = error.message || 'Erro ao excluir imóvel.';
                        } finally {
                            this.loading = false;
                        }
                    },
                };
            }
        </script>
    @endpush
@endonce
