{% extends 'base_embed.html.twig' %}

{% block title %}Graphe thématique : {{ label }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1><i class="bi {{ icon }} fs-2"></i> {{ label }}</h1>
    <canvas id="embedThemeChart" width="600" height="300"></canvas>
    <div class="mb-3 mt-2">
        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info me-2">
            <i class="bi bi-bar-chart"></i> Voir la page de la ville
        </a>
        <a href="https://osm-mon-commerce.fr/?insee={{ stats.zone }}" target="_blank" class="btn btn-success me-2">
            <i class="bi bi-globe"></i> OSM Mon Commerce
        </a>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
<script>
const series = {{ series|json_encode|raw }};
const theme = {{ theme|json_encode|raw }};
const label = {{ label|json_encode|raw }};
const countData = (series[theme + '_count'] || []).map(e => ({x: e.date, y: e.value}));
const completionData = (series[theme + '_completion'] || []).map(e => ({x: e.date, y: e.value}));
const canvas = document.getElementById('embedThemeChart');
if (canvas) {
    new Chart(canvas, {
        type: 'line',
        data: {
            datasets: [
                {
                    label: 'Nombre',
                    data: countData,
                    borderColor: 'blue',
                    backgroundColor: 'rgba(0,0,255,0.1)',
                    fill: false,
                    yAxisID: 'y',
                },
                {
                    label: 'Complétion (%)',
                    data: completionData,
                    borderColor: 'green',
                    backgroundColor: 'rgba(0,255,0,0.1)',
                    fill: false,
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            parsing: true,
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: label
                }
            },
            scales: {
                x: { type: 'time', time: { unit: 'day' }, title: { display: true, text: 'Date' } },
                y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
                y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
            }
        }
    });
}
// Affichage de la progression sur une semaine
function getDelta(data, days) {
    if (!data.length) return null;
    const now = new Date(data[data.length - 1].x);
    const refDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
    let ref = null;
    for (let i = data.length - 1; i >= 0; i--) {
        const d = new Date(data[i].x);
        if (d <= refDate) {
            ref = data[i].y;
            break;
        }
    }
    const last = data[data.length - 1].y;
    return ref !== null ? last - ref : null;
}
function formatDelta(val) {
    if (val === null) return '-';
    if (val === 0) return '0';
    return (val > 0 ? '+' : '') + val;
}
const delta7dCount = formatDelta(getDelta(countData, 7));
const infoDiv = document.createElement('div');
infoDiv.className = 'mt-3 alert alert-info';
infoDiv.innerHTML = `<strong>Progression sur 7 jours :</strong> ${delta7dCount}`;
canvas.parentNode.appendChild(infoDiv);
</script>
{% endblock %}