{% extends 'base.html.twig' %}

{% block title %}Monitoring des Performances - AEF{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <!-- En-tête -->
    <div class="card mb-4">
        <div class="card-header bg-warning text-dark">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">
                    <i class="fas fa-tachometer-alt me-2"></i>
                    Monitoring des Performances
                </h3>
                <div>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-dark btn-sm me-2">
                        <i class="fas fa-arrow-left me-1"></i>Retour Dashboard
                    </a>
                    <button type="button" class="btn btn-success btn-sm" onclick="refreshData()">
                        <i class="fas fa-sync me-1"></i>Actualiser
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Métriques système -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ performance.avg_response_time }}ms</h4>
                            <p class="card-text">Temps de réponse moyen</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 5px;">
                        <div class="progress-bar bg-light" style="width: {{ (performance.avg_response_time / 2000 * 100)|round }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ performance.memory_usage }}%</h4>
                            <p class="card-text">Utilisation mémoire</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-memory fa-2x"></i>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 5px;">
                        <div class="progress-bar bg-light" style="width: {{ performance.memory_usage }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ performance.cpu_usage }}%</h4>
                            <p class="card-text">Utilisation CPU</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-microchip fa-2x"></i>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 5px;">
                        <div class="progress-bar bg-light" style="width: {{ performance.cpu_usage }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ performance.slow_queries_count }}</h4>
                            <p class="card-text">Requêtes lentes</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-database fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphiques de performance -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>
                        Temps de réponse (24 dernières heures)
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="responseTimeChart" height="100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>
                        Répartition des erreurs
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="errorChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Alertes et recommandations -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Alertes critiques
                    </h5>
                </div>
                <div class="card-body">
                    {% if alerts|length > 0 %}
                        {% for alert in alerts %}
                            <div class="alert alert-{{ alert.level }} alert-dismissible fade show" role="alert">
                                <strong>{{ alert.title }}</strong>
                                <p class="mb-1">{{ alert.message }}</p>
                                <small class="text-muted">{{ alert.created_at|date('d/m/Y H:i') }}</small>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-success py-3">
                            <i class="fas fa-check-circle fa-3x mb-2"></i>
                            <p class="mb-0">Aucune alerte critique</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>
                        Recommandations
                    </h5>
                </div>
                <div class="card-body">
                    {% if recommendations|length > 0 %}
                        {% for recommendation in recommendations %}
                            <div class="card mb-2">
                                <div class="card-body py-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-{{ recommendation.priority == 'high' ? 'danger' : (recommendation.priority == 'medium' ? 'warning' : 'info') }}">
                                                {{ recommendation.priority|upper }}
                                            </span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="fw-bold">{{ recommendation.title }}</div>
                                            <small class="text-muted">{{ recommendation.description }}</small>
                                        </div>
                                        {% if recommendation.action_url %}
                                            <div class="flex-shrink-0">
                                                <a href="{{ recommendation.action_url }}" class="btn btn-sm btn-outline-primary">
                                                    Action
                                                </a>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-thumbs-up fa-3x mb-2"></i>
                            <p class="mb-0">Performances optimales</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Requêtes lentes -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-database me-2"></i>
                Requêtes lentes (> 2 secondes)
            </h5>
        </div>
        <div class="card-body">
            {% if slow_queries|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Requête</th>
                                <th>Durée</th>
                                <th>Occurrences</th>
                                <th>Dernière exécution</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for query in slow_queries %}
                                <tr>
                                    <td>
                                        <code class="small">{{ query.sql|slice(0, 100) }}{% if query.sql|length > 100 %}...{% endif %}</code>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ query.duration > 5 ? 'danger' : 'warning' }}">
                                            {{ query.duration }}s
                                        </span>
                                    </td>
                                    <td>{{ query.count }}</td>
                                    <td>{{ query.last_executed|date('d/m/Y H:i') }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                onclick="showQueryDetails('{{ query.id }}')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-warning" 
                                                onclick="optimizeQuery('{{ query.id }}')">
                                            <i class="fas fa-magic"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center text-success py-4">
                    <i class="fas fa-rocket fa-3x mb-3"></i>
                    <h5>Aucune requête lente détectée</h5>
                    <p class="text-muted">Toutes les requêtes s'exécutent rapidement.</p>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Outils d'optimisation -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-tools me-2"></i>
                Outils d'optimisation
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="card border-primary">
                        <div class="card-body text-center">
                            <i class="fas fa-broom fa-2x text-primary mb-3"></i>
                            <h6>Nettoyage cache</h6>
                            <p class="small text-muted">Vider tous les caches</p>
                            <button type="button" class="btn btn-primary btn-sm" onclick="clearCache()">
                                Nettoyer
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-success">
                        <div class="card-body text-center">
                            <i class="fas fa-database fa-2x text-success mb-3"></i>
                            <h6>Optimiser BDD</h6>
                            <p class="small text-muted">Réorganiser les tables</p>
                            <button type="button" class="btn btn-success btn-sm" onclick="optimizeDatabase()">
                                Optimiser
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-warning">
                        <div class="card-body text-center">
                            <i class="fas fa-chart-bar fa-2x text-warning mb-3"></i>
                            <h6>Réindexer</h6>
                            <p class="small text-muted">Elasticsearch</p>
                            <button type="button" class="btn btn-warning btn-sm" onclick="reindexSearch()">
                                Réindexer
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-body text-center">
                            <i class="fas fa-file-alt fa-2x text-info mb-3"></i>
                            <h6>Logs système</h6>
                            <p class="small text-muted">Nettoyer les logs</p>
                            <button type="button" class="btn btn-info btn-sm" onclick="cleanLogs()">
                                Nettoyer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal détails requête -->
<div class="modal fade" id="queryDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Détails de la requête</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="queryDetailsContent">
                <!-- Contenu chargé dynamiquement -->
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Graphique temps de réponse
const responseTimeCtx = document.getElementById('responseTimeChart').getContext('2d');
const responseTimeChart = new Chart(responseTimeCtx, {
    type: 'line',
    data: {
        labels: {{ chart_data.time_labels|json_encode|raw }},
        datasets: [{
            label: 'Temps de réponse (ms)',
            data: {{ chart_data.response_times|json_encode|raw }},
            borderColor: 'rgb(255, 193, 7)',
            backgroundColor: 'rgba(255, 193, 7, 0.1)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value + 'ms';
                    }
                }
            }
        }
    }
});

// Graphique erreurs
const errorCtx = document.getElementById('errorChart').getContext('2d');
const errorChart = new Chart(errorCtx, {
    type: 'doughnut',
    data: {
        labels: {{ chart_data.error_labels|json_encode|raw }},
        datasets: [{
            data: {{ chart_data.error_values|json_encode|raw }},
            backgroundColor: [
                '#dc3545', // 5xx
                '#fd7e14', // 4xx
                '#ffc107', // 3xx
                '#28a745'  // 2xx
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// Fonctions d'optimisation
function clearCache() {
    if (confirm('Êtes-vous sûr de vouloir vider tous les caches ?')) {
        performAction('clear_cache', 'Cache vidé avec succès');
    }
}

function optimizeDatabase() {
    if (confirm('Optimiser la base de données ? Cette opération peut prendre du temps.')) {
        performAction('optimize_database', 'Base de données optimisée');
    }
}

function reindexSearch() {
    if (confirm('Réindexer Elasticsearch ? Cette opération peut prendre du temps.')) {
        performAction('reindex_search', 'Réindexation lancée en arrière-plan');
    }
}

function cleanLogs() {
    if (confirm('Nettoyer les logs système ?')) {
        performAction('clean_logs', 'Logs nettoyés');
    }
}

function performAction(action, successMessage) {
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    button.disabled = true;
    
    fetch('{{ path('admin_performance_action') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({ action: action })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(successMessage);
            if (action === 'clear_cache' || action === 'optimize_database') {
                location.reload();
            }
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        alert('Erreur lors de l\'exécution de l\'action');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

function showQueryDetails(queryId) {
    const modal = new bootstrap.Modal(document.getElementById('queryDetailsModal'));
    modal.show();
    
    fetch(`{{ path('admin_performance_query_details', {id: '__ID__'}) }}`.replace('__ID__', queryId))
        .then(response => response.text())
        .then(html => {
            document.getElementById('queryDetailsContent').innerHTML = html;
        });
}

function optimizeQuery(queryId) {
    if (confirm('Essayer d\'optimiser cette requête automatiquement ?')) {
        fetch(`{{ path('admin_performance_optimize_query', {id: '__ID__'}) }}`.replace('__ID__', queryId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Optimisation appliquée: ' + data.message);
                location.reload();
            } else {
                alert('Impossible d\'optimiser: ' + data.message);
            }
        });
    }
}

function refreshData() {
    location.reload();
}

// Auto-refresh toutes les 30 secondes
setInterval(function() {
    // Actualiser seulement les métriques, pas toute la page
    fetch('{{ path('admin_performance_metrics') }}')
        .then(response => response.json())
        .then(data => {
            // Mettre à jour les cartes de métriques
            updateMetrics(data);
        });
}, 30000);

function updateMetrics(data) {
    // Mise à jour des métriques en temps réel
    // Cette fonction peut être développée pour mettre à jour les valeurs sans recharger la page
}
</script>
{% endblock %}