<div>
    {{-- Header fijo --}}
    <div class="fixed top-0 left-0 right-0 w-full bg-white flex items-center justify-between p-4 z-50 border-b border-gray-200">
        <div class="flex items-center">
            <img src="{{ Storage::url('images_static/tresipunt-square.svg') }}" alt="Logo" class="w-10 h-10 mr-3">
            <h1 class="text-2xl font-bold">Editar archivo SCSS</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.scss.file.show', [$product, $scssFile->scssVersion, $scssFile]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="scss-edit-form"
                    wire:loading.attr="disabled"
                    class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove>Guardar cambios</span>
                <span wire:loading>Guardando...</span>
            </button>
        </div>
    </div>

    {{-- Contenido --}}
    <div class="w-full px-20 pt-24 pb-8">
        <div class="mx-auto max-w-4xl">
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">

                {{-- Información del archivo --}}
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Producto</label>
                            <p class="font-semibold text-gray-900">{{ $scssFile->scssVersion->product->name }}</p>
                            <p class="text-xs text-gray-600 font-mono">{{ $scssFile->scssVersion->product->slug }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Versión</label>
                            <p class="font-mono font-semibold text-gray-900">{{ $scssFile->scssVersion->version }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Creado por</label>
                            <p class="text-sm font-semibold text-gray-900">{{ $scssFile->creator?->name ?? 'N/A' }}</p>
                            <p class="text-xs text-gray-600">{{ $scssFile->created_at->format('Y-m-d H:i') }}</p>
                        </div>
                    </div>
                </div>

                <form wire:submit="save" id="scss-edit-form" class="space-y-6">
                    {{-- Nombre del archivo --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nombre del archivo (sin extensión) *</label>
                        <input type="text"
                               wire:model="filename"
                               class="w-full rounded-lg border border-gray-200 px-4 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('filename') border-red-500 @enderror">
                        @error('filename')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Editor SCSS --}}
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-sm font-medium text-gray-700">Contenido SCSS/SASS *</label>
                            <button type="button"
                                    wire:click="validateScss"
                                    class="flex items-center text-sm px-3 py-1.5 bg-gray-200 rounded-lg hover:bg-gray-300">
                                <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}" alt="Validar" class="w-4 h-4 mr-1">
                                Validar SCSS
                            </button>
                        </div>

                        <div wire:ignore>
                            <textarea id="scss-editor"
                                      wire:model="content"
                                      class="w-full rounded-lg border border-gray-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('content') border-red-500 @enderror"
                                      rows="20"></textarea>
                        </div>

                        @if($scssValidationError)
                            <p class="text-red-600 text-sm mt-1">{{ $scssValidationError }}</p>
                        @elseif($scssValid && !empty($content))
                            <p class="text-green-600 text-sm mt-1 flex items-center gap-1">
                                <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}" alt="Válido" class="w-4 h-4 svg-fill-green">
                                SCSS válido
                            </p>
                        @endif

                        @error('content')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        let scssEditor = null;
        let updateTimeout = null;

        function initializeScssEditor() {
            const textarea = document.getElementById('scss-editor');
            if (!textarea) {
                return;
            }

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

            // Inicializar nuevo editor
            scssEditor = CodeMirror.fromTextArea(textarea, {
                theme: 'oneDark',
            });

            // Cargar contenido inicial
            scssEditor.setValue(@js($content));

            // Sincronizar con Livewire (con debounce)
            scssEditor.on('change', function(cm) {
                if (updateTimeout) {
                    clearTimeout(updateTimeout);
                }
                updateTimeout = setTimeout(function() {
                    @this.set('content', cm.getValue(), false);
                }, 300);
            });
        }

        function destroyScssEditor() {
            if (scssEditor) {
                try {
                    scssEditor.destroy();
                } catch (e) {
                    console.warn('Error al destruir editor:', e);
                }
                scssEditor = null;
            }
            if (updateTimeout) {
                clearTimeout(updateTimeout);
                updateTimeout = null;
            }
        }

        // Inicializar cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('scss-editor')) {
                initializeScssEditor();
            }
        });

        // 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('scss-editor');
                if (textarea) {
                    // Si no hay editor o el textarea no está siendo usado por el editor, inicializar
                    if (!scssEditor || !textarea.previousElementSibling || !textarea.previousElementSibling.classList.contains('cm-editor')) {
                        setTimeout(initializeScssEditor, 150);
                    }
                } else {
                    // Si el textarea desapareció, destruir el editor
                    destroyScssEditor();
                }
            });
        });

        // También usar un observer para detectar cuando aparece el textarea
        if (typeof MutationObserver !== 'undefined') {
            const observer = new MutationObserver(function(mutations) {
                const textarea = document.getElementById('scss-editor');
                if (textarea && !scssEditor) {
                    // Verificar que el textarea esté visible
                    if (textarea.offsetParent !== null) {
                        setTimeout(initializeScssEditor, 100);
                    }
                }
            });

            // Observar cambios en el body
            document.addEventListener('DOMContentLoaded', function() {
                if (document.body) {
                    observer.observe(document.body, {
                        childList: true,
                        subtree: true,
                    });
                }
            });
        }
    </script>
</div>
