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

{% block title %}Notifications - Bubul{% endblock %}

{% block body %}
<div class="max-w-[1300px] mx-auto">

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

    {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'notifications' } only %}

    <div class="flex-1 min-w-0">

        <div class="">
            {% include '_molecules/page-header/page-header.html.twig' with {
                title: 'Notifications',
                subtitle: 'Choisissez les emails que vous souhaitez recevoir',
                icon: 'mail',
                variant: 'default',
                class: 'pt-0'
            } only %}
        </div>

        {% set prefs = user.notificationPreferences %}

        {# ── Emails transactionnels ─────────────────────────────────────────── #}
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden mb-4">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'mail', size: 'md', color: 'primary' } only %}
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900">Emails transactionnels</h3>
                    <p class="text-sm text-gray-500">Notifications liées à votre abonnement et votre solde</p>
                </div>
            </div>

            <div class="divide-y divide-gray-100">

                {# Recharge mensuelle de tokens #}
                {% set enabled = prefs ? prefs.isTokenRenewal : true %}
                <div class="flex items-center justify-between gap-4 px-6 py-4">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Recharge mensuelle de tokens</p>
                        <p class="text-sm text-gray-500">Recevoir un email lors du renouvellement mensuel de votre solde</p>
                    </div>
                    <button
                        type="button"
                        onclick="toggleEmailNotif('token_renewal', this)"
                        role="switch"
                        aria-checked="{{ enabled ? 'true' : 'false' }}"
                        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 {{ enabled ? 'bg-primary' : 'bg-gray-200' }}"
                    >
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                {# Événements d'abonnement #}
                {% set enabled = prefs ? prefs.isSubscriptionEvents : true %}
                <div class="flex items-center justify-between gap-4 px-6 py-4">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Abonnement & facturation</p>
                        <p class="text-sm text-gray-500">Recevoir les emails liés à votre abonnement (factures, changements de plan)</p>
                    </div>
                    <button
                        type="button"
                        onclick="toggleEmailNotif('subscription_events', this)"
                        role="switch"
                        aria-checked="{{ enabled ? 'true' : 'false' }}"
                        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 {{ enabled ? 'bg-primary' : 'bg-gray-200' }}"
                    >
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

            </div>
        </div>

        {# ── Marketing & nouveautés ─────────────────────────────────────────── #}
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'rocket', size: 'md', colorPrimary: '#8b5cf6', colorSecondary: '#8b5cf6' } only %}
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900">Marketing & nouveautés</h3>
                    <p class="text-sm text-gray-500">Restez informé des offres et évolutions de la plateforme</p>
                </div>
            </div>

            <div class="divide-y divide-gray-100">

                {# Offres & promotions #}
                {% set enabled = prefs ? prefs.isMarketing : false %}
                <div class="flex items-center justify-between gap-4 px-6 py-4">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Offres & promotions</p>
                        <p class="text-sm text-gray-500">Recevoir les offres commerciales et promotions Bubul</p>
                    </div>
                    <button
                        type="button"
                        onclick="toggleEmailNotif('marketing', this)"
                        role="switch"
                        aria-checked="{{ enabled ? 'true' : 'false' }}"
                        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 {{ enabled ? 'bg-primary' : 'bg-gray-200' }}"
                    >
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                {# Nouveautés produit #}
                {% set enabled = prefs ? prefs.isProductNews : false %}
                <div class="flex items-center justify-between gap-4 px-6 py-4">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Nouvelles fonctionnalités</p>
                        <p class="text-sm text-gray-500">Être informé des nouvelles fonctionnalités et mises à jour de Bubul</p>
                    </div>
                    <button
                        type="button"
                        onclick="toggleEmailNotif('product_news', this)"
                        role="switch"
                        aria-checked="{{ enabled ? 'true' : 'false' }}"
                        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 {{ enabled ? 'bg-primary' : 'bg-gray-200' }}"
                    >
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

            </div>
        </div>

    </div>{# /flex-1 #}
    </div>{# /flex layout #}
</div>

<script>
function toggleEmailNotif(type, btn) {
    const enabled = btn.getAttribute('aria-checked') !== 'true';
    fetch('/api/settings/email-notifications', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        body: JSON.stringify({ type, enabled })
    }).then(r => r.json()).then(data => {
        if (!data.success) return;
        btn.setAttribute('aria-checked', enabled ? 'true' : 'false');
        btn.classList.toggle('bg-primary', enabled);
        btn.classList.toggle('bg-gray-200', !enabled);
        const dot = btn.querySelector('span');
        dot.classList.toggle('translate-x-6', enabled);
        dot.classList.toggle('translate-x-1', !enabled);
    });
}
</script>
{% endblock %}