<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">Cargar archivos JS</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.js.version.show', [$product, $jsVersion]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            @if (!empty($fileData))
                <button wire:click="confirmUpload"
                        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>Confirmar y crear archivos</span>
                    <span wire:loading>Guardando...</span>
                </button>
            @endif
        </div>
    </div>

    {{-- Contenido --}}
    <div class="w-full px-20 pt-24 pb-8">
        <div class="mx-auto max-w-4xl">
            {{-- 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 de la versión --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">Producto</label>
                        <p class="font-semibold text-gray-900">{{ $product->name }}</p>
                        <p class="text-xs text-gray-600 font-mono">{{ $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">{{ $jsVersion->version }}</p>
                        @if($jsVersion->description)
                            <p class="text-sm text-gray-600 mt-1">{{ $jsVersion->description }}</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Área de Drag & Drop --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                <h3 class="text-lg font-semibold mb-4">Cargar archivos</h3>

                <div x-data="{
                    isDragging: false,
                    handleFiles(files) {
                        if (files.length > 0) {
                            const fileInput = document.getElementById('file-input-js');
                            const dataTransfer = new DataTransfer();
                            Array.from(files).forEach(file => {
                                dataTransfer.items.add(file);
                            });
                            fileInput.files = dataTransfer.files;
                            fileInput.dispatchEvent(new Event('change', { bubbles: true }));
                        }
                    }
                }"
                @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false"
                @drop.prevent="isDragging = false; handleFiles($event.dataTransfer.files)"
                class="border-2 border-dashed rounded-lg p-12 text-center transition-colors"
                :class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'">
                    <input type="file"
                           wire:model="uploadedFiles"
                           multiple
                           accept=".js"
                           id="file-input-js"
                           class="hidden">
                    <label for="file-input-js" class="cursor-pointer">
                        <img src="{{ asset('vendor/blade-untitledui-icons/upload-cloud.svg') }}" alt="Subir" class="mx-auto h-16 w-16 mb-4 svg-fill-gray">
                        <p class="text-gray-700 mb-2">
                            <span class="font-semibold text-orange-600">Haz clic para seleccionar</span> o arrastra archivos aquí
                        </p>
                        <p class="text-sm text-gray-500">
                            Archivos .js (máximo 10 archivos, 2MB por archivo)
                        </p>
                    </label>
                </div>

                @error('uploadedFiles')
                    <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
                @enderror

                {{-- **Se guarda por el nombre, sin carpeta, y se dice antes de subir.** El
                     panel afirmaba lo contrario —«al subir se respeta la estructura de
                     carpetas»— y enseñaba un árbol como ejemplo válido. Ver MGR-095. --}}
                <p class="mt-2 text-xs text-gray-500">
                    Cada archivo se guarda por su <strong class="font-semibold">nombre, sin carpeta y
                    sin extensión</strong>: <span class="font-mono">utils/helpers.scss</span> se guarda
                    como <span class="font-mono">helpers</span>. Dos archivos con el mismo nombre en
                    carpetas distintas ocupan el mismo sitio. Si necesitas conservar el árbol,
                    súbelo como <strong class="font-semibold">bundle SCSS-CDN</strong>, que sí guarda
                    la ruta relativa.
                </p>

            </div>

            {{-- Errores de validación --}}
            @if (!empty($uploadErrors))
                <div class="mb-6 rounded-lg bg-red-100 border border-red-200 px-6 py-4">
                    <h4 class="font-semibold text-red-800 mb-2">Errores de validación:</h4>
                    <ul class="list-disc list-inside text-red-700 text-sm">
                        @foreach ($uploadErrors as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Listado de archivos cargados --}}
            @if (!empty($fileData))
                <div class="w-full rounded-lg bg-white border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-lg font-semibold">Archivos cargados ({{ count($fileData) }})</h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                                <tr>
                                    <th class="px-4 py-3 text-left">Archivo original</th>
                                    <th class="px-4 py-3 text-left">Nombre a usar</th>
                                    <th class="px-4 py-3 text-left">Tamaño</th>
                                    <th class="px-4 py-3 text-left">Estado</th>
                                    <th class="px-4 py-3 text-left">Acción</th>
                                    <th class="px-4 py-3 text-right">Eliminar</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                @foreach ($fileData as $index => $file)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 font-mono text-xs text-gray-900">{{ $file['originalName'] }}</td>
                                        <td class="px-4 py-3 font-mono font-semibold text-gray-900">{{ $file['filename'] }}</td>
                                        <td class="px-4 py-3 text-gray-700">{{ number_format($file['size'] / 1024, 2) }} KB</td>
                                        <td class="px-4 py-3">
                                            @if ($file['isDuplicate'])
                                                {{-- **El duplicado dice de dónde puede venir.** «Ya existe» se
                                                     lee como «estás resubiendo el mismo archivo», y con los
                                                     nombres aplanados puede ser otro distinto que estaba en otra
                                                     carpeta. No se puede saber cuál de los dos casos es —el
                                                     navegador no manda la ruta—, así que se dice el que la gente
                                                     no espera. Ver MGR-095. --}}
                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800"
                                                      title="Ya hay un archivo guardado con este nombre. Ojo: si el tuyo venía en una carpeta, puede ser otro archivo distinto — aquí los nombres se guardan sin carpeta.">
                                                    Duplicado
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                                    Nuevo
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3">
                                            @if ($file['isDuplicate'])
                                                <div class="flex gap-3">
                                                    <label class="flex items-center cursor-pointer">
                                                        <input type="radio"
                                                               name="action_{{ $index }}"
                                                               value="overwrite"
                                                               wire:click="setDuplicateAction({{ $index }}, 'overwrite')"
                                                               @if($file['action'] === 'overwrite') checked @endif
                                                               class="mr-2">
                                                        <span class="text-xs">Sobrescribir</span>
                                                    </label>
                                                    <label class="flex items-center cursor-pointer">
                                                        <input type="radio"
                                                               name="action_{{ $index }}"
                                                               value="skip"
                                                               wire:click="setDuplicateAction({{ $index }}, 'skip')"
                                                               @if($file['action'] === 'skip') checked @endif
                                                               class="mr-2">
                                                        <span class="text-xs">Saltar</span>
                                                    </label>
                                                </div>
                                            @else
                                                <span class="text-xs text-gray-500">Se creará</span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <button wire:click="removeFile({{ $index }})"
                                                    class="text-red-600 hover:text-red-800 text-xs font-semibold">
                                                Eliminar
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
