{% extends "admin/base.html" %} {% block title %}Tableau de Bord{% endblock %}
{% block page_title %}Tableau de Bord{% endblock %} {% block content %}
<!-- Stats Cards - Row 1 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <!-- Total Users (Displayed) -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Utilisateurs Affichés</p>
                <h3 class="text-3xl font-bold text-white mt-1">
                    {{ "{:,}".format(displayed_user_count) }}
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-users text-blue-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">
            <span class="text-green-400">{{ total_users }}</span> réels +
            <span class="text-yellow-400">{{ fake_user_count }}</span> ajoutés
        </p>
    </div>

    <!-- Total Deposits -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Total Dépôts</p>
                <h3 class="text-2xl font-bold text-white mt-1">
                    {{ "{:,.0f}".format(total_deposits) }}
                    <span class="text-sm font-normal text-gray-400">FCFA</span>
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-arrow-down text-green-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">
            Somme de tous les achats de plans
        </p>
    </div>

    <!-- Total Withdrawals -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Total Retraits</p>
                <h3 class="text-2xl font-bold text-white mt-1">
                    {{ "{:,.0f}".format(total_withdrawals) }}
                    <span class="text-sm font-normal text-gray-400">FCFA</span>
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-arrow-up text-red-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">
            Montant brut des retraits effectués
        </p>
    </div>

    <!-- Total Withdrawal Fees -->
    <div
        class="bg-gray-800 rounded-xl p-6 border border-gray-700 relative overflow-hidden"
    >
        <div
            class="absolute top-0 right-0 w-20 h-20 bg-yellow-500/10 rounded-full blur-xl -mr-10 -mt-10"
        ></div>
        <div class="flex items-center justify-between relative z-10">
            <div>
                <p class="text-gray-400 text-sm">Frais Collectés (15%)</p>
                <h3 class="text-2xl font-bold text-yellow-400 mt-1">
                    {{ "{:,.0f}".format(total_withdrawal_fees) }}
                    <span class="text-sm font-normal text-gray-400">FCFA</span>
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-coins text-yellow-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">
            <i class="fas fa-chart-line text-green-400 mr-1"></i>
            Revenus sur les retraits
        </p>
    </div>
</div>

<!-- Stats Cards - Row 2 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Real Users -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Utilisateurs Réels</p>
                <h3 class="text-3xl font-bold text-white mt-1">
                    {{ total_users }}
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-user-check text-indigo-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">
            <span class="text-green-400">{{ active_users }}</span> actifs
        </p>
    </div>

    <!-- Pending Withdrawals -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Retraits en Attente</p>
                <h3 class="text-3xl font-bold text-white mt-1">
                    {{ pending_withdrawals }}
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-clock text-orange-400 text-xl"></i>
            </div>
        </div>
        <a
            href="{{ url_for('admin_panel.withdrawals') }}"
            class="text-sm text-orange-400 hover:text-orange-300 mt-3 inline-block"
        >
            Voir les demandes <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <!-- Active Investments -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Investissements Actifs</p>
                <h3 class="text-2xl font-bold text-white mt-1">
                    {{ "{:,.0f}".format(total_investments) }}
                    <span class="text-sm font-normal text-gray-400">FCFA</span>
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-chart-line text-purple-400 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-3">Valeur des plans actifs</p>
    </div>

    <!-- Referral Commissions -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-400 text-sm">Commissions Parrainage</p>
                <h3 class="text-2xl font-bold text-white mt-1">
                    {{ "{:,.0f}".format(total_referral_commissions) }}
                    <span class="text-sm font-normal text-gray-400">FCFA</span>
                </h3>
            </div>
            <div
                class="w-12 h-12 bg-pink-500/20 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-share-nodes text-pink-400 text-xl"></i>
            </div>
        </div>
        <a
            href="{{ url_for('admin_panel.referral_commissions') }}"
            class="text-sm text-pink-400 hover:text-pink-300 mt-3 inline-block"
        >
            Voir les détails <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>
</div>

<!-- Summary Card -->
<div
    class="bg-gradient-to-r from-yellow-500/10 to-amber-500/10 rounded-xl p-6 border border-yellow-500/30 mb-8"
>
    <h3 class="text-lg font-bold text-white mb-4">
        <i class="fas fa-chart-pie mr-2 text-yellow-400"></i>
        Résumé Financier
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="text-center p-4 bg-gray-800/50 rounded-lg">
            <p class="text-gray-400 text-sm mb-2">Total Entrant</p>
            <p class="text-2xl font-bold text-green-400">
                {{ "{:,.0f}".format(total_deposits) }} FCFA
            </p>
        </div>
        <div class="text-center p-4 bg-gray-800/50 rounded-lg">
            <p class="text-gray-400 text-sm mb-2">Total Sortant</p>
            <p class="text-2xl font-bold text-red-400">
                {{ "{:,.0f}".format(total_withdrawals) }} FCFA
            </p>
        </div>
        <div class="text-center p-4 bg-gray-800/50 rounded-lg">
            <p class="text-gray-400 text-sm mb-2">Gains (Frais 15%)</p>
            <p class="text-2xl font-bold text-yellow-400">
                {{ "{:,.0f}".format(total_withdrawal_fees) }} FCFA
            </p>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="bg-gray-800 rounded-xl border border-gray-700">
    <div
        class="px-6 py-4 border-b border-gray-700 flex items-center justify-between"
    >
        <h3 class="text-lg font-semibold text-white">
            <i class="fas fa-history mr-2 text-yellow-400"></i>
            Transactions Récentes
        </h3>
        <a
            href="{{ url_for('admin_panel.transactions') }}"
            class="text-sm text-yellow-400 hover:text-yellow-300"
        >
            Voir tout <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-900/50">
                <tr>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Utilisateur
                    </th>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Type
                    </th>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Montant
                    </th>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Frais
                    </th>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Statut
                    </th>
                    <th
                        class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider"
                    >
                        Date
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for transaction in recent_transactions %}
                <tr class="hover:bg-gray-700/50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-gray-300"
                            >{{ transaction.user.phone if transaction.user else
                            'N/A' }}</span
                        >
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if transaction.type == 'deposit' %}bg-green-500/20 text-green-400 {% elif transaction.type == 'withdrawal' %}bg-red-500/20 text-red-400 {% elif transaction.type == 'purchase' %}bg-blue-500/20 text-blue-400 {% elif transaction.type == 'bonus' %}bg-yellow-500/20 text-yellow-400 {% elif transaction.type == 'referral' %}bg-pink-500/20 text-pink-400 {% else %}bg-gray-500/20 text-gray-400{% endif %}"
                        >
                            {% if transaction.type == 'deposit' %}
                            <i class="fas fa-arrow-down mr-1"></i> Dépôt {% elif
                            transaction.type == 'withdrawal' %}
                            <i class="fas fa-arrow-up mr-1"></i> Retrait {% elif
                            transaction.type == 'purchase' %}
                            <i class="fas fa-shopping-cart mr-1"></i> Achat {%
                            elif transaction.type == 'bonus' %}
                            <i class="fas fa-gift mr-1"></i> Bonus {% elif
                            transaction.type == 'referral' %}
                            <i class="fas fa-share-nodes mr-1"></i> Parrainage
                            {% else %} {{ transaction.type }} {% endif %}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span
                            class="font-medium {% if transaction.type == 'withdrawal' %}text-red-400{% else %}text-green-400{% endif %}"
                        >
                            {% if transaction.type == 'withdrawal' %}-{% else
                            %}+{% endif %}{{
                            "{:,.0f}".format(transaction.amount) }} FCFA
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if transaction.type == 'withdrawal' and
                        transaction.fee_amount %}
                        <span class="text-yellow-400 font-medium"
                            >{{ "{:,.0f}".format(transaction.fee_amount) }}
                            FCFA</span
                        >
                        {% else %}
                        <span class="text-gray-500">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if transaction.status == 'completed' %}bg-green-500/20 text-green-400 {% elif transaction.status == 'pending' %}bg-yellow-500/20 text-yellow-400 {% elif transaction.status == 'approved' %}bg-blue-500/20 text-blue-400 {% elif transaction.status == 'rejected' %}bg-red-500/20 text-red-400 {% else %}bg-gray-500/20 text-gray-400{% endif %}"
                        >
                            {% if transaction.status == 'completed' %}Complété
                            {% elif transaction.status == 'pending' %}En attente
                            {% elif transaction.status == 'approved' %}Approuvé
                            {% elif transaction.status == 'rejected' %}Rejeté {%
                            else %}{{ transaction.status }}{% endif %}
                        </span>
                    </td>
                    <td
                        class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"
                    >
                        {{ transaction.created_at.strftime('%d/%m/%Y %H:%M') }}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-3"></i>
                        <p>Aucune transaction récente</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}