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

{% block page_title %}Plateforme{% endblock %}

{% macro fcfa(cents) %}{{ (cents / 100)|number_format(0, ',', ' ') }} FCFA{% endmacro %}

{% block content %}
{% import _self as helper %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Vue plateforme</h1>
    <p class="mt-2 text-sm text-gray-700">Consolidé de toutes les boutiques — 30 derniers jours.</p>
</div>

{# KPIs #}
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Boutiques actives</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ boutiques.active }}</p>
        <p class="text-xs text-gray-400">{{ boutiques.total }} au total</p>
    </div>
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Licences actives</p>
        <p class="mt-1 text-3xl font-bold text-green-600">{{ licenses.active }}</p>
        <p class="text-xs text-gray-400">{{ licenses.suspended }} suspendues · {{ licenses.expired }} expirées</p>
    </div>
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Connecteurs actifs</p>
        <p class="mt-1 text-3xl font-bold text-indigo-600">{{ activeConnectors }}</p>
        <p class="text-xs text-gray-400">contact &lt; 48 h</p>
    </div>
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">CA (30 j)</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ helper.fcfa(sales.revenueCents) }}</p>
        <p class="text-xs text-gray-400">{{ sales.salesCount }} ventes · net des avoirs</p>
    </div>
</div>

{# Consolidé financier #}
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-8">
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Créances clients</p>
        <p class="mt-1 text-2xl font-bold text-amber-600">{{ helper.fcfa(customerDebt) }}</p>
        <p class="text-xs text-gray-400">à recouvrer (toutes boutiques)</p>
    </div>
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Dettes fournisseurs</p>
        <p class="mt-1 text-2xl font-bold text-red-600">{{ helper.fcfa(supplierDebt) }}</p>
        <p class="text-xs text-gray-400">à régler (toutes boutiques)</p>
    </div>
    <div class="bg-white shadow rounded-lg p-5">
        <p class="text-sm text-gray-500">Avoirs remboursés (30 j)</p>
        <p class="mt-1 text-2xl font-bold text-gray-700">{{ helper.fcfa(refunded) }}</p>
        <p class="text-xs text-gray-400">déduits du CA</p>
    </div>
</div>

<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
    {# Ventes en ligne #}
    <div class="bg-white shadow rounded-lg p-5">
        <h2 class="text-lg font-medium text-gray-900 mb-3">Ventes en ligne (30 j)</h2>
        <dl class="space-y-2 text-sm">
            <div class="flex justify-between"><dt class="text-gray-500">Commandes en ligne</dt><dd class="font-semibold">{{ sales.onlineCount }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">CA en ligne</dt><dd class="font-semibold">{{ helper.fcfa(sales.onlineRevenueCents) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Part en ligne</dt>
                <dd class="font-semibold">{{ sales.revenueCents > 0 ? (sales.onlineRevenueCents / sales.revenueCents * 100)|round : 0 }} %</dd></div>
        </dl>
    </div>

    {# Top boutiques #}
    <div class="bg-white shadow rounded-lg p-5 lg:col-span-2">
        <h2 class="text-lg font-medium text-gray-900 mb-3">Meilleures boutiques (CA, 30 j)</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead><tr>
                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Boutique</th>
                    <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">Ventes</th>
                    <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">CA</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-100">
                    {% for c in topCompanies %}
                        <tr>
                            <td class="px-3 py-2 text-sm text-gray-900">{{ c.company }}</td>
                            <td class="px-3 py-2 text-sm text-right text-gray-600">{{ c.salesCount }}</td>
                            <td class="px-3 py-2 text-sm text-right font-medium">{{ helper.fcfa(c.revenueCents) }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="3" class="px-3 py-6 text-center text-sm text-gray-500">Aucune vente sur la période.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{# Connecteurs par boutique #}
<div class="bg-white shadow rounded-lg p-5 mt-8">
    <h2 class="text-lg font-medium text-gray-900 mb-3">Connecteurs e-commerce par boutique</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead><tr>
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Boutique</th>
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Offre</th>
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Site</th>
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dernier contact</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-100">
                {% for l in connectors %}
                    {% set online = l.lastSeenAt and l.lastSeenAt >= connectorSince %}
                    <tr>
                        <td class="px-3 py-2 text-sm text-gray-900">{{ l.company.name }}</td>
                        <td class="px-3 py-2 text-sm text-gray-600">{{ l.offerLabel }}</td>
                        <td class="px-3 py-2 text-sm">
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
                                {{ l.status.value == 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ l.status.value }}
                            </span>
                        </td>
                        <td class="px-3 py-2 text-sm text-gray-600 truncate max-w-xs">{{ l.siteUrl ?? '—' }}</td>
                        <td class="px-3 py-2 text-sm">
                            <span class="{{ online ? 'text-green-600' : 'text-gray-400' }}">
                                {{ l.lastSeenAt ? l.lastSeenAt|date('d/m/Y H:i') : 'jamais' }}{{ online ? ' ●' : '' }}
                            </span>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="5" class="px-3 py-6 text-center text-sm text-gray-500">Aucun connecteur lié.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}