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

{% block title %}Commande {{ order.reference }} — CARTECADEAU{% endblock %}

{% set statusMap = {
    'cart': ['Panier', 'muted'],
    'pending_payment': ['En attente de paiement', 'warn'],
    'paid': ['Payée', 'info'],
    'fulfilling': ['Livraison en cours', 'info'],
    'fulfilled': ['Livrée', 'ok'],
    'payment_failed': ['Paiement échoué', 'bad'],
    'fulfillment_failed': ['Livraison échouée', 'bad'],
} %}
{% set st = statusMap[order.status] ?? [order.status, 'muted'] %}

{% block body %}
<section class="container">
    <p class="kicker"><a href="{{ path('app_account') }}" style="color:var(--txt-1)">← Mon espace</a></p>

    <div class="section-head">
        <h2>Commande <span class="accent">{{ order.reference }}</span></h2>
        <span class="status-badge {{ st[1] }}">{{ st[0] }}</span>
    </div>
    <p class="meta">Passée le {{ order.createdAt ? order.createdAt|date('d/m/Y à H:i') : '—' }} · Total {{ order.totalXof|number_format(0, ',', ' ') }} XOF</p>

    {# ---------- Codes livrés ---------- #}
    {% if order.status == 'fulfilled' and codes is not empty %}
        <div class="card" style="margin-top:20px">
            <h3>🎁 Vos codes</h3>
            <p class="meta">Conservez-les précieusement. Ils vous ont aussi été envoyés par email.</p>
            <div class="codes-grid">
                {% for code in codes %}
                    <div class="code-card">
                        <span class="meta cat">{{ code.productName ?? code.productSku ?? 'Produit' }}</span>
                        {% if code.serialCode %}
                            <span class="code-label">Code / PIN</span>
                            <span class="code-value">{{ code.serialCode }}</span>
                        {% endif %}
                        {% if code.serialNumber %}
                            <span class="code-label">N° de série</span>
                            <span class="code-value small">{{ code.serialNumber }}</span>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% elseif order.status in ['paid', 'fulfilling'] %}
        <div class="card empty-state" style="margin-top:20px">
            <h3>Livraison en cours…</h3>
            <p>Votre paiement est confirmé. Vos codes apparaîtront ici dans quelques instants et vous seront envoyés par email.</p>
        </div>
    {% elseif order.status == 'fulfillment_failed' %}
        <div class="card" style="margin-top:20px">
            <h3>Un souci est survenu</h3>
            <p class="meta">La livraison a échoué. Notre équipe a été alertée et traite votre commande. Vous ne perdez rien.</p>
            {% if is_granted('ROLE_ADMIN') %}
                <form method="post" action="{{ path('app_admin_order_relaunch_fulfillment', {reference: order.reference}) }}" style="margin-top:12px;">
                    <input type="hidden" name="_token" value="{{ csrf_token('relaunch_fulfillment_' ~ order.reference) }}">
                    <button type="submit" class="btn">Relancer le fulfillment</button>
                </form>
            {% endif %}
        </div>
    {% elseif order.status == 'pending_payment' %}
        <div class="card" style="margin-top:20px">
            <h3>En attente de paiement</h3>
            <p class="meta">Finalisez le paiement Mobile Money pour recevoir vos codes.</p>
        </div>
    {% endif %}

    {# ---------- Détail des articles ---------- #}
    <div class="card" style="margin-top:20px">
        <h3>Articles</h3>
        <div class="table-wrap">
            <table class="admin-table">
                <thead><tr><th>Produit</th><th>Type</th><th>Qté</th><th>Prix</th></tr></thead>
                <tbody>
                    {% for item in order.items %}
                        <tr>
                            <td>{{ item.product ? item.product.name : '—' }}</td>
                            <td>{{ item.product and item.product.type == 'topup' ? 'Top-up' : 'Voucher' }}</td>
                            <td>{{ item.quantity }}</td>
                            <td>{{ (item.unitSalePrice * item.quantity)|number_format(0, ',', ' ') }} XOF</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}