{% extends '@SonataAdmin/CRUD/base_list.html.twig' %}

{% block tab_menu %}
    {{ knp_menu_render(admin.sidemenu(action), {
        'currentClass': 'active',
        'template': get_global_template('tab_menu_template')
    }, 'twig') }}
{% endblock %}

{% block list_filters %}{% endblock %}
{% block list_filters_actions %}{% endblock %}

{% block list_table %}
<div class="col-xs-12">

    {# ── Navigation buttons ── #}
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-12">
            <div class="btn-group">
                <a href="{{ admin.generateUrl('list') }}" class="btn btn-default">
                    <i class="fa fa-list"></i> Liste des consentements
                </a>
                <a href="{{ admin.generateUrl('stats') }}" class="btn btn-primary active">
                    <i class="fa fa-pie-chart"></i> Tableau de bord
                </a>
            </div>
        </div>
    </div>

    <div class="row">

        {# ── Pie chart: users with/without consent ── #}
        <div class="col-md-5">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-pie-chart"></i>
                        Utilisateurs actifs vs. consentements
                    </h3>
                </div>
                <div class="box-body">
                    <div style="height: 260px; position: relative;">
                        <canvas id="consentPieChart"></canvas>
                    </div>
                    <div class="text-center" style="margin-top: 12px;">
                        <span class="label label-success" style="font-size: 13px; padding: 5px 10px;">
                            {{ stats.usersWithConsent }} avec au moins 1 consentement
                        </span>
                        &nbsp;
                        <span class="label label-danger" style="font-size: 13px; padding: 5px 10px;">
                            {{ stats.usersWithoutConsent }} sans consentement
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {# ── Stats per consent type ── #}
        <div class="col-md-7">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-bar-chart"></i>
                        Consentements par type
                    </h3>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Type de consentement</th>
                                <th class="text-center">Utilisateurs</th>
                                <th class="text-center">% actifs</th>
                                <th>Progression</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in stats.typeStats %}
                            <tr>
                                <td>
                                    {% if item.type == 'general' %}
                                        <i class="fa fa-shield text-success"></i>
                                    {% elseif item.type == 'ssa' %}
                                        <i class="fa fa-heart text-danger"></i>
                                    {% elseif item.type == 'email_notifications' %}
                                        <i class="fa fa-envelope text-info"></i>
                                    {% else %}
                                        <i class="fa fa-map-marker text-warning"></i>
                                    {% endif %}
                                    {{ item.label }}
                                </td>
                                <td class="text-center">
                                    <strong>{{ item.count }}</strong> / {{ stats.totalActiveUsers }}
                                </td>
                                <td class="text-center">
                                    <span class="badge {% if item.percent >= 80 %}bg-green{% elseif item.percent >= 50 %}bg-yellow{% else %}bg-red{% endif %}">
                                        {{ item.percent }}%
                                    </span>
                                </td>
                                <td>
                                    <div class="progress progress-sm" style="margin-bottom: 0;">
                                        <div class="progress-bar {% if item.percent >= 80 %}progress-bar-success{% elseif item.percent >= 50 %}progress-bar-warning{% else %}progress-bar-danger{% endif %}"
                                             style="width: {{ item.percent }}%"></div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <div class="callout callout-info" style="margin-top: 15px; margin-bottom: 0;">
                        <h4><i class="fa fa-info-circle"></i> Résumé</h4>
                        <p>
                            <strong>{{ stats.totalActiveUsers }}</strong> utilisateurs actifs au total.<br>
                            <strong>{{ stats.usersWithConsent }}</strong> ont accordé au moins un consentement
                            ({{ stats.totalActiveUsers > 0 ? ((stats.usersWithConsent / stats.totalActiveUsers) * 100)|round(1) : 0 }}%).<br>
                            <strong>{{ stats.usersWithoutConsent }}</strong> n'ont encore accordé aucun consentement.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>{# end row #}

    {# ── Per-user consent table ── #}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-users"></i>
                        Détail par utilisateur ({{ stats.userConsentStats|length }} avec consentement)
                    </h3>
                    <div class="box-tools pull-right">
                        <a href="{{ admin.generateUrl('list') }}" class="btn btn-sm btn-default">
                            <i class="fa fa-table"></i> Voir tous les enregistrements
                        </a>
                    </div>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Utilisateur</th>
                                <th>Email</th>
                                <th class="text-center">Consentements actifs</th>
                                <th class="text-center">Statut</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for userStat in stats.userConsentStats %}
                            <tr class="{{ userStat.consentCount < stats.requiredCount ? 'warning' : '' }}">
                                <td>{{ userStat.username }}</td>
                                <td>{{ userStat.email }}</td>
                                <td class="text-center">
                                    <span class="badge {% if userStat.consentCount >= stats.requiredCount %}bg-green{% else %}bg-orange{% endif %}">
                                        {{ userStat.consentCount }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    {% if userStat.consentCount >= stats.requiredCount %}
                                        <span class="text-success"><i class="fa fa-check-circle"></i> Complet</span>
                                    {% else %}
                                        <span class="text-warning">
                                            <i class="fa fa-exclamation-triangle"></i>
                                            {{ stats.requiredCount - userStat.consentCount }} manquant(s)
                                        </span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="4" class="text-center text-muted">
                                    <i class="fa fa-info-circle"></i> Aucun consentement enregistré.
                                </td>
                            </tr>
                            {% endfor %}

                            {% if stats.usersWithoutConsent > 0 %}
                            <tr class="active">
                                <td colspan="4" class="text-center text-muted">
                                    <i class="fa fa-exclamation-circle text-danger"></i>
                                    <em>{{ stats.usersWithoutConsent }} utilisateur(s) actif(s) sans aucun consentement enregistré ne figurent pas dans ce tableau.</em>
                                </td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>{# end col-xs-12 #}

{# Data for Chart.js - passed via data attributes to avoid inline JS issues #}
<div id="consent-chart-data"
     data-with="{{ stats.usersWithConsent }}"
     data-without="{{ stats.usersWithoutConsent }}"
     style="display:none;"></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('admin-consent-stats') }}
{% endblock %}