@extends('layouts.app')

@section('title', 'Optimización del Sistema')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Optimización del Sistema</h3>
                </div>
                <div class="card-body">
                    <!-- Estadísticas del Sistema -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h4>{{ number_format($cacheSize / 1024 / 1024, 2) }} MB</h4>
                                    <small>Tamaño del Caché</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h4>{{ number_format($logSize / 1024 / 1024, 2) }} MB</h4>
                                    <small>Tamaño de Logs</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $sessionCount }}</h4>
                                    <small>Sesiones Activas</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $kardexCount }}</h4>
                                    <small>Registros Kardex</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Herramientas de Optimización -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Limpieza del Sistema</h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-grid gap-2">
                                        <form action="{{ route('optimizacion.limpiar-cache') }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-primary w-100" onclick="return confirm('¿Limpiar caché del sistema?')">
                                                <i class="fas fa-broom"></i> Limpiar Caché
                                            </button>
                                        </form>
                                        
                                        <form action="{{ route('optimizacion.limpiar-logs') }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-warning w-100" onclick="return confirm('¿Limpiar archivos de log?')">
                                                <i class="fas fa-trash"></i> Limpiar Logs
                                            </button>
                                        </form>
                                        
                                        <form action="{{ route('optimizacion.limpiar-sesiones') }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-info w-100" onclick="return confirm('¿Limpiar sesiones de usuario?')">
                                                <i class="fas fa-user-times"></i> Limpiar Sesiones
                                            </button>
                                        </form>
                                        
                                        <form action="{{ route('optimizacion.optimizar') }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-success w-100" onclick="return confirm('¿Optimizar sistema completo?')">
                                                <i class="fas fa-rocket"></i> Optimizar Sistema
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Limpieza de Datos</h5>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('optimizacion.limpiar-kardex') }}" method="POST">
                                        @csrf
                                        <div class="form-group">
                                            <label for="dias_kardex">Limpiar Kardex anterior a:</label>
                                            <div class="input-group">
                                                <input type="number" name="dias" id="dias_kardex" class="form-control" value="90" min="1" max="365">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">días</span>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-danger w-100" onclick="return confirm('¿Limpiar registros antiguos del Kardex?')">
                                            <i class="fas fa-history"></i> Limpiar Kardex Antiguo
                                        </button>
                                    </form>
                                    
                                    <hr>
                                    
                                    <form action="{{ route('optimizacion.limpiar-notificaciones') }}" method="POST">
                                        @csrf
                                        <div class="form-group">
                                            <label for="dias_notificaciones">Limpiar Notificaciones anterior a:</label>
                                            <div class="input-group">
                                                <input type="number" name="dias" id="dias_notificaciones" class="form-control" value="30" min="1" max="365">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">días</span>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-secondary w-100" onclick="return confirm('¿Limpiar notificaciones antiguas?')">
                                            <i class="fas fa-bell-slash"></i> Limpiar Notificaciones Antiguas
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Verificación de Migraciones -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5>
                                        <i class="fas fa-database me-2"></i>Verificación de Migraciones
                                    </h5>
                                    <div>
                                        <span class="badge bg-{{ $migracionesPendientes > 0 ? 'warning' : 'success' }} me-2">
                                            {{ $migracionesPendientes }} Pendiente(s)
                                        </span>
                                        <span class="badge bg-success">
                                            {{ $migracionesEjecutadas }} Ejecutada(s)
                                        </span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <p>Verifique y ejecute automáticamente las migraciones pendientes de la base de datos.</p>
                                            <div class="alert alert-{{ $migracionesPendientes > 0 ? 'warning' : 'success' }}">
                                                <i class="fas fa-{{ $migracionesPendientes > 0 ? 'exclamation-triangle' : 'check-circle' }}"></i>
                                                <strong>
                                                    @if($migracionesPendientes > 0)
                                                        Hay {{ $migracionesPendientes }} migración(es) pendiente(s) de ejecutar.
                                                    @else
                                                        Todas las migraciones están actualizadas.
                                                    @endif
                                                </strong>
                                            </div>
                                            @if($migracionesPendientes > 0)
                                                <div class="alert alert-info">
                                                    <i class="fas fa-info-circle"></i>
                                                    <strong>Nota:</strong> Solo se ejecutarán las migraciones pendientes. Las migraciones ya ejecutadas no se modificarán.
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-md-4">
                                            <form id="verificarMigracionesForm" action="{{ route('optimizacion.verificar-migraciones') }}" method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-{{ $migracionesPendientes > 0 ? 'warning' : 'success' }} w-100" 
                                                        onclick="return confirm('¿Verificar y ejecutar migraciones pendientes?')">
                                                    <i class="fas fa-sync-alt"></i> Verificar y Actualizar
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-outline-info w-100 mt-2" onclick="mostrarEstadoMigraciones()">
                                                <i class="fas fa-list"></i> Ver Detalles
                                            </button>
                                        </div>
                                    </div>
                                    
                                    @if($migracionesPendientes > 0)
                                        <div class="mt-3">
                                            <h6>Migraciones Pendientes:</h6>
                                            <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                                <table class="table table-sm table-bordered">
                                                    <thead class="table-light sticky-top">
                                                        <tr>
                                                            <th>Migración</th>
                                                            <th>Estado</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($estadoMigraciones['pendientes'] as $migracion)
                                                            <tr>
                                                                <td><code>{{ $migracion['migration'] }}</code></td>
                                                                <td><span class="badge bg-warning">Pending</span></td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Optimización de Base de Datos -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Optimización de Base de Datos</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <p>La optimización de base de datos es una operación avanzada que puede mejorar el rendimiento de las consultas.</p>
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle"></i>
                                                <strong>Nota:</strong> Esta operación requiere permisos especiales y debe realizarse con precaución en producción.
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <form action="{{ route('optimizacion.optimizar-db') }}" method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-outline-primary w-100" onclick="return confirm('¿Optimizar base de datos? Esta operación puede tomar varios minutos.')">
                                                    <i class="fas fa-database"></i> Optimizar BD
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Análisis de Performance -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5>Análisis de Performance</h5>
                                    <button type="button" class="btn btn-outline-info btn-sm" onclick="analizarPerformance()">
                                        <i class="fas fa-chart-line"></i> Analizar
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div id="performanceResults">
                                        <p class="text-muted">Haga clic en "Analizar" para obtener recomendaciones de optimización.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Estadísticas en Tiempo Real -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Estadísticas en Tiempo Real</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row" id="realTimeStats">
                                        <div class="col-md-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <h5 id="cacheSizeReal">-</h5>
                                                    <small>Caché (MB)</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <h5 id="logSizeReal">-</h5>
                                                    <small>Logs (MB)</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <h5 id="sessionCountReal">-</h5>
                                                    <small>Sesiones</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card bg-light">
                                                <div class="card-body text-center">
                                                    <h5 id="kardexCountReal">-</h5>
                                                    <small>Kardex</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function analizarPerformance() {
    const resultsDiv = document.getElementById('performanceResults');
    resultsDiv.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Analizando...</div>';
    
    fetch('{{ route("optimizacion.analizar-performance") }}')
        .then(response => response.json())
        .then(data => {
            let html = '<div class="alert alert-success"><h6><i class="fas fa-check-circle"></i> Análisis Completado</h6></div>';
            html += '<h6>Recomendaciones:</h6><ul>';
            data.recomendaciones.forEach(rec => {
                html += `<li>${rec}</li>`;
            });
            html += '</ul>';
            html += `<p><strong>Estado General:</strong> <span class="badge badge-success">${data.estado_general}</span></p>`;
            resultsDiv.innerHTML = html;
        })
        .catch(error => {
            resultsDiv.innerHTML = '<div class="alert alert-danger">Error al analizar performance</div>';
        });
}

function actualizarEstadisticas() {
    fetch('{{ route("optimizacion.estadisticas-performance") }}')
        .then(response => response.json())
        .then(data => {
            document.getElementById('cacheSizeReal').textContent = data.cache_size_mb;
            document.getElementById('logSizeReal').textContent = data.log_size_mb;
            document.getElementById('sessionCountReal').textContent = data.session_count;
            document.getElementById('kardexCountReal').textContent = data.kardex_count;
        })
        .catch(error => {
            console.error('Error al actualizar estadísticas:', error);
        });
}

// Actualizar estadísticas cada 30 segundos
setInterval(actualizarEstadisticas, 30000);

// Cargar estadísticas iniciales
document.addEventListener('DOMContentLoaded', function() {
    actualizarEstadisticas();
});

// Manejar verificación de migraciones
document.getElementById('verificarMigracionesForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const form = this;
    const submitButton = form.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    
    submitButton.disabled = true;
    submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Verificando...';
    
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
            if (data.success) {
                let mensaje = data.message;
                if (data.migraciones_ejecutadas && data.migraciones_ejecutadas.length > 0) {
                    mensaje += '\n\nMigraciones ejecutadas:\n';
                    data.migraciones_ejecutadas.forEach(m => {
                        mensaje += `- ${m.nombre}\n`;
                    });
                }
                if (data.migraciones_omitidas && data.migraciones_omitidas.length > 0) {
                    mensaje += '\n\nMigraciones omitidas (ya aplicadas):\n';
                    data.migraciones_omitidas.forEach(m => {
                        mensaje += `- ${m.nombre}: ${m.estado}\n`;
                    });
                }
                if (data.migraciones_con_error && data.migraciones_con_error.length > 0) {
                    mensaje += '\n\nMigraciones con error:\n';
                    data.migraciones_con_error.forEach(m => {
                        mensaje += `- ${m.nombre}: ${m.error}\n`;
                    });
                }
                alert(mensaje);
                location.reload();
            } else {
                alert('Error: ' + data.message);
                submitButton.disabled = false;
                submitButton.innerHTML = originalText;
            }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al verificar migraciones: ' + error.message);
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
    });
});

function mostrarEstadoMigraciones() {
    fetch('{{ route("optimizacion.estado-migraciones") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let html = `
                    <div class="modal fade" id="estadoMigracionesModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Estado de Migraciones</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="card bg-success text-white">
                                                <div class="card-body text-center">
                                                    <h4>${data.data.total_ejecutadas}</h4>
                                                    <small>Ejecutadas</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card bg-warning text-white">
                                                <div class="card-body text-center">
                                                    <h4>${data.data.total_pendientes}</h4>
                                                    <small>Pendientes</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive" style="max-height: 400px;">
                                        <table class="table table-sm">
                                            <thead class="table-light sticky-top">
                                                <tr>
                                                    <th>Migración</th>
                                                    <th>Estado</th>
                                                    <th>Batch</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                `;
                
                data.data.ejecutadas.forEach(m => {
                    html += `
                        <tr>
                            <td><code>${m.migration}</code></td>
                            <td><span class="badge bg-success">Ran</span></td>
                            <td>${m.batch || '-'}</td>
                        </tr>
                    `;
                });
                
                data.data.pendientes.forEach(m => {
                    html += `
                        <tr>
                            <td><code>${m.migration}</code></td>
                            <td><span class="badge bg-warning">Pending</span></td>
                            <td>-</td>
                        </tr>
                    `;
                });
                
                html += `
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // Eliminar modal anterior si existe
                const existingModal = document.getElementById('estadoMigracionesModal');
                if (existingModal) {
                    existingModal.remove();
                }
                
                // Agregar nuevo modal al body
                document.body.insertAdjacentHTML('beforeend', html);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('estadoMigracionesModal'));
                modal.show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al obtener estado de migraciones');
        });
}
</script>
@endsection