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

{% block title %}Suivi — {{ suivi.nom_personne }}{% endblock %}

{% block body %}

{# ── En-tête ───────────────────────────────────────────────────────────────── #}
<div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
    <div>
        <h1 class="h4 fw-bold page-title mb-1">
            <i class="fas fa-user-clock me-2"></i>{{ suivi.nom_personne }}
            {% if suivi.actif %}
                <span class="badge bg-success ms-2" style="font-size:.65rem;vertical-align:middle">En cours</span>
            {% else %}
                <span class="badge bg-secondary ms-2" style="font-size:.65rem;vertical-align:middle">Clôturé</span>
            {% endif %}
        </h1>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <span class="badge bg-light text-dark border">
                {% if suivi.type_personne == 'eleve' %}🏫 Élève
                {% elseif suivi.type_personne == 'resident' %}🏠 Résident
                {% elseif suivi.type_personne == 'patient' %}🏥 Patient
                {% else %}👤 Autre{% endif %}
            </span>
            {% if suivi.groupe_service %}
                <span class="badge bg-secondary-subtle text-secondary border">{{ suivi.groupe_service }}</span>
            {% endif %}
            <span class="text-muted small">
                <i class="fas fa-calendar me-1"></i>
                Débuté le {{ suivi.date_debut|date('d/m/Y') }}
                {% if suivi.date_fin %} — clôturé le {{ suivi.date_fin|date('d/m/Y') }}{% endif %}
            </span>
        </div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ path('tenant_dechets_suivis_index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>Liste
        </a>
        {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
        <a href="{{ path('tenant_dechets_suivis_edit', {id: suivi.id}) }}" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-pencil-alt me-1"></i>Modifier
        </a>
        {% if suivi.actif %}
        <form method="post" action="{{ path('tenant_dechets_suivis_close', {id: suivi.id}) }}" class="d-inline"
              onsubmit="return confirm('Clôturer ce suivi ? Il passera en archive.')">
            <input type="hidden" name="_token" value="{{ csrf_token('suivi_close_' ~ suivi.id) }}">
            <button class="btn btn-warning btn-sm"><i class="fas fa-stop-circle me-1"></i>Clôturer</button>
        </form>
        {% else %}
        <form method="post" action="{{ path('tenant_dechets_suivis_reopen', {id: suivi.id}) }}" class="d-inline">
            <input type="hidden" name="_token" value="{{ csrf_token('suivi_reopen_' ~ suivi.id) }}">
            <button class="btn btn-success btn-sm"><i class="fas fa-play-circle me-1"></i>Réactiver</button>
        </form>
        {% endif %}
        {% if is_granted('ROLE_TENANT_ADMIN') %}
        <form method="post" action="{{ path('tenant_dechets_suivis_delete', {id: suivi.id}) }}" class="d-inline"
              onsubmit="return confirm('Supprimer définitivement ce suivi et TOUS ses relevés ? Cette action est irréversible.')">
            <input type="hidden" name="_token" value="{{ csrf_token('suivi_delete_' ~ suivi.id) }}">
            <button class="btn btn-outline-danger btn-sm"><i class="fas fa-trash me-1"></i>Supprimer</button>
        </form>
        {% endif %}
        {% endif %}
    </div>
</div>

{# ── Flash messages ────────────────────────────────────────────────────────── #}
{% for type, messages in app.flashes(['success','error','warning','info']) %}
    {% for msg in messages %}
    <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show mb-3">
        {{ msg }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
{% endfor %}

{# ── Motif médical ─────────────────────────────────────────────────────────── #}
{% if suivi.motif %}
<div class="alert alert-info border-0 shadow-sm mb-3">
    <i class="fas fa-stethoscope me-2"></i>
    <strong>Prescription médicale :</strong> {{ suivi.motif }}
    {% if suivi.notes %}
    <hr class="my-2 opacity-25">
    <small class="text-muted"><i class="fas fa-note-sticky me-1"></i>{{ suivi.notes }}</small>
    {% endif %}
</div>
{% endif %}

{# ── KPIs ──────────────────────────────────────────────────────────────────── #}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm text-center py-3 h-100">
            <div class="text-muted small mb-1"><i class="fas fa-list-check me-1"></i>Relevés effectués</div>
            <div class="fw-bold fs-3">{{ stats.nb_releves }}</div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm text-center py-3 h-100">
            <div class="text-muted small mb-1"><i class="fas fa-utensils me-1 text-primary"></i>Moy. servi</div>
            <div class="fw-bold fs-3 text-primary">{{ stats.avg_servi|number_format(0) }} g</div>
            <div class="small text-muted">par repas</div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm text-center py-3 h-100">
            <div class="text-muted small mb-1"><i class="fas fa-leaf me-1 text-success"></i>Moy. consommé</div>
            <div class="fw-bold fs-3 text-success">{{ stats.avg_consomme|number_format(0) }} g</div>
            <div class="small text-muted">retour : {{ stats.avg_retour|number_format(0) }} g moy.</div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        {% set tauxColor = stats.taux_consommation >= 80 ? 'success' : (stats.taux_consommation >= 50 ? 'warning' : 'danger') %}
        <div class="card border-0 shadow-sm text-center py-3 h-100">
            <div class="text-muted small mb-1"><i class="fas fa-percent me-1"></i>Taux de consommation</div>
            <div class="fw-bold fs-3 text-{{ tauxColor }}">{{ stats.taux_consommation|number_format(1) }} %</div>
            <div class="small text-muted">
                {% if stats.taux_consommation >= 80 %}✓ Bon appétit
                {% elseif stats.taux_consommation >= 50 %}⚠ Appétit réduit
                {% else %}⚠ Appétit très faible{% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {# ── Colonne gauche : graphique + tableau ──────────────────────────────── #}
    <div class="{{ suivi.actif and is_granted('ROLE_TENANT_GESTIONNAIRE') ? 'col-lg-8' : 'col-12' }} d-flex flex-column gap-4">

        {# Graphique #}
        {% if evolution is not empty %}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent pt-3 pb-0 px-4">
                <h6 class="fw-semibold mb-0">
                    <i class="fas fa-chart-bar text-primary me-2"></i>Évolution — quantité servie vs consommée
                </h6>
            </div>
            <div class="card-body px-4 pb-4">
                <canvas id="chartEvolution" height="130"></canvas>
            </div>
        </div>
        {% endif %}

        {# Tableau des relevés #}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                <h6 class="fw-semibold mb-0"><i class="fas fa-table me-2"></i>Historique des relevés</h6>
                <span class="badge bg-secondary">{{ releves|length }}</span>
            </div>
            <div class="card-body p-0">
                {% if releves is empty %}
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-weight fa-2x mb-2 d-block opacity-25"></i>
                    Aucun relevé pour l'instant
                </div>
                {% else %}
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Repas</th>
                                <th>Menu</th>
                                <th class="text-end text-primary">Servi (g)</th>
                                <th class="text-end text-danger">Retour (g)</th>
                                <th class="text-end text-success fw-semibold">Consommé (g)</th>
                                <th class="text-end">Taux</th>
                                <th>Notes</th>
                                {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}<th></th>{% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for r in releves %}
                            {% set taux = r.poids_servi > 0 ? (r.poids_consomme / r.poids_servi * 100) : 0 %}
                            {% set rowColor = taux >= 80 ? 'success' : (taux >= 50 ? 'warning' : 'danger') %}
                            <tr>
                                <td class="fw-semibold">{{ r.date_releve|date('d/m/Y') }}</td>
                                <td>
                                    <span class="badge bg-light text-dark border" style="font-size:.75rem">
                                        {% if r.service == 'dejeuner' %}🍽️ Déjeuner
                                        {% elseif r.service == 'diner' %}🌙 Dîner
                                        {% elseif r.service == 'petit_dejeuner' %}☀️ Petit-déj.
                                        {% else %}🍎 Goûter{% endif %}
                                    </span>
                                </td>
                                <td class="small text-muted">{{ r.description_repas ?: '—' }}</td>
                                <td class="text-end text-primary fw-semibold">{{ r.poids_servi|number_format(0) }}</td>
                                <td class="text-end text-danger">{{ r.poids_retour|number_format(0) }}</td>
                                <td class="text-end fw-bold text-{{ rowColor }}">{{ r.poids_consomme|number_format(0) }}</td>
                                <td class="text-end">
                                    <span class="badge bg-{{ rowColor }}">{{ taux|number_format(0) }}%</span>
                                </td>
                                <td class="small text-muted" style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ r.notes }}">
                                    {{ r.notes ?: '—' }}
                                </td>
                                {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
                                <td>
                                    <form method="post"
                                          action="{{ path('tenant_dechets_suivis_releve_delete', {id: suivi.id, releveId: r.id}) }}"
                                          onsubmit="return confirm('Supprimer ce relevé ?')">
                                        <input type="hidden" name="_token" value="{{ csrf_token('releve_delete_' ~ r.id) }}">
                                        <button class="btn btn-sm btn-outline-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {# ── Colonne droite : formulaire d'ajout ───────────────────────────────── #}
    {% if suivi.actif and is_granted('ROLE_TENANT_GESTIONNAIRE') %}
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0"><i class="fas fa-weight me-2"></i>Saisir un pesage</h6>
            </div>
            <div class="card-body">
                <form method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token('releve_add_' ~ suivi.id) }}">

                    <div class="mb-3">
                        <label for="date_releve" class="form-label fw-semibold small">
                            Date <span class="text-danger">*</span>
                        </label>
                        <input type="date" id="date_releve" name="date_releve" class="form-control form-control-sm"
                               value="{{ 'now'|date('Y-m-d') }}" required>
                    </div>

                    <div class="mb-3">
                        <label for="service" class="form-label fw-semibold small">
                            Repas <span class="text-danger">*</span>
                        </label>
                        <select id="service" name="service" class="form-select form-select-sm">
                            <option value="petit_dejeuner">☀️ Petit-déjeuner</option>
                            <option value="dejeuner" selected>🍽️ Déjeuner</option>
                            <option value="gouter">🍎 Goûter</option>
                            <option value="diner">🌙 Dîner</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="description_repas" class="form-label fw-semibold small">Menu servi</label>
                        <input type="text" id="description_repas" name="description_repas"
                               class="form-control form-control-sm"
                               placeholder="Ex : Poulet rôti, purée…">
                    </div>

                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <label for="poids_servi" class="form-label fw-semibold small text-primary">
                                Servi (g) <span class="text-danger">*</span>
                            </label>
                            <input type="number" id="poids_servi" name="poids_servi"
                                   class="form-control form-control-sm"
                                   placeholder="Ex : 280" min="0" step="1" required>
                            <div class="form-text" style="font-size:.7rem">Avant le repas</div>
                        </div>
                        <div class="col-6">
                            <label for="poids_retour" class="form-label fw-semibold small text-danger">
                                Retour (g) <span class="text-danger">*</span>
                            </label>
                            <input type="number" id="poids_retour" name="poids_retour"
                                   class="form-control form-control-sm"
                                   placeholder="Ex : 90" min="0" step="1" required>
                            <div class="form-text" style="font-size:.7rem">Non mangé</div>
                        </div>
                    </div>

                    {# Résultat calculé en temps réel #}
                    <div id="calcResult" class="alert alert-light border text-center py-2 mb-3 d-none small">
                        <strong>Consommé :
                            <span id="calcConsomme" class="text-success">—</span>
                        </strong>
                        <span class="text-muted mx-1">|</span>
                        Taux : <span id="calcTaux" class="fw-semibold">—</span>
                    </div>

                    <div class="mb-3">
                        <label for="notes" class="form-label fw-semibold small">Observations</label>
                        <textarea id="notes" name="notes" class="form-control form-control-sm" rows="2"
                                  placeholder="Ex : A refusé le dessert…"></textarea>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-save me-1"></i>Enregistrer le pesage
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{# ── Chart.js ─────────────────────────────────────────────────────────────── #}
{% if evolution is not empty %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const data = {{ evolution|json_encode|raw }};
    const serviceLabels = {
        petit_dejeuner: '☀️',
        dejeuner:       '🍽️',
        gouter:         '🍎',
        diner:          '🌙'
    };
    const labels = data.map(function (e) {
        const d = new Date(e.date_releve + 'T00:00:00');
        return d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' })
               + ' ' + (serviceLabels[e.service] || '');
    });

    new Chart(document.getElementById('chartEvolution'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Servi (g)',
                    data: data.map(function (e) { return parseFloat(e.poids_servi); }),
                    backgroundColor: 'rgba(13, 110, 253, 0.35)',
                    borderColor: 'rgba(13, 110, 253, 0.8)',
                    borderWidth: 1,
                    order: 2
                },
                {
                    label: 'Consommé (g)',
                    data: data.map(function (e) { return parseFloat(e.poids_consomme); }),
                    backgroundColor: 'rgba(25, 135, 84, 0.65)',
                    borderColor: 'rgba(25, 135, 84, 1)',
                    borderWidth: 1,
                    order: 1
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function (ctx) {
                            return ctx.dataset.label + ' : ' + ctx.parsed.y.toFixed(0) + ' g';
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { callback: function (v) { return v + ' g'; } }
                }
            }
        }
    });
})();
</script>
{% endif %}

{# Calcul en temps réel (visible si formulaire présent) #}
{% if suivi.actif %}
<script>
(function () {
    var serviInput  = document.getElementById('poids_servi');
    var retourInput = document.getElementById('poids_retour');
    var calcResult  = document.getElementById('calcResult');
    var calcConsomme = document.getElementById('calcConsomme');
    var calcTaux    = document.getElementById('calcTaux');

    if (!serviInput || !retourInput) return;

    function update() {
        var servi  = parseFloat(serviInput.value)  || 0;
        var retour = parseFloat(retourInput.value) || 0;
        if (servi > 0 || retour > 0) {
            var consomme = servi - retour;
            var taux = servi > 0 ? (consomme / servi * 100) : 0;
            if (calcConsomme) calcConsomme.textContent = consomme.toFixed(0) + ' g';
            if (calcTaux) {
                calcTaux.textContent  = taux.toFixed(0) + '%';
                calcTaux.className = 'fw-semibold text-' + (taux >= 80 ? 'success' : taux >= 50 ? 'warning' : 'danger');
            }
            if (calcResult) calcResult.classList.remove('d-none');
        } else {
            if (calcResult) calcResult.classList.add('d-none');
        }
    }

    serviInput.addEventListener('input', update);
    retourInput.addEventListener('input', update);
})();
</script>
{% endif %}

{% endblock %}