@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $pageTitle }}</h4>
            <div class="page-title-right">
                <a href="{{ route('codeigniter.import.index') }}" class="btn btn-secondary">
                <i class="ri-arrow-left-line"></i> Volver a Importación
                </a>
            </div>
        </div>
    </div>
</div>
        <!-- Estadísticas -->
        <div class="row">
            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Referencias</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ number_format($stats['total_referencias']) }}</h4>
                                <p class="text-muted mb-0">{{ number_format($stats['productos_con_imagenes']) }} productos</p>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-primary-subtle rounded fs-3">
                                    <i class="ri-image-2-line text-primary"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Pendientes</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ number_format($stats['pendientes']) }}</h4>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-warning" style="width: {{ $stats['total_referencias'] > 0 ? ($stats['pendientes'] / $stats['total_referencias'] * 100) : 0 }}%"></div>
                                </div>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                    <i class="ri-time-line text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Descargadas</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ number_format($stats['descargadas']) }}</h4>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-success" style="width: {{ $stats['progreso'] }}%"></div>
                                </div>
                                <p class="text-muted mb-0 mt-1">{{ $stats['progreso'] }}% completado</p>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                    <i class="ri-check-line text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Con Errores</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between mt-4">
                            <div>
                                <h4 class="fs-20 fw-semibold mb-4">{{ number_format($stats['errores']) }}</h4>
                                @if($stats['errores'] > 0)
                                <button class="btn btn-sm btn-danger mt-1" onclick="resetErrors()">
                                    <i class="ri-restart-line"></i> Reintentar
                                </button>
                                @endif
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-danger-subtle rounded fs-3">
                                    <i class="ri-error-warning-line text-danger"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel de Control -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Panel de Control de Descarga</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>Configuración de Descarga</h5>
                        <div class="mb-3">
                            <label>Método de Descarga:</label>
                            <select id="download-method" class="form-select">
                                <option value="http" selected>HTTP (Recomendado)</option>
                                <option value="ftp" disabled>FTP (No configurado)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Tamaño del Lote:</label>
                            <select id="batch-size" class="form-select">
                                <option value="5">5 imágenes</option>
                                <option value="10">10 imágenes</option>
                                <option value="25">25 imágenes</option>
                                <option value="50">50 imágenes</option>
                                <option value="100">100 imágenes</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>URL Base de Imágenes:</label>
                            <input type="text" id="base-url" class="form-control" value="{{ $defaultBaseUrl ?? '' }}" 
                                   placeholder="https://ejemplo.com/images/"
                                   title="Modifique si las imágenes están en otra ubicación">
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5>Acciones</h5>
                        <div class="btn-group-vertical w-100">
                            <button class="btn btn-primary btn-lg mb-2" onclick="testDownload()" {{ $stats['pendientes'] == 0 ? 'disabled' : '' }}>
                                <i class="ri-test-tube-line"></i> Probar Descarga (1 imagen)
                            </button>
                            <button class="btn btn-success btn-lg mb-2" onclick="downloadBatch()" {{ $stats['pendientes'] == 0 ? 'disabled' : '' }}>
                                <i class="ri-download-line"></i> Descargar Lote
                            </button>
                            <button class="btn btn-warning btn-lg mb-2" onclick="startAutoDownload()" {{ $stats['pendientes'] == 0 ? 'disabled' : '' }}>
                                <i class="ri-play-line"></i> Descarga Automática
                            </button>
                            <button class="btn btn-danger btn-lg mb-2" onclick="stopAutoDownload()" disabled id="stop-btn">
                                <i class="ri-stop-line"></i> Detener Descarga
                            </button>
                            
                            <hr class="my-2">
                            <button class="btn btn-primary btn-lg mb-2" onclick="downloadAllRemaining()" {{ $stats['pendientes'] == 0 ? 'disabled' : '' }} id="download-all-btn">
                                <i class="ri-download-cloud-line"></i> Descargar Todas las Restantes
                            </button>
                            
                            <hr class="my-2">
                            <h6>Categorías y Subcategorías</h6>
                            <button class="btn btn-info btn-lg mb-2" onclick="downloadCategories()">
                                <i class="ri-folder-open-line"></i> Descargar Imágenes de Categorías
                            </button>
                            <button class="btn btn-info btn-lg mb-2" onclick="downloadSubcategories()">
                                <i class="ri-folder-line"></i> Descargar Imágenes de Subcategorías
                            </button>
                            <button class="btn btn-warning btn-lg mb-2" onclick="downloadBanners()">
                                <i class="ri-image-2-line"></i> Descargar Imágenes de Banners
                            </button>
                            <button class="btn btn-primary btn-lg" onclick="downloadSliders()">
                                <i class="ri-equalizer-line"></i> Descargar Imágenes de Sliders
                            </button>
                        </div>
                        
                        <!-- Progreso -->
                        <div class="mt-3" id="download-progress" style="display: none;">
                            <h6>Progreso de Descarga:</h6>
                            <div class="progress" style="height: 25px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                                     role="progressbar" 
                                     id="progress-bar"
                                     style="width: 0%">0%</div>
                            </div>
                            <small class="text-muted" id="progress-text">Preparando...</small>
                        </div>
                    </div>
                </div>
                
                <!-- Log de Actividad -->
                <div class="mt-4">
                    <h5>Log de Actividad</h5>
                    <div class="border rounded p-2" style="height: 200px; overflow-y: auto; background: #f8f9fa;">
                        <div id="activity-log">
                            <small class="text-muted">Esperando acciones...</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($stats['pendientes'] > 0)
        <!-- Muestra de Imágenes Pendientes -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Muestra de Imágenes Pendientes</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Producto</th>
                                <th>Nombre Imagen</th>
                                <th>Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pendingSamples as $sample)
                            <tr>
                                <td>{{ $sample->id }}</td>
                                <td>
                                    @if($sample->stock)
                                        <strong>{{ $sample->stock->CO_ARTI }}</strong><br>
                                        <small>{{ $sample->stock->DE_ARTI }}</small>
                                    @else
                                        <span class="text-muted">Producto no encontrado</span>
                                    @endif
                                </td>
                                <td><code>{{ $sample->image }}</code></td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="testSpecificImage({{ $sample->id }})">
                                        <i class="ri-download-line"></i> Probar
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif

        @if($recentErrors->count() > 0)
        <!-- Errores Recientes -->
        <div class="card">
            <div class="card-header bg-danger">
                <h3 class="card-title text-white">Errores Recientes</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Producto</th>
                                <th>Imagen</th>
                                <th>Error</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentErrors as $error)
                            <tr>
                                <td>
                                    @if($error->stock)
                                        {{ $error->stock->CO_ARTI }}
                                    @endif
                                </td>
                                <td><code>{{ $error->image }}</code></td>
                                <td><small class="text-danger">{{ $error->error_message }}</small></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif

@endsection

@section('customJs')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let autoDownloadInterval = null;
let isDownloading = false;

// Restaurar la última selección de batch size al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    const batchSizeSelect = document.getElementById('batch-size');
    const savedBatchSize = localStorage.getItem('lastBatchSize');
    
    if (savedBatchSize) {
        // Usar el valor guardado
        batchSizeSelect.value = savedBatchSize;
    } else {
        // Si no hay valor guardado, usar 10 como defecto
        batchSizeSelect.value = '10';
        localStorage.setItem('lastBatchSize', '10');
    }
    
    // Guardar la selección cuando cambie
    batchSizeSelect.addEventListener('change', function() {
        localStorage.setItem('lastBatchSize', this.value);
        console.log('Batch size guardado:', this.value);
    });
});

function addLog(message, type = 'info') {
    const log = document.getElementById('activity-log');
    const time = new Date().toLocaleTimeString();
    const typeClass = {
        'success': 'text-success',
        'error': 'text-danger',
        'warning': 'text-warning',
        'info': 'text-info'
    };
    
    log.innerHTML = `<div class="${typeClass[type]}"><small>[${time}] ${message}</small></div>` + log.innerHTML;
    
    // Limitar a 50 mensajes
    const messages = log.children;
    while (messages.length > 50) {
        log.removeChild(messages[messages.length - 1]);
    }
}

function updateProgress(current, total) {
    const percentage = Math.round((current / total) * 100);
    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = percentage + '%';
    progressBar.textContent = percentage + '%';
    document.getElementById('progress-text').textContent = `${current} de ${total} imágenes procesadas`;
}

function testDownload() {
    addLog('Iniciando prueba de descarga...', 'info');
    const baseUrl = document.getElementById('base-url').value;
    
    fetch('{{ route("images.download.test") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            base_url: baseUrl
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            addLog(`✓ Imagen descargada: ${data.image_name}`, 'success');
            Swal.fire('Éxito', 'Imagen descargada correctamente', 'success');
        } else {
            addLog(`✗ Error: ${data.error}`, 'error');
            Swal.fire('Error', data.error, 'error');
        }
    })
    .catch(error => {
        addLog(`✗ Error de conexión: ${error}`, 'error');
        Swal.fire('Error', 'Error de conexión', 'error');
    });
}

function testSpecificImage(imageId) {
    addLog(`Probando descarga de imagen ID: ${imageId}`, 'info');
    const baseUrl = document.getElementById('base-url').value;
    
    fetch('{{ route("images.download.test") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            image_id: imageId,
            base_url: baseUrl
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            addLog(`✓ Imagen ${imageId} descargada`, 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            addLog(`✗ Error con imagen ${imageId}: ${data.error}`, 'error');
        }
    });
}

function downloadBatch() {
    if (isDownloading) {
        addLog('Ya hay una descarga en progreso', 'warning');
        return;
    }
    
    isDownloading = true;
    const batchSize = document.getElementById('batch-size').value;
    const baseUrl = document.getElementById('base-url').value;
    
    // Guardar la selección actual en localStorage
    localStorage.setItem('lastBatchSize', batchSize);
    addLog(`========================================`, 'info');
    addLog(`INICIANDO DESCARGA DE ${batchSize} IMÁGENES`, 'info');
    addLog(`========================================`, 'info');
    addLog(`Por favor espere, esto puede tomar ${Math.round(batchSize * 2.2 / 60)} minutos aproximadamente...`, 'warning');
    
    document.getElementById('download-progress').style.display = 'block';
    
    // Actualizar progreso cada 5 segundos mientras descarga
    let progressCounter = 0;
    const totalToProcess = parseInt(batchSize); // Usar el tamaño real del lote
    const progressInterval = setInterval(() => {
        if (!isDownloading) {
            clearInterval(progressInterval);
            return;
        }
        progressCounter++;
        // Estimar progreso basado en el tiempo (2.2 segundos por imagen aproximadamente)
        const estimatedProcessed = Math.min(totalToProcess - 1, Math.floor((progressCounter * 5) / 2.2));
        updateProgress(estimatedProcessed, totalToProcess);
        addLog(`Procesando... (${progressCounter * 5} segundos transcurridos)`, 'info');
    }, 5000);
    
    fetch('{{ route("images.download.batch") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            batch_size: batchSize,
            use_http: true,
            base_url: baseUrl
        })
    })
    .then(response => response.json())
    .then(data => {
        isDownloading = false;
        clearInterval(progressInterval); // Limpiar el interval
        
        // Actualizar con los valores reales procesados
        const processed = data.stats ? data.stats.processed : totalToProcess;
        updateProgress(processed, processed); // Mostrar completado con números reales
        
        if (data.success) {
            addLog(`✓ Lote completado: ${data.stats.downloaded} descargadas, ${data.stats.errors} errores`, 'success');
            
            // Mostrar detalles
            if (data.stats.details) {
                data.stats.details.forEach(detail => {
                    if (detail.success) {
                        addLog(`  ✓ ${detail.product_code}: ${detail.image_name}`, 'success');
                    } else {
                        addLog(`  ✗ Stock ${detail.stock_id}: ${detail.error}`, 'error');
                    }
                });
            }
            
            // Recargar página después de 3 segundos
            setTimeout(() => location.reload(), 3000);
        } else {
            addLog(`✗ Error: ${data.message}`, 'error');
        }
    })
    .catch(error => {
        isDownloading = false;
        clearInterval(progressInterval); // Limpiar el interval también en caso de error
        document.getElementById('download-progress').style.display = 'none';
        addLog(`✗ Error de conexión: ${error}`, 'error');
    });
}

function startAutoDownload() {
    if (autoDownloadInterval) {
        addLog('La descarga automática ya está activa', 'warning');
        return;
    }
    
    const batchSize = document.getElementById('batch-size').value;
    addLog(`Iniciando descarga automática (lotes de ${batchSize})...`, 'info');
    
    document.getElementById('stop-btn').disabled = false;
    document.querySelector('button[onclick="startAutoDownload()"]').disabled = true;
    
    // Ejecutar inmediatamente
    downloadBatch();
    
    // Luego cada 10 segundos
    autoDownloadInterval = setInterval(() => {
        if (!isDownloading) {
            downloadBatch();
        }
    }, 10000);
}

function stopAutoDownload() {
    // Detener descarga automática
    if (autoDownloadInterval) {
        clearInterval(autoDownloadInterval);
        autoDownloadInterval = null;
        addLog('Descarga automática detenida', 'warning');
        document.querySelector('button[onclick="startAutoDownload()"]').disabled = false;
    }
    
    // Detener descarga de todas las restantes
    if (downloadAllInterval) {
        stopDownloadAll();
    }
    
    document.getElementById('stop-btn').disabled = true;
}

function resetErrors() {
    Swal.fire({
        title: '¿Reintentar imágenes con error?',
        text: 'Se resetearán todas las imágenes marcadas con error para poder volver a intentar su descarga.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, reintentar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            addLog('Reseteando imágenes con error...', 'info');
            
            Swal.fire({
                title: 'Procesando',
                text: 'Reseteando imágenes con error...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            fetch('{{ route("images.download.reset-errors") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    addLog(`✓ ${data.message}`, 'success');
                    Swal.fire(
                        '¡Éxito!',
                        data.message,
                        'success'
                    ).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire(
                        'Error',
                        data.message || 'Error al resetear las imágenes',
                        'error'
                    );
                }
            })
            .catch(error => {
                Swal.fire(
                    'Error',
                    'Error de conexión al resetear las imágenes',
                    'error'
                );
                addLog(`✗ Error de conexión: ${error}`, 'error');
            });
        }
    });
}

function downloadCategories() {
    addLog('Iniciando descarga de imágenes de categorías...', 'info');
    
    Swal.fire({
        title: 'Descargando categorías',
        text: 'Por favor espere...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch('{{ route("images.download.categories") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if (data.success) {
            addLog(`✓ ${data.message}`, 'success');
            addLog(`  Descargadas: ${data.stats.downloaded}`, 'success');
            addLog(`  Con errores: ${data.stats.errors}`, data.stats.errors > 0 ? 'warning' : 'info');
            
            // Mostrar detalles
            if (data.stats.details && data.stats.details.length > 0) {
                data.stats.details.forEach(detail => {
                    if (detail.success) {
                        addLog(`  ✓ ${detail.category}: ${detail.image}`, 'success');
                    } else {
                        addLog(`  ✗ ${detail.category}: ${detail.error}`, 'error');
                    }
                });
            }
            
            Swal.fire(
                'Completado',
                `Se procesaron ${data.stats.processed} categorías\n` +
                `Descargadas: ${data.stats.downloaded}\n` +
                `Errores: ${data.stats.errors}`,
                'success'
            );
        } else {
            addLog(`✗ Error: ${data.message}`, 'error');
            Swal.fire('Error', data.message, 'error');
        }
    })
    .catch(error => {
        Swal.close();
        addLog(`✗ Error de conexión: ${error}`, 'error');
        Swal.fire('Error', 'Error de conexión', 'error');
    });
}

function downloadSubcategories() {
    addLog('Iniciando descarga de imágenes de subcategorías...', 'info');
    
    Swal.fire({
        title: 'Descargando subcategorías',
        text: 'Por favor espere...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch('{{ route("images.download.subcategories") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if (data.success) {
            addLog(`✓ ${data.message}`, 'success');
            addLog(`  Descargadas: ${data.stats.downloaded}`, 'success');
            addLog(`  Con errores: ${data.stats.errors}`, data.stats.errors > 0 ? 'warning' : 'info');
            
            // Mostrar detalles
            if (data.stats.details && data.stats.details.length > 0) {
                data.stats.details.forEach(detail => {
                    if (detail.success) {
                        addLog(`  ✓ ${detail.subcategory}: ${detail.image}`, 'success');
                    } else {
                        addLog(`  ✗ ${detail.subcategory}: ${detail.error}`, 'error');
                    }
                });
            }
            
            Swal.fire(
                'Completado',
                `Se procesaron ${data.stats.processed} subcategorías\n` +
                `Descargadas: ${data.stats.downloaded}\n` +
                `Errores: ${data.stats.errors}`,
                'success'
            );
        } else {
            addLog(`✗ Error: ${data.message}`, 'error');
            Swal.fire('Error', data.message, 'error');
        }
    })
    .catch(error => {
        Swal.close();
        addLog(`✗ Error de conexión: ${error}`, 'error');
        Swal.fire('Error', 'Error de conexión', 'error');
    });
}

let downloadAllInterval = null;
let totalPendingImages = {{ $stats['pendientes'] }};
let processedImages = 0;

function downloadAllRemaining() {
    const totalImages = {{ $stats['pendientes'] }};
    
    Swal.fire({
        title: '¿Descargar todas las imágenes restantes?',
        html: `Se descargarán <b>${totalImages}</b> imágenes.<br>` +
              `Tiempo estimado: <b>${Math.round(totalImages * 2.2 / 60)} minutos</b><br><br>` +
              `<small>El proceso continuará hasta completarse o que lo detenga manualmente.</small>`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, descargar todas',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            startDownloadAll();
        }
    });
}

function startDownloadAll() {
    if (downloadAllInterval) {
        addLog('Ya hay una descarga masiva en progreso', 'warning');
        return;
    }
    
    const baseUrl = document.getElementById('base-url').value;
    totalPendingImages = {{ $stats['pendientes'] }};
    processedImages = 0;
    
    addLog(`========================================`, 'info');
    addLog(`INICIANDO DESCARGA DE TODAS LAS IMÁGENES RESTANTES`, 'info');
    addLog(`Total a descargar: ${totalPendingImages} imágenes`, 'info');
    addLog(`========================================`, 'info');
    
    document.getElementById('download-all-btn').disabled = true;
    document.getElementById('download-all-btn').innerHTML = '<i class="ri-loader-line fa-spin"></i> Descargando...';
    document.getElementById('stop-btn').disabled = false;
    document.getElementById('download-progress').style.display = 'block';
    
    // Función para descargar lotes continuamente
    function downloadNextBatch() {
        if (!downloadAllInterval) {
            return; // Detenido
        }
        
        const batchSize = 50; // Usar lotes de 50 para mejor rendimiento
        
        fetch('{{ route("images.download.batch") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                batch_size: batchSize,
                use_http: true,
                base_url: baseUrl
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                processedImages += data.stats.processed;
                
                // Actualizar progreso
                updateProgress(processedImages, totalPendingImages);
                
                if (data.stats.processed > 0) {
                    addLog(`✓ Lote procesado: ${data.stats.downloaded} descargadas, ${data.stats.errors} errores (${processedImages}/${totalPendingImages})`, 'success');
                    
                    // Continuar con el siguiente lote
                    if (downloadAllInterval) {
                        setTimeout(downloadNextBatch, 2000); // Esperar 2 segundos entre lotes
                    }
                } else {
                    // No hay más imágenes pendientes
                    stopDownloadAll();
                    addLog(`✓ DESCARGA COMPLETA: Todas las imágenes han sido procesadas`, 'success');
                    Swal.fire(
                        '¡Completado!',
                        `Se han descargado todas las imágenes disponibles.\nTotal procesado: ${processedImages}`,
                        'success'
                    ).then(() => {
                        location.reload();
                    });
                }
            } else {
                addLog(`✗ Error en lote: ${data.message}`, 'error');
                // Continuar intentando
                if (downloadAllInterval) {
                    setTimeout(downloadNextBatch, 5000); // Esperar 5 segundos en caso de error
                }
            }
        })
        .catch(error => {
            addLog(`✗ Error de conexión: ${error}`, 'error');
            // Reintentar en caso de error de conexión
            if (downloadAllInterval) {
                setTimeout(downloadNextBatch, 10000); // Esperar 10 segundos en caso de error de conexión
            }
        });
    }
    
    // Inicializar el intervalo
    downloadAllInterval = true;
    downloadNextBatch();
}

function stopDownloadAll() {
    downloadAllInterval = null;
    
    addLog('Descarga masiva detenida', 'warning');
    
    document.getElementById('download-all-btn').disabled = false;
    document.getElementById('download-all-btn').innerHTML = '<i class="ri-download-cloud-line"></i> Descargar Todas las Restantes';
    document.getElementById('stop-btn').disabled = true;
    
    // Mantener el progreso visible
    setTimeout(() => {
        document.getElementById('download-progress').style.display = 'none';
    }, 5000);
}

function downloadBanners() {
    addLog('Iniciando descarga de imágenes de banners...', 'info');
    
    Swal.fire({
        title: 'Descargando banners',
        text: 'Por favor espere...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch('{{ route("images.download.banners") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if (data.success) {
            addLog(`✓ ${data.message}`, 'success');
            addLog(`  Descargadas: ${data.stats.downloaded}`, 'success');
            addLog(`  Ya tenían imagen: ${data.stats.already_has_image}`, 'info');
            addLog(`  Con errores: ${data.stats.errors}`, data.stats.errors > 0 ? 'warning' : 'info');
            
            // Mostrar detalles si hay
            if (data.stats.details && data.stats.details.length > 0) {
                data.stats.details.forEach(detail => {
                    if (detail.success) {
                        addLog(`  ✓ Banner: ${detail.banner_name} - ${detail.image}`, 'success');
                    } else {
                        addLog(`  ✗ Banner: ${detail.banner_name} - ${detail.error}`, 'error');
                    }
                });
            }
            
            Swal.fire(
                'Completado',
                `Se procesaron ${data.stats.processed} banners\n` +
                `Descargadas: ${data.stats.downloaded}\n` +
                `Ya tenían imagen: ${data.stats.already_has_image}\n` +
                `Errores: ${data.stats.errors}`,
                'success'
            );
        } else {
            addLog(`✗ Error: ${data.message}`, 'error');
            Swal.fire('Error', data.message, 'error');
        }
    })
    .catch(error => {
        Swal.close();
        addLog(`✗ Error de conexión: ${error}`, 'error');
        Swal.fire('Error', 'Error de conexión', 'error');
    });
}

function downloadSliders() {
    addLog('Iniciando descarga de imágenes de sliders...', 'info');
    
    Swal.fire({
        title: 'Descargando sliders',
        text: 'Por favor espere...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch('{{ route("images.download.sliders") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if(data.success) {
            let message = `Sliders procesados: ${data.stats.processed}\n`;
            message += `Descargados: ${data.stats.downloaded}\n`;
            message += `Ya tenían imagen: ${data.stats.already_has_image}\n`;
            message += `Errores: ${data.stats.errors}`;
            
            if(data.stats.errors > 0 && data.stats.details) {
                data.stats.details.forEach(detail => {
                    if(!detail.success) {
                        addLog(`Error en slider ${detail.slider_name}: ${detail.error}`, 'error');
                    }
                });
            }
            
            Swal.fire({
                icon: 'success',
                title: 'Proceso completado',
                text: message
            });
            
            addLog(message, 'success');
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: data.message || 'Error al descargar sliders'
            });
            addLog('Error al descargar sliders: ' + (data.message || 'Error desconocido'), 'error');
        }
    })
    .catch(error => {
        Swal.close();
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error al procesar la descarga de sliders'
        });
        addLog('Error fatal: ' + error, 'error');
    });
}
</script>
@endsection