@extends('admin.admin_master')
@section('admin')

<style>
.protection-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
}
.import-mode-card {
    border: 2px solid #dee2e6;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}
.import-mode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.protected-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.protected-section h5 {
    color: white;
    margin-bottom: 15px;
}
.import-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.entity-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 5px solid #28a745;
    transition: all 0.3s ease;
}
.entity-card:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.entity-card.protected {
    border-left-color: #764ba2;
    background: #f8f5ff;
}
.entity-card.partial {
    border-left-color: #ffc107;
}
.stats-badge {
    background: #e9ecef;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    margin: 5px;
}
.stats-badge.new {
    background: #d4edda;
    color: #155724;
}
.stats-badge.update {
    background: #fff3cd;
    color: #856404;
}
.import-log {
    max-height: 400px;
    overflow-y: auto;
    background: #1e1e1e;
    color: #00ff00;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}
.category-structure {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
}
.category-item {
    padding: 8px 15px;
    margin: 5px 0;
    background: #f8f9fa;
    border-radius: 5px;
    border-left: 3px solid #667eea;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container-fluid">

    <!-- Start Page Title -->
    <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">Sistema de Importación Segura</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tablero</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('import.index') }}">Importar Datos</a></li>
                        <li class="breadcrumb-item active">Importación Segura</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Source Selection -->
    <div class="row">
        <div class="col-12">
            <div class="import-mode-card">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h5 class="mb-3">
                            <i class="mdi mdi-database-import mdi-24px me-2"></i>
                            Importar desde Stock Manager
                        </h5>
                        <p class="text-muted mb-0">
                            Sistema de importación inteligente que protege tu estructura profesional de categorías
                        </p>
                        <div id="connectionInfo" style="display: none;" class="mt-2">
                            <span class="badge bg-info me-2" id="connectionType">LOCAL</span>
                            <span class="text-muted" id="connectionDetails">Host: 127.0.0.1</span>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('import.index') }}" class="btn btn-secondary me-2">
                            <i class="mdi mdi-arrow-left me-2"></i>
                            Volver
                        </a>
                        <button class="btn btn-primary btn-lg" id="checkStatusBtn">
                            <i class="mdi mdi-refresh me-2"></i>
                            Verificar Estado
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Protection Notice -->
    <div class="row">
        <div class="col-12">
            <div class="protected-section">
                <h5>
                    <i class="mdi mdi-shield-check me-2"></i>
                    Estructura Protegida
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3">Tu estructura profesional está protegida:</h6>
                        <div class="category-structure">
                            <div class="category-item">
                                <strong>BELLEZ</strong> - Belleza
                                <span class="badge bg-light text-dark float-end">15 subcategorías</span>
                            </div>
                            <div class="category-item">
                                <strong>HIGIEN</strong> - Higiene
                                <span class="badge bg-light text-dark float-end">16 subcategorías</span>
                            </div>
                            <div class="category-item">
                                <strong>HOGAR</strong> - Hogar
                                <span class="badge bg-light text-dark float-end">14 subcategorías</span>
                            </div>
                            <div class="category-item">
                                <strong>LIMPIE</strong> - Limpieza
                                <span class="badge bg-light text-dark float-end">12 subcategorías</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">Comportamiento de la importación:</h6>
                        <ul class="text-white-50">
                            <li><strong>Categorías y Subcategorías:</strong> NO se modifican ni eliminan</li>
                            <li><strong>Productos existentes:</strong> Solo se actualizan precios y stock</li>
                            <li><strong>Productos nuevos:</strong> Se asignan inteligentemente a tu estructura</li>
                            <li><strong>Clientes, Proveedores y Marcas:</strong> Importación completa</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Import Status -->
    <div class="row" id="statusSection" style="display: none;">
        <div class="col-12">
            <div class="import-section">
                <h5 class="mb-4">
                    <i class="mdi mdi-chart-bar me-2"></i>
                    Estado de Importación
                    <span id="importingFrom" class="float-end text-muted" style="font-size: 0.9rem; display: none;">
                        <i class="mdi mdi-database-import me-1"></i>
                        Importando desde: <strong id="importSource"></strong>
                    </span>
                </h5>
                
                <div class="row">
                    <!-- Productos -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card partial">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-package-variant me-2"></i>
                                        Productos
                                    </h6>
                                    <p class="text-muted mb-2">Actualización inteligente de precios y stock</p>
                                    <div>
                                        <span class="stats-badge" id="productsLocal">0 en sistema</span>
                                        <span class="stats-badge" id="productsExternal">0 en Stock Manager</span>
                                    </div>
                                    <div class="mt-2">
                                        <span class="stats-badge update" id="productsToUpdate">0 por actualizar</span>
                                        <span class="stats-badge new" id="productsToCreate">0 nuevos</span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-update mdi-48px text-warning"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-warning">Actualización Parcial</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Clientes -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-account-group me-2"></i>
                                        Clientes
                                    </h6>
                                    <p class="text-muted mb-2">Importación completa</p>
                                    <div>
                                        <span class="stats-badge" id="customersLocal">0 en sistema</span>
                                        <span class="stats-badge" id="customersExternal">0 en Stock Manager</span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-check-circle mdi-48px text-success"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-success">Importación Total</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Proveedores -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-truck me-2"></i>
                                        Proveedores
                                    </h6>
                                    <p class="text-muted mb-2">Importación completa</p>
                                    <div>
                                        <span class="stats-badge" id="suppliersLocal">0 en sistema</span>
                                        <span class="stats-badge" id="suppliersExternal">0 en Stock Manager</span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-check-circle mdi-48px text-success"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-success">Importación Total</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Marcas -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-tag-multiple me-2"></i>
                                        Marcas
                                    </h6>
                                    <p class="text-muted mb-2">Importación completa</p>
                                    <div>
                                        <span class="stats-badge" id="brandsLocal">0 en sistema</span>
                                        <span class="stats-badge" id="brandsExternal">0 en Stock Manager</span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-check-circle mdi-48px text-success"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-success">Importación Total</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Categorías Protegidas -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card protected">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-folder-lock me-2"></i>
                                        Categorías
                                    </h6>
                                    <p class="text-muted mb-2">Estructura profesional protegida</p>
                                    <div>
                                        <span class="stats-badge" id="categoriesLocal">4 categorías</span>
                                        <span class="protection-badge">
                                            <i class="mdi mdi-shield-check me-1"></i>
                                            PROTEGIDAS
                                        </span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-shield-lock mdi-48px text-primary"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-primary">No Modificable</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Subcategorías Protegidas -->
                    <div class="col-md-6 mb-3">
                        <div class="entity-card protected">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-2">
                                        <i class="mdi mdi-folder-lock-open me-2"></i>
                                        Subcategorías
                                    </h6>
                                    <p class="text-muted mb-2">Estructura profesional protegida</p>
                                    <div>
                                        <span class="stats-badge" id="subcategoriesLocal">57 subcategorías</span>
                                        <span class="protection-badge">
                                            <i class="mdi mdi-shield-check me-1"></i>
                                            PROTEGIDAS
                                        </span>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="mdi mdi-shield-lock mdi-48px text-primary"></i>
                                    <p class="mb-0 mt-2">
                                        <span class="badge bg-primary">No Modificable</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mt-4">
                    <div class="col-12 text-center">
                        <button class="btn btn-success btn-lg me-3" id="startImportBtn" disabled>
                            <i class="mdi mdi-database-import me-2"></i>
                            Iniciar Importación Segura
                        </button>
                        <button class="btn btn-warning btn-lg" id="testImportBtn" disabled>
                            <i class="mdi mdi-test-tube me-2"></i>
                            Modo Prueba (Sin cambios)
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Import Progress -->
    <div class="row" id="progressSection" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="mdi mdi-progress-clock me-2"></i>
                        Progreso de Importación
                    </h5>
                    
                    <div class="progress mb-3" style="height: 30px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="importProgress" 
                             role="progressbar" 
                             style="width: 0%">
                            0%
                        </div>
                    </div>

                    <div class="import-log" id="importLog">
                        <div class="log-entry">Sistema de importación segura iniciado...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
$(document).ready(function() {
    let importStatus = null;

    // Check import status
    $('#checkStatusBtn').click(function() {
        checkImportStatus();
    });

    function checkImportStatus() {
        $('#checkStatusBtn').prop('disabled', true).html('<i class="mdi mdi-loading mdi-spin me-2"></i>Verificando...');
        
        $.ajax({
            url: '/admin/import/safe/status',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    importStatus = response.status;
                    updateStatusDisplay(response.status);
                    $('#statusSection').slideDown();
                    $('#startImportBtn, #testImportBtn').prop('disabled', false);
                    
                    // Mostrar información de conexión
                    if (response.status.connection_info) {
                        $('#connectionInfo').show();
                        $('#importingFrom').show();
                        const connInfo = response.status.connection_info;
                        
                        if (connInfo.type === 'REMOTA') {
                            $('#connectionType').removeClass('bg-info').addClass('bg-success').html(
                                '<i class="mdi mdi-cloud-check me-1"></i>CONEXIÓN REMOTA'
                            );
                            $('#connectionDetails').html(
                                `<strong>Servidor:</strong> ${connInfo.host} | <strong>BD:</strong> ${connInfo.database} | <strong>Usuario:</strong> ${connInfo.user}`
                            );
                            $('#importSource').html(`${connInfo.host} (${connInfo.database})`);
                        } else {
                            $('#connectionType').removeClass('bg-success').addClass('bg-info').html(
                                '<i class="mdi mdi-server me-1"></i>CONEXIÓN LOCAL'
                            );
                            $('#connectionDetails').html(
                                `<strong>Host:</strong> ${connInfo.host} | <strong>BD:</strong> ${connInfo.database}`
                            );
                            $('#importSource').html(`LOCAL (${connInfo.database})`);
                        }
                    }
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Estado verificado',
                        html: `<p>Conexión establecida con Stock Manager</p>
                               <p class="text-muted">Tipo: <strong>${response.status.connection_info.type}</strong></p>`,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de conexión',
                        text: response.message || 'No se pudo conectar con Stock Manager'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al verificar el estado: ' + (xhr.responseJSON?.message || xhr.statusText)
                });
            },
            complete: function() {
                $('#checkStatusBtn').prop('disabled', false).html('<i class="mdi mdi-refresh me-2"></i>Verificar Estado');
            }
        });
    }

    function updateStatusDisplay(status) {
        // Update local counts
        $('#productsLocal').text(status.sistema_local.products + ' en sistema');
        $('#customersLocal').text(status.sistema_local.customers + ' en sistema');
        $('#suppliersLocal').text(status.sistema_local.suppliers + ' en sistema');
        $('#brandsLocal').text(status.sistema_local.brands + ' en sistema');
        $('#categoriesLocal').text(status.sistema_local.categories + ' categorías');
        $('#subcategoriesLocal').text(status.sistema_local.subcategories + ' subcategorías');
        
        // Update external counts
        $('#productsExternal').text(status.stock_manager.products + ' en Stock Manager');
        $('#customersExternal').text(status.stock_manager.customers + ' en Stock Manager');
        $('#suppliersExternal').text(status.stock_manager.suppliers + ' en Stock Manager');
        $('#brandsExternal').text(status.stock_manager.brands + ' en Stock Manager');
        
        // Calculate products to update/create (simplified)
        let toUpdate = Math.min(status.sistema_local.products, status.stock_manager.products);
        let toCreate = Math.max(0, status.stock_manager.products - status.sistema_local.products);
        
        $('#productsToUpdate').text(toUpdate + ' por actualizar');
        $('#productsToCreate').text(toCreate + ' nuevos');
    }

    // Start import
    $('#startImportBtn').click(function() {
        Swal.fire({
            title: '¿Iniciar importación segura?',
            html: `
                <div class="text-start">
                    <p><strong>Se realizarán las siguientes acciones:</strong></p>
                    <ul>
                        <li>✅ Importar/actualizar clientes completos</li>
                        <li>✅ Importar/actualizar proveedores completos</li>
                        <li>✅ Importar/actualizar marcas completas (con imágenes)</li>
                        <li>🖼️ Descargar imágenes de categorías existentes</li>
                        <li>🖼️ Descargar imágenes de subcategorías existentes</li>
                        <li>⚠️ Productos existentes: solo precios y stock</li>
                        <li>✅ Productos nuevos: se crearán y asignarán automáticamente</li>
                    </ul>
                    <p class="text-danger"><strong>Las categorías y subcategorías NO se modificarán</strong></p>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, importar',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#28a745'
        }).then((result) => {
            if (result.isConfirmed) {
                startImport(false);
            }
        });
    });

    // Test import
    $('#testImportBtn').click(function() {
        Swal.fire({
            title: 'Modo prueba',
            text: 'Se simulará la importación sin realizar cambios en la base de datos',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Ejecutar prueba',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                startImport(true);
            }
        });
    });

    function startImport(testMode = false) {
        $('#progressSection').slideDown();
        $('#statusSection').slideUp();
        $('#importProgress').css('width', '0%').text('0%');
        $('#importLog').html('<div class="log-entry">Iniciando importación' + (testMode ? ' en modo prueba' : '') + '...</div>');
        
        let progress = 0;
        let steps = [
            { name: 'Marcas', endpoint: '/admin/import/safe/brands', weight: 15 },
            { name: 'Proveedores', endpoint: '/admin/import/safe/suppliers', weight: 15 },
            { name: 'Clientes', endpoint: '/admin/import/safe/customers', weight: 15 },
            { name: 'Imágenes de Categorías', endpoint: '/admin/import/safe/categories', weight: 10 },
            { name: 'Imágenes de Subcategorías', endpoint: '/admin/import/safe/subcategories', weight: 10 },
            { name: 'Productos', endpoint: '/admin/import/safe/products', weight: 35 }
        ];
        
        function processStep(index) {
            if (index >= steps.length) {
                completeImport();
                return;
            }
            
            let step = steps[index];
            addLogEntry(`Procesando ${step.name}...`);
            
            $.ajax({
                url: step.endpoint,
                method: 'POST', // Siempre usar POST
                data: { 
                    test_mode: testMode,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    progress += step.weight;
                    updateProgress(progress);
                    
                    if (response.success) {
                        let message = `✅ ${step.name}: `;
                        if (response.imported !== undefined) {
                            message += `${response.imported} nuevos, ${response.updated} actualizados`;
                            if (response.images_downloaded !== undefined && response.images_downloaded > 0) {
                                message += `, ${response.images_downloaded} imágenes descargadas`;
                            }
                        } else if (response.created !== undefined) {
                            message += `${response.created} nuevos, ${response.updated} actualizados`;
                            if (response.images_downloaded !== undefined && response.images_downloaded > 0) {
                                message += `, ${response.images_downloaded} imágenes descargadas`;
                            }
                        } else if (response.protected) {
                            message += `${response.updated} imágenes actualizadas (estructura protegida)`;
                        }
                        addLogEntry(message);
                        
                        // Show sample report for products
                        if (step.name === 'Productos' && response.report && !response.test_mode) {
                            response.report.slice(0, 5).forEach(item => {
                                if (item.tipo === 'actualizado') {
                                    addLogEntry(`  • ${item.producto}: ${item.cambios}`);
                                } else if (item.tipo === 'creado') {
                                    addLogEntry(`  • ${item.producto}: Creado en ${item.asignado}`);
                                }
                            });
                        }
                    } else {
                        addLogEntry(`⚠️ ${step.name}: ${response.message}`);
                    }
                    
                    setTimeout(() => processStep(index + 1), 500);
                },
                error: function(xhr) {
                    addLogEntry(`❌ Error en ${step.name}: ${xhr.responseJSON?.message || xhr.statusText}`);
                    setTimeout(() => processStep(index + 1), 500);
                }
            });
        }
        
        processStep(0);
    }

    function updateProgress(percent) {
        $('#importProgress').css('width', percent + '%').text(percent + '%');
    }

    function addLogEntry(message) {
        let timestamp = new Date().toLocaleTimeString();
        $('#importLog').append(`<div class="log-entry">[${timestamp}] ${message}</div>`);
        $('#importLog').scrollTop($('#importLog')[0].scrollHeight);
    }

    function completeImport() {
        updateProgress(100);
        addLogEntry('✅ Importación completada exitosamente');
        
        Swal.fire({
            icon: 'success',
            title: 'Importación completada',
            text: 'Los datos se han importado correctamente',
            confirmButtonText: 'Aceptar',
            showConfirmButton: true,
            timer: 3000
        }).then(() => {
            // Solo actualizar la visualización de estado sin mostrar mensaje
            $('#checkStatusBtn').prop('disabled', true).html('<i class="mdi mdi-loading mdi-spin me-2"></i>Actualizando...');
            
            $.ajax({
                url: '/admin/import/safe/status',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        importStatus = response.status;
                        updateStatusDisplay(response.status);
                        // No mostrar mensaje de conexión exitosa
                    }
                },
                complete: function() {
                    $('#checkStatusBtn').prop('disabled', false).html('<i class="mdi mdi-refresh me-2"></i>Verificar Estado');
                }
            });
        });
    }
});
</script>

@endsection