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

{% block title %}Abonnements B2C — Admin{% endblock %}

{% block body %}

<div class="max-w-[1400px] mx-auto">

    {# ================================================================
       HEADER
       ================================================================ #}
    <div class="mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Abonnements B2C',
            subtitle: 'Tous les abonnements individuels (actifs, annulés, inactifs).',
            icon: 'wallet',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}
    </div>

    {# ================================================================
       STATS RAPIDES
       ================================================================ #}
    {% set countActive   = subscriptions|filter(s => s.status == 'active')|length %}
    {% set countCanceled = subscriptions|filter(s => s.status == 'canceled')|length %}
    {% set countInactive = subscriptions|filter(s => s.status == 'inactive')|length %}
    {% set countPastDue  = subscriptions|filter(s => s.status == 'past_due')|length %}

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Actifs', value: countActive, icon: 'check-circle', variant: 'success'
        } only %}
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Annulés', value: countCanceled, icon: 'circle-x', variant: 'warning'
        } only %}
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Inactifs', value: countInactive, icon: 'circle-minus', variant: 'default'
        } only %}
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'En retard', value: countPastDue, icon: 'alert-triangle', variant: 'error'
        } only %}
    </div>

    {# ================================================================
       TABLEAU
       ================================================================ #}
    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
        {% if subscriptions|length == 0 %}
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                icon: 'wallet',
                title: 'Aucun abonnement',
                description: 'Aucun abonnement B2C trouvé.'
            } only %}
        {% else %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-100 bg-gray-50/60">
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide">Utilisateur</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide">Plan</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide">Cycle</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide">Statut</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide hidden lg:table-cell">Début</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide hidden lg:table-cell">Solde tokens</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide hidden xl:table-cell">Dernière recharge</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide hidden xl:table-cell">Prochain renouvellement</th>
                            <th class="text-left px-5 py-3.5 font-semibold text-gray-500 text-xs uppercase tracking-wide hidden xl:table-cell">Stripe ID</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        {% for sub in subscriptions %}
                            {% set statusVariant = {
                                'active':     'success',
                                'canceled':   'warning',
                                'inactive':   'default',
                                'past_due':   'error',
                                'incomplete': 'error',
                                'paused':     'info',
                                'created':    'default'
                            }[sub.status] ?? 'default' %}

                            {% set statusLabel = {
                                'active':     'Actif',
                                'canceled':   'Annulé',
                                'inactive':   'Inactif',
                                'past_due':   'En retard',
                                'incomplete': 'Incomplet',
                                'paused':     'Pausé',
                                'created':    'Créé'
                            }[sub.status] ?? sub.status %}

                            <tr class="hover:bg-gray-50/60 transition-colors duration-100 cursor-pointer"
                                onclick="window.location='{{ path('admin_user_show', {uuid: sub.user.uuid}) }}'">
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-3">
                                        {% include '_atoms/avatar/avatar.html.twig' with {
                                            name: sub.user.fullName,
                                            size: 'sm'
                                        } only %}
                                        <div class="min-w-0">
                                            <p class="font-medium text-gray-900 truncate">{{ sub.user.fullName }}</p>
                                            <p class="text-xs text-gray-400 truncate">{{ sub.user.email }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-5 py-4">
                                    {% if sub.plan %}
                                        <span class="font-medium text-gray-800">{{ sub.plan.name }}</span>
                                        {% if sub.pendingPlan %}
                                            <span class="ml-1.5 text-xs text-gray-400">→ {{ sub.pendingPlan.name }}</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-5 py-4 text-gray-600">
                                    {{ sub.billingCycle == 'annual' ? 'Annuel' : 'Mensuel' }}
                                </td>
                                <td class="px-5 py-4">
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: statusLabel,
                                        variant: statusVariant,
                                        size: 'sm'
                                    } only %}
                                </td>
                                <td class="px-5 py-4 text-gray-500 hidden lg:table-cell">
                                    {{ sub.startedAt ? sub.startedAt|date('d/m/Y') : '—' }}
                                </td>
                                <td class="px-5 py-4 hidden lg:table-cell">
                                    {% set token = sub.user.userToken %}
                                    {% if token %}
                                        {% set solde = token.tokenUsable - token.tokenUsed %}
                                        {% set pct = token.tokenUsable > 0 ? (solde / token.tokenUsable * 100)|round : 0 %}
                                        <div class="flex items-center gap-2">
                                            <span class="font-mono text-sm {{ solde < 5000 ? 'text-error font-semibold' : 'text-gray-700' }}">
                                                {{ solde|number_format(0, ',', ' ') }}
                                            </span>
                                            <span class="text-xs text-gray-400">/ {{ token.tokenUsable|number_format(0, ',', ' ') }}</span>
                                        </div>
                                        <div class="mt-1 h-1 w-24 bg-gray-100 rounded-full overflow-hidden">
                                            <div class="h-full rounded-full {{ pct < 20 ? 'bg-error' : (pct < 50 ? 'bg-warning' : 'bg-success') }}"
                                                 style="width: {{ pct }}%"></div>
                                        </div>
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-5 py-4 text-gray-500 hidden xl:table-cell">
                                    {% if token and token.lastAllocationAt %}
                                        {{ token.lastAllocationAt|date('d/m/Y') }}
                                    {% else %}
                                        <span class="text-gray-400">jamais</span>
                                    {% endif %}
                                </td>
                                <td class="px-5 py-4 hidden xl:table-cell">
                                    {% if token and token.lastAllocationAt %}
                                        {% set nextRenewal = token.lastAllocationAt|date_modify('+30 days') %}
                                        <span class="{{ nextRenewal < now ? 'text-error font-semibold' : 'text-gray-500' }}">
                                            {{ nextRenewal|date('d/m/Y') }}
                                            {% if nextRenewal < now %} ⚠{% endif %}
                                        </span>
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-5 py-4 hidden xl:table-cell">
                                    {% if sub.stripeSubscriptionId %}
                                        <code class="text-xs text-gray-400 font-mono">{{ sub.stripeSubscriptionId }}</code>
                                    {% else %}
                                        <span class="text-gray-300">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="px-5 py-3 border-t border-gray-100 bg-gray-50/40 text-xs text-gray-400">
                {{ subscriptions|length }} abonnement{{ subscriptions|length > 1 ? 's' : '' }} au total
            </div>
        {% endif %}
    </div>

</div>

{% endblock %}