@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>

                    <!-- 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();
});
</script>
@endsection