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

{% block title %}Statistiques des Verrous{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Statistiques des Verrous</h1>
    <div>
        <button class="btn btn-warning" onclick="cleanupLocks()">
            <i class="fas fa-broom"></i> Nettoyer les verrous expirés
        </button>
        <button class="btn btn-danger" onclick="releaseAllLocks()">
            <i class="fas fa-unlock"></i> Libérer tous mes verrous
        </button>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Actions rapides</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="refreshStats()">
                        <i class="fas fa-sync"></i> Actualiser les statistiques
                    </button>
                    <button class="btn btn-outline-info" onclick="showUserLocks()">
                        <i class="fas fa-list"></i> Mes verrous actifs
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Informations système</h5>
            </div>
            <div class="card-body">
                <p><strong>Verrous actifs :</strong> <span id="active-locks-count">-</span></p>
                <p><strong>Dernière vérification :</strong> <span id="last-check">-</span></p>
                <p><strong>Verrous expirés :</strong> <span id="expired-locks-count">-</span></p>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Verrous actifs</h5>
            </div>
            <div class="card-body">
                <div id="locks-list">
                    <p class="text-muted">Chargement...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function refreshStats() {
    // Implémentation pour actualiser les statistiques
    console.log('Actualisation des statistiques...');
}

function cleanupLocks() {
    fetch('/lock/cleanup', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.removedLocks > 0) {
            alert(`${data.removedLocks} verrous expirés ont été supprimés.`);
        } else {
            alert('Aucun verrou expiré trouvé.');
        }
        refreshStats();
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors du nettoyage des verrous.');
    });
}

function releaseAllLocks() {
    if (confirm('Êtes-vous sûr de vouloir libérer tous vos verrous ?')) {
        fetch('/lock/release-all', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(`${data.removedLocks} verrous ont été libérés.`);
            refreshStats();
        })
        .catch(error => {
            console.error('Erreur:', error);
            alert('Erreur lors de la libération des verrous.');
        });
    }
}

function showUserLocks() {
    // Implémentation pour afficher les verrous de l'utilisateur
    console.log('Affichage des verrous de l\'utilisateur...');
}

// Actualiser les statistiques au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    refreshStats();
});
</script>
{% endblock %}