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

{% block title %}Dashboard Admin{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">📊 Dashboard Administration</h1>
    <p class="page-subtitle">Vue d'ensemble de l'activité NUM-ECARD</p>
</div>

<!-- STATISTIQUES PRINCIPALES -->
<div class="stats-grid">
    <div class="stat-card highlight">
        <div class="stat-icon">💰</div>
        <div class="stat-value">{{ stats.total_revenue|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Chiffre d'affaires total</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-value">{{ stats.revenue_this_month|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Ce mois-ci</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-value">{{ stats.total_commandes }}</div>
        <div class="stat-label">Commandes totales</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-value">{{ stats.total_users }}</div>
        <div class="stat-label">Utilisateurs inscrits</div>
    </div>
</div>

<!-- COMMANDES PAR STATUT -->
<div class="card">
    <div class="card-title">📋 Répartition des commandes</div>
    <div class="flex flex-wrap gap-3">
        <div class="status-box status-box-pending">
            <div class="status-box-value">{{ stats.commandes_by_status.pending }}</div>
            <div class="status-box-label">En attente</div>
        </div>
        <div class="status-box status-box-paid">
            <div class="status-box-value">{{ stats.commandes_by_status.paid }}</div>
            <div class="status-box-label">Payées</div>
        </div>
        <div class="status-box status-box-processing">
            <div class="status-box-value">{{ stats.commandes_by_status.processing }}</div>
            <div class="status-box-label">En cours</div>
        </div>
        <div class="status-box status-box-completed">
            <div class="status-box-value">{{ stats.commandes_by_status.completed }}</div>
            <div class="status-box-label">Terminées</div>
        </div>
        <div class="status-box status-box-cancelled">
            <div class="status-box-value">{{ stats.commandes_by_status.cancelled }}</div>
            <div class="status-box-label">Annulées</div>
        </div>
    </div>
</div>

<!-- NOTIFICATIONS PUSH -->
<div class="card">
    <div class="card-title flex justify-between items-center">
        <span>🔔 Notifications Push</span>
        <a href="{{ path('app_admin_push_index') }}" class="btn btn-secondary btn-sm">Gérer</a>
    </div>
    <p style="color: #6e6e73; font-size: 14px; margin-bottom: 15px;">Envoyez des notifications aux utilisateurs qui ont
        installé les cartes PWA sur leur téléphone.</p>
    <div class="flex gap-3">
        <a href="{{ path('app_admin_push_index') }}"
            style="display: inline-block; background: linear-gradient(135deg, #007aff, #5856d6); color: white; padding: 10px 24px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px;">
            📤 Envoyer une notification
        </a>
        <a href="{{ path('app_admin_push_send_all') }}"
            style="display: inline-block; background: linear-gradient(135deg, #ff9500, #ff6b00); color: white; padding: 10px 24px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px;">
            📢 Notifier tout le monde
        </a>
    </div>
</div>


<!-- DERNIÈRES COMMANDES -->
<div class="card">
    <div class="card-title flex justify-between items-center">
        <span>
            🤝 Recommandations
            {% if stats.new_recommendations > 0 %}
            <span
                style="display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; background: #007aff; color: white; border-radius: 12px; font-size: 13px; font-weight: 700; margin-left: 8px;">
                {{ stats.new_recommendations }}
            </span>
            {% endif %}
        </span>
        <a href="{{ path('app_admin_recommendations') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>

    {% if stats.new_recommendations == 0 %}
    <p style="color: #86868b; font-size: 14px;">Aucune nouvelle recommandation.</p>
    {% else %}
    <p style="color: #6e6e73; font-size: 14px; margin-bottom: 12px;">{{ stats.new_recommendations }}
        nouvelle{{ stats.new_recommendations > 1 ? 's' : '' }}
        recommandation{{ stats.new_recommendations > 1 ? 's' : '' }} à traiter.</p>
    <a href="{{ path('app_admin_recommendations', {status: 'new'}) }}"
        style="display: inline-block; background: linear-gradient(135deg, #007aff, #5856d6); color: white; padding: 10px 24px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px;">
        📋 Traiter les recommandations
    </a>
    {% endif %}
</div>

<!-- DERNIÈRES COMMANDES (original) -->
<div class="card">
    <div class="card-title flex justify-between items-center">
        <span>🆕 Dernières commandes</span>
        <a href="{{ path('app_admin_commandes') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>

    {% if latestCommandes is empty %}
    <p class="text-muted" style="text-align: center; padding: 40px;">Aucune commande pour le moment.</p>
    {% else %}
    <div class="table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th class="col-reference">Référence</th>
                    <th class="col-client">Client</th>
                    <th class="col-pack">Pack</th>
                    <th class="col-montant">Montant</th>
                    <th class="col-statut">Statut</th>
                    <th class="col-date">Date</th>
                    <th class="col-action"></th>
                </tr>
            </thead>
            <tbody>
                {% for commande in latestCommandes %}
                <tr>
                    <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="action-link">
                        <strong class="text-primary">{{ commande.reference }}</strong>
                    </a>
                    <td>
                        <span class="text-truncate" title="{{ commande.clientNom ?: commande.clientEmail }}">
                            {{ commande.clientNom ?: commande.clientEmail }}
                        </span>
                    </td>
                    <td>{{ commande.packLabel }}</td>
                    <td class="text-right font-semibold">
                        {{ commande.totalTTC|number_format(2, ',', ' ') }}&nbsp;€
                    </td>
                    <td>
                        <span class="status-badge status-{{ commande.status }}">
                            {{ commande.statusLabel }}
                        </span>
                    </td>
                    <td class="text-muted">
                        <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s') }}Z">{{ commande.createdAt|date('d/m/Y H:i') }}</span>
                    </td>
                    <td class="text-right">
                        <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="action-link">
                            Gérer →
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

<!-- DERNIERS UTILISATEURS -->
<div class="card">
    <div class="card-title flex justify-between items-center">
        <span>👤 Derniers inscrits</span>
        <a href="{{ path('app_admin_users') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>

    {% if latestUsers is empty %}
    <p class="text-muted" style="text-align: center; padding: 40px;">Aucun utilisateur pour le moment.</p>
    {% else %}
    <div class="table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Utilisateur</th>
                    <th>Email</th>
                    <th>Inscription</th>
                    <th class="text-center">Vérifié</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for user in latestUsers %}
                <tr>
                    <td>
                        <div class="user-info">
                            <div class="user-avatar">
                                {{ user.initiales }}
                            </div>
                            <span class="user-name">{{ user.fullName ?: 'Non renseigné' }}</span>
                        </div>
                    </td>
                    <td class="text-muted">{{ user.email }}</td>
                    <td class="text-muted">{{ user.createdAt|date('d/m/Y') }}</td>
                    <td class="text-center">
                        {% if user.isVerified %}
                        <span class="verified-icon text-success">✅</span>
                        {% else %}
                        <span class="verified-icon text-error">❌</span>
                        {% endif %}
                    </td>
                    <td class="text-right">
                        <a href="{{ path('app_admin_user_show', {id: user.id}) }}" class="action-link">
                            Voir →
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endblock %}