@props([
    'name' => null,
    'show' => false,
    'maxWidth' => 'lg',
    'closeable' => true,
    'title' => null,
    'subtitle' => null,
    'icon' => null,
    'iconClass' => 'size-5',
    'iconBg' => 'bg-primary/10',
    'iconColor' => 'text-primary',
    'blur' => true,
    'centered' => true,
])

@php
    $maxWidthClasses = match($maxWidth) {
        'xs' => 'max-w-xs',
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        'xl' => 'max-w-xl',
        '2xl' => 'max-w-2xl',
        '3xl' => 'max-w-3xl',
        '4xl' => 'max-w-4xl',
        '5xl' => 'max-w-5xl',
        'full' => 'max-w-full mx-4',
        default => 'max-w-lg',
    };
    
    $backdropClasses = $blur ? 'bg-black/50 backdrop-blur-sm' : 'bg-black/50';
    $positionClasses = $centered ? 'items-center' : 'items-start pt-20';
@endphp

<div
    x-data="{
        show: @js($show),
        focusables() {
            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
            return [...this.$el.querySelectorAll(selector)]
                .filter(el => !el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 },
        open() { this.show = true },
        close() { this.show = false },
    }"
    @if($name)
        x-on:open-modal.window="$event.detail == '{{ $name }}' ? open() : null"
        x-on:close-modal.window="$event.detail == '{{ $name }}' ? close() : null"
        x-on:close.stop="close()"
    @endif
    x-on:keydown.escape.window="show && {{ $closeable ? 'close()' : '' }}"
    x-on:keydown.tab.prevent="$event.shiftKey ? prevFocusable().focus() : nextFocusable().focus()"
    x-cloak
    {{ $attributes }}
>
    {{-- Backdrop --}}
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 {{ $backdropClasses }}"
        @if($closeable)
            @click="close()"
        @endif
    ></div>

    {{-- Modal Container --}}
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="fixed inset-0 z-50 flex justify-center {{ $positionClasses }} p-4 overflow-y-auto"
        @click.self="{{ $closeable ? 'close()' : '' }}"
    >
        <div class="relative w-full {{ $maxWidthClasses }} bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
            {{-- Close button --}}
            @if($closeable)
                <button 
                    @click="close()" 
                    type="button"
                    class="absolute top-4 right-4 text-base/50 hover:text-base/70 transition-colors z-10 p-1 rounded-lg hover:bg-neutral/10"
                >
                    <x-ri-close-line class="size-5" />
                </button>
            @endif

            {{-- Header --}}
            @if($title || $icon || isset($header))
                <div class="px-6 py-5 border-b border-neutral/10">
                    @if(isset($header))
                        {{ $header }}
                    @else
                        <div class="flex items-center gap-3 pr-8">
                            @if($icon)
                                <div class="flex items-center justify-center w-10 h-10 rounded-lg {{ $iconBg }}">
                                    <x-dynamic-component :component="$icon" class="{{ $iconClass }} {{ $iconColor }}" />
                                </div>
                            @endif
                            <div class="flex flex-col gap-0.5">
                                @if($title)
                                    <h3 class="text-lg font-semibold text-base/90">{{ $title }}</h3>
                                @endif
                                @if($subtitle)
                                    <p class="text-sm text-base/60">{{ $subtitle }}</p>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            @endif

            {{-- Body --}}
            <div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
                {{ $slot }}
            </div>

            {{-- Footer --}}
            @if(isset($footer))
                <div class="px-6 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl flex items-center justify-end gap-3">
                    {{ $footer }}
                </div>
            @endif
        </div>
    </div>
</div>