@props([
    'heading'      => 'تایید عملیات',
    'description'  => 'آیا از انجام این عملیات مطمئنید؟',
    'confirmLabel' => 'بله، انجام شود',
    'cancelLabel'  => 'انصراف',
    'event'        => 'confirm-modal',
    'color'        => 'danger',   {{-- danger | primary | warning --}}
])

@php
    $colors = [
        'danger'  => ['bg' => 'bg-danger-50 dark:bg-danger-900/30',   'icon' => 'text-danger-500',  'btn' => 'bg-danger-600 hover:bg-danger-700'],
        'primary' => ['bg' => 'bg-primary-50 dark:bg-primary-900/30', 'icon' => 'text-primary-500', 'btn' => 'bg-primary-600 hover:bg-primary-700'],
        'warning' => ['bg' => 'bg-warning-50 dark:bg-warning-900/30', 'icon' => 'text-warning-500', 'btn' => 'bg-warning-600 hover:bg-warning-700'],
    ];
    $c = $colors[$color] ?? $colors['danger'];
@endphp

<div
    x-data="{
        show: false,
        payload: null,
        open(e) { this.payload = e.detail ?? null; this.show = true; },
        cancel() { this.show = false; this.payload = null; },
        confirm() {
            this.$dispatch('{{ $event }}-confirmed', this.payload);
            this.show = false;
            this.payload = null;
        }
    }"
    x-on:{{ $event }}-open.window="open($event)"
    x-on:{{ $event }}-open.document="open($event)"
>
    <template x-teleport="body">
        <div
            x-show="show"
            x-transition.opacity
            class="fixed inset-0 z-999 flex items-center justify-center bg-black/50 backdrop-blur-sm"
            style="display:none"
        >
            <div
                @click.outside="cancel()"
                class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden"
            >
                {{-- Header --}}
                <div class="px-6 pt-6 pb-4">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full {{ $c['bg'] }}">
                            @if($color === 'danger')
                                <x-heroicon-o-trash class="w-5 h-5 {{ $c['icon'] }}" />
                            @elseif($color === 'warning')
                                <x-heroicon-o-exclamation-triangle class="w-5 h-5 {{ $c['icon'] }}" />
                            @else
                                <x-heroicon-o-check-circle class="w-5 h-5 {{ $c['icon'] }}" />
                            @endif
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $heading }}
                        </h3>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ $description }}
                    </p>

                    {{-- Optional slot for extra content --}}
                    @if(isset($extra))
                        <div class="mt-3">{{ $extra }}</div>
                    @endif
                </div>

                {{-- Footer --}}
                <div class="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-900/50">
                    <button
                        @click="cancel()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition"
                    >
                        {{ $cancelLabel }}
                    </button>
                    <button
                        @click="confirm()"
                        class="px-4 py-2 text-sm font-medium text-white {{ $c['btn'] }} rounded-lg transition"
                    >
                        {{ $confirmLabel }}
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>