{# Onglet Développeur - Guide API en 3 étapes #}
{% embed '_molecules/card/card.html.twig' with {
    title: 'API Développeur',
    subtitle: 'Intégrez Bubul dans vos applications avec votre clé API personnelle',
    icon: 'key',
    iconColor: 'primary'
} %}
    {% block body %}
        <div class="space-y-8" data-controller="settings--api-keys">

            {# ========== ÉTAPE 1 : Clé API ========== #}
            <div class="flex gap-6">
                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm">1</div>
                <div class="flex-1">
                    <h3 class="font-semibold text-gray-900 mb-1 font-[Poppins]">Générer ma clé API</h3>
                    <p class="text-sm text-gray-500 mb-4">Votre clé personnelle pour authentifier vos requêtes.</p>

                    <div class="bg-gray-50 rounded-xl p-4" data-settings--api-keys-target="keysList">
                        {% if apiKeys is empty %}
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Générer ma clé',
                                variant: 'primary',
                                icon: 'key',
                                attr: {
                                    'data-action': 'click->settings--api-keys#createKey',
                                    'data-settings--api-keys-target': 'createButton'
                                }
                            } only %}
                        {% else %}
                            {% set key = apiKeys|first %}
                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4" data-key-id="{{ key.id }}">
                                <div class="flex items-center gap-3 flex-wrap">
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: 'Active',
                                        variant: 'success',
                                        dot: true,
                                        size: 'sm'
                                    } only %}
                                    <span class="text-sm font-medium text-gray-700">{{ key.name }}</span>
                                    <code class="px-2 py-1 bg-gray-100 rounded text-xs font-mono text-gray-600">{{ key.maskedKey }}</code>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="text-xs text-gray-400">
                                        {% if key.lastUsedAt %}
                                            Utilisée {{ key.lastUsedAt|format_datetime('short', 'short', locale='fr') }}
                                        {% else %}
                                            Jamais utilisée
                                        {% endif %}
                                    </span>
                                    <button type="button"
                                            class="inline-flex items-center gap-1.5 text-sm text-error hover:text-error-dark transition-colors"
                                            data-action="click->settings--api-keys#revokeKey"
                                            data-key-id="{{ key.id }}"
                                            data-key-name="{{ key.name }}">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'sm', color: 'error' } only %}
                                        Révoquer
                                    </button>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# ========== ÉTAPE 2 : Requête CURL ========== #}
            <div class="flex gap-6">
                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm">2</div>
                <div class="flex-1">
                    <h3 class="font-semibold text-gray-900 mb-1 font-[Poppins]">Tester avec une requête</h3>
                    <p class="text-sm text-gray-500 mb-4">Utilisez cette commande pour vérifier votre clé.</p>

                    <div class="bg-gray-900 text-gray-100 rounded-xl p-4 overflow-x-auto">
                        <code class="text-sm font-mono whitespace-pre">curl -X GET {{ app.request.schemeAndHttpHost }}/api/moodlev5/me \
  -H "X-API-Key: bubul_sk_votre_cle"</code>
                    </div>
                </div>
            </div>

            {# ========== ÉTAPE 3 : Résultat attendu ========== #}
            <div class="flex gap-6">
                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm">3</div>
                <div class="flex-1">
                    <h3 class="font-semibold text-gray-900 mb-1 font-[Poppins]">Résultat attendu</h3>
                    <p class="text-sm text-gray-500 mb-4">Si votre clé est valide, vous recevrez cette réponse.</p>

                    <div class="bg-gray-900 text-gray-100 rounded-xl p-4 overflow-x-auto">
<code class="text-sm font-mono whitespace-pre text-green-400">{
  "success": true,
  "data": {
    "user": {
      "id": 123,
      "email": "vous@example.com",
      "first_name": "Prénom",
      "last_name": "Nom",
      "roles": ["ROLE_USER"],
      "company": {
        "uuid": "abc-123",
        "name": "Mon Entreprise",
        "has_moodle_config": true,
        "has_active_contract": true
      }
    }
  }
}</code>
                    </div>
                </div>
            </div>



            {# ========== MODALS ========== #}

            {# Modal d'affichage de la clé créée - Design atomique #}
            <div class="fixed inset-0 z-50 hidden"
                 data-settings--api-keys-target="showKeyModal"
                 role="dialog"
                 aria-modal="true">
                {# Backdrop #}
                <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"></div>

                {# Modal container #}
                <div class="fixed inset-0 overflow-y-auto">
                    <div class="flex min-h-full items-center justify-center p-4">
                        <div class="w-full max-w-md bg-white rounded-xl shadow-xl overflow-hidden">
                            {# Header avec icône success #}
                            <div class="px-6 py-4 border-b border-success/20 flex items-start justify-between gap-4">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with {
                                            name: 'check-circle',
                                            size: 'md',
                                            color: 'success'
                                        } only %}
                                    </div>
                                    <div>
                                        <h2 class="text-lg font-semibold text-gray-900">Clé créée avec succès</h2>
                                        <p class="text-sm text-gray-500 mt-0.5">Copiez cette clé, elle ne sera plus affichée</p>
                                    </div>
                                </div>
                            </div>

                            {# Body #}
                            <div class="px-6 py-4">
                                <div class="flex gap-2">
                                    <input type="text"
                                           class="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg font-mono text-sm"
                                           readonly
                                           data-settings--api-keys-target="createdKeyDisplay">
                                    {% include '_atoms/button/button.html.twig' with {
                                        label: 'Copier',
                                        variant: 'primary',
                                        size: 'md',
                                        attr: {
                                            'data-action': 'click->settings--api-keys#copyAndClose',
                                            'data-settings--api-keys-target': 'copyButton',
                                            'type': 'button'
                                        }
                                    } only %}
                                </div>
                            </div>

                            {# Warning message #}
                            <div class="px-6 py-4 bg-warning/5 border-t border-warning/20">
                                <div class="flex items-center gap-3">
                                    {% include '_atoms/icon/icon.html.twig' with {
                                        name: 'warning',
                                        size: 'md',
                                        color: 'warning'
                                    } only %}
                                    <p class="text-sm text-gray-600">
                                        <strong class="text-warning">Important :</strong> Cette clé ne sera plus jamais affichée.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Modal de confirmation de suppression - Utilise la molécule modal avec variant danger #}
            <div class="fixed inset-0 z-50 hidden"
                 data-settings--api-keys-target="revokeModal"
                 role="dialog"
                 aria-modal="true">
                {# Backdrop #}
                <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
                     data-action="click->settings--api-keys#closeRevokeModal"></div>

                {# Modal container #}
                <div class="fixed inset-0 overflow-y-auto">
                    <div class="flex min-h-full items-center justify-center p-4">
                        <div class="w-full max-w-sm bg-white rounded-xl shadow-xl overflow-hidden">
                            {# Header avec icône danger #}
                            <div class="px-6 py-4 border-b border-error/20 flex items-start justify-between gap-4">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-error/10 flex items-center justify-center flex-shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with {
                                            name: 'trash',
                                            size: 'md',
                                            color: 'error'
                                        } only %}
                                    </div>
                                    <div>
                                        <h2 class="text-lg font-semibold text-gray-900">Révoquer la clé</h2>
                                        <p class="text-sm text-gray-500 mt-0.5">Cette action est irréversible</p>
                                    </div>
                                </div>
                                {% include '_atoms/close-button/close-button.html.twig' with {
                                    attr: { 'data-action': 'click->settings--api-keys#closeRevokeModal' }
                                } only %}
                            </div>

                            {# Body #}
                            <div class="px-6 py-4">
                                <p class="text-gray-600">
                                    Révoquer <strong data-settings--api-keys-target="revokeKeyName"></strong> ?
                                </p>
                                <p class="text-sm text-gray-500 mt-2">
                                    Les applications utilisant cette clé perdront leur accès immédiatement.
                                </p>
                            </div>

                            {# Footer avec boutons atomiques #}
                            <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
                                {% include '_atoms/button/button.html.twig' with {
                                    label: 'Annuler',
                                    variant: 'ghost',
                                    size: 'lg',
                                    attr: {
                                        'data-action': 'click->settings--api-keys#closeRevokeModal',
                                        'type': 'button'
                                    }
                                } only %}
                                {% include '_atoms/button/button.html.twig' with {
                                    label: 'Révoquer',
                                    variant: 'error',
                                    size: 'lg',
                                    icon: 'trash',
                                    attr: {
                                        'data-action': 'click->settings--api-keys#confirmRevoke',
                                        'type': 'button'
                                    }
                                } only %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endembed %}