{% extends 'app/base.html.twig' %}

{% block title %}Déchets alimentaires{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 fw-bold page-title mb-0"><i class="fas fa-recycle me-2"></i>Déchets alimentaires</h1>
        <small class="text-muted">Gaspillage alimentaire — suivi mensuel</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ path('tenant_dechets_suivis_index') }}" class="btn btn-outline-info btn-sm">
            <i class="fas fa-user-clock me-1"></i>Suivis individuels
        </a>
        {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
        <a href="{{ path('tenant_dechets_objectifs') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-bullseye me-1"></i>Objectifs
        </a>
        <a href="{{ path('tenant_dechets_new') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus me-1"></i>Nouveau relevé
        </a>
        {% endif %}
    </div>
</div>

{# ── Sélecteur de mois ────────────────────────────────────────────────────── #}
<form method="get" class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-body py-2 px-3 d-flex gap-3 align-items-center">
        <label for="mois" class="form-label fw-semibold mb-0">Mois :</label>
        <input type="month" id="mois" name="mois" class="form-control" style="width:180px"
               value="{{ mois }}" onchange="this.form.submit()">
        <button class="btn btn-sm btn-outline-primary">Afficher</button>
    </div>
</form>

{# ── KPIs ─────────────────────────────────────────────────────────────────── #}
{% set objectifVal = objectifGlobal ? objectifGlobal.objectif_par_convive : 150 %}
{% set seuilAlerte = objectifGlobal ? objectifGlobal.seuil_alerte : 180 %}
{% set variation = kpisPrecedent.total_kg > 0
    ? ((kpis.total_kg - kpisPrecedent.total_kg) / kpisPrecedent.total_kg * 100)
    : null %}
{% set objectifAtteint = kpis.total_kg > 0 and kpis.grammes_par_convive <= objectifVal %}

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center py-3">
                <div class="text-muted small mb-1"><i class="fas fa-weight me-1"></i>Total déchets</div>
                <div class="fw-bold fs-4 text-danger">{{ kpis.total_kg|number_format(1, ',', ' ') }} kg</div>
                {% if variation is not null %}
                    <div class="small {{ variation < 0 ? 'text-success' : 'text-danger' }}">
                        <i class="fas fa-arrow-{{ variation < 0 ? 'down' : 'up' }} me-1"></i>
                        {{ variation|abs|number_format(1) }}% vs mois préc.
                    </div>
                {% else %}
                    <div class="small text-muted">Pas de comparaison</div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center py-3">
                <div class="text-muted small mb-1"><i class="fas fa-user me-1"></i>Grammes / convive</div>
                {% set gColor = kpis.grammes_par_convive <= objectifVal ? 'success' : (kpis.grammes_par_convive <= seuilAlerte ? 'warning' : 'danger') %}
                <div class="fw-bold fs-4 text-{{ gColor }}">{{ kpis.grammes_par_convive|number_format(0) }} g</div>
                <div class="small text-muted">{{ kpis.total_convives }} convive(s)</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center py-3">
                <div class="text-muted small mb-1"><i class="fas fa-calendar-day me-1"></i>Moyenne / jour</div>
                <div class="fw-bold fs-4 text-info">
                    {{ kpis.nb_jours > 0 ? (kpis.total_kg / kpis.nb_jours)|number_format(1, ',', ' ') : '0,0' }} kg
                </div>
                <div class="small text-muted">{{ kpis.nb_jours }} jour(s) de relevé</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body text-center py-3">
                <div class="text-muted small mb-1"><i class="fas fa-bullseye me-1"></i>Objectif</div>
                {% if kpis.total_kg > 0 %}
                    <div class="fw-bold fs-4 {{ objectifAtteint ? 'text-success' : 'text-danger' }}">
                        {{ objectifAtteint ? '✓ Atteint' : '✗ Dépassé' }}
                    </div>
                    <div class="small text-muted">≤ {{ objectifVal|number_format(0) }} g/convive</div>
                {% else %}
                    <div class="fw-bold fs-4 text-muted">—</div>
                    <div class="small text-muted">Aucune donnée</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# ── Graphiques ───────────────────────────────────────────────────────────── #}
{% if stats is not empty %}
<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                <h6 class="fw-semibold mb-0"><i class="fas fa-chart-line text-primary me-2"></i>Évolution journalière</h6>
            </div>
            <div class="card-body px-4 pb-4">
                <canvas id="chartEvolution" height="110"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                <h6 class="fw-semibold mb-0"><i class="fas fa-chart-pie text-warning me-2"></i>Répartition par catégorie</h6>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center pb-4">
                <canvas id="chartCategories" style="max-width:260px;max-height:260px"></canvas>
            </div>
        </div>
    </div>
</div>
{% endif %}

{# ── Zones ────────────────────────────────────────────────────────────────── #}
{% if zones is not empty %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent">
        <h6 class="fw-semibold mb-0"><i class="fas fa-map-marker-alt text-info me-2"></i>Performance par zone</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Zone</th>
                        <th class="text-end">Total kg</th>
                        <th class="text-end">g / convive</th>
                        <th class="text-end">Relevés</th>
                        <th>Statut</th>
                    </tr>
                </thead>
                <tbody>
                    {% for z in zones %}
                    {% set zClass = z.grammes_par_convive <= objectifVal ? 'success'
                        : (z.grammes_par_convive <= seuilAlerte ? 'warning' : 'danger') %}
                    <tr>
                        <td class="fw-semibold"><i class="fas fa-map-pin text-secondary me-1"></i>{{ z.zone }}</td>
                        <td class="text-end">{{ z.total_kg|number_format(2, ',', ' ') }} kg</td>
                        <td class="text-end fw-semibold text-{{ zClass }}">{{ z.grammes_par_convive|number_format(0) }} g</td>
                        <td class="text-end text-muted">{{ z.nb_releves }}</td>
                        <td>
                            <span class="badge bg-{{ zClass }}">
                                {{ zClass == 'success' ? 'OK' : (zClass == 'warning' ? 'Alerte' : 'Critique') }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

{# ── Tableau des relevés ──────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm rounded-3">
    <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0"><i class="fas fa-list me-2"></i>Relevés du mois</h6>
        <span class="badge bg-secondary">{{ releves|length }} relevé(s)</span>
    </div>
    <div class="card-body p-0">
        {% if releves is empty %}
            <div class="text-center py-5 text-muted">
                <i class="fas fa-recycle fa-2x mb-3 d-block opacity-25"></i>
                Aucun relevé pour ce mois
                {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
                <div class="mt-3">
                    <a href="{{ path('tenant_dechets_new') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus me-1"></i>Ajouter un relevé
                    </a>
                </div>
                {% endif %}
            </div>
        {% else %}
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Service</th>
                            <th>Catégorie</th>
                            <th class="text-end">Quantité</th>
                            <th class="text-end">Convives</th>
                            <th>Zone</th>
                            <th>Notes</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r in releves %}
                        <tr>
                            <td class="fw-semibold">{{ r.date_releve|date('d/m/Y') }}</td>
                            <td>
                                <span class="badge {{ r.service == 'dejeuner' ? 'bg-warning text-dark' : 'bg-info text-dark' }}">
                                    {{ r.service == 'dejeuner' ? 'Déjeuner' : 'Dîner' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge" style="background-color:{{ r.categorie_couleur ?? '#6c757d' }}">
                                    {{ r.categorie_nom ?? '—' }}
                                </span>
                            </td>
                            <td class="text-end fw-semibold">{{ r.quantite|number_format(3, ',', ' ') }} {{ r.unite }}</td>
                            <td class="text-end">{{ r.nb_convives > 0 ? r.nb_convives : '—' }}</td>
                            <td class="small text-muted">{{ r.zone ?: '—' }}</td>
                            <td class="small text-muted" style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ r.notes }}">
                                {{ r.notes ?: '—' }}
                            </td>
                            <td class="text-end text-nowrap">
                                {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
                                <a href="{{ path('tenant_dechets_edit', {id: r.id}) }}" class="btn btn-sm btn-outline-secondary me-1">
                                    <i class="fas fa-pencil-alt"></i>
                                </a>
                                <form method="post" action="{{ path('tenant_dechets_delete', {id: r.id}) }}" class="d-inline"
                                      onsubmit="return confirm('Supprimer ce relevé ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('dechet_delete_' ~ r.id) }}">
                                    <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
</div>

{# ── Chart.js ─────────────────────────────────────────────────────────────── #}
{% if stats is not empty %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const evolutionData = {{ evolution|json_encode|raw }};
    const categoriesData = {{ stats|json_encode|raw }};

    // Evolution journalière
    const ctxEvo = document.getElementById('chartEvolution');
    if (ctxEvo) {
        new Chart(ctxEvo, {
            type: 'line',
            data: {
                labels: evolutionData.map(e => {
                    const d = new Date(e.jour + 'T00:00:00');
                    return d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' });
                }),
                datasets: [{
                    label: 'Déchets (kg)',
                    data: evolutionData.map(e => parseFloat(e.total_kg)),
                    borderColor: 'rgb(220, 53, 69)',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    tension: 0.3,
                    fill: true,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: ctx => ctx.parsed.y.toFixed(2) + ' kg' } }
                },
                scales: {
                    y: { beginAtZero: true, ticks: { callback: v => v + ' kg' } }
                }
            }
        });
    }

    // Répartition par catégorie
    const ctxCat = document.getElementById('chartCategories');
    if (ctxCat && categoriesData.length) {
        new Chart(ctxCat, {
            type: 'doughnut',
            data: {
                labels: categoriesData.map(c => c.categorie),
                datasets: [{
                    data: categoriesData.map(c => parseFloat(c.total_kg)),
                    backgroundColor: categoriesData.map(c => c.couleur || '#6c757d'),
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } },
                    tooltip: { callbacks: { label: ctx => ctx.label + ' : ' + parseFloat(ctx.parsed).toFixed(2) + ' kg' } }
                }
            }
        });
    }
})();
</script>
{% endif %}

{% endblock %}