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

{% block title %}Coûts réels par outil - Admin{% endblock %}

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

    {# Header #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Coûts réels par outil',
            subtitle: 'Statistiques basées sur toutes les générations effectuées par les utilisateurs. La médiane est l\'indicateur de référence pour calibrer les limites des forfaits.',
            icon: 'bar-chart',
            backHref: path('admin_plan_list'),
            backLabel: 'Retour aux offres'
        } only %}
    </div>

    {% if toolStats is empty %}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-12 text-center">
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Aucune donnée disponible',
                description: 'Les statistiques apparaîtront dès que des utilisateurs auront effectué des générations.',
                icon: 'bar-chart',
                variant: 'minimal'
            } only %}
        </div>
    {% else %}

        {# Tableau des statistiques par outil #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-8">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Coût médian par génération</h2>
                <p class="text-xs text-gray-400 mt-0.5">Toutes les générations avec tokens &gt; 0, tous utilisateurs confondus</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="border-b border-gray-200">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Outil</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Générations</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Médiane</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Moyenne</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">P25</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">P75</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Min</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Max</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for code, stats in toolStats %}
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-2">
                                        <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg text-white text-xs font-bold"
                                              style="background: rgb({{ tool_color_hex[code] is defined ? tool_color_hex[code] : '107, 114, 128' }})">
                                            {{ code|upper|slice(0, 1) }}
                                        </span>
                                        <div>
                                            <p class="font-semibold text-gray-900 capitalize">{{ stats.name }}</p>
                                            <p class="text-xs text-gray-400">{{ code }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-sm text-gray-700">{{ stats.count|number_format(0, ',', ' ') }}</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-sm font-semibold text-primary">{{ stats.median|number_format(0, ',', ' ') }}</span>
                                    <span class="text-xs text-gray-400 ml-1">tokens</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-sm text-gray-600">{{ stats.avg|number_format(0, ',', ' ') }}</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-xs text-gray-500">{{ stats.p25|number_format(0, ',', ' ') }}</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-xs text-gray-500">{{ stats.p75|number_format(0, ',', ' ') }}</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-xs text-gray-400">{{ stats.min|number_format(0, ',', ' ') }}</span>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-xs text-gray-400">{{ stats.max|number_format(0, ',', ' ') }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Limites suggérées par forfait #}
        {% if plans is not empty and suggestedLimits is not empty %}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Limites suggérées par forfait</h2>
                <p class="text-xs text-gray-400 mt-0.5">Calculées automatiquement : <code class="bg-gray-100 px-1 rounded text-gray-600">floor(tokens_mensuels / médiane)</code> — utilisez ces valeurs pour mettre à jour les limites dans chaque offre.</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="border-b border-gray-200">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Forfait</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Tokens/mois</th>
                            {% for code, stats in toolStats %}
                                <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider capitalize">{{ stats.name }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for plan in plans %}
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-2">
                                        <div class="w-2 h-8 rounded-full" style="{{ plan.gradientStyle }}"></div>
                                        <p class="font-semibold text-gray-900">{{ plan.name }}</p>
                                    </div>
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <span class="font-mono text-sm text-gray-600">{{ plan.monthlyTokens|number_format(0, ',', ' ') }}</span>
                                </td>
                                {% for code, stats in toolStats %}
                                    {% set suggested = suggestedLimits[plan.id][code] ?? -1 %}
                                    <td class="px-5 py-4 text-right">
                                        <span class="font-mono text-sm font-semibold {% if suggested > 0 %}text-primary{% else %}text-gray-400{% endif %}">
                                            {% if suggested > 0 %}{{ suggested }}{% else %}∞{% endif %}
                                        </span>
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 bg-gray-50">
                <p class="text-xs text-gray-500">
                    Ces valeurs sont indicatives — elles correspondent au nombre de générations possibles par mois avec la médiane observée.
                </p>
            </div>
        </div>
        {% endif %}

    {% endif %}

</div>
{% endblock %}