{% extends '@SyliusAdmin/layout.html.twig' %}
{% block title %}Clés API | {{ sylius.channel.name }}{% endblock %}
{% block content %}
    <h1 class="page-title">Gestion des clés API</h1>

    <!-- Bouton pour générer une nouvelle clé -->
    <form action="{{ path('generate_api_key') }}" method="post">
        <button type="submit" class="btn btn-primary">Générer une nouvelle clé</button>
    </form>

    <!-- Tableau des clés API -->
    <table class="table">
        <thead>
        <tr>
            <th>Clé API</th>
            <th>Description</th>
            <th>Statut</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for apiKey in apiKeys %}
            <tr id="row-{{ apiKey.id }}">
                <td>{{ apiKey.apiKey }}</td>
                <td>
                <span class="description-text" onclick="editDescription({{ apiKey.id }})">
                    {{ apiKey.description ?: 'Aucune description' }}
                </span>
                    <div class="edit-description d-none">
                        <input type="text" class="description-input" value="{{ apiKey.description }}" />
                        <button class="btn btn-warning save-description" data-id="{{ apiKey.id }}">💾</button>
                    </div>
                </td>
                <td>
                    <button class="btn {{ apiKey.active ? 'btn-success' : 'btn-danger' }} toggle-status-btn"
                            data-id="{{ apiKey.id }}">
                        {{ apiKey.active ? 'Actif' : 'Inactif' }}
                    </button>
                </td>
                <td>
                    <button class="btn btn-danger delete-api-key" data-id="{{ apiKey.id }}">🗑️</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock %}

{% block javascripts %}
    {{ parent() }} {# Garde les scripts définis dans le parent si nécessaire #}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Édition de la description
            document.querySelectorAll('.description-text').forEach(function (span) {
                span.addEventListener('click', function () {
                    let parent = this.parentElement;
                    parent.querySelector('.description-text').classList.add('d-none');
                    parent.querySelector('.edit-description').classList.remove('d-none');
                    parent.querySelector('.description-input').focus();
                });
            });

            // Sauvegarde AJAX de la description
            document.querySelectorAll('.save-description').forEach(function (button) {
                button.addEventListener('click', function () {
                    let id = this.dataset.id;
                    let parent = this.closest('td');
                    let input = parent.querySelector('.description-input');
                    let newValue = input.value;

                    fetch(`/api/update-api-key-description/${id}`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ description: newValue })
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                parent.querySelector('.description-text').textContent = newValue || 'Aucune description';
                                parent.querySelector('.description-text').classList.remove('d-none');
                                parent.querySelector('.edit-description').classList.add('d-none');
                            } else {
                                alert('Erreur lors de la mise à jour.');
                            }
                        })
                        .catch(error => console.error('Erreur:', error));
                });
            });

            // Toggle statut AJAX
            document.querySelectorAll('.toggle-status-btn').forEach(function (button) {
                button.addEventListener('click', function () {
                    let id = this.dataset.id;
                    fetch(`/api/toggle-api-key/${id}`, { method: 'POST' })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                this.textContent = data.active ? 'Actif' : 'Inactif';
                                this.classList.toggle('btn-success', data.active);
                                this.classList.toggle('btn-danger', !data.active);
                            }
                        })
                        .catch(error => console.error('Erreur:', error));
                });
            });

            // Suppression AJAX d'une clé API
            document.querySelectorAll('.delete-api-key').forEach(function (button) {
                button.addEventListener('click', function () {
                    let id = this.dataset.id;
                    if (!confirm('Êtes-vous sûr de vouloir supprimer cette clé API ?')) return;

                    fetch(`/api/delete-api-key/${id}`, { method: 'DELETE' })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                document.getElementById(`row-${id}`).remove();
                            } else {
                                alert('Erreur lors de la suppression.');
                            }
                        })
                        .catch(error => console.error('Erreur:', error));
                });
            });
        });
    </script>

{% endblock %}