{# templates/contributor/shipping_summary.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Récapitulatif des envois{% endblock %}

{% block body %}
    <div class="bg-white rounded-lg shadow-md p-6">
        <h1 class="text-2xl font-bold mb-6">📚 Récapitulatif des envois de livres</h1>

        {# Statistiques globales #}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <h3 class="text-lg font-semibold text-blue-700">Total contributeurs</h3>
                <p class="text-3xl font-bold text-blue-900">{{ stats.total_contributors }}</p>
            </div>
            
            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <h3 class="text-lg font-semibold text-green-700">Envoyés</h3>
                <p class="text-3xl font-bold text-green-900">{{ stats.shipped }}</p>
                <p class="text-sm text-green-600">{{ ((stats.shipped / stats.total_contributors) * 100)|number_format(1) }}%</p>
            </div>
            
            <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
                <h3 class="text-lg font-semibold text-orange-700">En attente</h3>
                <p class="text-3xl font-bold text-orange-900">{{ stats.pending }}</p>
                <p class="text-sm text-orange-600">{{ ((stats.pending / stats.total_contributors) * 100)|number_format(1) }}%</p>
            </div>
            
            <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                <h3 class="text-lg font-semibold text-red-700">Sans point relais</h3>
                <p class="text-3xl font-bold text-red-900">{{ stats.without_relay }}</p>
                <p class="text-sm text-red-600">{{ ((stats.without_relay / stats.total_contributors) * 100)|number_format(1) }}%</p>
            </div>
        </div>

        {# Section fusionnée : Détail et comparatif des livres physiques #}
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-purple-800">📖 Détail par livre physique</h2>

            {# Totaux globaux des livres en haut #}
            <div class="bg-white p-4 rounded-lg border-2 border-purple-300 mb-6">
                <h3 class="font-bold text-center text-purple-800 mb-3">📚 TOTAL TOUS LIVRES</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-3xl font-bold text-purple-700">{{ stats.books_stats.total_books }}</div>
                        <div class="text-sm text-purple-600">Total livres</div>
                    </div>

                    <div>
                        <div class="text-3xl font-bold text-green-700">{{ stats.books_stats.shipped_books }}</div>
                        <div class="text-sm text-green-600">Livres envoyés</div>
                        <div class="text-xs text-green-500">{{ stats.books_stats.total_books > 0 ? ((stats.books_stats.shipped_books / stats.books_stats.total_books) * 100)|number_format(1) : 0 }}%</div>
                    </div>

                    <div>
                        <div class="text-3xl font-bold text-orange-700">{{ stats.books_stats.pending_books }}</div>
                        <div class="text-sm text-orange-600">Livres à envoyer</div>
                        <div class="text-xs text-orange-500">{{ stats.books_stats.total_books > 0 ? ((stats.books_stats.pending_books / stats.books_stats.total_books) * 100)|number_format(1) : 0 }}%</div>
                    </div>
                </div>
            </div>

            {# Table comparative des livres individuels #}
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-3 px-4 text-left text-sm font-medium text-gray-700">Livre</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">Total</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">Envoyés</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">En attente</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">% Envoyés</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">% du total livres</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for title, data in stats.rewards_by_type %}
                            {% if data.type == 'book' %}
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4 font-medium text-gray-900">
                                        📚 {{ title }}
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        <span class="font-bold text-lg">{{ data.total_quantity }}</span>
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        <span class="text-green-600 font-medium">{{ data.shipped_quantity }}</span>
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        <span class="text-orange-600 font-medium">{{ data.pending_quantity }}</span>
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        {% set percentage = data.total_quantity > 0 ? ((data.shipped_quantity / data.total_quantity) * 100) : 0 %}
                                        <div class="flex items-center justify-center">
                                            <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                                                <div class="bg-green-600 h-2 rounded-full" style="width: {{ percentage }}%"></div>
                                            </div>
                                            <span class="text-sm font-medium">{{ percentage|number_format(1) }}%</span>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        {% set totalPercentage = stats.books_stats.total_books > 0 ? ((data.total_quantity / stats.books_stats.total_books) * 100) : 0 %}
                                        <span class="text-sm text-gray-600">{{ totalPercentage|number_format(1) }}%</span>
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}

                        {# Ligne de total #}
                        <tr class="bg-purple-50 font-bold border-t-2 border-purple-200">
                            <td class="py-3 px-4 text-purple-800">📚 TOTAL</td>
                            <td class="py-3 px-4 text-center text-purple-700">{{ stats.books_stats.total_books }}</td>
                            <td class="py-3 px-4 text-center text-green-700">{{ stats.books_stats.shipped_books }}</td>
                            <td class="py-3 px-4 text-center text-orange-700">{{ stats.books_stats.pending_books }}</td>
                            <td class="py-3 px-4 text-center">
                                {% set globalPercentage = stats.books_stats.total_books > 0 ? ((stats.books_stats.shipped_books / stats.books_stats.total_books) * 100) : 0 %}
                                <div class="flex items-center justify-center">
                                    <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ globalPercentage }}%"></div>
                                    </div>
                                    <span class="text-sm font-medium text-purple-700">{{ globalPercentage|number_format(1) }}%</span>
                                </div>
                            </td>
                            <td class="py-3 px-4 text-center text-purple-700">100%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {# Répartition par nombre de livres par contributeur #}
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">📚 Nombre de livres par contributeur</h2>

            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-3 px-4 text-left text-sm font-medium text-gray-700">Nombre de livres</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">Contributeurs</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">Envoyés</th>
                            <th class="py-3 px-4 text-center text-sm font-medium text-gray-700">En attente</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for bookCount, data in stats.contributors_by_book_count %}
                            <tr class="hover:bg-gray-50">
                                <td class="py-3 px-4 font-medium text-gray-900">
                                    {% if bookCount == 0 %}
                                        <span class="text-gray-500">0 livre (numérique/pack uniquement)</span>
                                    {% elseif bookCount == 1 %}
                                        1 livre
                                    {% else %}
                                        {{ bookCount }} livres
                                    {% endif %}
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <span class="font-bold">{{ data.count }}</span> contributeurs
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <span class="text-green-600 font-medium">{{ data.shipped }}</span>
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <span class="text-orange-600 font-medium">{{ data.pending }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Analyse détaillée des récompenses #}
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">📋 Détail par type de récompense</h2>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {# Livres physiques #}
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-blue-800 mb-3">📚 Livres physiques</h3>
                    <div class="space-y-2">
                        {% for title, data in stats.rewards_by_type %}
                            {% if data.type == 'book' %}
                                <div class="bg-white p-3 rounded border">
                                    <div class="font-medium">{{ title }}</div>
                                    <div class="text-sm text-gray-600">
                                        Total: <span class="font-medium">{{ data.total_quantity }}</span> |
                                        Envoyés: <span class="text-green-600">{{ data.shipped_quantity }}</span> |
                                        En attente: <span class="text-orange-600">{{ data.pending_quantity }}</span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# Formats numériques #}
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-gray-800 mb-3">💻 Formats numériques</h3>
                    <div class="space-y-2">
                        {% for title, data in stats.rewards_by_type %}
                            {% if data.type == 'digital' %}
                                <div class="bg-white p-3 rounded border">
                                    <div class="font-medium">{{ title }}</div>
                                    <div class="text-sm text-gray-600">
                                        Total: <span class="font-medium">{{ data.total_quantity }}</span> |
                                        Envoyés: <span class="text-green-600">{{ data.shipped_quantity }}</span> |
                                        En attente: <span class="text-orange-600">{{ data.pending_quantity }}</span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# Packs internationaux #}
                <div class="bg-green-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-green-800 mb-3">🌍 Packs internationaux</h3>
                    <div class="space-y-2">
                        {% for title, data in stats.rewards_by_type %}
                            {% if data.type == 'pack' %}
                                <div class="bg-white p-3 rounded border">
                                    <div class="font-medium text-sm">{{ title }}</div>
                                    <div class="text-sm text-gray-600">
                                        Total: <span class="font-medium">{{ data.total_quantity }}</span> |
                                        Envoyés: <span class="text-green-600">{{ data.shipped_quantity }}</span> |
                                        En attente: <span class="text-orange-600">{{ data.pending_quantity }}</span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        {# Liste détaillée des contributeurs avec nombre de livres #}
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">👥 Détail par contributeur (nombre de livres)</h2>

            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-200 text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-2 px-3 text-left text-xs font-medium text-gray-700">Nom</th>
                            <th class="py-2 px-3 text-center text-xs font-medium text-gray-700">Livres</th>
                            <th class="py-2 px-3 text-left text-xs font-medium text-gray-700">Détail</th>
                            <th class="py-2 px-3 text-center text-xs font-medium text-gray-700">Statut</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for contributor in contributors %}
                            {% set bookCount = 0 %}
                            {% for reward in contributor.rewards %}
                                {% if reward.title in physical_books %}
                                    {% set bookCount = bookCount + reward.quantity %}
                                {% endif %}
                            {% endfor %}

                            <tr class="hover:bg-gray-50 {% if not contributor.relayName %}bg-orange-50{% endif %}">
                                <td class="py-2 px-3">
                                    <div class="font-medium">{{ contributor.deliveryFirstName }} {{ contributor.deliveryLastName|upper }}</div>
                                    <div class="text-xs text-gray-500">{{ contributor.email }}</div>
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="font-bold text-lg {% if bookCount > 2 %}text-red-600{% elseif bookCount > 1 %}text-orange-600{% elseif bookCount == 1 %}text-green-600{% else %}text-gray-400{% endif %}">
                                        {{ bookCount }}
                                    </span>
                                </td>
                                <td class="py-2 px-3">
                                    {% for reward in contributor.rewards %}
                                        <div class="text-xs {% if reward.title in physical_books %}font-medium text-blue-700{% else %}text-gray-500{% endif %}">
                                            {% if reward.title in physical_books %}📚{% elseif reward.title == 'L\'epub' %}💻{% else %}📦{% endif %}
                                            {{ reward.title }}
                                            {% if reward.variation %} ({{ reward.variation }}){% endif %}
                                            <span class="text-gray-500">x{{ reward.quantity }}</span>
                                        </div>
                                    {% endfor %}
                                </td>
                                <td class="py-2 px-3 text-center">
                                    {% if contributor.shipped %}
                                        <span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs">
                                            ✅ Envoyé
                                        </span>
                                    {% else %}
                                        {% if not contributor.relayName %}
                                            <span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs">
                                                ❌ Sans relais
                                            </span>
                                        {% else %}
                                            <span class="bg-yellow-100 text-yellow-800 py-1 px-2 rounded-full text-xs">
                                                ⏳ En attente
                                            </span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Liens d'actions #}
        <div class="mt-6 flex space-x-4">
            <a href="{{ path('app_contributor_index') }}"
               class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                ← Retour à la liste
            </a>

            <a href="{{ path('app_contributor_index', {'shipped': 'on'}) }}"
               class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                Voir les envois traités
            </a>

            <a href="{{ path('app_contributor_index', {'point-relay': 'off'}) }}"
               class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">
                Contributeurs sans point relais
            </a>
        </div>
    </div>
{% endblock %}