{% extends 'backend/base_back.html.twig' %}

{% block title %}Mes statistiques{% endblock %}

{% block body %}
    <div class="position-relative">

        {% if app.user and 'ROLE_PREMIUM' in app.user.roles %}
            {# ✅ Contenu réel pour les utilisateurs Premium #}
            <div class="container-fluid px-1 section-bottom">
                {% set socials = ['instagram.com','facebook.com','twitter.com','tiktok.com','youtube.com'] %}
                {% set sns = [] %}
                {% set othersCount = 0 %}
                {# au début de votre boucle #}
                {% for ref in allReferrers %}
                    {# on enlève un éventuel "www." #}
                    {% set host = ref.source|replace({'www.':''}) %}

                    {% if host in socials %}
                        {% set sns = sns|merge([ { source: host, count: ref.count } ]) %}
                    {% else %}
                        {% set othersCount = othersCount + ref.count %}
                    {% endif %}
                {% endfor %}

                <div class="row">
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2 px-3">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Visites totales</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ totalVisits }}</div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-success shadow h-100 py-2 px-3">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Visites dernières 24 h</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ visitsLast24h }}</div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-info shadow h-100">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-info text-uppercase">Top 3 sources de trafic</h6>
                            </div>
                            <ul class="list-group list-group-flush">
                                {% for ref in topReferrers %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ ref.source }}
                                        <span class="badge badge-info badge-pill">{{ ref.count }}</span>
                                    </li>
                                {% else %}
                                    <li class="list-group-item text-center text-muted">Aucune donnée</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2 px-3">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Dernière visite</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ lastVisitAgo }}</div>
                        </div>
                    </div>
                </div>

                <div id="visit-chart-container" class="my-4">
                    <visit-chart></visit-chart>
                </div>

                <div class="row">
                    <div class="col-12 mb-4">
                        <div class="card shadow h-100">
                            <div class="card-header py-3 bg-info text-white">
                                <h6 class="m-0 font-weight-bold text-uppercase">Trafic depuis les réseaux sociaux</h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>Source</th>
                                            <th class="text-center">Visites</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for ref in sns %}
                                            <tr>
                                                <td class="align-middle">{{ ref.source }}</td>
                                                <td class="align-middle text-center">
                                                    <span class="badge badge-info">{{ ref.count }}</span>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        {% if othersCount > 0 %}
                                            <tr class="bg-light">
                                                <td>sites externes</td>
                                                <td class="text-center">
                                                    <span class="badge badge-secondary">{{ othersCount }}</span>
                                                </td>
                                            </tr>
                                        {% endif %}
                                        {% if sns|length == 0 and othersCount == 0 %}
                                            <tr>
                                                <td colspan="2" class="text-center text-muted py-4">Aucun trafic enregistré</td>
                                            </tr>
                                        {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% else %}
            {# ❌ Faux contenu flouté #}
            <div class="blurred-content">
                <div class="container-fluid px-1 section-bottom">
                    <div class="row">
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-primary shadow h-100 py-2 px-3">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Visites totales</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">•••</div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-success shadow h-100 py-2 px-3">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Visites dernières 24 h</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">•••</div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-info shadow h-100">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-info text-uppercase">Top 3 sources de trafic</h6>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        instagram.com <span class="badge badge-info badge-pill">•••</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        tiktok.com <span class="badge badge-info badge-pill">•••</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        facebook.com <span class="badge badge-info badge-pill">•••</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-warning shadow h-100 py-2 px-3">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Dernière visite</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">•••</div>
                            </div>
                        </div>
                    </div>

                    <div id="visit-chart-container" class="my-4">
                        <visit-chart></visit-chart>
                    </div>

                    <div class="row">
                        <div class="col-12 mb-4">
                            <div class="card shadow h-100">
                                <div class="card-header py-3 bg-info text-white">
                                    <h6 class="m-0 font-weight-bold text-uppercase">Trafic depuis les réseaux sociaux</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table mb-0">
                                            <thead class="thead-light">
                                            <tr>
                                                <th>Source</th>
                                                <th class="text-center">Visites</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="align-middle">instagram.com</td>
                                                <td class="align-middle text-center"><span class="badge badge-info">•••</span></td>
                                            </tr>
                                            <tr>
                                                <td class="align-middle">tiktok.com</td>
                                                <td class="align-middle text-center"><span class="badge badge-info">•••</span></td>
                                            </tr>
                                            <tr>
                                                <td class="align-middle">facebook.com</td>
                                                <td class="align-middle text-center"><span class="badge badge-info">•••</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="upgrade-overlay d-flex flex-column justify-content-center align-items-center text-center">
                <h4 class="mb-3 text-white">🚀 Débloque tes statistiques complètes</h4>
                <p class="text-light mb-4">Passe en Premium pour accéder à toutes tes données en temps réel.</p>
                <a href="{{ path('app_premium') }}" class="btn btn-warning font-weight-bold">Passer en Premium</a>
            </div>
        {% endif %}
    </div>
{% endblock %}