{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title %}Statistiques des modes{% endblock %}

{% block content_header %}
    <div class="content-header-title">
        <h1 class="title">
            <i class="fa fa-chart-bar me-2"></i>Statistiques d'utilisation des modes
        </h1>
    </div>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <!-- Retour à la liste -->
    <div class="mb-4">
        <a href="{{ ea_url().setController('App\\Controller\\Admin\\ModeUsageCrudController').setAction('index') }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left me-1"></i>Retour à la liste
        </a>
    </div>

    <!-- Résumé global -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-primary text-white h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1 text-white-50">Total utilisations</h6>
                            <h2 class="card-title mb-0">{{ totalUsages }}</h2>
                        </div>
                        <i class="fa fa-chart-line fa-2x opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <small>30 derniers jours</small>
                </div>
            </div>
        </div>
        {% for plan, count in countByPlan %}
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1 text-muted">
                                {% if plan == 'free' %}Gratuit
                                {% elseif plan == 'student' %}Étudiant
                                {% elseif plan == 'personal' %}Perso
                                {% elseif plan == 'pro' %}Pro
                                {% elseif plan == 'lintello' %}LintellO
                                {% else %}{{ plan }}{% endif %}
                            </h6>
                            <h2 class="card-title mb-0">{{ count }}</h2>
                        </div>
                        <span class="badge
                            {% if plan == 'free' %}bg-secondary
                            {% elseif plan == 'student' %}bg-info
                            {% elseif plan == 'personal' %}bg-primary
                            {% elseif plan == 'pro' %}bg-warning text-dark
                            {% elseif plan == 'lintello' %}bg-success
                            {% else %}bg-light text-dark{% endif %}
                            fs-5">
                            {% if plan == 'free' %}🆓
                            {% elseif plan == 'student' %}🎓
                            {% elseif plan == 'personal' %}👤
                            {% elseif plan == 'pro' %}💼
                            {% elseif plan == 'lintello' %}⭐
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Top modes global -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-trophy text-warning me-2"></i>Top 10 modes (global)
                    </h5>
                </div>
                <div class="card-body">
                    {% if topModesGlobal is empty %}
                        <p class="text-muted text-center">Aucune donnée disponible</p>
                    {% else %}
                        <div class="row">
                            {% for mode in topModesGlobal %}
                            <div class="col-lg-2 col-md-4 col-6 mb-3">
                                <div class="card h-100 text-center {% if loop.index <= 3 %}border-warning{% endif %}">
                                    <div class="card-body">
                                        {% if loop.index == 1 %}
                                            <span class="badge bg-warning text-dark mb-2">🥇 #1</span>
                                        {% elseif loop.index == 2 %}
                                            <span class="badge bg-secondary mb-2">🥈 #2</span>
                                        {% elseif loop.index == 3 %}
                                            <span class="badge bg-danger mb-2">🥉 #3</span>
                                        {% else %}
                                            <span class="badge bg-light text-dark mb-2">#{{ loop.index }}</span>
                                        {% endif %}
                                        <div class="fs-2 mb-2">{{ mode.modeIcon }}</div>
                                        <h6 class="mb-1">{{ mode.modeName }}</h6>
                                        <span class="badge bg-primary">{{ mode.usageCount }} fois</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Top modes par plan -->
    <div class="row">
        {% for plan, modes in topModesByPlan %}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header
                    {% if plan == 'free' %}bg-secondary text-white
                    {% elseif plan == 'student' %}bg-info text-white
                    {% elseif plan == 'personal' %}bg-primary text-white
                    {% elseif plan == 'pro' %}bg-warning text-dark
                    {% elseif plan == 'lintello' %}bg-success text-white
                    {% endif %}">
                    <h6 class="card-title mb-0">
                        {% if plan == 'free' %}🆓 Plan Gratuit
                        {% elseif plan == 'student' %}🎓 Plan Étudiant
                        {% elseif plan == 'personal' %}👤 Plan Perso
                        {% elseif plan == 'pro' %}💼 Plan Pro
                        {% elseif plan == 'lintello' %}⭐ Plan LintellO
                        {% else %}{{ plan }}{% endif %}
                    </h6>
                </div>
                <div class="card-body p-0">
                    {% if modes is empty %}
                        <p class="text-muted text-center p-3 mb-0">Aucune donnée</p>
                    {% else %}
                        <ul class="list-group list-group-flush">
                            {% for mode in modes %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>
                                    <span class="me-2">{{ mode.modeIcon }}</span>
                                    {{ mode.modeName }}
                                </span>
                                <span class="badge bg-primary rounded-pill">{{ mode.usageCount }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="mt-3 text-muted small">
        <i class="fa fa-info-circle me-1"></i>
        Données des 30 derniers jours (depuis {{ since|date('d/m/Y') }})
    </div>
</div>
{% endblock %}