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

@php
    $sizeClass = match($size) {
        'sm' => 'modal-dialog-sm',
        'lg' => 'modal-dialog-lg',
        'xl' => 'modal-dialog-xl',
        default => 'modal-dialog-md',
    };
@endphp

<div class="modal-overlay" id="{{ $id }}" role="dialog" aria-modal="true" aria-labelledby="{{ $id }}-title" style="display:none;">
    <div class="modal-backdrop" onclick="document.getElementById('{{ $id }}').style.display='none';document.body.style.overflow='';"></div>
    <div class="modal-dialog {{ $sizeClass }}">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="{{ $id }}-title">{{ $title }}</h3>
                <button class="modal-close" onclick="document.getElementById('{{ $id }}').style.display='none';document.body.style.overflow='';" aria-label="Close">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </button>
            </div>

            @if(isset($body))
            <div class="modal-body">
                {{ $body }}
            </div>
            @elseif($slot)
            <div class="modal-body">
                {{ $slot }}
            </div>
            @endif

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

@push('scripts')
<script>
function openModal(id) {
    var modal = document.getElementById(id);
    if (modal) {
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        requestAnimationFrame(function() {
            modal.classList.add('modal-visible');
        });
    }
}

function closeModal(id) {
    var modal = document.getElementById(id);
    if (modal) {
        modal.classList.remove('modal-visible');
        setTimeout(function() {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }, 200);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.modal-overlay[style*="flex"]').forEach(function(modal) {
                closeModal(modal.id);
            });
        }
    });
});
</script>
@endpush