{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Parrainage{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Codes de parrainage</h1>
    <p class="mt-2 text-sm text-gray-700">Codes de campagne (créés ici) et codes propres à chaque boutique validée. Le bénéfice est exprimé en jours offerts sur la licence du filleul.</p>
</div>

<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
    {# --- Création d'une campagne --- #}
    <div class="lg:col-span-1">
        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 text-lg font-medium text-gray-900">Nouvelle campagne</h2>
            {{ form_start(form, {'attr': {'class': 'space-y-4'}}) }}
                {{ form_row(form.label) }}
                {{ form_row(form.maxUses) }}
                {{ form_row(form.freeDays) }}
                {{ form_row(form.validityDays) }}
                <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                    Créer le code
                </button>
            {{ form_end(form) }}
        </div>
    </div>

    {# --- Liste des codes --- #}
    <div class="lg:col-span-2">
        {% if codes is empty %}
            <div class="rounded-lg border border-dashed border-gray-300 bg-white p-12 text-center text-gray-500">
                Aucun code de parrainage pour le moment.
            </div>
        {% else %}
            <div class="overflow-hidden rounded-lg bg-white shadow">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                            <tr>
                                <th class="px-4 py-3">Code</th>
                                <th class="px-4 py-3">Type</th>
                                <th class="px-4 py-3">Usage</th>
                                <th class="px-4 py-3">Offert</th>
                                <th class="px-4 py-3">Expire</th>
                                <th class="px-4 py-3">Statut</th>
                                <th class="px-4 py-3 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            {% for code in codes %}
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="font-mono font-semibold text-gray-900">{{ code.code }}</div>
                                        <div class="text-xs text-gray-500">{{ code.label }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        {% if code.ownerCompany %}
                                            <span class="rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">Boutique</span>
                                            <div class="mt-0.5 text-xs text-gray-500">{{ code.ownerCompany.name }}</div>
                                        {% else %}
                                            <span class="rounded bg-teal-100 px-2 py-0.5 text-xs font-medium text-teal-800">Campagne</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-4 py-3 text-gray-700">{{ code.usedCount }} / {{ code.maxUses }}</td>
                                    <td class="px-4 py-3 text-gray-700">{{ code.freeDays }} j</td>
                                    <td class="px-4 py-3 text-gray-600">{{ code.expiresAt ? code.expiresAt|date('d/m/Y') : '—' }}</td>
                                    <td class="px-4 py-3">
                                        {% if code.usable %}
                                            <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">Utilisable</span>
                                        {% elseif not code.isActive %}
                                            <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">Inactif</span>
                                        {% else %}
                                            <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800">Épuisé/expiré</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-4 py-3 text-right">
                                        <form method="post" action="{{ path('admin_referrals_toggle', {id: code.id}) }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('toggle_referral_' ~ code.id) }}">
                                            <button type="submit" class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50">
                                                {{ code.isActive ? 'Désactiver' : 'Activer' }}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}