{{--
    ShiftBridge Modal Component
    
    Usage:
    <x-ui.modal id="confirm-modal" title="Confirm Action">
        <p>Are you sure you want to proceed?</p>
        <x-slot:footer>
            <x-ui.button variant="outline-secondary" onclick="document.getElementById('confirm-modal').close()">Cancel</x-ui.button>
            <x-ui.button variant="danger">Delete</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>
    
    <x-ui.button onclick="document.getElementById('confirm-modal').showModal()">Open Modal</x-ui.button>
    
    <x-ui.modal id="large-modal" title="Large Modal" size="lg">
        <p>Large modal content</p>
    </x-ui.modal>
    
    <x-ui.modal id="small-modal" title="Small Modal" size="sm">
        <p>Small modal content</p>
    </x-ui.modal>
    
    <x-ui.modal id="no-close-modal" title="No Close Button" :showClose="false">
        <p>Modal without close button</p>
    </x-ui.modal>
    
    <x-ui.modal id="static-modal" title="Static Backdrop" static>
        <p>Clicking backdrop won't close</p>
    </x-ui.modal>
    
    Props:
    - id: string (required) - unique modal ID
    - title: string (modal title)
    - size: string (sm, md, lg, xl, full)
    - showClose: boolean (show close button, default true)
    - static: boolean (prevent closing on backdrop click)
    - centered: boolean (center vertically)
--}}

@props([
    'id' => null,
    'title' => null,
    'size' => 'md',
    'showClose' => true,
    'static' => false,
    'centered' => true,
])

@php
// Size classes for modal dialog
$sizeClasses = match($size) {
    'sm' => 'max-w-md',
    'md' => 'max-w-lg',
    'lg' => 'max-w-2xl',
    'xl' => 'max-w-4xl',
    'full' => 'max-w-full mx-4',
    default => 'max-w-lg',
};

// Centered classes
$centeredClasses = $centered ? 'items-center' : 'items-start pt-20';
@endphp

<dialog 
    id="{{ $id }}" 
    class="p-0 m-auto bg-transparent backdrop:bg-slate-900/50 backdrop:backdrop-blur-sm open:animate-in open:fade-in open:duration-200 closed:animate-out closed:fade-out closed:duration-200"
    {{ $static ? 'data-static="true"' : '' }}
>
    <div class="fixed inset-0 z-50 flex {{ $centeredClasses }} justify-center p-4" onclick="{{ $static ? '' : 'if(event.target === this) document.getElementById(\'' . $id . '\').close()' }}">
        <div class="relative w-full {{ $sizeClasses }} bg-white rounded-lg shadow-2xl overflow-hidden">
            {{-- Header --}}
            @if($title || $showClose)
                <div class="flex items-center justify-between px-6 py-4 border-b border-[var(--sb-border)] bg-[var(--sb-card-header-bg)]">
                    @if($title)
                        <h3 class="text-lg font-semibold text-[var(--sb-text-primary)]">{{ $title }}</h3>
                    @else
                        <div></div>
                    @endif
                    
                    @if($showClose)
                        <button 
                            type="button"
                            onclick="document.getElementById('{{ $id }}').close()"
                            class="p-1 rounded-md text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] hover:bg-slate-200 transition-colors"
                            aria-label="Close"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    @endif
                </div>
            @endif
            
            {{-- Body --}}
            <div class="px-6 py-4 max-h-[70vh] overflow-y-auto">
                {{ $slot }}
            </div>
            
            {{-- Footer --}}
            @if(isset($footer))
                <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-[var(--sb-border)] bg-[var(--sb-card-header-bg)]">
                    {{ $footer }}
                </div>
            @endif
        </div>
    </div>
</dialog>

<script>
    // Polyfill for browsers that don't support <dialog>
    (function() {
        const modal = document.getElementById('{{ $id }}');
        if (!modal.showModal) {
            dialogPolyfill.registerDialog(modal);
        }
        
        // Handle Escape key for static modals
        modal.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && this.dataset.static === 'true') {
                e.preventDefault();
            }
        });
    })();
</script>