@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">Importar desde Tesauro CodeIgniter</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">Volver</a>
            </div>
        </div>
    </div>
</div>
        
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <!-- Tabs Navigation -->
        <div class="card">
            <div class="card-header p-0 pt-1">
                <ul class="nav nav-tabs" id="import-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {{ !$configSource || !$configImages ? 'active' : '' }}" id="config-tab" data-bs-toggle="tab" href="#config" role="tab" aria-controls="config" aria-selected="true">
                            @if($configSource && $configImages)
                                <i class="ri-checkbox-circle-line text-success"></i>
                            @else
                                <i class="ri-settings-3-line text-warning"></i>
                            @endif
                            1. Configuración
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $configSource && $configImages && !session('activeTab') ? 'active' : '' }} {{ !$configSource || !$configImages ? 'disabled' : '' }}" id="stats-tab" data-bs-toggle="tab" href="#stats" role="tab" aria-controls="stats" aria-selected="false" {{ !$configSource || !$configImages ? 'style=pointer-events:none;opacity:0.5' : '' }}>
                            @if($configSource && $configImages)
                                <i class="ri-bar-chart-line text-info"></i>
                            @else
                                <i class="ri-bar-chart-line text-muted"></i>
                            @endif
                            2. Estadísticas
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ !$configSource || !$configImages || isset($stats['source']['error']) || isset($stats['images']['error']) ? 'disabled' : '' }}" id="actions-tab" data-bs-toggle="tab" href="#actions" role="tab" aria-controls="actions" aria-selected="false" {{ !$configSource || !$configImages || isset($stats['source']['error']) || isset($stats['images']['error']) ? 'style=pointer-events:none;opacity:0.5' : '' }}>
                            @if($configSource && $configImages && !isset($stats['source']['error']) && !isset($stats['images']['error']))
                                <i class="ri-play-line text-success"></i>
                            @else
                                <i class="ri-play-line text-muted"></i>
                            @endif
                            3. Acciones
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="card-body">
                <div class="tab-content" id="import-tabs-content">
                    <!-- Tab 1: Configuración -->
                    <div class="tab-pane fade {{ !$configSource || !$configImages ? 'show active' : '' }}" id="config" role="tabpanel" aria-labelledby="config-tab">
                        <h5 class="mb-3">
                            <i class="ri-database-2-line"></i> Configuración de Bases de Datos
                        </h5>
                <form action="{{ route('codeigniter.import.config') }}" method="POST">
                    @csrf
                    <div class="row">
                        <!-- Configuración Base de Datos Tesauro -->
                        <div class="col-md-6">
                            <h6 class="text-primary">MySQL Server: Tesauro (Datos)</h6>
                            <div class="mb-3">
                                <label>Host</label>
                                <input type="text" name="source_host" class="form-control" 
                                    value="{{ $configSource->database_host ?? 'localhost' }}" required>
                            </div>
                            <div class="mb-3">
                                <label>Puerto</label>
                                <input type="text" name="source_port" class="form-control" 
                                    value="{{ $configSource->database_port ?? '3306' }}" required>
                            </div>
                            <div class="mb-3">
                                <label>Base de Datos</label>
                                <input type="text" name="source_database" class="form-control" 
                                    value="{{ $configSource->database_name ?? '' }}" 
                                    placeholder="nombre_base_datos" required>
                            </div>
                            <div class="mb-3">
                                <label>Usuario</label>
                                <input type="text" name="source_username" class="form-control" 
                                    value="{{ $configSource->database_username ?? '' }}" 
                                    placeholder="usuario_db" required>
                            </div>
                            <div class="mb-3">
                                <label>Contraseña</label>
                                <div class="input-group">
                                    <input type="password" name="source_password" id="source_password" class="form-control" 
                                        value="{{ $configSource->database_password ?? '' }}" 
                                        placeholder="contraseña">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('source_password')">
                                            <i class="ri-eye-line" id="source_password_icon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Configuración Base de Datos E-Commerce -->
                        <div class="col-md-6">
                            <h6 class="text-warning">MySQL Server: E-Commerce (Imágenes)</h6>
                            <div class="mb-3">
                                <label>Host</label>
                                <input type="text" name="images_host" class="form-control" 
                                    value="{{ $configImages->database_host ?? 'localhost' }}" required>
                            </div>
                            <div class="mb-3">
                                <label>Puerto</label>
                                <input type="text" name="images_port" class="form-control" 
                                    value="{{ $configImages->database_port ?? '3306' }}" required>
                            </div>
                            <div class="mb-3">
                                <label>Base de Datos</label>
                                <input type="text" name="images_database" class="form-control" 
                                    value="{{ $configImages->database_name ?? '' }}" 
                                    placeholder="nombre_base_datos" required>
                            </div>
                            <div class="mb-3">
                                <label>Usuario</label>
                                <input type="text" name="images_username" class="form-control" 
                                    value="{{ $configImages->database_username ?? '' }}" 
                                    placeholder="usuario_db" required>
                            </div>
                            <div class="mb-3">
                                <label>Contraseña</label>
                                <div class="input-group">
                                    <input type="password" name="images_password" id="images_password" class="form-control" 
                                        value="{{ $configImages->database_password ?? '' }}" 
                                        placeholder="contraseña">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('images_password')">
                                            <i class="ri-eye-line" id="images_password_icon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Guardar Configuración
                            </button>
                            @if($configSource && $configImages)
                                <button type="button" class="btn btn-info ms-2" onclick="testConnection()">
                                    <i class="ri-plug-line"></i> Probar Conexión
                                </button>
                            @endif
                        </div>
                    </div>
                </form>
                
                <!-- Información de Método de Descarga -->
                <hr class="my-4">
                <h5 class="mb-3">
                    <i class="ri-download-line"></i> Método de Descarga de Imágenes
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="alert alert-info">
                            <h6><i class="ri-global-line"></i> Método Actual: HTTP/HTTPS</h6>
                            <p class="mb-0">Las imágenes se descargan directamente desde el servidor web origen.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-secondary">
                            <h6><i class="ri-links-line"></i> URL Base de Imágenes</h6>
                            <p class="mb-0">Se configurará al momento de descargar las imágenes en la pantalla de descarga.</p>
                        </div>
                    </div>
                </div>
                
                @php
                    $totalImages = \App\Models\StockImage::count();
                    $pendingImages = \App\Models\StockImage::where('status', 0)->count();
                @endphp
                
                @if($totalImages > 0)
                <div class="alert alert-warning mt-3">
                    <h6><i class="ri-image-2-line"></i> Estado de Imágenes</h6>
                    <p>Tienes <strong>{{ number_format($totalImages) }}</strong> referencias de imágenes importadas.</p>
                    @if($pendingImages > 0)
                    <p><strong>{{ number_format($pendingImages) }}</strong> imágenes pendientes de descarga.</p>
                    <a href="{{ route('images.download.index') }}" class="btn btn-success btn-sm">
                        <i class="ri-download-line"></i> Ir a Descargar Imágenes
                    </a>
                    @endif
                </div>
                @endif
                    </div>
                    
                    <!-- Tab 2: Estadísticas -->
                    <div class="tab-pane fade {{ $configSource && $configImages ? 'show active' : '' }}" id="stats" role="tabpanel" aria-labelledby="stats-tab">
                        @if($configSource && $configImages)
                        <h5 class="mb-3">
                            <i class="ri-bar-chart-line"></i> Estadísticas de las Bases de Datos
                        </h5>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-primary">
                        <h5 class="mb-0 text-white">
                            <i class="ri-bar-chart-line"></i> Datos en Origen{{ $configSource && $configSource->database_name ? ' (' . $configSource->database_name . ')' : '' }}
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(isset($stats['source']['error']))
                            <div class="alert alert-danger">
                                <i class="ri-error-warning-line"></i>
                                Error: {{ $stats['source']['error'] }}
                            </div>
                        @else
                            <table class="table table-sm">
                                <tr>
                                    <td>Total Productos:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['productos'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Productos Web (WEB_VTA = S):</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['productos_web'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Marcas:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['marcas'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Categorías:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['categorias'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Subcategorías:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['subcategorias'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Con Precio > 0:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['con_precio'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Con Stock > 0:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['con_stock'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Clientes:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['clientes'] ?? 0) }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Proveedores:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['source']['proveedores'] ?? 0) }}</strong></td>
                                </tr>
                                @if(isset($stats['images']['banners']))
                                <tr>
                                    <td>Banners:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['images']['banners']) }}</strong></td>
                                </tr>
                                @endif
                                @if(isset($stats['images']['sliders']))
                                <tr>
                                    <td>Sliders:</td>
                                    <td class="text-end">
                                        <strong>{{ number_format($stats['images']['sliders']) }}</strong>
                                        @if(isset($stats['images']['slider_table']))
                                            <small class="text-muted">({{ $stats['images']['slider_table'] }})</small>
                                        @endif
                                    </td>
                                </tr>
                                @endif
                            </table>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-warning">
                        <h5 class="mb-0 text-white">
                            <i class="ri-image-2-line"></i> Base Imágenes{{ $configImages && $configImages->database_name ? ' (' . $configImages->database_name . ')' : '' }}
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(isset($stats['images']['error']))
                            <div class="alert alert-danger">
                                <i class="ri-error-warning-line"></i>
                                Error: {{ $stats['images']['error'] }}
                            </div>
                        @else
                            <table class="table table-sm">
                                <tr>
                                    <td>Tablas encontradas:</td>
                                    <td class="text-end"><strong>{{ $stats['images']['tables'] ?? 0 }}</strong></td>
                                </tr>
                                @if(isset($stats['images']['banners']))
                                <tr>
                                    <td>Banners:</td>
                                    <td class="text-end"><strong>{{ number_format($stats['images']['banners']) }}</strong></td>
                                </tr>
                                @endif
                                @if(isset($stats['images']['sliders']))
                                <tr>
                                    <td>Sliders:</td>
                                    <td class="text-end">
                                        <strong>{{ number_format($stats['images']['sliders']) }}</strong>
                                        @if(isset($stats['images']['slider_table']))
                                            <small class="text-muted">({{ $stats['images']['slider_table'] }})</small>
                                        @endif
                                    </td>
                                </tr>
                                @endif
                                <tr>
                                    <td>Estado:</td>
                                    <td class="text-end">
                                        @if($stats['images']['connected'] ?? false)
                                            <span class="badge bg-success">Conectado</span>
                                        @else
                                            <span class="badge bg-danger">No conectado</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-success">
                        <h5 class="mb-0 text-white">
                            <i class="ri-database-2-line"></i> Datos Locales (Laravel)
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>Productos:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['productos_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['productos'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Marcas:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['marcas_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['marcas'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Categorías:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['categorias_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['categorias'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Subcategorías:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['subcategorias_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['subcategorias'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Variedades:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['variedades_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['variedades'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Subvariedades:</td>
                                <td class="text-end">
                                    <strong>{{ number_format($stats['local']['subvariedades_web'] ?? 0) }}</strong>
                                    <small class="text-muted">/ {{ number_format($stats['local']['subvariedades'] ?? 0) }}</small>
                                </td>
                            </tr>
                            <tr>
                                <td>Imágenes:</td>
                                <td class="text-end"><strong>{{ number_format($stats['local']['imagenes'] ?? 0) }}</strong></td>
                            </tr>
                            <tr>
                                <td>Clientes:</td>
                                <td class="text-end"><strong>{{ number_format($stats['local']['clientes'] ?? 0) }}</strong></td>
                            </tr>
                            <tr>
                                <td>Proveedores:</td>
                                <td class="text-end"><strong>{{ number_format($stats['local']['proveedores'] ?? 0) }}</strong></td>
                            </tr>
                            <tr>
                                <td>Banners:</td>
                                <td class="text-end"><strong>{{ number_format($stats['local']['banners'] ?? 0) }}</strong></td>
                            </tr>
                            <tr>
                                <td>Sliders:</td>
                                <td class="text-end"><strong>{{ number_format($stats['local']['sliders'] ?? 0) }}</strong></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
                        @else
                        <div class="alert alert-warning">
                            <i class="ri-error-warning-line"></i> Primero debe configurar las bases de datos en la pestaña "Configuración".
                        </div>
                        @endif
                    </div>
                    
                    <!-- Tab 3: Acciones -->
                    <div class="tab-pane fade" id="actions" role="tabpanel" aria-labelledby="actions-tab">
                        @if($configSource && $configImages && !isset($stats['source']['error']) && !isset($stats['images']['error']))
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="ri-download-line"></i> Acciones de Importación
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Análisis -->
                    <div class="col-md-4">
                        <div class="card border-info">
                            <div class="card-body text-center">
                                <i class="ri-search-line ri-3x text-info mb-3"></i>
                                <h5>Analizar Estructura</h5>
                                <p class="text-muted">Analiza tablas de imágenes y estructura CodeIgniter</p>
                                <button class="btn btn-info btn-block" onclick="analyzeStructure()">
                                    <i class="ri-search-line"></i> Analizar
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Importar Datos -->
                    <div class="col-md-4">
                        <div class="card border-success">
                            <div class="card-body text-center">
                                <i class="ri-database-2-line ri-3x text-success mb-3"></i>
                                <h5>Importar Todo</h5>
                                <p class="text-muted">Importa y ACTUALIZA todo el catálogo</p>
                                <button class="btn btn-success btn-block" onclick="importAll()">
                                    <i class="ri-download-line"></i> Importar y Actualizar Todo
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Importar Imágenes -->
                    <div class="col-md-4">
                        <div class="card border-warning">
                            <div class="card-body text-center">
                                <i class="ri-image-2-line ri-3x text-warning mb-3"></i>
                                <h5>Importar Imágenes</h5>
                                <p class="text-muted">Descarga imágenes desde FTP</p>
                                <button class="btn btn-warning btn-block" onclick="importImages()">
                                    <i class="ri-image-2-line"></i> Importar Imágenes
                                </button>
                                @if(\App\Models\StockImage::count() > 0)
                                <a href="{{ route('images.download.index') }}" class="btn btn-success btn-block mt-2">
                                    <i class="ri-download-line"></i> Descargar Imágenes
                                    <span class="badge badge-light ms-1">{{ \App\Models\StockImage::where('status', 0)->count() }} pendientes</span>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección de Importación Individual -->
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="ri-list-check"></i> Importación Individual por Tipo
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-3">
                        <p class="text-muted">Seleccione el tipo de datos que desea importar individualmente:</p>
                    </div>
                    
                    <!-- Marcas y Categorías -->
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-primary btn-block" onclick="importItem('marcas')">
                            <i class="ri-price-tag-lines"></i> Importar Marcas
                            <span class="badge badge-light">{{ $stats['source']['marcas'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-primary btn-block" onclick="importItem('categorias')">
                            <i class="ri-folder-line"></i> Importar Categorías
                            <span class="badge badge-light">{{ $stats['source']['categorias'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-primary btn-block" onclick="importItem('subcategorias')">
                            <i class="ri-organization-chart"></i> Importar Subcategorías
                            <span class="badge badge-light">{{ $stats['source']['subcategorias'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-info btn-block" onclick="importItem('productos')" id="btnImportProducts">
                            <i class="ri-box-3-line"></i> Importar Productos
                            <span class="badge badge-light">{{ $stats['source']['productos'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <!-- Clientes y Proveedores -->
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-success btn-block" onclick="importItem('clientes')">
                            <i class="ri-group-line"></i> Importar Clientes
                            <span class="badge badge-light">{{ $stats['source']['clientes'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-success btn-block" onclick="importItem('proveedores')">
                            <i class="ri-truck-line"></i> Importar Proveedores
                            <span class="badge badge-light">{{ $stats['source']['proveedores'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <!-- Banners y Sliders -->
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-warning btn-block" onclick="importItem('banners')">
                            <i class="ri-image-line"></i> Importar Banners
                            <span class="badge badge-light">{{ $stats['images']['banners'] ?? 0 }}</span>
                        </button>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-warning btn-block" onclick="importItem('sliders')">
                            <i class="ri-image-2-line"></i> Importar Sliders
                            <span class="badge badge-light">{{ $stats['images']['sliders'] ?? 0 }}</span>
                        </button>
                    </div>

                    <!-- Descripciones HTML -->
                    <div class="col-md-3 mb-3">
                        <button class="btn btn-outline-info btn-block" onclick="importItem('descripciones')">
                            <i class="ri-file-text-line"></i> Importar Descripciones
                        </button>
                    </div>
                </div>

            </div>
        </div>

                        @else
                        <div class="alert alert-warning">
                            <i class="ri-error-warning-line"></i> No se puede acceder a las acciones hasta que las bases de datos estén correctamente configuradas.
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Resultados - COMPLETAMENTE FUERA del condicional -->
        <div class="row">
            <div class="col-md-12">
                <div id="import-results" class="mt-4" style="display:none;">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="ri-information-line"></i> Resultados de Importación</h3>
                        </div>
                        <div class="card-body">
                            <div id="results-content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
@endsection

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

// Auto-activar tab de estadísticas si la configuración está completa
$(document).ready(function() {
    @if($configSource && $configImages && !isset($stats['source']['error']) && !isset($stats['images']['error']))
        // Si todo está configurado correctamente, activar tab de estadísticas
        $('#stats-tab').tab('show');
    @endif
    
    // Mostrar mensaje de éxito si se acaba de guardar
    @if(session('success'))
        setTimeout(function() {
            $('#stats-tab').tab('show');
        }, 500);
    @endif
});

function testConnection() {
    Swal.fire({
        title: 'Probando conexión...',
        text: 'Verificando acceso a las bases de datos',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Recargar la página para probar las conexiones
    window.location.reload();
}

function analyzeStructure() {
    Swal.fire({
        title: 'Analizando...',
        text: 'Analizando estructura de CodeIgniter',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: '{{ route("codeigniter.import.analyze") }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            Swal.close();
            if (response.success) {
                let html = '<div class="row">';
                
                // Análisis de CodeIgniter
                if (response.data.codeigniter_analysis) {
                    let analysis = response.data.codeigniter_analysis;
                    html += '<div class="col-md-6">';
                    html += '<h6>Base CodeIgniter:</h6>';
                    html += '<ul>';
                    html += `<li>Total productos en tabla 'products': <strong>${analysis.total_products || 0}</strong></li>`;
                    html += `<li>Productos con imágenes: <strong>${analysis.products_with_images || 0}</strong></li>`;
                    if (analysis.total_product_images) {
                        html += `<li>Total de imágenes de productos: <strong>${analysis.total_product_images}</strong></li>`;
                    }
                    html += `<li>Productos con código: <strong>${analysis.products_with_code || 0}</strong></li>`;
                    html += `<li>Productos con código E imagen: <strong>${analysis.products_with_code_and_image || 0}</strong></li>`;
                    html += '</ul>';
                    
                    // Mostrar info de clientes si existe
                    if (analysis.clientes && !analysis.clientes.error) {
                        html += '<h6>Clientes:</h6>';
                        html += '<ul>';
                        html += `<li>Total: <strong>${analysis.clientes.total || 0}</strong></li>`;
                        html += `<li>Con email: <strong>${analysis.clientes.con_email || 0}</strong></li>`;
                        html += `<li>Activos: <strong>${analysis.clientes.activos || 0}</strong></li>`;
                        html += '</ul>';
                    }
                    
                    // Mostrar info de proveedores si existe
                    if (analysis.proveedores && !analysis.proveedores.error) {
                        html += '<h6>Proveedores:</h6>';
                        html += '<ul>';
                        html += `<li>Total: <strong>${analysis.proveedores.total || 0}</strong></li>`;
                        html += `<li>Con email: <strong>${analysis.proveedores.con_email || 0}</strong></li>`;
                        html += `<li>Activos: <strong>${analysis.proveedores.activos || 0}</strong></li>`;
                        html += '</ul>';
                    }
                    
                    // Mostrar info de banners si existe
                    if (analysis.banners) {
                        html += '<h6>Banners:</h6>';
                        html += '<ul>';
                        html += `<li>Total: <strong>${analysis.banners.total || 0}</strong></li>`;
                        html += `<li>Activos: <strong>${analysis.banners.activos || 0}</strong></li>`;
                        html += `<li>Para Home: <strong>${analysis.banners.para_home || 0}</strong></li>`;
                        html += `<li>Con imagen: <strong>${analysis.banners.con_imagen || 0}</strong></li>`;
                        if (analysis.banners.table_name) {
                            html += `<li><small class="text-muted">Tabla: ${analysis.banners.table_name}</small></li>`;
                        }
                        html += '</ul>';
                    }
                    
                    // Mostrar info de sliders si existe
                    if (analysis.sliders) {
                        html += '<h6>Sliders:</h6>';
                        html += '<ul>';
                        html += `<li>Total: <strong>${analysis.sliders.total || 0}</strong></li>`;
                        html += `<li>Activos: <strong>${analysis.sliders.activos || 0}</strong></li>`;
                        html += `<li>Con imagen: <strong>${analysis.sliders.con_imagen || 0}</strong></li>`;
                        if (analysis.sliders.table_name) {
                            html += `<li><small class="text-muted">Tabla: ${analysis.sliders.table_name}</small></li>`;
                        }
                        html += '</ul>';
                    }
                    
                    if (analysis.examples && analysis.examples.length > 0) {
                        html += '<h6>Ejemplos de productos con imágenes:</h6>';
                        html += '<table class="table table-sm table-bordered">';
                        html += '<tr><th>Código</th><th>Nombre</th><th>Imagen</th></tr>';
                        for (let ex of analysis.examples) {
                            html += `<tr><td>${ex.code}</td><td>${ex.name}</td><td>${ex.img}</td></tr>`;
                        }
                        html += '</table>';
                    }
                    html += '</div>';
                }
                
                html += '<div class="col-md-6">';
                html += '<h6>Base Tesauro:</h6>';
                html += `<p>Productos sin campo IMAGEN: <strong>${response.data.products_without_images_in_tesauro}</strong></p>`;
                
                if (response.data.ftp_config) {
                    html += '<h6>Configuración FTP para descargar imágenes:</h6>';
                    html += '<ul>';
                    html += `<li>Servidor: <strong>${response.data.ftp_config.host}</strong></li>`;
                    html += `<li>Directorio: <strong>${response.data.ftp_config.remote_dir}</strong></li>`;
                    html += '</ul>';
                }
                html += '</div>';
                html += '</div>';
                
                // Intentar con JavaScript puro en lugar de jQuery
                var resultsContent = document.getElementById('results-content');
                var importResults = document.getElementById('import-results');
                
                if (resultsContent && importResults) {
                    resultsContent.innerHTML = html;
                    importResults.style.display = 'block';
                    
                    // Verificar si realmente se insertó
                    console.log('Contenido insertado:', resultsContent.innerHTML.length > 0);
                } else {
                    console.error('No se encontraron los elementos del DOM');
                }
                
                // Usar un toast en lugar de modal para no tapar el contenido
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
                
                Toast.fire({
                    icon: 'success',
                    title: 'Análisis completado'
                });
                
                // Hacer scroll a los resultados
                $('html, body').animate({
                    scrollTop: $("#import-results").offset().top - 100
                }, 500);
            } else {
                Swal.fire('Error', response.message || 'Error al analizar', 'error');
            }
        },
        error: function() {
            Swal.close();
            Swal.fire('Error', 'Error de conexión', 'error');
        }
    });
}

// Variable global para el polling de progreso
let progressInterval = null;

function startProgressPolling() {
    progressInterval = setInterval(function() {
        $.ajax({
            url: '{{ route("codeigniter.import.progress") }}',
            type: 'GET',
            success: function(response) {
                if (response.lines && response.lines.length > 0) {
                    let progressHtml = '<div style="text-align:left; font-family:monospace; font-size:12px; max-height:300px; overflow-y:auto;">';
                    response.lines.forEach(function(line) {
                        // Colorear según tipo de línea
                        let color = '#666';
                        if (line.indexOf('[') === 0 && line.indexOf('/11]') !== -1) {
                            color = '#007bff'; // Azul para pasos principales
                        } else if (line.indexOf('COMPLETADO') !== -1 || line.indexOf('completado') !== -1) {
                            color = '#28a745'; // Verde para completados
                        } else if (line.indexOf('encontrados') !== -1) {
                            color = '#17a2b8'; // Cyan para conteos
                        } else if (line.indexOf('FIN') !== -1) {
                            color = '#28a745'; // Verde para fin
                        }
                        progressHtml += '<div style="color:' + color + '; margin-bottom:2px;">' + line + '</div>';
                    });
                    progressHtml += '</div>';

                    // Actualizar contenido del modal
                    Swal.update({
                        html: progressHtml
                    });
                }

                if (response.status === 'completed') {
                    stopProgressPolling();
                }
            }
        });
    }, 1500); // Polling cada 1.5 segundos
}

function stopProgressPolling() {
    if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
    }
}

function importAll() {
    Swal.fire({
        title: '¿Importar y actualizar TODO?',
        text: 'Se importarán y ACTUALIZARÁN: marcas, categorías, subcategorías, variedades, subvariedades, productos, clientes, proveedores, banners, sliders, descripciones e imágenes. Los registros existentes serán actualizados.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, importar y actualizar todo',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando...',
                html: '<div style="text-align:center;"><i class="ri-loader-line fa-spin ri-2x"></i><br><br>Iniciando importación...</div>',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    // Iniciar polling de progreso
                    startProgressPolling();
                }
            });

            $.ajax({
                url: '{{ route("codeigniter.import.all") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    stopProgressPolling();
                    Swal.close();
                    if (response.success) {
                        let html = '<h6>Resultados de Importación y Actualización:</h6>';
                        html += '<table class="table table-sm">';
                        
                        if (response.results.marcas) {
                            html += `<tr><td>Marcas:</td><td>Nuevas: ${response.results.marcas.imported}, Actualizadas: ${response.results.marcas.updated}</td></tr>`;
                        }
                        if (response.results.categorias) {
                            html += `<tr><td>Categorías:</td><td>Nuevas: ${response.results.categorias.imported}, Actualizadas: ${response.results.categorias.updated}</td></tr>`;
                        }
                        if (response.results.subcategorias) {
                            html += `<tr><td>Subcategorías:</td><td>Nuevas: ${response.results.subcategorias.imported}, Actualizadas: ${response.results.subcategorias.updated}</td></tr>`;
                        }
                        if (response.results.variedades) {
                            html += `<tr><td>Variedades:</td><td>Nuevas: ${response.results.variedades.imported}, Actualizadas: ${response.results.variedades.updated}</td></tr>`;
                        }
                        if (response.results.subvariedades) {
                            html += `<tr><td>Subvariedades:</td><td>Nuevas: ${response.results.subvariedades.imported}, Actualizadas: ${response.results.subvariedades.updated}</td></tr>`;
                        }
                        if (response.results.productos) {
                            html += `<tr><td>Productos:</td><td>Nuevos: ${response.results.productos.imported}, Actualizados: ${response.results.productos.updated}`;
                            if (response.results.productos.limit) {
                                html += ` (Límite: ${response.results.productos.limit})`;
                            }
                            html += '</td></tr>';
                        }
                        if (response.results.clientes) {
                            html += `<tr><td>Clientes:</td><td>Nuevos: ${response.results.clientes.imported}, Actualizados: ${response.results.clientes.updated}</td></tr>`;
                        }
                        if (response.results.proveedores) {
                            html += `<tr><td>Proveedores:</td><td>Nuevos: ${response.results.proveedores.imported}, Actualizados: ${response.results.proveedores.updated}</td></tr>`;
                        }
                        
                        html += '</table>';
                        
                        if (response.message) {
                            html += `<div class="alert alert-success mt-3"><i class="ri-checkbox-circle-line"></i> ${response.message}</div>`;
                        }
                        
                        $('#results-content').html(html);
                        $('#import-results').removeClass('alert-info').addClass('alert-success').show();
                        
                        // Mostrar mensaje de éxito sin cerrar automáticamente
                        Swal.fire({
                            title: 'Éxito',
                            html: 'Importación y actualización completada<br><br>' + 
                                  '<strong>Los resultados permanecerán visibles en la página.</strong>',
                            icon: 'success',
                            confirmButtonText: 'Ver resultados',
                            allowOutsideClick: false
                        }).then(() => {
                            // No recargar automáticamente - dejar los resultados visibles
                            // El usuario puede recargar manualmente si lo desea
                            $('html, body').animate({
                                scrollTop: $("#import-results").offset().top - 100
                            }, 500);
                        });
                    } else {
                        Swal.fire('Error', response.message || 'Error en la importación', 'error');
                    }
                },
                error: function() {
                    stopProgressPolling();
                    Swal.close();
                    Swal.fire('Error', 'Error de conexión', 'error');
                }
            });
        }
    });
}

function importImages() {
    Swal.fire({
        title: '¿Importar referencias de imágenes?',
        text: 'Se importarán las referencias de imágenes desde CodeIgniter. La descarga por FTP se realizará en un paso posterior.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando...',
                html: '<div style="text-align:center;"><i class="ri-loader-line fa-spin ri-2x"></i><br><br>Iniciando importación de imágenes...</div>',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    startProgressPolling();
                }
            });

            $.ajax({
                url: '{{ route("codeigniter.import.images") }}',
                type: 'POST',
                timeout: 600000, // 10 minutos
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    stopProgressPolling();
                    if (response.success) {
                        let html = '<h6>Resultados de importación de imágenes:</h6>';
                        html += '<table class="table table-sm">';

                        if (response.stats) {
                            html += `<tr><td>Imágenes en origen:</td><td>${response.stats.total_products_with_images || 0}</td></tr>`;
                            html += `<tr><td>Productos procesados:</td><td>${response.stats.products_processed || 0}</td></tr>`;
                            html += `<tr><td>Imágenes nuevas:</td><td>${response.stats.images_saved || 0}</td></tr>`;
                            html += `<tr><td>Imágenes actualizadas:</td><td>${response.stats.images_updated || 0}</td></tr>`;
                            html += `<tr><td>Productos no encontrados:</td><td>${response.stats.not_found || 0}</td></tr>`;
                        }

                        html += '</table>';
                        html += '<p class="text-info mt-3"><i class="ri-information-line"></i> Las referencias han sido guardadas. El siguiente paso será descargar las imágenes físicas por FTP.</p>';

                        Swal.fire({
                            icon: 'success',
                            title: 'Imágenes importadas',
                            html: html,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error', response.message || 'Error al importar', 'error');
                    }
                },
                error: function(xhr) {
                    stopProgressPolling();
                    Swal.fire('Error', 'Error de conexión: ' + (xhr.statusText || 'timeout'), 'error');
                }
            });
        }
    });
}

// Función para mostrar/ocultar contraseñas
function togglePassword(fieldId) {
    var passwordField = document.getElementById(fieldId);
    var icon = document.getElementById(fieldId + '_icon');
    
    if (passwordField.type === "password") {
        passwordField.type = "text";
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = "password";
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Función para importación individual
function importItem(type) {
    const typeNames = {
        'marcas': 'Marcas',
        'categorias': 'Categorías',
        'subcategorias': 'Subcategorías',
        'productos': 'Productos',
        'clientes': 'Clientes',
        'proveedores': 'Proveedores',
        'banners': 'Banners',
        'sliders': 'Sliders'
    };
    
    const typeName = typeNames[type] || type;
    
    Swal.fire({
        title: `¿Importar ${typeName}?`,
        text: `Se importarán y actualizarán todos los registros de ${typeName}`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: `Sí, importar ${typeName}`,
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: `Importando ${typeName}...`,
                text: 'Por favor espere',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ route("codeigniter.import.individual") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    type: type
                },
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        let html = `<h6>Resultado de Importación de ${typeName}:</h6>`;
                        html += '<table class="table table-sm">';
                        
                        if (response.imported !== undefined) {
                            html += `<tr><td>Nuevos:</td><td><strong>${response.imported}</strong></td></tr>`;
                        }
                        if (response.updated !== undefined) {
                            html += `<tr><td>Actualizados:</td><td><strong>${response.updated}</strong></td></tr>`;
                        }
                        if (response.skipped !== undefined) {
                            html += `<tr><td>Omitidos:</td><td><strong>${response.skipped}</strong></td></tr>`;
                        }
                        if (response.errors !== undefined && response.errors > 0) {
                            html += `<tr><td>Errores:</td><td class="text-danger"><strong>${response.errors}</strong></td></tr>`;
                        }
                        
                        html += '</table>';
                        
                        $('#results-content').html(html);
                        $('#import-results').show();
                        
                        Swal.fire({
                            title: 'Éxito',
                            html: `${typeName} importados correctamente<br><br>` + 
                                  `<small>Nuevos: ${response.imported || 0}, Actualizados: ${response.updated || 0}</small>`,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                        
                        // Recargar estadísticas después de 2 segundos
                        setTimeout(() => {
                            location.reload();
                        }, 2000);
                    } else {
                        Swal.fire('Error', response.message || 'Error al importar', 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire('Error', 'Error de conexión al servidor', 'error');
                }
            });
        }
    });
}
</script>
@endsection