{% extends 'admin/_layout.html.twig' %}

{% block title %}Statistiques - Administration - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <h1 class="text-2xl font-bold heading-page mb-8">Statistiques</h1>

    {# Selecteur de periode #}
    <form method="get" action="{{ path('app_admin_stats_index') }}" class="mb-6 glass p-4">
        <div class="flex flex-wrap items-end gap-3">
            <div>
                <label for="stats-period-select" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Periode</label>
                <select name="period" id="stats-period-select" class="input-glass px-3 py-2 text-xs font-bold">
                    <option value="current" {{ period == 'current' ? 'selected' }}>Mois en cours</option>
                    <option value="1" {{ period == '1' ? 'selected' }}>-1 mois</option>
                    <option value="2" {{ period == '2' ? 'selected' }}>-2 mois</option>
                    <option value="3" {{ period == '3' ? 'selected' }}>-3 mois</option>
                    <option value="6" {{ period == '6' ? 'selected' }}>-6 mois</option>
                    <option value="8" {{ period == '8' ? 'selected' }}>-8 mois</option>
                    <option value="10" {{ period == '10' ? 'selected' }}>-10 mois</option>
                    <option value="12" {{ period == '12' ? 'selected' }}>-12 mois</option>
                    <option value="custom" {{ period == 'custom' ? 'selected' }}>Personnalise</option>
                </select>
            </div>
            <div id="stats-custom-range" class="{{ period == 'custom' ? '' : 'hidden' }} flex items-end gap-3">
                <div>
                    <label for="from" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Du</label>
                    <input type="date" id="from" name="from" value="{{ dateFrom }}" class="input-glass px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="to" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Au</label>
                    <input type="date" id="to" name="to" value="{{ dateTo }}" class="input-glass px-3 py-2 text-xs font-bold">
                </div>
            </div>
            <button type="submit" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">
                Appliquer
            </button>
        </div>
        <p class="text-[10px] text-gray-400 mt-2 font-bold">Periode : {{ dateFrom }} — {{ dateTo }}</p>
    </form>

    {# KPI Global #}
    <div class="grid grid-cols-2 {{ tva_enabled ? 'md:grid-cols-3' : 'md:grid-cols-2' }} gap-4 mb-4">
        <div class="glass-gold p-4">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-700">CA HT</p>
            <p class="text-2xl font-bold mt-1">{{ global.ca_ht|number_format(2, ',', ' ') }} €</p>
        </div>
        {% if tva_enabled %}
            <div class="glass p-4">
                <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">TVA</p>
                <p class="text-2xl font-bold mt-1">{{ global.ca_tva|number_format(2, ',', ' ') }} €</p>
            </div>
            <div class="glass p-4">
                <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">CA TTC</p>
                <p class="text-2xl font-bold mt-1">{{ global.ca_ttc|number_format(2, ',', ' ') }} €</p>
            </div>
        {% endif %}
        <div class="glass p-4">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Commission Stripe</p>
            <p class="text-2xl font-bold mt-1 text-red-600">{{ global.commission_stripe|number_format(2, ',', ' ') }} €</p>
        </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <div class="glass p-4">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Cout de fonctionnement</p>
            <p class="text-2xl font-bold mt-1 text-red-600">{{ global.cout_fonctionnement|number_format(2, ',', ' ') }} €</p>
            <p class="text-[9px] text-gray-400 mt-1">Infra {{ global.cout_infra|number_format(0) }} € + Prestataires {{ global.cout_prestataire|number_format(0) }} €</p>
        </div>
        <div class="glass p-4" style="border-color: {{ global.marge_nette >= 0 ? 'rgba(34,197,94,0.3)' : 'rgba(220,38,38,0.3)' }};">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Marge nette HT</p>
            <p class="text-2xl font-bold mt-1 {{ global.marge_nette >= 0 ? 'text-green-600' : 'text-red-600' }}">{{ global.marge_nette|number_format(2, ',', ' ') }} €</p>
        </div>
        <div class="glass p-4 flex items-center justify-center">
            {% if global.status == 'Surplus' %}
                <span class="px-4 py-2 bg-emerald-500/20 text-emerald-700 font-bold uppercase text-sm tracking-wider">Surplus</span>
            {% elseif global.status == 'Rentable' %}
                <span class="px-4 py-2 bg-green-500/20 text-green-700 font-bold uppercase text-sm tracking-wider">Rentable</span>
            {% else %}
                <span class="px-4 py-2 bg-red-500/20 text-red-700 font-bold uppercase text-sm tracking-wider">Negatif</span>
            {% endif %}
        </div>
    </div>

    {# Factures #}
    <h2 class="text-xl font-bold uppercase mb-4">Factures</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="glass p-4">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Emises</p>
            <p class="text-2xl font-bold mt-1">{{ global.montant_emis|number_format(2, ',', ' ') }} €</p>
            <p class="text-[10px] text-gray-400 mt-1">{{ global.factures_emises }} facture(s)</p>
        </div>
        <div class="glass p-4" style="border-color: rgba(34,197,94,0.3);">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Payees</p>
            <p class="text-2xl font-bold mt-1 text-green-600">{{ global.montant_paye|number_format(2, ',', ' ') }} €</p>
            <p class="text-[10px] text-gray-400 mt-1">{{ global.factures_payees }} facture(s)</p>
        </div>
        <div class="glass p-4" style="border-color: rgba(220,38,38,0.3);">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Total impaye (global)</p>
            <p class="text-2xl font-bold mt-1 text-red-600">{{ (global.montant_impaye + echeancierStats.montantImpaye)|number_format(2, ',', ' ') }} €</p>
            <p class="text-[10px] text-gray-400 mt-1">{{ global.factures_impayees }} facture(s) + {{ echeancierStats.nbEcheancesImpayees }} echeance(s)</p>
            <div class="mt-2 space-y-1">
                <p class="text-[10px] text-gray-400">Factures : <span class="font-bold text-red-500">{{ global.montant_impaye|number_format(2, ',', ' ') }} €</span></p>
                <p class="text-[10px] text-gray-400">Echeanciers : <span class="font-bold text-orange-500">{{ echeancierStats.montantImpaye|number_format(2, ',', ' ') }} €</span> ({{ echeancierStats.nbEcheanciers }} en cours)</p>
            </div>
        </div>
    </div>

    {# Detail echeanciers en cours #}
    {% if echeancierStats.echeanciers|length > 0 %}
        <h2 class="text-xl font-bold uppercase mb-4">Echeanciers en cours</h2>
        <div class="glass overflow-x-auto overflow-hidden mb-8">
            <table class="w-full text-sm">
                <thead>
                    <tr class="glass-dark text-white">
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Reference</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Client</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Echeances restantes</th>
                        <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Restant du</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ech in echeancierStats.echeanciers %}
                        <tr class="border-b border-white/20 hover:bg-white/50">
                            <td class="px-4 py-3 font-mono font-bold text-xs">{{ ech.reference }}</td>
                            <td class="px-4 py-3 text-xs">{{ ech.customer }}</td>
                            <td class="px-4 py-3 text-center font-bold text-xs text-orange-600">{{ ech.nbPending }}</td>
                            <td class="px-4 py-3 text-right font-mono font-bold text-xs text-red-600">{{ ech.restant|number_format(2, ',', ' ') }} €</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ path('app_admin_echeancier_show', {id: ech.id}) }}" class="px-3 py-1 bg-gray-900 text-white hover:bg-[#fabf04] hover:text-gray-900 font-bold uppercase text-[10px] transition-all">Voir</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}


    {# Services #}
    <h2 class="text-xl font-bold uppercase mb-4">Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {% for service in services %}
            <div class="glass overflow-hidden">
                <div class="px-4 py-3 flex items-center justify-between" style="border-left: 4px solid {{ service.color }};">
                    <span class="font-bold text-sm uppercase">{{ service.name }}</span>
                    <span class="text-[10px] font-bold text-gray-400">{{ service.clients }} client(s)</span>
                </div>
                <div class="px-4 py-3 border-t border-white/30">
                    <div class="grid grid-cols-3 gap-2 text-center">
                        <div>
                            <p class="text-[8px] font-bold uppercase text-gray-400">CA HT</p>
                            <p class="text-sm font-bold">{{ service.ca_ht|number_format(0, ',', ' ') }} €</p>
                        </div>
                        <div>
                            <p class="text-[8px] font-bold uppercase text-gray-400">Cout</p>
                            <p class="text-sm font-bold text-red-600">{{ service.cout|number_format(0, ',', ' ') }} €</p>
                        </div>
                        <div>
                            <p class="text-[8px] font-bold uppercase text-gray-400">Marge</p>
                            <p class="text-sm font-bold {{ service.marge >= 0 ? 'text-green-600' : 'text-red-600' }}">{{ service.marge|number_format(0, ',', ' ') }} €</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-2 border-t border-white/20 flex items-center justify-between">
                    {% if service.status == 'Rentable' %}
                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[9px]">Rentable</span>
                    {% elseif service.status == 'Inactif' %}
                        <span class="px-2 py-0.5 bg-gray-100 text-gray-500 font-bold uppercase text-[9px]">Inactif</span>
                    {% else %}
                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[9px]">Non rentable</span>
                    {% endif %}
                    {% set ratio = global.ca_ht > 0 ? (service.ca_ht / global.ca_ht * 100) : 0 %}
                    <span class="text-[9px] font-bold text-gray-400">{{ ratio|number_format(1) }}% du CA</span>
                </div>
            </div>
        {% endfor %}
    </div>

    {# Evolution mensuelle #}
    <div class="glass p-6">
        <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Evolution CA HT (6 mois)</h2>
        <div class="flex items-end gap-2 h-40">
            {% set max_ca = 0 %}
            {% for month in evolution %}
                {% if month.ca_ht > max_ca %}{% set max_ca = month.ca_ht %}{% endif %}
            {% endfor %}
            {% for month in evolution %}
                {% set height = max_ca > 0 ? (month.ca_ht / max_ca * 100) : 0 %}
                <div class="flex-1 flex flex-col items-center gap-1">
                    <span class="text-[9px] font-bold text-gray-500">{{ month.ca_ht|number_format(0, ',', ' ') }}€</span>
                    <div class="w-full bg-[#fabf04] rounded-t-lg transition-all" style="height: {{ height }}%; min-height: 4px;"></div>
                    <span class="text-[8px] font-bold text-gray-400 uppercase">{{ month.month }}</span>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
