{{--
    Vista Bootstrap/Vuexy para el modal del panel admin.
    La usa el componente App\Livewire\VuexyModal (extiende el Modal de wire-elements).
    El layout guest sigue usando la vista original (wire-elements-modal::modal), intacta.

    Config por componente:
      - Tamaño:  public static function modalMaxWidth(): string  -> 'sm'..'7xl'
      - Formato: public static function modalType(): string
                    'center' (default) | 'top' | 'offcanvas-end' | 'offcanvas-start'

    DOS hosts persistentes:
      - #livewire-ui-modal      (.modal)     -> componentes de tipo center/top
      - #livewire-ui-offcanvas  (.offcanvas) -> componentes de tipo offcanvas-*
    wire-elements es un stack "reemplazar con historial" (solo un componente activo a la
    vez). Enrutamos cada componente al host que le toca por su modalType (server-side) y
    Alpine muestra/oculta el host correcto según el componente activo. Así un offcanvas
    (p.ej. "New Owner") abierto DESDE un modal funciona con la misma lógica openModal/
    closeModal, sin hacks de z-index: al abrirlo se oculta el modal y al cerrarlo (pop del
    historial) el modal vuelve con el resultado ya aplicado.

    IMPORTANTE: la decisión de "qué host mostrar" se toma leyendo el DOM (en qué host vive
    el wrapper del componente activo), NO un mapa JS. Un `x-data="{... @js($meta) ...}"` se
    evalúa una sola vez al cargar la página (con $components vacío) y Livewire no lo
    re-evalúa en sus updates, así que quedaría permanentemente obsoleto.
--}}
@php
    $sizeMap = [
        'sm' => 'modal-sm', 'md' => '', 'lg' => 'modal-lg', 'xl' => 'modal-lg', '2xl' => 'modal-lg',
        '3xl' => 'modal-xl', '4xl' => 'modal-xl', '5xl' => 'modal-xl', '6xl' => 'modal-xl', '7xl' => 'modal-xl',
    ];
    $ocWidthMap = [
        'sm' => '360px', 'md' => '420px', 'lg' => '480px', 'xl' => '560px', '2xl' => '640px',
        '3xl' => '720px', '4xl' => '820px', '5xl' => '920px', '6xl' => '1040px', '7xl' => '1140px',
    ];

    // Metadatos por componente abierto: tipo (para enrutarlo al host correcto) + medidas.
    $meta = [];
    foreach ($components as $id => $component) {
        $name     = data_get($component, 'name');
        $maxWidth = data_get($component, 'modalAttributes.maxWidth', 'lg');
        $type     = 'center';
        try {
            $cls = app(\Livewire\Mechanisms\ComponentRegistry::class)->getClass($name);
            if (method_exists($cls, 'modalType')) {
                $type = $cls::modalType();
            }
        } catch (\Throwable $e) {
        }
        $meta[$id] = [
            'isOffcanvas' => \Illuminate\Support\Str::startsWith($type, 'offcanvas'),
            'sizeClass'   => $sizeMap[$maxWidth] ?? 'modal-lg',
            'centered'    => $type === 'center',
            'ocStart'     => $type === 'offcanvas-start',
            'ocWidth'     => $ocWidthMap[$maxWidth] ?? '480px',
            'clickAway'   => (bool) data_get($component, 'modalAttributes.closeOnClickAway', true),
        ];
    }

    // Meta del componente activo (para dimensionar los hosts en server-side).
    $am = $meta[$activeComponent] ?? [
        'isOffcanvas' => false, 'sizeClass' => 'modal-lg', 'centered' => true, 'ocStart' => false, 'ocWidth' => '480px',
    ];
@endphp

<div>
    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

    <div
        x-data="LivewireUIModal()"
        x-on:close.stop="setShowPropertyTo(false)"
        x-on:keydown.escape.window="show && closeModalOnEscape()"
        x-init="
            const driveHost = (el, kind, wantShow, clickAway) => {
                if (!el || typeof bootstrap === 'undefined') return;
                const Ctor = kind === 'offcanvas' ? bootstrap.Offcanvas : bootstrap.Modal;
                if (!el._bound) {
                    el._bound = true;
                    el.addEventListener(kind === 'offcanvas' ? 'hidden.bs.offcanvas' : 'hidden.bs.modal', () => {
                        // Ignoramos los hidden que disparamos nosotros (transiciones del stack);
                        // solo los cierres del usuario (esc/backdrop/botón nativo) cierran de verdad.
                        if (el._prog) { el._prog = false; return; }
                        if (show) closeModal();
                    });
                }
                const shown = el.classList.contains('show');
                if (wantShow && !shown) {
                    // Recreamos la instancia al mostrar para aplicar el backdrop del componente
                    // activo (closeModalOnClickAway=false -> backdrop 'static', no cierra por click).
                    const opts = { keyboard: false, backdrop: clickAway ? true : 'static' };
                    Ctor.getInstance(el)?.dispose();
                    el._prog = true; Ctor.getOrCreateInstance(el, opts).show();
                } else if (!wantShow && shown) {
                    el._prog = true; Ctor.getOrCreateInstance(el).hide();
                }
            };
            const sync = () => {
                const modalEl = document.getElementById('livewire-ui-modal');
                const ocEl    = document.getElementById('livewire-ui-offcanvas');
                const active  = show && activeComponent;
                // Host y opciones se leen del DOM del componente activo (server-side, siempre fresco).
                let isOff = false, clickAway = true;
                if (active) {
                    const wrap = document.querySelector('[data-modal-id=\'' + activeComponent + '\']');
                    if (wrap) {
                        isOff = !!wrap.closest('#livewire-ui-offcanvas');
                        clickAway = wrap.getAttribute('data-click-away') !== '0';
                    }
                }
                driveHost(modalEl, 'modal',     !!(active && !isOff), clickAway);
                driveHost(ocEl,    'offcanvas', !!(active && isOff),  clickAway);
            };
            // Coalescer: show y activeComponent cambian en el MISMO tick al abrir un modal,
            // así que ambos $watch dispararían sync() dos veces. En ese momento Bootstrap aún
            // no puso la clase .show en el host, por lo que driveHost mostraría el modal DOS
            // veces -> ScrollBarHelper.hide() corre 2x y en la 2ª memoriza el overflow del
            // <body> como 'hidden' (data-bs-overflow). Al cerrar, reset() lo RESTAURA a
            // 'hidden' en vez de quitarlo -> scroll bloqueado para siempre. Debounce a un
            // solo sync() por microtask (sobre el estado final) lo evita.
            let scheduled = false;
            const scheduleSync = () => {
                if (scheduled) return;
                scheduled = true;
                queueMicrotask(() => { scheduled = false; sync(); });
            };
            $watch('show', scheduleSync);
            $watch('activeComponent', scheduleSync);
        "
    >
        {{-- Host modal (center / top) --}}
        <div wire:ignore.self class="modal fade" id="livewire-ui-modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable {{ $am['centered'] ? 'modal-dialog-centered' : '' }} {{ $am['sizeClass'] }}">
                <div class="modal-content">
                    @forelse ($components as $id => $component)
                        @if (! ($meta[$id]['isOffcanvas'] ?? false))
                            <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}"
                                data-modal-id="{{ $id }}" data-click-away="{{ ($meta[$id]['clickAway'] ?? true) ? '1' : '0' }}">
                                @livewire($component['name'], $component['arguments'], key($id))
                            </div>
                        @endif
                    @empty
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Host offcanvas (panel lateral) --}}
        <div wire:ignore.self class="offcanvas {{ $am['ocStart'] ? 'offcanvas-start' : 'offcanvas-end' }}"
            id="livewire-ui-offcanvas" tabindex="-1" style="width: min({{ $am['ocWidth'] }}, 100vw);">
            @forelse ($components as $id => $component)
                @if ($meta[$id]['isOffcanvas'] ?? false)
                    <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}"
                        data-modal-id="{{ $id }}" data-click-away="{{ ($meta[$id]['clickAway'] ?? true) ? '1' : '0' }}">
                        @livewire($component['name'], $component['arguments'], key($id))
                    </div>
                @endif
            @empty
            @endforelse
        </div>
    </div>
</div>