<div>
    {{-- Cabecera con breadcrumb --}}
    <div class="w-full flex items-center mb-8">
        <a href="{{ route('products.js.version.show', [$product, $jsFile->jsVersion]) }}"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg') }}" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
        <div class="ml-4 flex items-center text-sm text-gray-500">
            <a href="{{ route('products.js.index', $product) }}"
               class="text-orange-600 hover:text-orange-800">
                Versiones JS
            </a>
            <span class="mx-2">/</span>
            <a href="{{ route('products.js.version.show', [$product, $jsFile->jsVersion]) }}"
               class="text-orange-600 hover:text-orange-800">
                Versión {{ $jsFile->jsVersion->version }}
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700 font-semibold">{{ $jsFile->filename }}.js</span>
        </div>
    </div>

    {{-- Mensajes --}}
    @if (session()->has('success'))
        <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700">
            {{ session('success') }}
        </div>
    @endif

    @if (session()->has('error'))
        <div class="mb-4 rounded bg-red-100 px-4 py-2 text-red-700">
            {{ session('error') }}
        </div>
    @endif

    {{-- Información del archivo --}}
    <div class="w-full flex flex-wrap items-center justify-between rounded-lg bg-white border border-gray-200 px-8 py-4 mb-6">
        <div class="w-full flex items-center justify-between">
            <div>
                <h1 class="text-4xl font-bold">{{ $jsFile->filename }}.js</h1>
            </div>
            <div class="flex items-center gap-2">
                @can('admin.js.file.edit')
                <a href="{{ route('products.js.file.edit', [$product, $jsFile->jsVersion, $jsFile]) }}"
                   class="flex items-center rounded-lg bg-orange-600 px-4 py-2 text-white hover:bg-orange-700 font-semibold">
                    <img src="{{ asset('vendor/blade-untitledui-icons/pencil.svg') }}" alt="Editar" class="w-5 h-5 mr-2 svg-fill-white">
                    Editar
                </a>
                @endcan
                @can('admin.js.file.destroy')
                <button wire:click="delete"
                        wire:confirm="¿Seguro que deseas eliminar este archivo JS? Esta acción no se puede deshacer."
                        class="flex items-center rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700 font-semibold">
                    <img src="{{ asset('vendor/blade-untitledui-icons/trash.svg') }}" alt="Eliminar" class="w-5 h-5 mr-2 svg-fill-white">
                    Eliminar
                </button>
                @endcan
            </div>
        </div>

        <div class="w-full flex flex-wrap items-start mt-6">
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Producto</label>
                <p class="font-semibold text-gray-900">{{ $jsFile->jsVersion->product->name }}</p>
                <p class="text-xs text-gray-600 font-mono">{{ $jsFile->jsVersion->product->slug }}</p>
            </div>
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Versión</label>
                <p class="font-mono font-semibold text-gray-900">{{ $jsFile->jsVersion->version }}</p>
            </div>
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Creado por</label>
                <p class="text-sm font-semibold text-gray-900">{{ $jsFile->creator?->name ?? 'N/A' }}</p>
                <p class="text-xs text-gray-600">{{ $jsFile->created_at->format('Y-m-d H:i') }}</p>
            </div>
            @if($jsFile->updater)
                <div class="w-1/3 mt-4">
                    <label class="block text-xs text-gray-500 mb-1">Última edición por</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $jsFile->updater->name }}</p>
                    <p class="text-xs text-gray-600">{{ $jsFile->updated_at->format('Y-m-d H:i') }}</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Contenido JS (read-only) --}}
    <div class="rounded-lg bg-white border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h2 class="text-lg font-semibold">Contenido JavaScript</h2>
        </div>
        <div class="p-4">
            <div wire:ignore>
                <textarea id="js-viewer" readonly class="w-full border-0 font-mono text-sm focus:outline-none" rows="25">{{ $jsFile->content }}</textarea>
            </div>
        </div>
    </div>

    <script>
        let jsViewer = null;

        function initializeJsViewer() {
            const textarea = document.getElementById('js-viewer');
            if (!textarea) {
                return;
            }

            // Si ya existe un viewer, destruirlo primero
            if (jsViewer) {
                try {
                    jsViewer.destroy();
                } catch (e) {
                    console.warn('Error al destruir viewer anterior:', e);
                }
                jsViewer = null;
            }

            // Inicializar nuevo viewer (read-only)
            jsViewer = CodeMirror.fromTextArea(textarea, {
                theme: 'oneDark',
                readOnly: true,
            });
        }

        // Inicializar cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('js-viewer')) {
                initializeJsViewer();
            }
        });

        // Escuchar cambios de Livewire
        document.addEventListener('livewire:init', function() {
            // Escuchar cuando se actualiza el componente
            Livewire.hook('morph.updated', ({ el, component }) => {
                // Verificar si el textarea existe ahora
                const textarea = document.getElementById('js-viewer');
                if (textarea && !jsViewer) {
                    setTimeout(initializeJsViewer, 150);
                }
            });
        });
    </script>
</div>
