{# templates/analytics/_bloc_crm.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Bloc CRM Light — Force de Vente et Multi uniquement.

   Paramètres attendus :
     recommandations (array) → {
         total:      int,    — nombre total de recommandations envoyées
         converties: int,    — nombre de recommandations converties
         taux:       float,  — taux de conversion en % (déjà calculé)
     }
   ─────────────────────────────────────────────────────────────────────────────
#}

{# ── Évaluation du taux de conversion ── #}
{% if recommandations.total == 0 %}
    {% set evalTaux = { 'label': 'Pas de données', 'couleur': '#86868b' } %}
{% elseif recommandations.taux < 10 %}
    {% set evalTaux = { 'label': 'À améliorer',    'couleur': '#ef4444' } %}
{% elseif recommandations.taux < 25 %}
    {% set evalTaux = { 'label': 'Correct',        'couleur': '#f59e0b' } %}
{% elseif recommandations.taux < 50 %}
    {% set evalTaux = { 'label': 'Bon',            'couleur': '#22c55e' } %}
{% else %}
    {% set evalTaux = { 'label': 'Excellent',      'couleur': '#667eea' } %}
{% endif %}

<div class="analytics-bloc analytics-bloc--crm">

    <div class="analytics-bloc__header">
        <h2 class="analytics-bloc__titre">🤝 CRM Light — Recommandations</h2>
        <span class="analytics-bloc__periode">{{ jours }} derniers jours</span>
    </div>

    {% if recommandations.total == 0 %}

        <div class="analytics-crm__empty">
            <p class="analytics-bloc__empty">Aucune recommandation envoyée sur la période.</p>
            <p class="analytics-crm__conseil">
                💡 Partagez votre carte NUM-ECARD Force de Vente à vos contacts
                pour activer le circuit de recommandation et suivre vos conversions ici.
            </p>
        </div>

    {% else %}

        {# ── 3 KPIs principaux ── #}
        <div class="analytics-crm__kpis">

            <div class="analytics-crm__kpi">
                <span class="analytics-crm__kpi-icone">📤</span>
                <span class="analytics-crm__kpi-chiffre">{{ recommandations.total }}</span>
                <span class="analytics-crm__kpi-label">Envoyée{{ recommandations.total > 1 ? 's' : '' }}</span>
            </div>

            <div class="analytics-crm__kpi">
                <span class="analytics-crm__kpi-icone">✅</span>
                <span class="analytics-crm__kpi-chiffre"
                      style="color: #22c55e;">{{ recommandations.converties }}</span>
                <span class="analytics-crm__kpi-label">Convertie{{ recommandations.converties > 1 ? 's' : '' }}</span>
            </div>

            <div class="analytics-crm__kpi">
                <span class="analytics-crm__kpi-icone">📊</span>
                <span class="analytics-crm__kpi-chiffre"
                      style="color: {{ evalTaux.couleur }};">{{ recommandations.taux }}%</span>
                <span class="analytics-crm__kpi-label">
                    Taux de conversion
                    <span class="analytics-crm__kpi-eval"
                          style="color: {{ evalTaux.couleur }};">— {{ evalTaux.label }}</span>
                </span>
            </div>

        </div>

        {# ── Jauge taux de conversion ── #}
        <div class="analytics-crm__jauge-wrap">
            <div class="analytics-crm__jauge-header">
                <span>Taux de conversion</span>
                <span style="color: {{ evalTaux.couleur }}; font-weight: 600;">
                    {{ recommandations.taux }}%
                </span>
            </div>
            <div class="analytics-crm__jauge-fond">
                <div class="analytics-crm__jauge-barre"
                     style="width: {{ recommandations.taux > 100 ? 100 : recommandations.taux }}%;
                            background: linear-gradient(90deg, #667eea, {{ evalTaux.couleur }});">
                </div>
            </div>
            <div class="analytics-crm__jauge-reperes">
                <span>0%</span>
                <span>25%</span>
                <span>50%</span>
                <span>100%</span>
            </div>
        </div>

        {# ── Donut envoyées vs converties ── #}
        {% set nonConverties = recommandations.total - recommandations.converties %}
        <div class="analytics-crm__donut">
            <canvas id="chartCrm" height="180"></canvas>
        </div>

        <script>
        (function () {
            new Chart(document.getElementById('chartCrm'), {
                type: 'doughnut',
                data: {
                    labels: ['Converties', 'Non converties'],
                    datasets: [{
                        data: [{{ recommandations.converties }}, {{ nonConverties }}],
                        backgroundColor: ['#22c55e', 'rgba(102,126,234,0.15)'],
                        borderColor:     ['#22c55e', 'rgba(102,126,234,0.3)'],
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { padding: 16, font: { size: 13 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: (item) => {
                                    const total = {{ recommandations.total }};
                                    const pct   = ((item.raw / total) * 100).toFixed(1);
                                    return ` ${item.raw} (${pct}%)`;
                                }
                            }
                        }
                    }
                }
            });
        })();
        </script>

        {# ── Note RGPD prescripteurs ── #}
        <p class="analytics-crm__rgpd">
            <small>
                🔒 Les prescripteurs sont identifiés uniquement par un hash anonyme.
                Aucune donnée personnelle identifiante n'est stockée — conformité RGPD (section 4.3).
            </small>
        </p>

    {% endif %}

</div>