@extends('backend.layouts.app')

@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-content">
            <h1 class="page-main-title">Configuración</h1>
        </div>
    </div>
@endsection

@section('title', __('Importación CSV'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 text-gray-800">📋 Sistema de Importación CSV</h1>
                <div class="btn-group" role="group">
                    <a href="{{ route('admin.configuracion.csv-import.documentation') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-book-open"></i> Documentación
                    </a>
                    <button type="button" class="btn btn-info btn-sm" id="refresh-status">
                        <i class="fas fa-sync-alt"></i> Actualizar Estado
                    </button>
                    <a href="{{ route('admin.dashboard.analytics') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Volver al Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert para documentación -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <h4 class="alert-heading"><i class="fas fa-info-circle"></i> ¿Cómo usar este sistema?</h4>
                <p class="mb-2">Este sistema permite importar datos críticos del proyecto mediante archivos CSV. <strong>Es importante respetar el orden de los niveles</strong> para evitar errores de dependencias.</p>
                <hr>
                <p class="mb-0">
                    <a href="{{ route('admin.configuracion.csv-import.documentation') }}" target="_blank" class="btn btn-outline-info btn-sm">
                        <i class="fas fa-book"></i> Ver Documentación Completa
                    </a>
                </p>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <!-- Estado del Sistema -->
    <div class="row mb-4">
        <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-chart-pie"></i> Estado Actual del Sistema
                    </h6>
                </div>
                <div class="card-body">
                    <div id="system-status" class="text-center">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tipos de Datos Disponibles -->
    <div class="row">
        @foreach($dataTypes as $level => $types)
        <div class="col-12 mb-4">
            <div class="card shadow border-left-{{ $level == 1 ? 'success' : ($level == 2 ? 'warning' : ($level == 3 ? 'info' : 'danger')) }}">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-{{ $level == 1 ? 'success' : ($level == 2 ? 'warning' : ($level == 3 ? 'info' : 'danger')) }}">
                        <i class="fas fa-layer-group"></i> 
                        Nivel {{ $level }} - 
                        @if($level == 1) Datos Base (Sin dependencias)
                        @elseif($level == 2) Datos con Dependencias Simples
                        @elseif($level == 3) Relaciones Muchos a Muchos
                        @else Datos Operacionales
                        @endif
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($types as $key => $config)
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="card h-100 border-0 shadow-sm data-type-card" data-type="{{ $key }}">
                                <div class="card-body d-flex flex-column">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="status-indicator me-2" id="status-{{ $key }}">
                                            <i class="fas fa-circle text-muted"></i>
                                        </div>
                                        <h6 class="card-title mb-0">{{ $config['name'] }}</h6>
                                    </div>
                                    <p class="card-text text-muted small mb-3 flex-grow-1">
                                        {{ $config['description'] }}
                                    </p>
                                    
                                    @if(count($config['dependencies']) > 0)
                                    <div class="mb-3">
                                        <small class="text-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            Requiere: {{ implode(', ', $config['dependencies']) }}
                                        </small>
                                    </div>
                                    @endif

                                    <div class="record-count mb-3" id="count-{{ $key }}">
                                        <small class="text-info">
                                            <i class="fas fa-database"></i>
                                            <span class="count">0</span> registros
                                        </small>
                                    </div>

                                    <div class="btn-group w-100 mt-auto">
                                        <a href="{{ route('admin.configuracion.csv-import.show', $key) }}" 
                                           class="btn btn-primary btn-sm import-btn" 
                                           data-type="{{ $key }}">
                                            <i class="fas fa-upload"></i> Importar
                                        </a>
                                        <a href="{{ route('admin.configuracion.csv-import.template', $key) }}" 
                                           class="btn btn-outline-secondary btn-sm"
                                           target="_blank"
                                           title="Descargar plantilla CSV para {{ $config['name'] }}">
                                            <i class="fas fa-download"></i> Plantilla
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Modal de Advertencia de Dependencias -->
    <div class="modal fade" id="dependencyModal" tabindex="-1" aria-labelledby="dependencyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title" id="dependencyModalLabel">
                        <i class="fas fa-exclamation-triangle"></i> Dependencias No Satisfechas
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>No se pueden importar los datos seleccionados porque faltan las siguientes dependencias:</p>
                    <ul id="dependency-list" class="list-unstyled">
                        <!-- Se llena dinámicamente -->
                    </ul>
                    <p class="text-muted">Por favor, importa primero los datos requeridos según el orden de niveles.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('after-styles')
<style>
.data-type-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.data-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.status-indicator {
    font-size: 0.8em;
}

.status-ready {
    color: #28a745 !important;
}

.status-empty {
    color: #6c757d !important;
}

.status-dependencies-missing {
    color: #ffc107 !important;
}

.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}

.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}

.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}

.border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
}

.import-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>
@endpush

@push('after-scripts')
<script>
$(document).ready(function() {
    // Configurar jQuery para incluir cookies en peticiones AJAX
    $.ajaxSetup({
        xhrFields: {
            withCredentials: true
        }
    });

    // Cargar estado del sistema al iniciar
    loadSystemStatus();

    // Actualizar estado cuando se hace clic en el botón
    $('#refresh-status').click(function() {
        loadSystemStatus();
    });

    // Manejar clics en botones de importar
    $('.import-btn').click(function(e) {
        e.preventDefault();
        
        const dataType = $(this).data('type');
        const $button = $(this);
        
        // Verificar dependencias antes de proceder
        checkDependencies(dataType, function(dependenciesSatisfied, dependencies) {
            if (dependenciesSatisfied) {
                // Redirigir a la página de importación
                window.location.href = $button.attr('href');
            } else {
                showDependencyModal(dependencies);
            }
        });
    });

    function loadSystemStatus() {
        console.log('Loading system status...');
        $('#system-status').html(`
            <div class="spinner-border text-primary" role="status"></div>
        `);

        const url = '{{ route("admin.configuracion.csv-import.status") }}';
        console.log('Requesting URL:', url);

        $.ajax({
            url: url,
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
        .done(function(response) {
            console.log('Response received:', response);
            if (response.success) {
                updateSystemStatus(response.data);
            } else {
                showError('Error al cargar el estado del sistema');
            }
        })
        .fail(function(xhr, status, error) {
            console.error('Request failed:', {xhr, status, error});
            showError('Error de conexión al cargar el estado');
        });
    }

    function updateSystemStatus(statusData) {
        let totalRecords = 0;
        let typesWithData = 0;
        let availableTypes = 0;
        let totalTypes = Object.keys(statusData).length;

        // Actualizar contadores y estados individuales
        Object.keys(statusData).forEach(function(key) {
            const data = statusData[key];
            totalRecords += data.count;
            
            if (data.count > 0) {
                typesWithData++;
            }
            
            if (data.dependencies_satisfied) {
                availableTypes++;
            }

            // Actualizar contador
            $(`#count-${key} .count`).text(data.count);

            // Actualizar indicador de estado
            const $indicator = $(`#status-${key} i`);
            const $importBtn = $(`.import-btn[data-type="${key}"]`);
            
            $indicator.removeClass('text-muted text-success text-warning');
            
            if (data.count > 0) {
                $indicator.addClass('text-success');
                $importBtn.prop('disabled', false);
            } else if (data.dependencies_satisfied) {
                $indicator.addClass('text-muted');
                $importBtn.prop('disabled', false);
            } else {
                $indicator.addClass('text-warning');
                $importBtn.prop('disabled', true);
            }
        });

        // Actualizar resumen general
        const dataPercentage = Math.round((typesWithData / totalTypes) * 100);
        
        $('#system-status').html(`
            <div class="row text-center">
                <div class="col-md-3">
                    <div class="h4 text-primary">${totalRecords}</div>
                    <div class="text-muted">Total Registros</div>
                </div>
                <div class="col-md-3">
                    <div class="h4 text-success">${typesWithData}</div>
                    <div class="text-muted">Tipos con Datos</div>
                </div>
                <div class="col-md-3">
                    <div class="h4 text-info">${availableTypes}</div>
                    <div class="text-muted">Tipos Disponibles</div>
                </div>
                <div class="col-md-3">
                    <div class="h4 text-warning">${dataPercentage}%</div>
                    <div class="text-muted">Con Datos</div>
                </div>
            </div>
            <div class="mt-3">
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: ${dataPercentage}%" 
                         aria-valuenow="${dataPercentage}" aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
                <small class="text-muted mt-2 d-block">
                    ${typesWithData} de ${totalTypes} tipos tienen datos importados | ${availableTypes} tipos están disponibles para importar
                </small>
            </div>
        `);
    }

    function checkDependencies(dataType, callback) {
        const url = `{{ route("admin.configuracion.csv-import.dependencies", ":dataType") }}`.replace(':dataType', dataType);
        
        $.ajax({
            url: url,
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
        .done(function(response) {
            if (response.success) {
                const dependencies = response.data;
                const allSatisfied = dependencies.every(dep => dep.satisfied);
                callback(allSatisfied, dependencies);
            } else {
                showError('Error al verificar dependencias');
                callback(false, []);
            }
        })
        .fail(function(xhr, status, error) {
            console.error('Dependencies check failed:', {xhr, status, error});
            showError('Error de conexión al verificar dependencias');
            callback(false, []);
        });
    }

    function showDependencyModal(dependencies) {
        const $list = $('#dependency-list');
        $list.empty();

        dependencies.forEach(function(dep) {
            const icon = dep.satisfied ? 
                '<i class="fas fa-check-circle text-success"></i>' : 
                '<i class="fas fa-times-circle text-danger"></i>';
            
            $list.append(`
                <li class="mb-2">
                    ${icon} 
                    <strong>${dep.name}</strong> 
                    <span class="text-muted">(${dep.count} registros)</span>
                </li>
            `);
        });

        // Usar Bootstrap 5 Modal API
        const modal = new bootstrap.Modal(document.getElementById('dependencyModal'));
        modal.show();
    }

    function showError(message) {
        $('#system-status').html(`
            <div class="text-danger">
                <i class="fas fa-exclamation-triangle"></i>
                ${message}
            </div>
        `);
    }
});
</script>
@endpush