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

@php
    $widths = [
        'sm'   => 'max-w-sm',
        'md'   => 'max-w-md',
        'lg'   => 'max-w-lg',
        'xl'   => 'max-w-xl',
        '2xl'  => 'max-w-2xl',
        'full' => 'max-w-full mx-4',
    ];
    $width = $widths[$size] ?? $widths['md'];
    $backdrop = 'fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm';
    $panel = 'w-full animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl ' . $width;
    $hdr = 'flex items-center justify-between border-b border-border px-6 py-4';
    $body = 'px-6 py-5 text-sm text-muted-foreground';
    $ftr = 'flex items-center justify-end gap-3 border-t border-border px-6 py-4';
@endphp

<div
    x-data="modal(false)"
    @open-modal.window="if ($event.detail === '{{ $id }}') show()"
    @close-modal.window="if ($event.detail === '{{ $id }}') hide()"
    @keydown.escape.window="hide()"
    x-show="open"
    class="{{ $backdrop }}"
    role="dialog"
    aria-modal="true"
    aria-labelledby="{{ $id }}-title"
    x-cloak
>
    <div
        @click.outside="hide()"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="{{ $panel }}"
    >
        <div class="{{ $hdr }}">
            <h3 id="{{ $id }}-title" class="text-base font-semibold text-foreground">
                {{ $title }}
            </h3>
            <button
                @click="hide()"
                type="button"
                class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                aria-label="Close modal"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div class="{{ $body }}">
            {{ $slot }}
        </div>

        @if(isset($footer))
            <div class="{{ $ftr }}">
                {{ $footer }}
            </div>
        @endif
    </div>
</div>