{% extends 'admin/stats/_layout.html.twig' %}
{% set stats_route_name = 'admin_stats_acquisition' %}

{% block stats_title %}Acquisition{% endblock %}

{% block stats_help_title %}Acquisition{% endblock %}
{% block stats_help_content %}
<h4>Acquisition</h4>
<p>Cette page repond a la question : <strong>d'ou viennent vos visiteurs ?</strong></p>
<p><strong>Sources de trafic</strong> — repartition entre Google (SEO), acces direct, reseaux sociaux, sites referents, emails et campagnes payantes.</p>
<p><strong>Appareils</strong> — repartition mobile / desktop / tablette. Si la majorite de vos visiteurs sont sur mobile, verifiez que votre site s'affiche bien sur petit ecran.</p>
<p><strong>Heatmap</strong> — quand vos visiteurs sont actifs (jour de la semaine + heure). Publiez vos contenus pendant les pics d'audience.</p>
<p><strong>Pages d'entree</strong> — les premieres pages vues par vos visiteurs. Ce sont vos "portes d'entree" : elles doivent donner envie d'explorer plus loin.</p>
{% endblock %}

{% block stats_content %}

<div class="row g-3 mb-4">
    {# --- Donut sources --- #}
    <div class="col-12 col-lg-6">
        <div class="bw-card bw-card--full">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-chart-pie me-2"></i>Sources de trafic</h3>
            </div>
            <div class="bw-card__body">
                {% if sources|length > 0 %}
                <canvas id="sourcesChart" height="280" data-sources='{{ sources|json_encode }}'></canvas>
                {% else %}
                <p class="text-muted text-center py-4 mb-0">Pas encore de donnees.</p>
                {% endif %}
            </div>
        </div>
    </div>

    {# --- Tableau sources detail --- #}
    <div class="col-12 col-lg-6">
        <div class="bw-card bw-card--full">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-list me-2"></i>Detail des sources</h3>
            </div>
            <div class="bw-card__body bw-card__body--list">
                {% set total = sources|reduce((carry, s) => carry + s.cnt, 0) %}
                {% for s in sources %}
                <div class="bw-activity-item">
                    <div class="bw-activity-item__content d-flex justify-content-between">
                        <div>
                            <span class="bw-source-badge bw-source-badge--{{ s.source }}">{{ s.source|replace({'_': ' '})|capitalize }}</span>
                        </div>
                        <div class="text-end">
                            <strong>{{ s.cnt }}</strong>
                            <small class="text-muted ms-1">({{ total > 0 ? (s.cnt / total * 100)|round(1) : 0 }}%)</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{# --- Repartition appareils --- #}
<div class="row g-3 mb-4">
    <div class="col-12 col-lg-5">
        <div class="bw-card bw-card--full">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-mobile-screen-button me-2"></i>Appareils</h3>
            </div>
            <div class="bw-card__body">
                {% if devices|length > 0 %}
                <canvas id="devicesChart" height="250" data-devices='{{ devices|json_encode }}'></canvas>
                {% else %}
                <p class="text-muted text-center py-4 mb-0">Pas encore de donnees.</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-7">
        <div class="bw-card bw-card--full">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-list me-2"></i>Detail par appareil</h3>
            </div>
            <div class="bw-card__body bw-card__body--list">
                {% set devTotal = devices|reduce((c, d) => c + d.cnt, 0) %}
                {% set deviceLabels = { desktop: 'Desktop', mobile: 'Mobile', tablet: 'Tablette', unknown: 'Inconnu' } %}
                {% set deviceIcons = { desktop: 'fa-desktop', mobile: 'fa-mobile-screen-button', tablet: 'fa-tablet-screen-button', unknown: 'fa-question' } %}
                {% for d in devices %}
                <div class="bw-activity-item">
                    <div class="bw-activity-item__content d-flex justify-content-between">
                        <div>
                            <i class="fas {{ deviceIcons[d.device_type] ?? 'fa-question' }} me-2 text-muted"></i>
                            <strong>{{ deviceLabels[d.device_type] ?? d.device_type }}</strong>
                        </div>
                        <div class="text-end">
                            <strong>{{ d.cnt }}</strong>
                            <small class="text-muted ms-1">({{ devTotal > 0 ? (d.cnt / devTotal * 100)|round(1) : 0 }}%)</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{# --- Heatmap temporel --- #}
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="bw-card">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-fire me-2"></i>Activite par jour et heure</h3>
            </div>
            <div class="bw-card__body">
                {% if heatmap.max > 0 %}
                <div class="bw-heatmap">
                    <div class="bw-heatmap__row bw-heatmap__row--header">
                        <div class="bw-heatmap__label"></div>
                        {% for h in heatmap.hours %}
                            <div class="bw-heatmap__cell bw-heatmap__cell--header">{{ h }}</div>
                        {% endfor %}
                    </div>
                    {% for dayIdx, dayLabel in heatmap.days %}
                        <div class="bw-heatmap__row">
                            <div class="bw-heatmap__label">{{ dayLabel }}</div>
                            {% for hour in heatmap.hours %}
                                {% set val = heatmap.grid[dayIdx][hour] %}
                                {% set intensity = heatmap.max > 0 ? (val / heatmap.max) : 0 %}
                                <div class="bw-heatmap__cell" style="background: rgba(37, 99, 235, {{ (intensity * 0.85 + 0.05)|round(2) }});" title="{{ dayLabel }} {{ hour }}h : {{ val }} sessions">
                                    {% if val > 0 %}<span>{{ val }}</span>{% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
                <div class="d-flex align-items-center justify-content-end gap-2 mt-2" style="font-size: 0.75rem; color: #64748b;">
                    <span>Faible</span>
                    <div style="display: flex; gap: 2px;">
                        <div style="width: 16px; height: 12px; background: rgba(37, 99, 235, 0.1); border-radius: 2px;"></div>
                        <div style="width: 16px; height: 12px; background: rgba(37, 99, 235, 0.35); border-radius: 2px;"></div>
                        <div style="width: 16px; height: 12px; background: rgba(37, 99, 235, 0.6); border-radius: 2px;"></div>
                        <div style="width: 16px; height: 12px; background: rgba(37, 99, 235, 0.85); border-radius: 2px;"></div>
                    </div>
                    <span>Fort</span>
                </div>
                {% else %}
                <p class="text-muted text-center py-3 mb-0">Pas encore de donnees.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# --- Top pages d'entree --- #}
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="bw-card">
            <div class="bw-card__header">
                <h3 class="bw-card__title"><i class="fas fa-door-open me-2"></i>Pages d'entree</h3>
            </div>
            <div class="bw-card__body">
                {% if landingPages|length > 0 %}
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Page</th>
                            <th class="text-end" style="width: 120px;">Sessions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for lp in landingPages %}
                        <tr>
                            <td><a href="{{ path('admin', {routeName: 'admin_stats_page_detail', url: lp.landing_page, period: period}) }}">{{ lp.landing_page }}</a></td>
                            <td class="text-end fw-bold">{{ lp.cnt }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p class="text-muted text-center py-3 mb-0">Aucune donnee.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}