@props([
    'action',
    'method' => 'POST',
    'title' => 'Confirmar?',
    'message' => 'Deseja continuar com esta ação?',
    'confirmLabel' => 'Confirmar',
    'cancelLabel' => 'Cancelar',
    'danger' => true,
    'triggerClass' => 'rounded-lg border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50',
])

@php
    $httpMethod = strtoupper((string) $method);
    $spoofMethod = ! in_array($httpMethod, ['GET', 'POST'], true);
@endphp

<div
    {{ $attributes->class('inline-flex') }}
    x-data="{ open: false }"
    @keydown.escape.window="if (open) open = false"
>
    <button type="button" @click="open = true" class="{{ $triggerClass }}">
        {{ $slot }}
    </button>

    <div
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4"
        @click.self="open = false"
        style="display: none;"
    >
        <div class="w-full max-w-sm rounded-xl bg-white p-5 shadow-lg" role="dialog" aria-modal="true" @click.stop>
            <h3 class="text-base font-semibold text-slate-900">{{ $title }}</h3>
            <p class="mt-2 text-sm text-slate-600">{{ $message }}</p>
            <form method="POST" action="{{ $action }}" class="mt-4 flex justify-end gap-2">
                @csrf
                @if ($spoofMethod)
                    @method($httpMethod)
                @endif
                {{ $form ?? '' }}
                <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="open = false"
                >
                    {{ $cancelLabel }}
                </button>
                <button
                    type="submit"
                    @class([
                        'rounded-lg px-3 py-1.5 text-sm font-semibold text-white',
                        'bg-red-600 hover:bg-red-500' => $danger,
                        'bg-emerald-600 hover:bg-emerald-500' => ! $danger,
                    ])
                >
                    {{ $confirmLabel }}
                </button>
            </form>
        </div>
    </div>
</div>
