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

{% block title %}Mon compte — Pipou{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}

{% block body_class %}bg-stone-100 dark:bg-stone-950{% endblock %}

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Mon compte',
    eyebrow: 'Profil',
    accent_rgb: '139,92,246',
    back_href: path('front.home'),
} %}
{% block header_actions %}
<div class="flex flex-col items-end gap-1 shrink-0">
    <span class="text-[9px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500">Affichage</span>
    <div class="flex rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 p-0.5 shadow-sm">
        <button type="button" data-action="theme#setLight" class="rounded-lg px-2 py-1 text-[10px] font-semibold text-stone-600 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700">Clair</button>
        <button type="button" data-action="theme#setDark" class="rounded-lg px-2 py-1 text-[10px] font-semibold text-stone-600 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700">Sombre</button>
        <button type="button" data-action="theme#setSystem" class="rounded-lg px-2 py-1 text-[10px] font-semibold text-stone-600 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700">Auto</button>
    </div>
</div>
{% endblock %}
{% block index_card %}

    <div class="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 shadow-sm overflow-hidden mb-6">
        <div class="px-5 py-4 border-b border-stone-200 dark:border-stone-700 flex items-center gap-4">
            <div class="size-14 rounded-2xl bg-gradient-to-br from-violet-500 to-rose-400 flex items-center justify-center text-white text-xl font-bold shrink-0">
                {{ user.displayName|slice(0, 1)|upper }}
            </div>
            <div class="min-w-0">
                <p class="font-bold text-stone-800 dark:text-stone-100 text-lg truncate">{{ user.displayName }}</p>
                <p class="text-sm text-stone-500 dark:text-stone-400 truncate">@{{ user.username }}</p>
            </div>
        </div>
        <dl class="divide-y divide-stone-200 dark:divide-stone-700">
            <div class="px-5 py-3.5 flex justify-between gap-4">
                <dt class="text-sm text-stone-500 dark:text-stone-400">Identifiant</dt>
                <dd class="text-sm font-medium text-stone-800 dark:text-stone-200 text-right break-all">{{ user.userIdentifier }}</dd>
            </div>
            <div class="px-5 py-3.5 flex justify-between gap-4">
                <dt class="text-sm text-stone-500 dark:text-stone-400">Rôles</dt>
                <dd class="text-sm font-medium text-stone-800 dark:text-stone-200 text-right flex flex-wrap justify-end gap-1">
                    {% set extra_roles = user.roles|filter(r => r != 'ROLE_USER') %}
                    {% if extra_roles %}
                        {% for role in extra_roles %}
                            <span class="inline-block rounded-lg bg-stone-100 dark:bg-stone-800 px-2 py-0.5 text-xs text-stone-600 dark:text-stone-300">{{ role }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="text-stone-400 dark:text-stone-500 font-normal">Utilisateur</span>
                    {% endif %}
                </dd>
            </div>
        </dl>
    </div>

    <p class="text-xs text-stone-400 dark:text-stone-500 text-center mb-4">Pour modifier l'email ou le mot de passe, contacte l'administrateur du serveur.</p>

    <twig:AppUpdateChecker />

    {# Notifications push #}
    <div class="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 shadow-sm overflow-hidden mb-6"
         data-controller="push-token-sync"
         data-push-token-sync-register-url-value="{{ path('api.push_token.register') }}"
         {% if fcmEnabled %}data-push-token-sync-test-url-value="{{ path('front.account.test_notification') }}"{% endif %}>

        <div class="px-5 py-3.5 border-b border-stone-200 dark:border-stone-700 flex items-center gap-3">
            <div class="size-8 rounded-xl bg-rose-100 dark:bg-rose-950/50 flex items-center justify-center shrink-0">
                <svg class="size-4 text-rose-500 dark:text-rose-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/>
                </svg>
            </div>
            <p class="text-sm font-semibold text-stone-800 dark:text-stone-100">Notifications push</p>
        </div>

        <div class="px-5 py-4 flex flex-col gap-3">

            {% if deviceTokens is empty %}
                <div class="flex items-center gap-2.5">
                    <span class="size-2 rounded-full bg-amber-400 shrink-0"></span>
                    <p class="text-sm text-stone-500 dark:text-stone-400">Aucun appareil enregistré — appuie sur le bouton pour récupérer le token.</p>
                </div>
            {% else %}
                {% for dt in deviceTokens %}
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2.5 min-w-0">
                        <span class="size-2 rounded-full bg-emerald-400 shrink-0"></span>
                        <span class="text-xs font-mono text-stone-500 dark:text-stone-400 truncate">···{{ dt.token|slice(-12) }}</span>
                    </div>
                    <div class="flex items-center gap-2 shrink-0">
                        <span class="text-[10px] text-stone-400 dark:text-stone-500 whitespace-nowrap">{{ dt.createdAt|date('d/m/y') }}</span>
                        <form method="post" action="{{ path('front.account.delete_token', {id: dt.id}) }}">
                            <button type="submit"
                                    class="size-6 flex items-center justify-center rounded-lg text-stone-400 dark:text-stone-500 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 transition-colors">
                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            {% endif %}

            <div data-controller="bridge--notification-token">
                <button type="button"
                        data-action="bridge--notification-token#get"
                        class="flex items-center justify-center gap-2 w-full rounded-xl py-2.5 px-4 text-sm font-semibold transition-all active:scale-[0.98]
                               bg-stone-800 dark:bg-stone-100 text-white dark:text-stone-900 hover:bg-stone-700 dark:hover:bg-stone-200 cursor-pointer">
                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                    </svg>
                    Récupérer le token
                </button>
                <p data-bridge--notification-token-target="token"
                   class="hidden mt-2 text-center text-xs font-mono text-stone-500 dark:text-stone-400"></p>
            </div>

            <div data-controller="push-token-sync"
                 data-action="bridge--notification-token:retrieved@window->push-token-sync#retrieved">
            </div>

            <button type="button"
                    data-action="push-token-sync#sendTest"
                    data-push-token-sync-target="sendBtn"
                    disabled
                    class="flex items-center justify-center gap-2 w-full rounded-xl py-2.5 px-4 text-sm font-semibold transition-all
                           bg-stone-100 dark:bg-stone-800 text-stone-400 dark:text-stone-500 cursor-not-allowed">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"/>
                </svg>
                <span data-push-token-sync-target="sendLabel">
                    {% if not fcmEnabled %}FCM non configuré{% else %}S'envoyer une notification test{% endif %}
                </span>
            </button>

            <p data-push-token-sync-target="result" class="hidden text-center text-xs font-medium py-1 rounded-lg"></p>

        </div>
    </div>

    <div class="flex flex-col items-center gap-3">
        <a href="{{ path('auth.logout') }}" class="inline-flex items-center justify-center gap-2 rounded-xl border border-stone-200 dark:border-stone-600 bg-white dark:bg-stone-800 px-5 py-3 text-sm font-semibold text-stone-700 dark:text-stone-200 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors w-full max-w-xs">
            <svg class="size-4 text-stone-400 dark:text-stone-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75"/>
            </svg>
            Se déconnecter
        </a>
    </div>

{% endblock %}
{% endembed %}


{% endblock %}