{% extends "dashboard/base_dash.html" %}
{% block title %}Messages — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-3 px-lg-4 py-4">
    <p class="dash-help mb-4">
        <strong>Messagerie sécurisée</strong> — Échangez avec votre accompagnateur référencé.
        Chaque nouveau message apparaît aussi dans vos <a href="{% url 'dashboard_notifications' %}">notifications</a>.
        Les messages avec <strong>pièce jointe</strong> sont repérés clairement : le document est aussi disponible dans la
        <a href="{% url 'dashboard_ressources' %}">bibliothèque ressources</a>.
        Ce canal ne remplace pas les urgences médicales.
    </p>
    {% if messages_non_lus %}
    <div class="alert alert-primary border-0 shadow-sm small mb-4 d-flex align-items-center gap-2">
        <i class="bi bi-envelope-exclamation"></i>
        <span><strong>{{ messages_non_lus }}</strong> message{{ messages_non_lus|pluralize }} non lu{{ messages_non_lus|pluralize }}.</span>
    </div>
    {% endif %}
    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-body p-4">
                    <h2 class="h6 fw-bold mb-3">Nouveau message</h2>
                    {% if default_dest %}
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label">Destinataire</label>
                            <select name="destinataire_id" class="form-select">
                                {% for s in staff_list %}
                                <option value="{{ s.pk }}" {% if s.pk == default_dest.pk %}selected{% endif %}>{{ s.get_full_name|default:s.username }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="{{ message_form.contenu.id_for_label }}">{{ message_form.contenu.label }}</label>
                            {{ message_form.contenu }}
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Envoyer</button>
                    </form>
                    {% else %}
                    <p class="text-muted small mb-0">Aucun accompagnateur n’est encore référencé pour la messagerie interne.</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3 mb-3">
                <div class="card-header bg-white fw-bold py-3 d-flex justify-content-between align-items-center">
                    <span>Reçus</span>
                    {% if messages_non_lus %}<span class="badge bg-danger">{{ messages_non_lus }}</span>{% endif %}
                </div>
                <ul class="list-group list-group-flush">
                    {% for m in messages_recus %}
                    <li class="list-group-item small gf-message-item {% if not m.lu %}gf-message-item--unread{% endif %}">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <span class="fw-bold">{{ m.expediteur.get_full_name|default:m.expediteur.username }}</span>
                                <span class="text-muted">— {{ m.date_envoi|date:"d/m H:i" }}</span>
                                {% if not m.lu %}<span class="badge bg-primary ms-1">Nouveau</span>{% endif %}
                                {% if m.a_piece_jointe %}
                                <span class="badge bg-warning text-dark ms-1" title="Ce message contient une pièce jointe">
                                    <i class="bi bi-paperclip"></i> Pièce jointe
                                </span>
                                {% endif %}
                            </div>
                            {% if not m.lu %}
                            <form method="post" class="m-0">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="mark_read">
                                <input type="hidden" name="message_id" value="{{ m.pk }}">
                                <button type="submit" class="btn btn-sm btn-outline-secondary py-0 px-2">Lu</button>
                            </form>
                            {% endif %}
                        </div>
                        <div class="mt-2">{{ m.contenu|linebreaksbr }}</div>
                        {% if m.a_piece_jointe %}
                        <div class="gf-message-ressource mt-2 p-2 rounded-3">
                            <p class="small mb-2 text-muted">
                                <i class="bi bi-paperclip text-primary"></i>
                                <strong>Ce message contient une pièce jointe.</strong>
                                Elle est disponible dans votre bibliothèque ressources.
                            </p>
                            {% if m.ressource %}
                            <a href="{% url 'dashboard_ressources' %}?open={{ m.ressource.slug }}&mark_msg={{ m.pk }}" class="btn btn-sm btn-primary mt-2">
                                <i class="bi bi-book-half me-1"></i>Ouvrir dans les ressources
                            </a>
                            {% elif m.piece_jointe %}
                            <span class="small text-muted d-block mt-1">Synchronisation en cours… actualisez la page si le lien n’apparaît pas.</span>
                            {% endif %}
                        </div>
                        {% elif m.ressource %}
                        <div class="gf-message-ressource mt-2 p-2 rounded-3">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <i class="bi bi-journal-medical text-primary"></i>
                                <span class="fw-semibold">{{ m.ressource.titre }}</span>
                                <a href="{{ m.ressource.url_dashboard_ressource }}&amp;mark_msg={{ m.pk }}" class="btn btn-sm btn-primary ms-auto">Lire la ressource</a>
                            </div>
                        </div>
                        {% endif %}
                    </li>
                    {% empty %}
                    <li class="list-group-item text-muted">Aucun message reçu.</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white fw-bold py-3">Envoyés</div>
                <ul class="list-group list-group-flush">
                    {% for m in messages_envoyes %}
                    <li class="list-group-item small">
                        <span class="text-muted">{{ m.date_envoi|date:"d/m H:i" }}</span> → {{ m.destinataire.get_full_name|default:m.destinataire.username }}
                        {% if m.a_piece_jointe %}<span class="badge bg-light text-dark ms-1"><i class="bi bi-paperclip"></i> PJ</span>{% endif %}
                        <div class="mt-1">{{ m.contenu|linebreaksbr }}</div>
                        {% if m.ressource %}
                        <p class="small text-muted mb-0 mt-1"><i class="bi bi-paperclip"></i> Ressource : {{ m.ressource.titre }}</p>
                        {% endif %}
                    </li>
                    {% empty %}
                    <li class="list-group-item text-muted">Aucun message envoyé.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}