@props([
    'id',
    'title' => 'Confirm Action',
])

<div x-data="{
        open: false,
        lastActiveElement: null,
        close() {
            this.open = false;
            const currentCount = Number(document.body.dataset.modalCount || '0');
            const nextCount = Math.max(0, currentCount - 1);
            document.body.dataset.modalCount = String(nextCount);
            if (nextCount === 0) {
                document.body.classList.remove('overflow-hidden');
            }
            this.$nextTick(() => this.lastActiveElement?.focus?.());
        },
        show(event) {
            this.lastActiveElement = event?.target?.closest('button, a, input, select, textarea, [tabindex]') || document.activeElement;
            this.open = true;
            this.$nextTick(() => {
                const currentCount = Number(document.body.dataset.modalCount || '0') + 1;
                document.body.dataset.modalCount = String(currentCount);
                document.body.classList.add('overflow-hidden');
                this.$el.querySelector('[data-modal-close]')?.focus();
            });
        },
    }" id="{{ $id }}-wrapper"
     @keydown.escape.window="if (open) close()">

    
    <span @click.capture="show($event)">
        {{ $trigger }}
    </span>

    <template x-teleport="body">
        <div
            x-show="open"
            x-transition:enter="ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-[70] flex items-center justify-center p-4"
            style="display: none;"
        >
            
            <div
                class="absolute inset-0 bg-surface-900/45 backdrop-blur-sm"
                @click="close()"
            ></div>

            
            <div
                x-show="open"
                x-transition:enter="ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95 translate-y-1"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="ease-in duration-150"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-0 scale-95 translate-y-1"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ $id }}-title"
                @keydown.tab="
                    const focusable = [...$el.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=&quot;-1&quot;])')];
                    if (!focusable.length) return;
                    const first = focusable[0];
                    const last = focusable[focusable.length - 1];
                    if ($event.shiftKey && document.activeElement === first) { $event.preventDefault(); last.focus(); }
                    if (!$event.shiftKey && document.activeElement === last) { $event.preventDefault(); first.focus(); }
                "
                class="relative z-10 w-full max-w-md rounded-2xl border border-surface-100 bg-white shadow-soft-lg"
            >
                
                <div class="flex items-center justify-between px-6 py-4 border-b border-surface-100">
                    <h3 id="{{ $id }}-title" class="font-display text-lg font-semibold text-surface-900">{{ $title }}</h3>
                    <button
                        type="button"
                        data-modal-close
                        @click="close()"
                        class="w-8 h-8 rounded-xl flex items-center justify-center
                               text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors"
                        aria-label="Close"
                    >
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                
                <div class="px-6 py-5 text-sm text-surface-600">
                    {{ $body }}
                </div>

                
                @isset($footer)
                    <div class="flex items-center justify-end gap-3 px-6 py-4 bg-surface-50 rounded-b-2xl border-t border-surface-100">
                        {{ $footer }}
                    </div>
                @endisset
            </div>
        </div>
    </template>
</div>