@extends('backend.layouts.app')

@section('title', __('Importar: ') . $config['name'])

@section('content')
<div class="container-fluid">
    <!-- Contenedor específico para alertas -->
    <div id="alert-container"></div>
    <div class="row">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div>
                    <h1 class="h3 text-gray-800">📁 Importar: {{ $config['name'] }}</h1>
                    <p class="text-muted mb-0">{{ $config['description'] }}</p>
                </div>
                <div class="btn-group" role="group">
                    <a href="{{ route('admin.configuracion.csv-import.template', $dataType) }}" 
                       class="btn btn-outline-secondary btn-sm" target="_blank">
                        <i class="fas fa-download"></i> Descargar Plantilla
                    </a>
                    <a href="{{ route('admin.configuracion.csv-import.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Información del Tipo de Dato -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow border-left-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h6 class="font-weight-bold text-primary mb-3">
                                <i class="fas fa-info-circle"></i> Información del Tipo de Dato
                            </h6>
                            
                            <div class="row">
                                <div class="col-sm-6">
                                    <p><strong>Nivel:</strong> {{ $config['level'] }}</p>
                                    <p><strong>Tabla:</strong> {{ $config['table'] }}</p>
                                </div>
                                <div class="col-sm-6">
                                    <p><strong>Campos obligatorios:</strong> {{ count($config['required_headers']) }}</p>
                                    <p><strong>Campos opcionales:</strong> {{ count($config['optional_headers']) }}</p>
                                </div>
                            </div>

                            @if(count($config['dependencies']) > 0)
                            <div class="alert alert-warning alert-sm">
                                <i class="fas fa-exclamation-triangle"></i>
                                <strong>Dependencias:</strong> 
                                Este tipo de dato requiere que existan: {{ implode(', ', $config['dependencies']) }}
                            </div>
                            @endif
                        </div>
                        
                        <div class="col-md-4">
                            <div class="dependencies-status" id="dependencies-status">
                                <div class="text-center">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                    </div>
                                    <p class="small mt-2 mb-0">Verificando dependencias...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulario de Carga -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-upload"></i> Cargar Archivo CSV
                    </h6>
                </div>
                <div class="card-body">
                    <form id="csv-upload-form" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="csv-file" class="form-label">Seleccionar archivo CSV</label>
                                    <input type="file" class="form-control" id="csv-file" name="file" 
                                           accept=".csv,.txt" required>
                                    <div class="form-text">
                                        Archivo CSV con codificación UTF-8, separado por comas. Tamaño máximo: 10MB
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary w-100" id="preview-btn">
                                    <i class="fas fa-eye"></i> Ver Preview
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Área de Preview -->
    <div class="row mt-4" id="preview-section" style="display: none;">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-table"></i> Preview de Datos
                    </h6>
                </div>
                <div class="card-body">
                    <div id="preview-content">
                        <!-- Se llena dinámicamente -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Campos Requeridos -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-2">
                    <h6 class="m-0">
                        <i class="fas fa-check-circle"></i> Campos Obligatorios
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @foreach($config['required_headers'] as $header)
                        <li class="mb-1">
                            <i class="fas fa-dot-circle text-success"></i>
                            <code>{{ $header }}</code>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white py-2">
                    <h6 class="m-0">
                        <i class="fas fa-plus-circle"></i> Campos Opcionales
                    </h6>
                </div>
                <div class="card-body">
                    @if(count($config['optional_headers']) > 0)
                    <ul class="list-unstyled mb-0">
                        @foreach($config['optional_headers'] as $header)
                        <li class="mb-1">
                            <i class="fas fa-dot-circle text-info"></i>
                            <code>{{ $header }}</code>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    <p class="text-muted mb-0">
                        <i class="fas fa-info-circle"></i> 
                        No hay campos opcionales para este tipo de dato.
                    </p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmación -->
<div class="modal fade" id="confirmImportModal" tabindex="-1" aria-labelledby="confirmImportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="confirmImportModalLabel">
                    <i class="fas fa-upload"></i> Confirmar Importación
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    Estás a punto de importar <strong id="import-count">0</strong> registros.
                    Esta acción no se puede deshacer.
                </div>
                
                <div id="import-summary">
                    <!-- Se llena dinámicamente -->
                </div>

                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirm-checkbox">
                    <label class="form-check-label" for="confirm-checkbox">
                        He revisado los datos y confirmo que quiero proceder con la importación
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirm-import-btn" disabled>
                    <i class="fas fa-upload"></i> Importar Datos
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('after-styles')
<style>
.dependencies-status .badge {
    font-size: 0.75em;
}

.table-preview {
    font-size: 0.85em;
}

.table-preview th {
    background-color: #f8f9fa;
    white-space: nowrap;
}

.table-preview td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-row {
    background-color: #f8d7da !important;
}

.loading-overlay {
    position: relative;
}

.loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
</style>
@endpush

@push('after-scripts')
<script>
let previewData = null;

$(document).ready(function() {
    // Verificar dependencias al cargar
    checkDependencies();

    // Manejar envío del formulario
    $('#csv-upload-form').on('submit', function(e) {
        e.preventDefault();
        
        const fileInput = $('#csv-file')[0];
        if (!fileInput.files.length) {
            showAlert('Por favor selecciona un archivo CSV', 'warning');
            return;
        }

        loadPreview();
    });

    // Manejar cambio en el checkbox de confirmación
    $('#confirm-checkbox').change(function() {
        $('#confirm-import-btn').prop('disabled', !this.checked);
    });

    // Manejar confirmación de importación
    $('#confirm-import-btn').click(function() {
        executeImport();
    });

    function checkDependencies() {
        $.get('{{ route("admin.configuracion.csv-import.dependencies", $dataType) }}')
            .done(function(response) {
                if (response.success) {
                    updateDependenciesStatus(response.data);
                } else {
                    showDependenciesError();
                }
            })
            .fail(function() {
                showDependenciesError();
            });
    }

    function updateDependenciesStatus(dependencies) {
        let html = '<h6 class="text-primary mb-2">Estado de Dependencias</h6>';
        
        if (dependencies.length === 0) {
            html += '<span class="badge bg-success">Sin dependencias</span>';
        } else {
            dependencies.forEach(function(dep) {
                const badgeClass = dep.satisfied ? 'bg-success' : 'bg-danger';
                const icon = dep.satisfied ? 'fa-check' : 'fa-times';
                
                html += `
                    <div class="mb-1">
                        <span class="badge ${badgeClass}">
                            <i class="fas ${icon}"></i> ${dep.name}
                        </span>
                        <small class="text-muted">(${dep.count} registros)</small>
                    </div>
                `;
            });
        }

        const allSatisfied = dependencies.length === 0 || dependencies.every(dep => dep.satisfied);
        
        if (!allSatisfied) {
            html += '<div class="alert alert-danger alert-sm mt-2">Algunas dependencias no están satisfechas</div>';
            $('#preview-btn').prop('disabled', true);
        } else {
            $('#preview-btn').prop('disabled', false);
        }

        $('#dependencies-status').html(html);
    }

    function showDependenciesError() {
        $('#dependencies-status').html(`
            <div class="text-danger">
                <i class="fas fa-exclamation-triangle"></i>
                Error al verificar dependencias
            </div>
        `);
    }

    function loadPreview() {
        const formData = new FormData($('#csv-upload-form')[0]);
        
        $('#preview-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Procesando...');
        
        $.ajax({
            url: '{{ route("admin.configuracion.csv-import.preview", $dataType) }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    previewData = response.data;
                    showPreview(response.data);
                } else {
                    showAlert(response.message || 'Error al procesar el archivo', 'danger');
                }
            },
            error: function(xhr) {
                const error = xhr.responseJSON?.message || 'Error de conexión';
                showAlert(error, 'danger');
            },
            complete: function() {
                $('#preview-btn').prop('disabled', false).html('<i class="fas fa-eye"></i> Ver Preview');
            }
        });
    }

    function showPreview(data) {
        let html = '';

        // Información general
        html += `
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="text-center">
                        <div class="h4 text-primary">${data.total_records}</div>
                        <div class="text-muted small">Total Registros</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <div class="h4 text-info">${data.preview_count}</div>
                        <div class="text-muted small">Preview</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <div class="h4 text-${data.errors.length > 0 ? 'danger' : 'success'}">${data.errors.length}</div>
                        <div class="text-muted small">Errores</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <button class="btn btn-success" id="proceed-import-btn" ${data.errors.length > 0 ? 'disabled' : ''}>
                            <i class="fas fa-upload"></i> Proceder
                        </button>
                    </div>
                </div>
            </div>
        `;

        // Errores si los hay
        if (data.errors.length > 0) {
            html += '<div class="alert alert-danger"><h6>Errores encontrados:</h6><ul>';
            data.errors.forEach(function(error) {
                html += `<li>Fila ${error.row}: ${error.message}</li>`;
            });
            html += '</ul></div>';
        }

        // Tabla de preview
        if (data.preview_records.length > 0) {
            html += '<div class="table-responsive"><table class="table table-sm table-preview">';
            
            // Headers
            html += '<thead><tr>';
            data.headers.forEach(function(header) {
                html += `<th>${header}</th>`;
            });
            html += '</tr></thead>';
            
            // Datos
            html += '<tbody>';
            data.preview_records.forEach(function(record, index) {
                const hasError = data.errors.some(error => error.row === index + 2);
                html += `<tr class="${hasError ? 'error-row' : ''}">`;
                
                data.headers.forEach(function(header) {
                    const value = record[header] || '';
                    html += `<td title="${value}">${value}</td>`;
                });
                
                html += '</tr>';
            });
            html += '</tbody></table></div>';
        }

        $('#preview-content').html(html);
        $('#preview-section').show();

        // Manejar clic en proceder
        $('#proceed-import-btn').click(function() {
            showImportConfirmation();
        });
    }

    function showImportConfirmation() {
        $('#import-count').text(previewData.total_records);
        
        let summaryHtml = `
            <ul class="list-unstyled">
                <li><i class="fas fa-table text-primary"></i> <strong>Tabla:</strong> {{ $config['table'] }}</li>
                <li><i class="fas fa-columns text-info"></i> <strong>Columnas:</strong> ${previewData.headers.join(', ')}</li>
                <li><i class="fas fa-check-circle text-success"></i> <strong>Registros válidos:</strong> ${previewData.total_records - previewData.errors.length}</li>
            </ul>
        `;
        
        $('#import-summary').html(summaryHtml);
        $('#confirm-checkbox').prop('checked', false);
        $('#confirm-import-btn').prop('disabled', true);
        
        // Usar Bootstrap 5 Modal API
        const modal = new bootstrap.Modal(document.getElementById('confirmImportModal'));
        modal.show();
    }

    function executeImport() {
        const formData = new FormData($('#csv-upload-form')[0]);
        formData.append('preview_data', JSON.stringify(previewData));
        
        $('#confirm-import-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Importando...');
        
        $.ajax({
            url: '{{ route("admin.configuracion.csv-import.import", $dataType) }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    showAlert(`¡Importación exitosa! ${response.data.imported} registros importados.`, 'success');
                    
                    // Redirigir después de 2 segundos
                    setTimeout(function() {
                        window.location.href = '{{ route("admin.configuracion.csv-import.index") }}';
                    }, 2000);
                } else {
                    showAlert(response.message || 'Error en la importación', 'danger');
                }
            },
            error: function(xhr) {
                const error = xhr.responseJSON?.message || 'Error de conexión';
                showAlert(error, 'danger');
            },
            complete: function() {
                // Siempre cerrar el modal al completar (exitoso o error)
                const modal = bootstrap.Modal.getInstance(document.getElementById('confirmImportModal'));
                if (modal) {
                    modal.hide();
                }
                $('#confirm-import-btn').prop('disabled', false).html('<i class="fas fa-upload"></i> Importar Datos');
            }
        });
    }

    function showAlert(message, type) {
        // Usar contenedor específico y limpiarlo completamente
        const $alertContainer = $('#alert-container');
        $alertContainer.empty(); // Limpiar completamente el contenedor
        
        const alertClass = type === 'success' ? 'alert-success' : 
                          type === 'warning' ? 'alert-warning' : 'alert-danger';
        
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show mb-3" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        
        // Insertar en el contenedor específico
        $alertContainer.html(alertHtml);
        
        // Auto-remover después de 5 segundos si es éxito
        if (type === 'success') {
            setTimeout(function() {
                $alertContainer.find('.alert').fadeOut();
            }, 5000);
        }
        
        // Hacer scroll hacia arriba para que se vea la alerta
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    }
});
</script>
@endpush