@props([
    'wireModel' => null,   // Livewire boolean property to entangle (client-driven open/close)
    'show' => false,       // Legacy value flag (server-driven fallback)
    'title' => '',
    'titleEdit' => null,   // optional: in wire-model mode the header switches to this
                           // label client-side whenever $wire.editingId is truthy, so an
                           // Edit opened purely by Alpine still reads "Edit …" with no fetch
    'close' => 'closeModal',
    'size' => 'md',
])

{{--
    Two modes:

    1. Client-driven (preferred) — pass wire-model="showModal". Visibility is
       entangled to that Livewire property but DEFERRED (Livewire 3 @entangle
       without .live), so opening/closing never triggers a server round-trip on
       its own. Closing therefore does NOT re-render the (heavy) parent list —
       the ✕ and the Cancel button flip Alpine state only.

       UX RULE (critical): a form modal must NEVER close by accident, so a
       backdrop (outside) click and the Escape key are intentionally NOT wired
       to close it. Only the ✕ button, a Cancel button, or a successful save
       (which sets the property false server-side) close it. The slot stays in
       the DOM so wire:model fields keep their binding; x-show just toggles it.
       The server keeps the modal open on a validation error.

    2. Legacy (server-driven) — pass :show="$flag" + close="...". Rendered only
       while $show is true. Kept for screens not yet migrated to mode 1. Same
       rule: no backdrop / Escape close — only the ✕ button.
--}}
@if ($wireModel !== null)
    <div x-data="{ open: @entangle($wireModel) }"
         x-show="open" x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         x-effect="open && $nextTick(() => window.dispatchEvent(new Event('rf:editor-activate')))"
         class="rf-modal-backdrop">
        <div class="rf-modal rf-modal-{{ $size }}"
             x-show="open"
             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">
            <div class="rf-modal-header">
                @if ($titleEdit !== null)
                    <h2 class="rf-card-title" x-text="$wire.editingId ? @js($titleEdit) : @js($title)"></h2>
                @else
                    <h2 class="rf-card-title">{{ $title }}</h2>
                @endif
                <button type="button" class="rf-icon-btn" @click="open = false">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>
            <div class="rf-modal-body">{{ $slot }}</div>
            @isset($footer)
                <div class="rf-modal-footer">{{ $footer }}</div>
            @endisset
        </div>
    </div>
@elseif ($show)
    <div class="rf-modal-backdrop"
         x-data="{ shown: false }" x-init="$nextTick(() => shown = true)">
        <div class="rf-modal rf-modal-{{ $size }}"
             x-show="shown" x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
            <div class="rf-modal-header">
                <h2 class="rf-card-title">{{ $title }}</h2>
                <button type="button" x-ref="rfClose" class="rf-icon-btn" wire:click="{{ $close }}">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>
            <div class="rf-modal-body">
                {{ $slot }}
            </div>
            @isset($footer)
                <div class="rf-modal-footer">{{ $footer }}</div>
            @endisset
        </div>
    </div>
@endif