{% extends 'admin/dashboard.html.twig' %}

{% block title %}Statistiques - {{ questionnaire.title }}{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <header class="mb-6 no-print">
        <h1 class="text-3xl font-bold text-gray-800">{{ questionnaire.title }}</h1>
        <p class="text-gray-600 mt-1">Statistiques & analyse — récapitulatif par question</p>
    </header>

    {# --- Résumé global --- #}
    <section class="bg-white rounded-2xl shadow p-6 mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-semibold text-gray-700">Résumé</h2>
                <p class="text-gray-500 mt-1">Total de réponses :
                    <span id="totalResponses" class="font-medium">{{ totalResponses|default(0) }}</span>
                </p>
            </div>

            <div class="flex gap-2 no-print">
                <button id="exportPdfBtn" 
                        class="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700">
                    Exporter PDF
                </button>
                <button id="printBtn" onclick="window.print()" 
                        class="px-4 py-2 rounded-md border border-gray-200 bg-white text-gray-700 hover:shadow-sm">
                    Imprimer
                </button>
                <button id="refreshBtn" 
                        class="px-4 py-2 rounded-md border border-gray-200 bg-white text-gray-700 hover:shadow-sm">
                    Rafraîchir
                </button>
            </div>
        </div>
    </section>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            {# Avant de boucler sur les questions, on s'assure d'avoir questionsStats #}
            {% set questionsStats = questionsStats|default([]) %}
            {% if questionsStats|length == 0 and partsStats is defined %}
                {# Si le backend ne fournit pas questionsStats, on construit depuis partsStats #}
                {% for part in partsStats %}
                    {% if part.questions is defined and part.questions|length > 0 %}
                        {% set questionsStats = questionsStats|merge(part.questions) %}
                    {% else %}
                        {# Traiter la "part" comme une question si pas de sous-questions #}
                        {% set questionsStats = questionsStats|merge([ {'title': part.title, 'choices': part.choices|default([]), 'respondents': part.respondents|default(0), 'ageBuckets': part.ageBuckets|default([]) } ]) %}
                    {% endif %}
                {% endfor %}
            {% endif %}

            {% for question in questionsStats %}
            <article class="bg-white rounded-xl shadow p-6">
                <header class="flex items-start justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">{{ question.title }}</h3>
                        <p class="text-sm text-gray-500">Réponses à cette question :
                            <span class="font-medium">{{ question.respondents|default(0) }}</span>
                        </p>
                    </div>
                    <div class="text-right text-sm text-gray-500">
                        <span>Question {{ loop.index }} / {{ questionsStats|length }}</span>
                    </div>
                </header>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <canvas id="questionChart-{{ loop.index0 }}" class="w-full h-48"></canvas>
                    </div>

                    <div>
                        <h4 class="text-sm font-medium text-gray-700 mb-2">Détail par choix</h4>
                        <table class="w-full text-sm text-left">
                            <thead>
                                <tr class="text-gray-500">
                                    <th class="py-1">Choix</th>
                                    <th class="py-1">Nombre</th>
                                    <th class="py-1">%</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set total = 0 %}
                                {% for c in question.choices %}{% set total = total + (c.count|default(0)) %}{% endfor %}
                                {% for c in question.choices %}
                                <tr class="border-t">
                                    <td class="py-2">{{ c.label }}</td>
                                    <td class="py-2 font-medium">{{ c.count|default(0) }}</td>
                                    <td class="py-2 text-gray-500">
                                        {% if total > 0 %}
                                            {{ ((c.count / total) * 100)|round(1) }} %
                                        {% else %}0 %{% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </article>
            {% else %}
            <div class="bg-white rounded-xl shadow p-6">
                <p class="text-gray-500">Aucune question disponible pour ce questionnaire.</p>
            </div>
            {% endfor %}
        </div>

        <aside class="space-y-6">
            <div class="bg-white rounded-xl shadow p-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-2">Analyse par tranche d'âge</h4>
                <canvas id="ageChart" class="w-full h-48"></canvas>
                <div class="mt-3 text-sm text-gray-600" id="ageSummary"></div>
            </div>

            <div class="bg-white rounded-xl shadow p-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-2">Analyse globale (par question)</h4>
                <div id="globalAnalysis" class="prose text-sm text-gray-700"></div>
            </div>

            <div class="bg-white rounded-xl shadow p-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-2">Répartition âge — par question</h4>
                <div id="ageByQuestion" class="text-sm text-gray-700"></div>
            </div>
        </aside>
    </div>
</div>

{# On fournit questionsStats au JS #}
{% set jsQuestions = questionsStats|default([]) %}
{% set jsAges = ageBuckets|default([]) %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<style>
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
}
</style>

<script>
(() => {
    // données fournies depuis Twig
    const rawQuestions = {{ jsQuestions|json_encode()|raw }};
    const ageBuckets = {{ jsAges|json_encode()|raw }};
    const totalResponses = {{ totalResponses|default(0) }};

    // palette simple
    function getPalette(n) {
        const base = ['#4f46e5','#06b6d4','#f59e0b','#ef4444','#10b981','#8b5cf6','#f97316','#06b6d4'];
        return Array.from({length:n}, (_,i) => base[i % base.length]);
    }

    // --- Normaliser les questions pour s'adapter aux différentes structures possibles ---
    // Chaque question attendue : { title, choices:[{label,count}], respondents, ageBuckets? }
    const questions = (rawQuestions||[]).map(q => {
        // si q a les champs attendus, on les laisse ; sinon on tente des adaptations
        const title = q.title || q.label || 'Question';
        const choices = q.choices || q.options || [];
        const respondents = q.respondents || q.responses || choices.reduce((s,c)=>s+(c.count||0),0) || 0;
        const qAge = q.ageBuckets || q.age_buckets || q.ageBucketsByQuestion || [];
        return { title, choices, respondents, ageBuckets: qAge };
    });

    // --- Rendu des graphiques par question ---
    function renderQuestionCharts(){
        questions.forEach((question, idx) => {
            const ctx = document.getElementById('questionChart-' + idx);
            if (!ctx) return;
            const labels = (question.choices||[]).map(c=>c.label||'');
            const data = (question.choices||[]).map(c=>(c.count||0));
            new Chart(ctx, {
                type:'bar',
                data:{ labels, datasets:[{label:'Réponses', data, backgroundColor:getPalette(labels.length), borderRadius:6}]},
                options:{ responsive:true, plugins:{legend:{display:false}}, scales:{x:{ticks:{maxRotation:0,minRotation:0}}, y:{beginAtZero:true}} }
            });
        });
    }

    // --- Graphique âge global ---
    function renderAgeChart(){
        const elAge = document.getElementById('ageChart');
        if(!elAge) return;
        const labels = (ageBuckets||[]).map(b=>b.label||'');
        const data = (ageBuckets||[]).map(b=>b.count||0);
        new Chart(elAge,{
            type:'bar',
            data:{labels, datasets:[{label:'Nombre de répondants', data}]},
            options:{ responsive:true, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }
        });
        const totalAge = data.reduce((s,v)=>s+v,0) || 0;
        if(totalAge>0){
            const maxIdx = data.indexOf(Math.max(...data));
            const topLabel = labels[maxIdx];
            const pct = ((data[maxIdx]/totalAge)*100).toFixed(1);
            document.getElementById('ageSummary').innerHTML = `<p>Tranche dominante : <strong>${topLabel}</strong> (${pct}% des répondants)</p>`;
        } else { document.getElementById('ageSummary').textContent='Aucune donnée d’âge disponible.'; }
    }

    // --- Analyse globale (par question) ---
    function renderGlobalAnalysis(){
        const container = document.getElementById('globalAnalysis');
        if(!container) return;
        let html = '';

        // Calculs par question
        const qs = questions.map(q => {
            const choices = (q.choices||[]).map(c=>({label:c.label, count:c.count||0}));
            const total = choices.reduce((s,c)=>s+c.count, 0);
            const sorted = choices.slice().sort((a,b)=>b.count-a.count);
            const top = sorted[0] || {label:'—', count:0};
            const second = sorted[1] || {label:'—', count:0};
            const topPct = total>0? (top.count/total)*100 : 0;
            const secondPct = total>0? (second.count/total)*100 : 0;
            const dispersion = 100 - topPct;
            return { title: q.title, total, top, topPct, second, secondPct, dispersion };
        });

        // Classement par topPct
        const ranked = qs.slice().sort((a,b)=>b.topPct - a.topPct);

        html += `<h5 class="font-semibold">Classement par adhésion (choix majoritaire)</h5>`;
        html += `<ol class="ml-4">`;
        ranked.forEach(p => {
            html += `<li><strong>${p.title}</strong> — ${p.top.label} : ${p.top.count} réponses (${p.topPct.toFixed(1)}%)`;
            if(p.total < 5){ html += ` <span class="text-sm text-gray-500">(faible échantillon)</span>`; }
            html += `</li>`;
        });
        html += `</ol>`;

        const strongest = ranked[0] || null;
        const weakest = ranked[ranked.length-1] || null;
        if(strongest){
            html += `<p class="mt-2"><strong>Observation :</strong> La question la plus nette est <em>${strongest.title}</em> (${strongest.topPct.toFixed(1)}% pour "${strongest.top.label}").</p>`;
        }
        if(weakest){
            html += `<p><strong>À améliorer :</strong> La question la moins nette est <em>${weakest.title}</em> (${weakest.topPct.toFixed(1)}%). Cela indique une forte dispersion des réponses.</p>`;
        }

        html += `<h5 class="mt-3 font-semibold">Recommandations automatiques</h5>`;
        html += `<ul class="ml-4">`;
        qs.forEach(p => {
            if(p.total===0){ html += `<li><strong>${p.title}</strong> : aucune donnée — envisager d'améliorer la collecte.</li>`; return; }
            if(p.topPct >= 70){ html += `<li><strong>${p.title}</strong> : forte adhésion pour <em>${p.top.label}</em> — consolider et communiquer ce point positif.</li>`; }
            else if(p.topPct >= 50){ html += `<li><strong>${p.title}</strong> : majorité claire (${p.topPct.toFixed(1)}%) — surveiller mais c'est favorable.</li>`; }
            else { html += `<li><strong>${p.title}</strong> : pas de majorité claire (${p.topPct.toFixed(1)}%) — revoir la formulation ou clarifier les choix.</li>`; }
            if(p.dispersion > 40){ html += `<li class="text-sm text-gray-500">Note: ${p.title} a une dispersion élevée (${p.dispersion.toFixed(1)}%) — réponses très réparties.</li>`; }
        });
        html += `</ul>`;

        container.innerHTML = html;
    }

    // --- Répartition âge par question ---
    function renderAgeByQuestion(){
        const container = document.getElementById('ageByQuestion');
        if(!container) return;
        let html = '';

        questions.forEach(q => {
            html += `<p><strong>${q.title}</strong></p>`;
            const buckets = q.ageBuckets || [];
            const total = buckets.reduce((s,b)=>s+(b.count||0),0) || 0;
            if(total === 0){
                html += `<p class="text-sm text-gray-500">Aucune donnée d'âge pour cette question.</p>`;
            } else {
                html += `<ul class="ml-4">`;
                buckets.forEach(b => html += `<li>${b.label} : ${b.count} (${((b.count/total)*100).toFixed(1)}%)</li>`);
                html += `</ul>`;
            }
        });

        container.innerHTML = html;
    }

    // --- Export PDF via html2canvas + jsPDF ---
    async function exportPdf(){
        const wrapper = document.querySelector('.max-w-6xl');
        if(!wrapper) return;
        const filename = `statistiques_questionnaire_{{ questionnaire.id }}.pdf`;
        const canvas = await html2canvas(wrapper, { scale: 2 });
        const img = canvas.toDataURL('image/png');
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p','mm','a4');
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
        pdf.addImage(img, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save(filename);
    }

    // init
    renderQuestionCharts();
    renderAgeChart();
    renderGlobalAnalysis();
    renderAgeByQuestion();

    // events
    document.getElementById('refreshBtn').addEventListener('click', ()=>location.reload());
    document.getElementById('exportPdfBtn').addEventListener('click', exportPdf);
    document.getElementById('printBtn').addEventListener('click', ()=>window.print());
})();
</script>

{% endblock %}