{% extends 'parents/_layout.html.twig' %}

{% block title %}Messages - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Messages - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block toolbar_actions %}
    <a href="{{ path('parents_messages_nouvelle_conversation_formulaire', {enfantId: enfant.id}) }}" class="btn btn-light-primary">Nouvelle conversation</a>
    <a href="{{ path('parents_messages_index') }}" class="btn btn-light">Mes enfants</a>
{% endblock %}

{% block body %}
    <style>
        /* alert-secondary (Bootstrap/Metronic) a un texte quasi invisible sur son propre fond dans ce thème - couleur forcée. */
        #indicateur-reponse, #indicateur-reponse-texte { color: var(--bs-gray-800); }
    </style>

    {% if conversation.objet %}
        <div class="text-muted fs-6 mb-3">Objet : <span class="fw-bold text-gray-800">{{ conversation.objet }}</span></div>
    {% endif %}

    <div class="card mb-5 mb-xl-8">
        <div class="card-body pt-6">
            {% if messages is empty %}
                <div class="text-muted">Aucun message pour le moment.</div>
            {% else %}
                <div class="d-flex flex-column gap-3">
                    {% for m in messages %}
                        <div class="d-flex {{ m.estAuteurParent ? 'justify-content-end' : 'justify-content-start' }}">
                            <div class="border border-2 rounded p-4 {{ m.estAuteurParent ? 'border-primary bg-light-primary' : 'border-secondary bg-light' }}{% if m.priorite.value == 'urgente' %} border-danger{% endif %}" style="max-width: 75%;">
                                <div class="text-muted fs-7 mb-1 d-flex align-items-center gap-2">
                                    <strong>{{ m.estAuteurParent ? 'Vous' : (m.auteur.prenom ~ ' ' ~ m.auteur.nom ~ ' (crèche)') }}</strong>
                                    {{ m.dateHeure|date('d/m H:i') }}
                                    {% if m.priorite.value == 'urgente' %}<span class="badge badge-light-danger">Urgent</span>{% endif %}
                                </div>
                                {% if m.repondA %}
                                    <div class="border-start border-3 ps-2 mb-2 text-muted fs-7 fst-italic">
                                        En réponse à {{ m.repondA.estAuteurParent ? 'Vous' : (m.repondA.auteur.prenom ~ ' ' ~ m.repondA.auteur.nom) }} : « {{ m.repondA.contenu|slice(0, 60) }}{% if m.repondA.contenu|length > 60 %}…{% endif %} »
                                    </div>
                                {% endif %}
                                <div class="mb-2">{{ m.contenu }}</div>
                                <button type="button" class="btn btn-light btn-sm btn-repondre" data-message-id="{{ m.id }}" data-auteur="{{ m.estAuteurParent ? 'Vous' : (m.auteur.prenom ~ ' ' ~ m.auteur.nom) }}" data-extrait="{{ m.contenu|slice(0, 60) }}{% if m.contenu|length > 60 %}…{% endif %}">Répondre</button>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Envoyer un message</h3></div>
        </div>
        <div class="card-body pt-0">
            <div id="indicateur-reponse" class="alert alert-secondary d-none d-flex align-items-center justify-content-between py-2 px-3 mb-3">
                <span id="indicateur-reponse-texte" class="fs-7"></span>
                <button type="button" class="btn btn-icon btn-sm" id="annuler-reponse">&times;</button>
            </div>
            <form method="post" action="{{ path('parents_messages_envoyer', {conversationId: conversation.id}) }}" id="formulaire-message">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('parents_message_' ~ conversation.id) }}">
                <input type="hidden" name="repond_a" id="champ-repond-a" value="">
                <div class="mb-4">
                    <label class="form-label">Message *</label>
                    <textarea name="contenu" id="champ-contenu" required class="form-control"></textarea>
                </div>
                <div class="mb-4">
                    <label class="form-label">Priorité</label>
                    <select name="priorite" class="form-select">
                        <option value="normale">Normale</option>
                        <option value="urgente">Urgente</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Envoyer</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            var champRepondA = document.getElementById('champ-repond-a');
            var indicateur = document.getElementById('indicateur-reponse');
            var indicateurTexte = document.getElementById('indicateur-reponse-texte');

            document.querySelectorAll('.btn-repondre').forEach(function (bouton) {
                bouton.addEventListener('click', function () {
                    champRepondA.value = bouton.dataset.messageId;
                    indicateurTexte.textContent = 'En réponse à ' + bouton.dataset.auteur + ' : « ' + bouton.dataset.extrait + ' »';
                    indicateur.classList.remove('d-none');
                    document.getElementById('champ-contenu').focus();
                    document.getElementById('formulaire-message').scrollIntoView({ behavior: 'smooth', block: 'center' });
                });
            });

            document.getElementById('annuler-reponse').addEventListener('click', function () {
                champRepondA.value = '';
                indicateur.classList.add('d-none');
            });
        })();
    </script>
{% endblock %}