@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.import-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
}

.step-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.results-table {
    max-height: 400px;
    overflow-y: auto;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.preview-item {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.preview-item img {
    max-width: 100%;
    height: 80px;
    object-fit: cover;
    margin-bottom: 5px;
}

.preview-item.matched {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.preview-item.no-match {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.preview-item.exists {
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.stats-box {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.stat-item {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    flex: 1;
    margin: 0 5px;
}

.stat-item.success {
    background-color: #d4edda;
    color: #155724;
}

.stat-item.warning {
    background-color: #fff3cd;
    color: #856404;
}

.stat-item.danger {
    background-color: #f8d7da;
    color: #721c24;
}

.stat-item.info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
}

.progress-section {
    display: none;
    margin-top: 20px;
}

.import-section:hover {
    background-color: #f8f9fa;
    border-color: #007bff !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
</style>
@endpush

@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">Importar Imágenes</h4>
            <div class="page-title-right">
                <button type="button" class="btn btn-sm btn-warning" onclick="clearSavedPaths()">
                <i class="ri-eraser-line"></i> Limpiar rutas guardadas
                </button>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver al Tablero</a>
            </div>
        </div>
    </div>
</div>
        
        <!-- Selector de tipo de importación -->
        <div class="step-card">
            <h4><i class="ri-image-2-line"></i> Seleccione qué tipo de imágenes desea importar</h4>
            <div class="row mt-4">
                <!-- Categorías -->
                <div class="col-md-3">
                    <div class="import-section text-center p-4" style="cursor: pointer; border: 2px solid #dee2e6; border-radius: 10px;" 
                         onclick="selectImportType('categories')">
                        <i class="ri-folder-line ri-3x text-primary mb-3"></i>
                        <h5>Categorías</h5>
                        <p class="text-muted small">Importar imágenes para categorías principales</p>
                    </div>
                </div>
                
                <!-- Subcategorías -->
                <div class="col-md-3">
                    <div class="import-section text-center p-4" style="cursor: pointer; border: 2px solid #dee2e6; border-radius: 10px;" 
                         onclick="selectImportType('subcategories')">
                        <i class="ri-folder-open-line ri-3x text-info mb-3"></i>
                        <h5>Subcategorías</h5>
                        <p class="text-muted small">Importar imágenes para subcategorías</p>
                    </div>
                </div>
                
                <!-- Marcas -->
                <div class="col-md-3">
                    <div class="import-section text-center p-4" style="cursor: pointer; border: 2px solid #dee2e6; border-radius: 10px;" 
                         onclick="selectImportType('brands')">
                        <i class="ri-price-tag-line ri-3x text-warning mb-3"></i>
                        <h5>Marcas</h5>
                        <p class="text-muted small">Importar imágenes para marcas</p>
                    </div>
                </div>
                
                <!-- Productos -->
                <div class="col-md-3">
                    <div class="import-section text-center p-4" style="cursor: pointer; border: 2px solid #dee2e6; border-radius: 10px;" 
                         onclick="selectImportType('products')">
                        <i class="ri-box-3-line ri-3x text-success mb-3"></i>
                        <h5>Productos</h5>
                        <p class="text-muted small">Importar imágenes para productos</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paso 1: Especificar carpeta (oculto inicialmente) -->
        <div class="step-card" id="pathSection" style="display: none;">
            <h4><i class="ri-folder-open-line"></i> Paso 1: Especificar Carpeta de Origen</h4>
            <p class="text-muted">Ingrese la ruta completa de la carpeta donde están las imágenes de <span id="importTypeText"></span></p>
            
            <div class="mb-3">
                <label>Ruta de la carpeta:</label>
                <input type="text" id="source_path" class="form-control" 
                       placeholder="Ej: C:\xampp\htdocs\laravel_tesauro_online_shop\_migration_images_from_other_ecommerce_">
                <small class="form-text text-muted" id="pathHelp">
                    <!-- El texto de ayuda se actualiza dinámicamente -->
                </small>
            </div>
            
            <input type="hidden" id="import_type" value="">
            
            <button type="button" id="analyzeBtn" class="btn btn-info">
                <i class="ri-search-line"></i> Analizar Carpeta
            </button>
            <button type="button" id="backBtn" class="btn btn-secondary ms-2">
                <i class="ri-arrow-left-line"></i> Volver
            </button>
        </div>

        <!-- Resultados del análisis -->
        <div id="analysisResults" class="step-card" style="display: none;">
            <h4><i class="ri-bar-chart-line"></i> Paso 2: Resultados del Análisis</h4>
            
            <div class="stats-box">
                <div class="stat-item info">
                    <div class="stat-number" id="totalImages">0</div>
                    <div>Total de imágenes</div>
                </div>
                <div class="stat-item success">
                    <div class="stat-number" id="matchedImages">0</div>
                    <div>Productos encontrados</div>
                </div>
                <div class="stat-item warning">
                    <div class="stat-number" id="existingImages">0</div>
                    <div>Ya tienen imagen</div>
                </div>
                <div class="stat-item danger">
                    <div class="stat-number" id="notMatchedImages">0</div>
                    <div>Sin producto</div>
                </div>
            </div>

            <div class="results-table">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Archivo</th>
                            <th id="codeHeaderLabel">Código</th>
                            <th id="itemHeaderLabel">Producto</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody id="resultsTableBody">
                        <!-- Se llena dinámicamente -->
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                <button type="button" id="importBtn" class="btn btn-success" disabled>
                    <i class="ri-upload-line"></i> Importar Imágenes
                </button>
                <button type="button" id="cancelBtn" class="btn btn-secondary">
                    <i class="ri-close-line"></i> Cancelar
                </button>
            </div>
        </div>

        <!-- Progreso de importación -->
        <div id="importProgress" class="step-card progress-section">
            <h4><i class="ri-loader-line fa-spin"></i> Importando Imágenes...</h4>
            <div class="progress" style="height: 30px;">
                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                     role="progressbar" style="width: 0%">0%</div>
            </div>
            <p class="mt-2" id="progressText">Preparando importación...</p>
        </div>

        <!-- Resultados finales -->
        <div id="finalResults" class="step-card" style="display: none;">
            <h4><i class="ri-checkbox-circle-line text-success"></i> Importación Completada</h4>
            <div class="alert alert-success" id="finalMessage"></div>
            <div class="mt-3" id="finalButtons">
                <!-- Los botones se generan dinámicamente según el tipo -->
            </div>
        </div>


@endsection

@section('customJs')
<script>
$(document).ready(function() {
    let analysisData = null;
    let selectedType = null;

    // Función para seleccionar tipo de importación
    window.selectImportType = function(type) {
        selectedType = type;
        $('#import_type').val(type);
        
        // Actualizar textos según el tipo
        let typeText = '';
        let helpText = '';
        let placeholder = '';
        
        switch(type) {
            case 'categories':
                typeText = 'categorías';
                helpText = 'Las imágenes deben coincidir con el campo IMAGEN de las categorías';
                placeholder = 'C:\\xampp\\htdocs\\laravel_tesauro_online_shop\\_migration_images_from_other_ecommerce_\\categories';
                break;
            case 'subcategories':
                typeText = 'subcategorías';
                helpText = 'Las imágenes deben coincidir con el campo IMAGEN de las subcategorías';
                placeholder = 'C:\\xampp\\htdocs\\laravel_tesauro_online_shop\\_migration_images_from_other_ecommerce_\\subcategories';
                break;
            case 'brands':
                typeText = 'marcas';
                helpText = 'Las imágenes deben coincidir con el campo IMAGEN de las marcas';
                placeholder = 'C:\\xampp\\htdocs\\laravel_tesauro_online_shop\\_migration_images_from_other_ecommerce_\\brands';
                break;
            case 'products':
                typeText = 'productos';
                helpText = 'Las imágenes deben tener como nombre el código del producto (CO_ARTI). Ej: 001008.jpg para la principal, 001008_1.jpg para adicionales';
                placeholder = 'C:\\xampp\\htdocs\\laravel_tesauro_online_shop\\_migration_images_from_other_ecommerce_\\products';
                break;
        }
        
        $('#importTypeText').text(typeText);
        $('#pathHelp').text(helpText);
        $('#source_path').attr('placeholder', placeholder);
        
        // Cargar la última ruta usada para este tipo desde localStorage
        const savedPath = localStorage.getItem('import_path_' + type);
        if (savedPath) {
            $('#source_path').val(savedPath);
        } else {
            $('#source_path').val('');
        }
        
        // Mostrar sección de ruta y ocultar selector
        $('.step-card:first').hide();
        $('#pathSection').fadeIn();
        
        // Resetear análisis previo
        $('#analysisResults').hide();
        analysisData = null;
    };
    
    // Botón volver
    $('#backBtn').click(function() {
        $('#pathSection').hide();
        $('.step-card:first').fadeIn();
        $('#analysisResults').hide();
        $('#importProgress').hide();
        $('#finalResults').hide();
        selectedType = null;
        analysisData = null;
    });

    // Analizar carpeta
    $('#analyzeBtn').click(function() {
        const sourcePath = $('#source_path').val().trim();
        const importType = $('#import_type').val();
        
        if (!sourcePath) {
            Swal.fire('Error', 'Por favor ingrese una ruta de carpeta', 'error');
            return;
        }

        // Guardar la ruta en localStorage para este tipo
        localStorage.setItem('import_path_' + importType, sourcePath);

        $(this).prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Analizando...');

        $.ajax({
            url: '{{ route("admin.import-images.analyze") }}',
            type: 'POST',
            data: {
                source_path: sourcePath,
                type: importType,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    analysisData = response;
                    displayAnalysisResults(response);
                    
                    // Debug: mostrar ejemplos de lo que no coincidió
                    if (response.not_matched > 0 && response.results) {
                        let notMatchedFiles = response.results
                            .filter(r => !r.matched)
                            .slice(0, 5)
                            .map(r => r.filename)
                            .join(', ');
                        console.log('Archivos sin coincidencia (primeros 5):', notMatchedFiles);
                    }
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Error al analizar la carpeta', 'error');
            },
            complete: function() {
                $('#analyzeBtn').prop('disabled', false).html('<i class="ri-search-line"></i> Analizar Carpeta');
            }
        });
    });

    // Mostrar resultados del análisis
    function displayAnalysisResults(data) {
        $('#totalImages').text(data.total);
        $('#matchedImages').text(data.matched);
        $('#existingImages').text(data.already_imported);
        $('#notMatchedImages').text(data.not_matched);

        // Actualizar etiquetas según el tipo
        let itemLabel = 'Producto';
        let codeLabel = 'Código';
        
        switch(selectedType) {
            case 'categories':
                itemLabel = 'Categoría';
                codeLabel = 'Archivo';
                break;
            case 'subcategories':
                itemLabel = 'Subcategoría';
                codeLabel = 'Archivo';
                break;
            case 'brands':
                itemLabel = 'Marca';
                codeLabel = 'Archivo';
                break;
        }
        
        // Actualizar encabezados de tabla
        $('#itemHeaderLabel').text(itemLabel);
        $('#codeHeaderLabel').text(codeLabel);

        // Llenar tabla
        let tableHtml = '';
        data.results.forEach(function(item) {
            let statusClass = '';
            let statusText = '';
            
            if (item.matched && !item.has_images) {
                statusClass = 'bg-success';
                statusText = 'Listo para importar';
            } else if (item.matched && item.has_images) {
                if (item.will_replace) {
                    statusClass = 'bg-info';
                    statusText = 'Reemplazará imagen existente';
                } else if (item.can_add_more) {
                    // Para productos, verificar si es imagen principal o adicional
                    if (selectedType === 'products' && item.filename) {
                        if (item.filename.includes('_')) {
                            statusClass = 'bg-primary';
                            statusText = 'Agregará imagen adicional';
                        } else {
                            statusClass = 'bg-success';
                            statusText = 'Agregará imagen principal';
                        }
                    } else {
                        statusClass = 'bg-primary';
                        statusText = 'Agregará imagen';
                    }
                } else {
                    statusClass = 'bg-warning';
                    statusText = 'Ya tiene imagen';
                }
            } else {
                statusClass = 'bg-danger';
                statusText = 'Sin ' + itemLabel.toLowerCase();
            }

            tableHtml += `
                <tr>
                    <td>${item.filename}</td>
                    <td><code>${item.code || item.filename}</code></td>
                    <td>${item.item_name || '-'}</td>
                    <td><span class="badge ${statusClass}">${statusText}</span></td>
                </tr>
            `;
        });

        $('#resultsTableBody').html(tableHtml);
        $('#analysisResults').slideDown();

        // Habilitar botón de importar solo si hay imágenes para importar
        if (data.matched > 0) {
            $('#importBtn').prop('disabled', false);
        } else {
            $('#importBtn').prop('disabled', true);
        }
    }

    // Importar imágenes
    $('#importBtn').click(function() {
        if (!analysisData) return;

        let confirmHtml = '';
        
        if (analysisData.type === 'products') {
            confirmHtml = `Se agregarán <b>${analysisData.matched}</b> imágenes adicionales a los productos.<br>`;
            if (analysisData.already_imported > 0) {
                confirmHtml += `<span class="text-info"><i class="ri-information-line"></i> Nota: ${analysisData.already_imported} productos ya tienen al menos una imagen.</span>`;
            }
        } else {
            confirmHtml = `Se importarán <b>${analysisData.matched}</b> imágenes.<br>`;
            if (analysisData.will_replace > 0) {
                confirmHtml += `<span class="text-info"><i class="ri-refresh-line"></i> Se reemplazarán ${analysisData.will_replace} imágenes existentes.</span><br>`;
            }
            if (analysisData.not_matched > 0) {
                confirmHtml += `Se omitirán ${analysisData.not_matched} archivos sin coincidencia.`;
            }
        }

        Swal.fire({
            title: '¿Confirmar importación?',
            html: confirmHtml,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, importar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                startImport();
            }
        });
    });

    // Proceso de importación
    function startImport() {
        $('#analysisResults').hide();
        $('#importProgress').show();
        
        // Mostrar progreso inicial
        $('#progressBar').css('width', '10%').text('10%');
        $('#progressText').text('Procesando imágenes... Esto puede tomar varios minutos...');

        $.ajax({
            url: '{{ route("admin.import-images.import") }}',
            type: 'POST',
            data: {
                source_path: analysisData.source_path,
                type: selectedType,
                _token: '{{ csrf_token() }}'
            },
            timeout: 600000, // 10 minutos de timeout
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                // Simular progreso
                var progress = 10;
                var interval = setInterval(function() {
                    if (progress < 90) {
                        progress += 5;
                        $('#progressBar').css('width', progress + '%').text(progress + '%');
                        
                        if (analysisData.total > 0) {
                            let approxProcessed = Math.floor((progress / 100) * analysisData.matched);
                            $('#progressText').text('Importando imágenes... ' + approxProcessed + ' de ' + analysisData.matched + ' aproximadamente...');
                        }
                    }
                }, 2000);
                
                xhr.addEventListener("loadend", function() {
                    clearInterval(interval);
                });
                
                return xhr;
            },
            success: function(response) {
                if (response.status) {
                    $('#progressBar').css('width', '100%').text('100%');
                    $('#progressText').text('¡Importación completada!');
                    
                    setTimeout(function() {
                        $('#importProgress').hide();
                        $('#finalMessage').html(response.message);
                        
                        // Generar botones según el tipo
                        let buttonsHtml = '';
                        switch(selectedType) {
                            case 'categories':
                                buttonsHtml = `
                                    <a href="{{ route('categories.index') }}" class="btn btn-success btn-lg">
                                        <i class="ri-eye-line"></i> Ver Categorías
                                    </a>`;
                                break;
                            case 'subcategories':
                                buttonsHtml = `
                                    <a href="{{ route('sub-categories.index') }}" class="btn btn-success btn-lg">
                                        <i class="ri-eye-line"></i> Ver Subcategorías
                                    </a>`;
                                break;
                            case 'brands':
                                buttonsHtml = `
                                    <a href="{{ route('brand.index') }}" class="btn btn-success btn-lg">
                                        <i class="ri-eye-line"></i> Ver Marcas
                                    </a>`;
                                break;
                            case 'products':
                                buttonsHtml = `
                                    <a href="{{ route('products.index') }}" class="btn btn-success btn-lg">
                                        <i class="ri-eye-line"></i> Ver Productos
                                    </a>`;
                                break;
                        }
                        
                        buttonsHtml += `
                            <button type="button" class="btn btn-primary" onclick="location.reload()">
                                <i class="ri-restart-line"></i> Nueva Importación
                            </button>
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                                <i class="ri-home-line"></i> Ir al Tablero
                            </a>`;
                        
                        $('#finalButtons').html(buttonsHtml);
                        $('#finalResults').show();
                    }, 1000);
                } else {
                    Swal.fire('Error', response.message, 'error');
                    $('#importProgress').hide();
                    $('#analysisResults').show();
                }
            },
            error: function(xhr) {
                let errorMessage = 'Error durante la importación';
                let errorDetail = '';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                    if (xhr.responseJSON.file) {
                        errorDetail = '<br><small>Archivo: ' + xhr.responseJSON.file + '</small>';
                    }
                    if (xhr.responseJSON.error_detail) {
                        console.error('Error detail:', xhr.responseJSON.error_detail);
                    }
                } else if (xhr.status === 0) {
                    errorMessage = 'Timeout - La importación tomó demasiado tiempo. Intente con menos imágenes.';
                } else if (xhr.status === 500) {
                    errorMessage = 'Error interno del servidor';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: errorMessage + errorDetail,
                    width: 600
                });
                
                $('#importProgress').hide();
                $('#analysisResults').show();
            }
        });
    }

    // Cancelar
    $('#cancelBtn').click(function() {
        $('#analysisResults').slideUp();
        $('#source_path').val('');
        analysisData = null;
    });
});

// Función para limpiar rutas guardadas
function clearSavedPaths() {
    Swal.fire({
        title: '¿Limpiar rutas guardadas?',
        text: 'Se eliminarán todas las rutas guardadas para cada tipo de importación',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, limpiar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            localStorage.removeItem('import_path_categories');
            localStorage.removeItem('import_path_subcategories');
            localStorage.removeItem('import_path_brands');
            localStorage.removeItem('import_path_products');
            
            Swal.fire({
                icon: 'success',
                title: 'Rutas limpiadas',
                text: 'Se han eliminado todas las rutas guardadas',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}
</script>
@endsection