{% extends "base.html" %}

{% block content %}
<section class="hero-section">
  <div class="container-xl">
    <div class="row align-items-center g-4 g-xl-5">
      <div class="col-lg-7">
        <div class="hero-copy">
          <span class="eyebrow">Messagerie privée • design inspiré des apps sociales</span>
          <h1 class="display-title">Discutez en privé, avec style, notifications et emojis.</h1>
          <p class="lead-copy">
            RJL Resaka transforme votre sujet d'examen en première expérience utilisable : créez un profil,
            lancez une discussion privée, suivez les messages non lus et réagissez avec des emojis.
          </p>
          <div class="hero-actions d-flex flex-wrap gap-3">
            <a class="btn btn-brand btn-lg" href="#workflow">Commencer une discussion</a>
            <a class="btn btn-ghost btn-lg" href="/admin/">Ouvrir l'admin</a>
          </div>
          <div class="hero-stats row g-3 mt-2">
            <div class="col-sm-4">
              <div class="metric-card">
                <strong>{{ stats.profiles }}</strong>
                <span>profils créés</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="metric-card">
                <strong>{{ stats.conversations }}</strong>
                <span>discussions</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="metric-card">
                <strong>{{ stats.messages }}</strong>
                <span>messages envoyés</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="hero-preview card-panel chat-preview-panel">
          <div class="preview-window">
            <div class="preview-topbar">
              <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            </div>
            <div class="preview-thread">
              <div class="bubble bubble-incoming">Salut 👋 on peut discuter ce soir ?</div>
              <div class="bubble bubble-outgoing">Oui, je t'envoie le brief du projet RJL Resaka.</div>
              <div class="bubble bubble-incoming bubble-accent">Top, j'adore le style Messenger + réactions ❤️</div>
            </div>
            <div class="preview-footer">
              <span class="presence-dot"></span>
              <span>Notifications de lecture + interface responsive</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="workflow" class="workflow-section">
  <div class="container-xl">
    <div class="section-heading">
      <span class="eyebrow">Premier MVP slice</span>
      <h2>Créer un profil, démarrer un chat, suivre les non-lus.</h2>
      <p>Une vraie boucle de valeur : entrée, confirmation, liste des discussions et détail conversationnel.</p>
    </div>

    <div class="row g-4 align-items-start">
      <div class="col-xl-4">
        <div class="card-panel stack-panel h-100">
          <div class="panel-header">
            <h3>1. Votre identité</h3>
            <p>Le MVP permet de simuler des profils pour tester une messagerie privée sans flux d'inscription complet.</p>
          </div>

          {% if profiles %}
          <form method="get" class="profile-switcher mb-4">
            <label class="form-label" for="profile-select">Profil actif</label>
            <select class="form-select" id="profile-select" name="profile" onchange="this.form.submit()">
              {% for profile in profiles %}
              <option value="{{ profile.pk }}" {% if active_profile and profile.pk == active_profile.pk %}selected{% endif %}>{{ profile.display_name }} · @{{ profile.handle }}</option>
              {% endfor %}
            </select>
          </form>
          {% endif %}

          <form method="post" action="{% url 'create_profile' %}" class="resaka-form" novalidate>
            {% csrf_token %}
            {% for field in profile_form %}
            <div class="mb-3">
              <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.errors %}<div class="form-error">{{ field.errors|striptags }}</div>{% endif %}
            </div>
            {% endfor %}
            <button type="submit" class="btn btn-brand w-100">Créer ce profil</button>
          </form>
        </div>
      </div>

      <div class="col-xl-8">
        <div class="card-panel mb-4">
          <div class="panel-header d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
            <div>
              <h3>2. Démarrer une discussion privée</h3>
              <p>{% if active_profile %}Vous envoyez le premier message en tant que <strong>{{ active_profile.display_name }}</strong>.{% else %}Créez d'abord un profil pour activer le chat.{% endif %}</p>
            </div>
            {% if active_profile %}
            <div class="presence-chip"><span class="presence-dot"></span> Connecté comme @{{ active_profile.handle }}</div>
            {% endif %}
          </div>

          <form method="post" action="{% url 'start_conversation' %}" class="resaka-form">
            {% csrf_token %}
            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label" for="{{ conversation_form.recipient.id_for_label }}">{{ conversation_form.recipient.label }}</label>
                {{ conversation_form.recipient }}
                {% if conversation_form.recipient.errors %}<div class="form-error">{{ conversation_form.recipient.errors|striptags }}</div>{% endif %}
              </div>
              <div class="col-md-8">
                <label class="form-label" for="{{ conversation_form.body.id_for_label }}">{{ conversation_form.body.label }}</label>
                {{ conversation_form.body }}
                {% if conversation_form.body.errors %}<div class="form-error">{{ conversation_form.body.errors|striptags }}</div>{% endif %}
              </div>
            </div>
            <div class="helper-row mt-3 d-flex flex-wrap gap-2">
              <span class="helper-label">Ajouts rapides :</span>
              <button class="emoji-chip" type="button" data-emoji="😊">😊 Bonjour</button>
              <button class="emoji-chip" type="button" data-emoji="🔥">🔥 Update</button>
              <button class="emoji-chip" type="button" data-emoji="👍">👍 OK</button>
              <button class="emoji-chip" type="button" data-emoji="🎯">🎯 Important</button>
            </div>
            <button type="submit" class="btn btn-brand mt-4">Créer ou continuer la conversation</button>
          </form>
        </div>

        <div class="card-panel">
          <div class="panel-header d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
            <div>
              <h3>3. Discussions récentes</h3>
              <p>Liste responsive avec aperçu du dernier message et badge de notifications non lues.</p>
            </div>
            {% if active_profile %}
            <span class="panel-note">Affichage filtré pour @{{ active_profile.handle }}</span>
            {% endif %}
          </div>

          {% if conversations %}
          <div class="conversation-list">
            {% for conversation in conversations %}
            <a class="conversation-card" href="{% url 'conversation_detail' conversation.pk %}?profile={{ active_profile.pk }}">
              <div class="avatar-orb" style="background: {{ conversation.counterpart.avatar_color }};">
                {{ conversation.counterpart.display_name|slice:":1"|upper }}
              </div>
              <div class="conversation-copy">
                <div class="conversation-head">
                  <h4>{{ conversation.counterpart.display_name }}</h4>
                  <span>{{ conversation.updated_at|date:"d M · H:i" }}</span>
                </div>
                <p>@{{ conversation.counterpart.handle }}{% if conversation.counterpart.status_text %} · {{ conversation.counterpart.status_text }}{% endif %}</p>
                {% if conversation.last_message %}
                <strong>{{ conversation.last_message.author.display_name }}</strong>
                <span>{{ conversation.last_message.body|truncatechars:90 }}</span>
                {% else %}
                <span>Aucun message pour le moment.</span>
                {% endif %}
              </div>
              <div class="conversation-meta">
                {% if conversation.unread_count %}
                <span class="badge unread-badge">{{ conversation.unread_count }} non lus</span>
                {% endif %}
                <span class="open-link">Ouvrir</span>
              </div>
            </a>
            {% endfor %}
          </div>
          {% else %}
          <div class="empty-state">
            <div class="empty-illustration">💬</div>
            <h4>Aucune discussion pour l'instant</h4>
            <p>Créez un profil puis envoyez un premier message privé pour voir la liste s'animer ici.</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}