{% extends 'agent/_layout.html.twig' %}

{% block title %}Insight{% endblock %}

{% block agent_content %}

    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
        <h1 class="fw-bold mb-0 text-white" data-testid="agent-insight-title">Insight</h1>
        {% if isToday %}
        <span class="d-inline-flex align-items-center gap-2" style="font-size:11px; color:#afafaf;" data-testid="agent-insight-live-indicator">
            <span style="width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block;"></span>
            Live &middot; updates automatically
        </span>
        {% else %}
        <span style="font-size:11px; color:#afafaf;" data-testid="agent-insight-snapshot-indicator">Snapshot &middot; {{ periodLabel }}</span>
        {% endif %}
    </div>
    <p class="mb-3" style="font-size:13px; color:#afafaf;">
        Activity for {{ scope == 'all' ? 'your entire downline' : 'players you referred directly' }} — {{ periodLabel }}.
    </p>

    {# ── Day selector: quick pills + any-date picker ── #}
    <div class="period-filter-bar mb-3" data-testid="agent-insight-day-bar">
        {% for d in [{key: 'today', label: 'Today'}, {key: 'yesterday', label: 'Yesterday'}] %}
            <a href="{{ path('app_agent_insight', {scope: scope, period: d.key}) }}"
               class="period-pill--dark{{ period == d.key ? ' is-active' : '' }}"
               data-testid="agent-insight-day-{{ d.key }}">{{ d.label }}</a>
        {% endfor %}
        <form method="GET" action="{{ path('app_agent_insight') }}" class="d-inline-flex align-items-center gap-2" data-testid="agent-insight-day-form">
            <input type="hidden" name="scope" value="{{ scope }}">
            <input type="date" name="_day_val"
                   value="{{ period starts with 'day_' ? period|replace({'day_': ''}) : '' }}"
                   class="period-filter-input--dark{{ period starts with 'day_' ? ' is-active' : '' }}"
                   data-testid="agent-insight-day-input">
            <button type="submit" class="period-filter-go--dark{{ period starts with 'day_' ? ' is-active' : '' }}">Go</button>
            <input type="hidden" name="period" id="agent-insight-hidden-period" value="">
        </form>
    </div>
    <script>
    (function () {
        var f = document.querySelector('[data-testid="agent-insight-day-form"]');
        if (!f) return;
        f.addEventListener('submit', function (e) {
            var val = f.querySelector('[data-testid="agent-insight-day-input"]').value;
            if (!val) { e.preventDefault(); return; }
            document.getElementById('agent-insight-hidden-period').value = 'day_' + val;
            f.querySelector('[name="_day_val"]').disabled = true;
        });
    })();
    </script>

    {% set scopes = [
        {key: 'direct', label: 'Direct players'},
        {key: 'all',    label: 'All downlines'},
    ] %}
    <div class="period-filter-bar mb-4" data-testid="agent-insight-scope-bar">
        {% for s in scopes %}
            <a href="{{ path('app_agent_insight', {scope: s.key, period: period}) }}"
               class="period-pill--dark{{ scope == s.key ? ' is-active' : '' }}"
               data-testid="agent-insight-scope-{{ s.key }}">
                {{ s.label }}
            </a>
        {% endfor %}
    </div>

    <div data-controller="agent-insight"
         data-agent-insight-url-value="{{ path('app_agent_insight_data', {scope: scope, period: period}) }}"
         data-agent-insight-live-value="{{ isToday ? 'true' : 'false' }}"
         data-testid="agent-insight-live">
        {% include 'agent/_insight_live.html.twig' %}
    </div>

{% endblock %}