{% extends 'gestion/_base.html.twig' %}
{% set active = 'dashboard' %}

{% block title %}Tableau de bord{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Tableau de bord</span>
            <h1 class="adm-page-title">Bonjour {{ app.user ? app.user.userIdentifier : '' }}</h1>
            <p class="adm-page-sub">Vue d'ensemble de l'atelier — {{ 'now'|date('d/m/Y') }}</p>
        </div>
    </div>

    {# Sur mobile, seuls « CA du mois » et « À traiter » restent en vue : les
       trois autres indicateurs sont déplacés (pas dupliqués) par ds-admin.js
       dans l'accordéon ci-dessous. Au-dessus de 768 px la grille est intacte. #}
    <div class="adm-grid adm-grid--kpi">
        <div class="adm-kpi">
            <div class="adm-kpi-label">CA du mois</div>
            <div class="adm-kpi-value">{{ caMois|number_format(0, ',', ' ') }} €</div>
            {% if caDelta is not null %}
                <div class="adm-kpi-delta" style="color:{{ caDelta >= 0 ? 'var(--v2-green-deep)' : 'var(--adm-danger)' }};">{{ caDelta >= 0 ? '+' }}{{ caDelta }} % vs mois dernier</div>
            {% endif %}
        </div>
        <div class="adm-kpi">
            <div class="adm-kpi-label">À traiter</div>
            <div class="adm-kpi-value">{{ aTraiterTotal }}</div>
            <div class="adm-kpi-delta"><a href="{{ path('gestion_commandes', {tab: 'a-traiter'}) }}" style="color:var(--v2-green-deep);">Voir les commandes →</a></div>
        </div>
        <div class="adm-kpi" data-adm-mobile-into="#dash-kpi-more">
            <div class="adm-kpi-label">Visiteurs 7 j</div>
            <div class="adm-kpi-value">{{ visiteurs7j }}</div>
            {% if visiteursDelta is not null %}
                <div class="adm-kpi-delta" style="color:{{ visiteursDelta >= 0 ? 'var(--v2-green-deep)' : 'var(--adm-danger)' }};">{{ visiteursDelta >= 0 ? '+' }}{{ visiteursDelta }} % vs 7 j précédents</div>
            {% endif %}
        </div>
        <div class="adm-kpi" data-adm-mobile-into="#dash-kpi-more">
            <div class="adm-kpi-label">Comptes 31 j</div>
            <div class="adm-kpi-value">{{ comptes31j }}</div>
        </div>
        <div class="adm-kpi" data-adm-mobile-into="#dash-kpi-more">
            <div class="adm-kpi-label">Prochaines résas</div>
            <div class="adm-kpi-value">{{ prochainesResas|length }}</div>
            {% if prochainesResas is not empty %}
                <div class="adm-kpi-delta">1ʳᵉ le {{ prochainesResas[0].creneau.startAt|date('d/m à H\\hi') }}</div>
            {% endif %}
        </div>
    </div>

    <details class="adm-more" data-adm-collapse-mobile open style="margin-top:16px;">
        <summary>Autres indicateurs</summary>
        <div class="adm-grid adm-grid--kpi" id="dash-kpi-more"></div>
    </details>

    <details class="adm-more" data-adm-collapse-mobile open style="margin-top:16px;">
        <summary>Courbes — 14 jours</summary>
        <div class="adm-grid adm-grid--2">
            <div class="adm-card">
                <h2 class="adm-card-title">Visiteurs — 14 jours</h2>
                <div style="height:120px;"><canvas id="spark-visiteurs"></canvas></div>
            </div>
            <div class="adm-card">
                <h2 class="adm-card-title">Ventes — 14 jours</h2>
                <div style="height:120px;"><canvas id="spark-ventes"></canvas></div>
            </div>
        </div>
    </details>

    <div class="adm-grid adm-grid--2" style="margin-top:16px;">
        <div class="adm-card">
            <h2 class="adm-card-title">À traiter</h2>
            {% if aTraiter is empty %}
                <div class="adm-empty"><p>Aucune commande en attente de préparation. 👌</p></div>
            {% else %}
                <div class="adm-table-wrap adm-table-wrap--cards"><table class="adm-table adm-table--cards adm-table--auto">
                    <tbody>
                        {% for commande in aTraiter %}
                            <tr class="adm-row-link" data-href="{{ path('gestion_commande_detail', {reference: commande.reference}) }}">
                                <td class="adm-mono" style="font-size:0.76rem;" data-label="Date">{{ commande.createdAt|date('d/m') }}</td>
                                <td class="adm-cell-head" data-label="Référence"><strong>{{ commande.reference }}</strong></td>
                                <td data-label="Client">{{ commande.client ? commande.client.prenom ~ ' ' ~ commande.client.nom : '—' }}</td>
                                <td class="is-num" data-label="Total">{{ commande.total|number_format(2, ',', ' ') }} €</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table></div>
            {% endif %}
        </div>

        <div class="adm-card">
            <h2 class="adm-card-title">Notifications <a href="{{ path('gestion_notifications') }}" style="margin-left:auto;font-size:0.72rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--v2-green-deep);white-space:nowrap;">Tout voir →</a></h2>
            {% if notifications is empty %}
                <div class="adm-empty"><p>Aucune notification pour le moment.</p></div>
            {% else %}
                {% for notification in notifications %}
                    <div class="adm-dash-notif" {{ notification.read ? 'style="opacity:0.55;"' }}>
                        <span class="adm-mono adm-dash-notif-time">{{ notification.createdAt|date('d/m H:i') }}</span>
                        <div class="adm-dash-notif-body">
                            <strong>{{ notification.titre }}</strong>
                            {% if notification.message %}<span style="color:var(--v2-ink-soft);"> — {{ notification.message }}</span>{% endif %}
                        </div>
                        {% if notification.url %}<a class="adm-dash-notif-link" href="{{ notification.url }}">Voir</a>{% endif %}
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

    {% if prochainesResas is not empty %}
        <details class="adm-more" data-adm-collapse-mobile open style="margin-top:16px;">
            <summary>Prochaines réservations d'ateliers</summary>
            <div class="adm-card">
                <h2 class="adm-card-title">Prochaines réservations d'ateliers</h2>
                <div class="adm-table-wrap adm-table-wrap--cards"><table class="adm-table adm-table--cards adm-table--auto">
                    <tbody>
                        {% for resa in prochainesResas %}
                            <tr class="adm-row-link" data-href="{{ path('gestion_creneau_detail', {id: resa.creneau.id}) }}">
                                <td class="adm-mono" style="font-size:0.78rem;" data-label="Quand">{{ resa.creneau.startAt|date('d/m — H\\hi') }}</td>
                                <td class="adm-cell-head" data-label="Atelier"><strong>{{ resa.creneau.atelier.titre }}</strong></td>
                                <td data-label="Participant">{{ resa.prenom }} {{ resa.nom }}</td>
                                <td class="is-num" data-label="Places">{{ resa.places }} pl.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table></div>
            </div>
        </details>
    {% endif %}
{% endblock %}

{% block scripts %}
<script src="{{ asset('vendor/chartjs/chart.umd.js') }}"></script>
<script>
(function () {
    'use strict';
    var series = {{ series|json_encode|raw }};
    var labels = series.map(function (d) { return d.day.slice(8, 10) + '/' + d.day.slice(5, 7); });

    var charts = [];

    function spark(id, data, color) {
        charts.push(new Chart(document.getElementById(id), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    borderColor: color,
                    backgroundColor: color + '22',
                    fill: true,
                    tension: 0.35,
                    pointRadius: 0,
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { intersect: false, mode: 'index' } },
                scales: {
                    x: { display: false },
                    y: { display: false, beginAtZero: true }
                }
            }
        }));
    }

    spark('spark-visiteurs', series.map(function (d) { return d.visitors; }), '#2D9446');
    spark('spark-ventes', series.map(function (d) { return d.orders; }), '#D9622B');

    /* Les courbes naissent dans un accordéon replié en mobile : le canvas y
       mesure 0. Chart.js se recale via son ResizeObserver, on force malgré
       tout un resize à l'ouverture pour ne dépendre d'aucun timing. */
    document.querySelectorAll('details.adm-more').forEach(function (box) {
        box.addEventListener('toggle', function () {
            if (box.open) charts.forEach(function (c) { c.resize(); });
        });
    });

    document.addEventListener('click', function (e) {
        var row = e.target.closest('.adm-row-link[data-href]');
        if (row) window.location.href = row.getAttribute('data-href');
    });
})();
</script>
{% endblock %}