@props([
    'id' => 'modal',
    'title' => null,
    'size' => 'md',
    'maxWidth' => null,
])

@php
    $resolvedSize = $maxWidth ?? $size;
    $widthClass = match($resolvedSize) {
        'sm' => 'max-w-md',
        'md' => 'max-w-lg',
        'lg' => 'max-w-2xl',
        'xl' => 'max-w-4xl',
        '2xl' => 'max-w-5xl',
        default => 'max-w-lg',
    };
    $wireModel = $attributes->wire('model');
    $wireModelName = $wireModel ? $wireModel->value() : null;
@endphp

<div x-data="{
        @if($wireModelName)
            open: @entangle($attributes->wire('model')),
        @else
            open: false,
        @endif
     }"
     x-show="open"
     x-cloak
     @open-modal-{{ $id }}.window="open = true"
     @close-modal-{{ $id }}.window="open = false"
     @keydown.escape.window="open = false"
     class="fixed inset-0 z-50 overflow-y-auto"
     aria-modal="true"
     role="dialog">

    <!-- Backdrop / Overlay: clicking backdrop closes modal -->
    <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 bg-slate-900/60 backdrop-blur-sm transition-opacity"
         @click="open = false"></div>

    <!-- Centered Modal Content Wrapper -->
    <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-6">
        <div x-show="open"
             x-transition:enter="ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8 w-full {{ $widthClass }} border border-slate-200"
             @click.stop>

            @if($title)
                <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                    <h3 class="text-base font-bold text-slate-900">{{ $title }}</h3>
                    <button @click="open = false" type="button" class="text-slate-400 hover:text-slate-600 transition p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            @endif

            <div class="{{ $title ? 'px-6 py-5' : '' }}">
                {{ $slot }}
            </div>

            @isset($footer)
                <div class="px-6 py-3.5 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2.5">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>