{% extends "base.html" %}

{% block content %}
<section class="detail-section">
  <div class="container-xl">
    <div class="detail-grid">
      <aside class="card-panel detail-side-panel">
        <a class="back-link" href="{% url 'home' %}?profile={{ active_profile.pk }}">← Retour à l'accueil</a>
        <div class="profile-spotlight mt-4">
          <div class="avatar-orb avatar-xl" style="background: {{ counterpart.avatar_color }};">
            {{ counterpart.display_name|slice:":1"|upper }}
          </div>
          <h1>{{ counterpart.display_name }}</h1>
          <p>@{{ counterpart.handle }}</p>
          {% if counterpart.status_text %}<p class="muted-copy">{{ counterpart.status_text }}</p>{% endif %}
        </div>

        <div class="info-card">
          <h3>Discussion privée</h3>
          <ul class="meta-list">
            <li><span>Sujet</span><strong>{{ conversation.subject }}</strong></li>
            <li><span>Créée</span><strong>{{ conversation.created_at|date:"d/m/Y H:i" }}</strong></li>
            <li><span>Actif</span><strong>@{{ active_profile.handle }}</strong></li>
            <li><span>Messages</span><strong>{{ messages_list|length }}</strong></li>
          </ul>
        </div>

        <div class="info-card">
          <h3>Réactions rapides</h3>
          <p class="muted-copy">Ajoutez une réaction emoji sur n'importe quel message, comme dans Messenger.</p>
          <div class="reaction-preview-row">
            {% for value, label in reaction_choices %}
            <span class="reaction-chip static">{{ value }} {{ label }}</span>
            {% endfor %}
          </div>
        </div>
      </aside>

      <div class="card-panel detail-chat-panel">
        <div class="thread-header">
          <div>
            <span class="eyebrow">Conversation active</span>
            <h2>{{ counterpart.display_name }}</h2>
            <p>Messages privés, suivi de lecture et interface responsive.</p>
          </div>
          <span class="presence-chip"><span class="presence-dot"></span> notifications lues lors de l'ouverture</span>
        </div>

        <div class="message-thread">
          {% for message in messages_list %}
          <article class="message-row {% if message.author_id == active_profile.id %}is-own{% endif %}">
            <div class="message-bubble-wrap">
              <div class="message-bubble">
                <div class="message-meta">
                  <strong>{{ message.author.display_name }}</strong>
                  <span>{{ message.created_at|date:"H:i" }}</span>
                  {% if message.author_id == active_profile.id and message.is_read %}<span class="read-chip">Lu</span>{% endif %}
                </div>
                <p>{{ message.body|linebreaksbr }}</p>
                {% if message.reaction %}<div class="reaction-pill">{{ message.reaction }}</div>{% endif %}
              </div>

              <div class="reaction-actions">
                {% for value, label in reaction_choices %}
                <form method="post" action="{% url 'react_message' message.pk %}?profile={{ active_profile.pk }}">
                  {% csrf_token %}
                  <input type="hidden" name="reaction" value="{{ value }}">
                  <button type="submit" class="reaction-chip" aria-label="Réagir avec {{ label }}">{{ value }}</button>
                </form>
                {% endfor %}
              </div>
            </div>
          </article>
          {% empty %}
          <div class="empty-state compact">
            <div class="empty-illustration">✉️</div>
            <h4>Commencez la conversation</h4>
            <p>Envoyez le premier message depuis le bloc ci-dessous.</p>
          </div>
          {% endfor %}
        </div>

        <div class="composer-panel">
          <form method="post" class="resaka-form">
            {% csrf_token %}
            <label class="form-label" for="{{ message_form.body.id_for_label }}">Nouveau message</label>
            {{ message_form.body }}
            {% if message_form.body.errors %}<div class="form-error">{{ message_form.body.errors|striptags }}</div>{% endif %}
            <div class="helper-row mt-3 d-flex flex-wrap gap-2">
              <span class="helper-label">Emojis :</span>
              <button class="emoji-chip" type="button" data-emoji="❤️">❤️</button>
              <button class="emoji-chip" type="button" data-emoji="😂">😂</button>
              <button class="emoji-chip" type="button" data-emoji="🔥">🔥</button>
              <button class="emoji-chip" type="button" data-emoji="🎉">🎉</button>
            </div>
            <div class="d-flex flex-wrap gap-3 mt-4">
              <button type="submit" class="btn btn-brand">Envoyer le message</button>
              <a class="btn btn-ghost" href="{% url 'home' %}?profile={{ active_profile.pk }}">Retour à la liste</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}