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

{% block stats_title %}Vue d'ensemble{% endblock %}

{% block stats_content %}

{# --- KPI Comportement + Visiteurs --- #}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg">
        <div class="bw-kpi">
            <div class="bw-kpi__icon" style="background: #e0e7ff; color: #4338ca;"><i class="fas fa-users"></i></div>
            <div class="bw-kpi__data">
                <div class="bw-kpi__value">{{ visitors.value }}</div>
                <div class="bw-kpi__label">Visiteurs</div>
                {% include 'admin/stats/_trend.html.twig' with {trend: visitors.trend, invert: false} %}
            </div>
        </div>
    </div>
    <div class="col-6 col-lg">
        <div class="bw-kpi">
            <div class="bw-kpi__icon" style="background: #dbeafe; color: #2563eb;"><i class="fas fa-clock"></i></div>
            <div class="bw-kpi__data">
                <div class="bw-kpi__value">{{ behavior.avg_duration ? (behavior.avg_duration // 60 ~ 'm' ~ '%02d'|format(behavior.avg_duration % 60) ~ 's') : '—' }}</div>
                <div class="bw-kpi__label">Duree moyenne</div>
                {% include 'admin/stats/_trend.html.twig' with {trend: behavior.avg_duration_trend, invert: false} %}
            </div>
        </div>
    </div>
    <div class="col-6 col-lg">
        <div class="bw-kpi">
            <div class="bw-kpi__icon" style="background: #fef3c7; color: #d97706;"><i class="fas fa-arrow-turn-up fa-rotate-180"></i></div>
            <div class="bw-kpi__data">
                <div class="bw-kpi__value">{{ behavior.bounce_rate is not null ? behavior.bounce_rate ~ '%' : '—' }}</div>
                <div class="bw-kpi__label">Taux de rebond</div>
                {% include 'admin/stats/_trend.html.twig' with {trend: behavior.bounce_rate_trend, invert: true} %}
            </div>
        </div>
    </div>
    <div class="col-6 col-lg">
        <div class="bw-kpi">
            <div class="bw-kpi__icon" style="background: #f3e8ff; color: #7c3aed;"><i class="fas fa-layer-group"></i></div>
            <div class="bw-kpi__data">
                <div class="bw-kpi__value">{{ behavior.avg_depth ?? '—' }}</div>
                <div class="bw-kpi__label">Pages / session</div>
                {% include 'admin/stats/_trend.html.twig' with {trend: behavior.avg_depth_trend, invert: false} %}
            </div>
        </div>
    </div>
    <div class="col-6 col-lg">
        <div class="bw-kpi">
            <div class="bw-kpi__icon" style="background: #dcfce7; color: #16a34a;"><i class="fas fa-arrows-down-to-line"></i></div>
            <div class="bw-kpi__data">
                <div class="bw-kpi__value">{{ behavior.avg_scroll is not null ? behavior.avg_scroll ~ '%' : '—' }}</div>
                <div class="bw-kpi__label">Scroll moyen</div>
                {% include 'admin/stats/_trend.html.twig' with {trend: behavior.avg_scroll_trend, invert: false} %}
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    {# --- Sources (donut) --- #}
    <div class="col-12 col-lg-4">
        <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>
                <a href="{{ path('admin', {routeName: 'admin_stats_acquisition', period: period}) }}" class="bw-card__link">Detail</a>
            </div>
            <div class="bw-card__body">
                {% if sources|length > 0 %}
                <canvas id="sourcesChart" height="220"
                    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>

    {# --- Appareils (donut) --- #}
    <div class="col-12 col-lg-3">
        <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="220"
                        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>

    {# --- Entonnoir conversion --- #}
    <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-filter me-2"></i>Entonnoir de conversion</h3>
                <a href="{{ path('admin', {routeName: 'admin_stats_conversions', period: period}) }}" class="bw-card__link">Detail</a>
            </div>
            <div class="bw-card__body">
                {% set max = funnel.visitors > 0 ? funnel.visitors : 1 %}
                <div class="bw-funnel">
                    <div class="bw-funnel__step">
                        <div class="bw-funnel__bar" style="width: 100%;"><span>Visiteurs</span></div>
                        <span class="bw-funnel__value">{{ funnel.visitors }}</span>
                    </div>
                    <div class="bw-funnel__step">
                        <div class="bw-funnel__bar" style="width: {{ max > 0 ? (funnel.engaged / max * 100)|round }}%;"><span>> 1 page</span></div>
                        <span class="bw-funnel__value">{{ funnel.engaged }} <small>({{ max > 0 ? (funnel.engaged / max * 100)|round(1) }}%)</small></span>
                    </div>
                    <div class="bw-funnel__step">
                        <div class="bw-funnel__bar" style="width: {{ max > 0 ? (funnel.saw_contact / max * 100)|round }}%;"><span>Vu /contact</span></div>
                        <span class="bw-funnel__value">{{ funnel.saw_contact }} <small>({{ max > 0 ? (funnel.saw_contact / max * 100)|round(1) }}%)</small></span>
                    </div>
                    <div class="bw-funnel__step">
                        <div class="bw-funnel__bar bw-funnel__bar--success" style="width: {{ max > 0 ? max(funnel.converted / max * 100, 3)|round : 0 }}%;"><span>Conversions</span></div>
                        <span class="bw-funnel__value">{{ funnel.converted }} <small>({{ funnel.rate ?? 0 }}%)</small></span>
                    </div>
                </div>
            </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 enrichi --- #}
<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-ranking-star me-2"></i>Pages les plus vues</h3>
                <a href="{{ path('admin', {routeName: 'admin_stats_comportement', period: period}) }}" class="bw-card__link">Detail</a>
            </div>
            <div class="bw-card__body">
                {% if topPages|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th class="text-end">Vues</th>
                                <th class="text-end">Duree moy.</th>
                                <th class="text-end">Scroll</th>
                                <th class="text-end">Rebond</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for page in topPages %}
                            <tr>
                                <td>
                                    <a href="{{ path('admin', {routeName: 'admin_stats_page_detail', url: page.url, period: period}) }}">{{ page.url }}</a>
                                </td>
                                <td class="text-end fw-bold">{{ page.views }}</td>
                                <td class="text-end">{{ page.avg_duration ? (page.avg_duration // 60 ~ ':' ~ '%02d'|format(page.avg_duration % 60)) : '—' }}</td>
                                <td class="text-end">{{ page.avg_scroll ? page.avg_scroll ~ '%' : '—' }}</td>
                                <td class="text-end">{{ page.bounce_rate is not null ? page.bounce_rate ~ '%' : '—' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted text-center py-3 mb-0">Aucune donnee pour cette periode.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}