@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">Descarga de Imágenes Multi-Cliente</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.multi-client.config') }}" class="btn btn-info">
                <i class="ri-settings-3-line"></i> Configurar Clientes
                </a>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>
        
        <!-- Estadísticas Generales -->
        <div class="row mb-3">
            <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_references']) }}</h4>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-info-subtle rounded fs-3">
                                    <i class="ri-image-2-line text-info"></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['pending']) }}</h4>
                            </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['downloaded']) }}</h4>
                            </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">Fallidas</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['failed']) }}</h4>
                            </div>
                            <div class="avatar-sm">
                                <span class="avatar-title bg-danger-subtle rounded fs-3">
                                    <i class="ri-close-line text-danger"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Selector de Cliente -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ri-user-line"></i> Seleccionar Cliente
                </h3>
            </div>
            <div class="card-body">
                @if($clients->isEmpty())
                    <div class="alert alert-warning">
                        <i class="ri-error-warning-line"></i> 
                        No hay clientes configurados. 
                        <a href="{{ route('admin.multi-client.config') }}">Configurar ahora</a>
                    </div>
                @else
                    <div class="row">
                        @foreach($clients as $client)
                        <div class="col-md-4 mb-3">
                            <div class="card border-primary client-card" data-client="{{ $client->client_code }}">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <i class="ri-building-line"></i> {{ $client->client_name }}
                                    </h5>
                                    <p class="text-muted mb-2">Código: <strong>{{ $client->client_code }}</strong></p>
                                    <p class="text-muted mb-2">
                                        <i class="ri-global-line"></i> {{ $client->site_url }}
                                    </p>
                                    <div class="mb-2">
                                        <small class="text-muted">Tamaños disponibles:</small><br>
                                        @foreach($client->image_sizes as $size)
                                            <span class="badge bg-info">{{ $size }}</span>
                                        @endforeach
                                    </div>
                                    <button class="btn btn-primary btn-sm btn-select-client" 
                                            data-client="{{ $client->client_code }}"
                                            data-name="{{ $client->client_name }}">
                                        <i class="ri-check-line"></i> Seleccionar
                                    </button>
                                    <button class="btn btn-info btn-sm btn-analyze-client" 
                                            data-client="{{ $client->client_code }}">
                                        <i class="ri-search-line"></i> Analizar
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- Panel de Descarga (oculto inicialmente) -->
        <div class="card mt-3" id="download-panel" style="display: none;">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title">
                    <i class="ri-download-line"></i> Descargar Imágenes - 
                    <span id="selected-client-name"></span>
                </h3>
            </div>
            <div class="card-body">
                <form id="download-form">
                    <input type="hidden" id="selected-client-code" name="client_code">
                    <input type="hidden" id="current-offset" name="offset" value="0">
                    
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label>Tipo de contenido</label>
                                <select name="type" class="form-select">
                                    <option value="products">Productos</option>
                                    <option value="categories">Categorías</option>
                                    <option value="subcategories">Subcategorías</option>
                                    <option value="varieties">Variedades</option>
                                    <option value="subvarieties">Subvariedades</option>
                                    <option value="brands">Marcas</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label>Cantidad a descargar</label>
                                <select name="limit" class="form-select">
                                    <option value="10">10 imágenes</option>
                                    <option value="50">50 imágenes</option>
                                    <option value="100">100 imágenes</option>
                                    <option value="500">500 imágenes</option>
                                    <option value="1000">1000 imágenes</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label>Modo de descarga</label>
                                <select name="download_mode" class="form-select">
                                    <option value="auto">Automático (Medium→Small, Large→Large)</option>
                                    <option value="manual">Manual (seleccionar tamaño)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label>&nbsp;</label>
                                <button type="button" class="btn btn-success btn-block" id="btn-start-download">
                                    <i class="ri-download-line"></i> Iniciar Descarga
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" id="manual-size-row" style="display: none;">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i> En modo manual, solo se descargará el tamaño seleccionado
                            </div>
                            <div class="mb-3">
                                <label>Tamaño a descargar</label>
                                <select name="size" id="size-selector" class="form-select">
                                    <option value="medium">Medium</option>
                                    <option value="large">Large</option>
                                    <option value="small">Small</option>
                                    <option value="thumb">Thumb</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- Progreso -->
                <div id="download-progress" style="display: none;">
                    <hr>
                    <h5>Progreso de Descarga - <span id="download-type-label" class="text-primary"></span></h5>
                    <div class="progress mb-3">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" 
                             id="progress-bar"
                             style="width: 0%">0%</div>
                    </div>
                    <div id="download-stats">
                        <p>
                            <i class="ri-check-line text-success"></i> Exitosas: <span id="stat-success">0</span> |
                            <i class="ri-close-line text-danger"></i> Fallidas: <span id="stat-failed">0</span> |
                            <i class="ri-information-line text-info"></i> Total disponible: <span id="stat-total">0</span> |
                            <i class="ri-list-check text-primary"></i> Procesadas: <span id="stat-processed">0</span>
                        </p>
                    </div>
                    <div id="download-log" class="border p-2" style="max-height: 200px; overflow-y: auto;">
                        <!-- Los mensajes de log aparecerán aquí -->
                    </div>
                    
                    <!-- Botón para continuar descarga -->
                    <div class="mt-3" id="continue-download-section" style="display: none;">
                        <button type="button" class="btn btn-info btn-block" id="btn-continue-download">
                            <i class="ri-arrow-right-line"></i> Descargar siguientes <span id="next-batch-count">100</span> imágenes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel de Análisis -->
        <div class="modal fade" id="analysisModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="ri-search-line"></i> Análisis de Cliente
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="analysis-content">
                        <!-- El contenido del análisis aparecerá aquí -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // Configurar AJAX con CSRF
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Seleccionar cliente
    $('.btn-select-client').click(function() {
        var clientCode = $(this).data('client');
        var clientName = $(this).data('name');
        
        $('#selected-client-code').val(clientCode);
        $('#selected-client-name').text(clientName);
        
        // Mostrar panel de descarga
        $('#download-panel').slideDown();
        
        // Marcar tarjeta como seleccionada
        $('.client-card').removeClass('border-success');
        $(this).closest('.client-card').addClass('border-success');
        
        // Scroll al panel
        $('html, body').animate({
            scrollTop: $('#download-panel').offset().top - 100
        }, 500);
    });

    // Analizar cliente
    $('.btn-analyze-client').click(function() {
        var clientCode = $(this).data('client');
        var btn = $(this);
        
        btn.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Analizando...');
        
        $.ajax({
            url: '{{ route("admin.multi-client.analyze") }}',
            type: 'POST',
            data: {
                client_code: clientCode
            },
            success: function(response) {
                btn.prop('disabled', false).html('<i class="ri-search-line"></i> Analizar');
                
                if (response.success) {
                    var html = '<div class="row">';
                    
                    // Información del cliente
                    html += '<div class="col-md-6">';
                    html += '<h6>Cliente: ' + response.client.name + '</h6>';
                    html += '<p>Sitio: <a href="' + response.client.site_url + '" target="_blank">' + response.client.site_url + '</a></p>';
                    html += '</div>';
                    
                    // Estadísticas
                    html += '<div class="col-md-6">';
                    html += '<h6>Estadísticas:</h6>';
                    html += '<ul>';
                    html += '<li>Productos con imágenes: ' + response.stats.products_with_images + '</li>';
                    html += '<li>Total de imágenes: ' + response.stats.total_images + '</li>';
                    html += '</ul>';
                    html += '</div>';
                    
                    html += '</div>';
                    
                    // Ejemplos de URLs
                    if (response.url_examples && response.url_examples.length > 0) {
                        html += '<hr><h6>Ejemplos de URLs generadas:</h6>';
                        html += '<div class="table-responsive">';
                        html += '<table class="table table-sm table-bordered">';
                        html += '<thead><tr><th>Original</th><th>Small</th><th>Medium</th><th>Large</th></tr></thead>';
                        html += '<tbody>';
                        
                        response.url_examples.forEach(function(example) {
                            html += '<tr>';
                            html += '<td><small>' + example.original + '</small></td>';
                            html += '<td><a href="' + example.small + '" target="_blank">Ver</a></td>';
                            html += '<td><a href="' + example.medium + '" target="_blank">Ver</a></td>';
                            html += '<td><a href="' + example.large + '" target="_blank">Ver</a></td>';
                            html += '</tr>';
                        });
                        
                        html += '</tbody></table>';
                        html += '</div>';
                    }
                    
                    $('#analysis-content').html(html);
                    $('#analysisModal').modal('show');
                } else {
                    Swal.fire('Error', response.message || 'Error al analizar', 'error');
                }
            },
            error: function() {
                btn.prop('disabled', false).html('<i class="ri-search-line"></i> Analizar');
                Swal.fire('Error', 'Error de conexión', 'error');
            }
        });
    });

    // Mostrar/ocultar selector de tamaño según el modo
    $('select[name="download_mode"]').change(function() {
        if ($(this).val() === 'manual') {
            $('#manual-size-row').show();
        } else {
            $('#manual-size-row').hide();
        }
    });
    
    // Variable global para tracking
    var totalProcessed = 0;
    var currentLimit = 0;
    
    // Función para ejecutar descarga
    function executeDownload(resetOffset = false) {
        if (resetOffset) {
            $('#current-offset').val(0);
            totalProcessed = 0;
        }
        
        var formData = $('#download-form').serialize();
        var btn = $('#btn-start-download');
        var continueBtn = $('#btn-continue-download');
        var selectedType = $('select[name="type"] option:selected').text();
        
        // Actualizar etiqueta del tipo
        $('#download-type-label').text(selectedType);
        
        btn.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Descargando...');
        continueBtn.prop('disabled', true);
        $('#download-progress').show();
        
        $.ajax({
            url: '{{ route("admin.multi-client.download") }}',
            type: 'POST',
            data: formData,
            success: function(response) {
                btn.prop('disabled', false).html('<i class="ri-download-line"></i> Iniciar Descarga');
                continueBtn.prop('disabled', false);
                
                if (response.success) {
                    // Actualizar estadísticas
                    $('#stat-success').text(response.stats.success || 0);
                    $('#stat-failed').text(response.stats.failed || 0);
                    $('#stat-total').text(response.total_available || 0);
                    
                    // Actualizar contador de procesadas
                    totalProcessed += (response.stats.success + response.stats.failed);
                    $('#stat-processed').text(totalProcessed);
                    
                    // Calcular progreso
                    if (response.total_available > 0) {
                        var percent = Math.round((totalProcessed / response.total_available) * 100);
                        $('#progress-bar').css('width', percent + '%').text(percent + '%');
                    }
                    
                    // Mostrar errores si los hay
                    if (response.stats.errors && response.stats.errors.length > 0) {
                        response.stats.errors.forEach(function(error) {
                            $('#download-log').prepend(
                                '<div class="text-danger"><i class="ri-close-line"></i> ' + 
                                error.image + ': ' + error.error + '</div>'
                            );
                        });
                    }
                    
                    // Agregar mensaje de éxito al log
                    $('#download-log').prepend(
                        '<div class="text-success"><i class="ri-check-line"></i> ' + 
                        'Lote completado: ' + response.stats.success + ' exitosas, ' + 
                        response.stats.failed + ' fallidas</div>'
                    );
                    
                    // Si hay más imágenes, mostrar botón de continuar
                    if (response.has_more) {
                        $('#continue-download-section').show();
                        $('#current-offset').val(response.next_offset);
                        currentLimit = response.limit;
                        
                        // Calcular cuántas quedan
                        var remaining = response.total_available - totalProcessed;
                        var nextBatch = Math.min(currentLimit, remaining);
                        $('#next-batch-count').text(nextBatch);
                        
                        Swal.fire({
                            icon: 'info',
                            title: 'Lote Completado',
                            text: `Se procesaron ${response.stats.success + response.stats.failed} imágenes. Quedan ${remaining} por descargar.`,
                            showCancelButton: true,
                            confirmButtonText: 'Continuar descarga',
                            cancelButtonText: 'Detener'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                executeDownload(false);
                            }
                        });
                    } else {
                        $('#continue-download-section').hide();
                        
                        // Obtener el tipo seleccionado
                        var selectedType = $('select[name="type"] option:selected').text();
                        
                        // Mensaje específico según el resultado
                        if (response.total_available === 0) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sin imágenes',
                                html: `<p><strong>${selectedType}:</strong> No se encontraron imágenes para descargar.</p>
                                      <p>Puedes probar con otro tipo de contenido.</p>`
                            });
                        } else {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Descarga Completada!',
                                html: `<div class="text-start">
                                    <p><strong>Tipo:</strong> ${selectedType}</p>
                                    <p><strong>Total descargadas:</strong> ${response.stats.success}</p>
                                    <p><strong>Fallidas:</strong> ${response.stats.failed}</p>
                                    <hr>
                                    <p class="text-muted">Todas las imágenes de ${selectedType} han sido procesadas.</p>
                                    <p class="text-info">Puedes cambiar el tipo de contenido para descargar otras imágenes.</p>
                                </div>`
                            });
                        }
                    }
                } else {
                    Swal.fire('Error', response.message || 'Error en la descarga', 'error');
                }
            },
            error: function() {
                btn.prop('disabled', false).html('<i class="ri-download-line"></i> Iniciar Descarga');
                continueBtn.prop('disabled', false);
                Swal.fire('Error', 'Error de conexión', 'error');
            }
        });
    }
    
    // Iniciar descarga
    $('#btn-start-download').click(function() {
        Swal.fire({
            title: '¿Iniciar descarga?',
            text: 'Se descargarán las imágenes del cliente seleccionado',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, descargar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                executeDownload(true);
            }
        });
    });
    
    // Continuar descarga
    $('#btn-continue-download').click(function() {
        executeDownload(false);
    });
});
</script>
@endsection