<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">Subir ZIP - Bundle {{ $bundle->version }}</h1>
        </div>
        <div class="flex items-center gap-3">
            @if($uploadStatus && $uploadStatus['type'] === 'success')
                {{-- Mostrar botón "Ver bundle" cuando el procesamiento fue exitoso --}}
                <a href="{{ route('products.scss-cdn.bundle.show', [$product, $bundle]) }}"
                   class="flex items-center bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg font-semibold">
                    <img src="{{ asset('vendor/blade-untitledui-icons/arrow-right.svg') }}" alt="Continuar" class="w-5 h-5 mr-2 svg-fill-white">
                    Ver bundle
                </a>
            @else
                {{-- Mostrar botones normales cuando no hay éxito --}}
                <a href="{{ route('products.scss-cdn.bundle.show', [$product, $bundle]) }}"
                    class="text-gray-700 hover:text-gray-900 px-4 py-2">
                    Cancelar
                </a>
                <button type="button"
                        wire:click="uploadDirect"
                        wire:loading.attr="disabled"
                        wire:target="uploadDirect"
                        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 wire:target="uploadDirect">Subir y procesar ZIP</span>
                    <span wire:loading wire:target="uploadDirect">Procesando...</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 del bundle --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Bundle {{ $bundle->version }}</h3>
                @if($bundle->description)
                    <p class="text-gray-600">{{ $bundle->description }}</p>
                @endif
            </div>

            {{-- Formulario de subida (solo se muestra si no hay éxito) --}}
            @if(!$uploadStatus || $uploadStatus['type'] !== 'success')
                <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Subir archivo ZIP</h3>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Archivo ZIP
                        </label>
                        <input type="file"
                               wire:model="zipFile"
                               accept=".zip"
                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        @error('zipFile')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        @if($zipFile)
                            <p class="text-sm text-gray-600 mt-1">
                                Archivo seleccionado:
                                @php
                                    try {
                                        $fileName = $zipFile->getClientOriginalName();
                                        $fileSize = number_format($zipFile->getSize() / 1024, 2);
                                        echo "{$fileName} ({$fileSize} KB)";
                                    } catch (\Exception $e) {
                                        echo "Archivo cargado";
                                    }
                                @endphp
                            </p>
                        @endif
                    </div>
                </div>
            @endif

                <div wire:loading wire:target="upload" class="mt-4">
                    <div class="rounded-lg bg-blue-50 p-4">
                        <p class="text-blue-700 font-semibold">Procesando archivo ZIP, por favor espere...</p>
                    </div>
                </div>

                @if($uploadStatus)
                    <div class="mt-4 rounded-lg p-4 {{ $uploadStatus['type'] === 'success' ? 'bg-green-100 text-green-700' : ($uploadStatus['type'] === 'error' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                        <strong>{{ ucfirst($uploadStatus['type']) }}:</strong> {{ $uploadStatus['message'] }}
                    </div>
                @endif

                @if($errors->has('zipFile'))
                    <div class="mt-4 rounded-lg bg-red-100 p-4 text-red-700">
                        <strong>Error:</strong> {{ $errors->first('zipFile') }}
                    </div>
                @endif

                @if(!empty($processedFiles))
                    <div class="mt-4 bg-white border border-gray-200 rounded-lg p-4">
                        <h4 class="font-semibold mb-2 text-gray-900">Archivos procesados ({{ count($processedFiles) }}):</h4>
                        <div class="max-h-64 overflow-y-auto space-y-1">
                            @foreach($processedFiles as $file)
                                <div class="text-sm text-gray-600">
                                    <span class="font-mono">{{ $file['path'] }}</span>
                                    <span class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-semibold">{{ $file['status'] }}</span>
                                    <span class="ml-2 text-gray-500">({{ number_format($file['size'], 0, ',', '.') }} bytes)</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                {{-- Instrucciones (solo se muestran si no hay éxito) --}}
                @if(!$uploadStatus || $uploadStatus['type'] !== 'success')
                    <div class="rounded-lg bg-blue-50 border border-blue-200 p-6">
                        <h4 class="font-semibold text-blue-800 mb-2">Instrucciones:</h4>
                        <ul class="text-sm text-blue-700 list-disc list-inside space-y-1">
                            <li>El archivo ZIP debe contener solo archivos .scss</li>
                            <li>Se mantendrá la estructura de carpetas del ZIP</li>
                            <li>Tamaño máximo: 50MB</li>
                            <li>Los archivos existentes serán actualizados</li>
                        </ul>
                    </div>
                @endif
            </div>
            </div>

    </div>
</div>
