{% extends "base.html" %}

{% block title %}{{ listing.title }} · Messages{% endblock %}

{% block content %}
<div class="ct-page">
  <div class="ct-layout">
    <!-- ============ Left: details panel ============ -->
    <aside class="ct-details">
      {% include "chat/_thread_header.html" %}

      <div class="ct-safety">
        <span class="ct-safety-ico"><i class="bi bi-shield-fill-check" aria-hidden="true"></i></span>
        <div>
          <p class="ct-safety-title">Campus Safety Verified</p>
          <p class="ct-safety-text">
            Keep the conversation on CampusCart. Don't share phone numbers, emails
            or OTPs, and meet in public campus areas until an offer is accepted.
          </p>
          <a class="ct-safety-link" href="{{ url_for('main.privacy') }}">Learn More</a>
        </div>
      </div>

    </aside>

    <!-- ============ Right: conversation ============ -->
    <div class="ct-main{% if messaging_state and messaging_state.limit_reached and not is_closed %} ct-main--limit{% endif %}">
      {# Negotiation summary — relocated from the sidebar to the top of the
         conversation. Pinned above the scrolling messages; same logic/links. #}
      {% set latest_offer = (conversation.offers|sort(attribute='created_at', reverse=true)|first) if conversation and conversation.offers else none %}
      <div class="ct-negbar">
        <div class="ct-negbar-head">
          <span class="ct-negbar-ico"><i class="bi bi-arrow-left-right" aria-hidden="true"></i></span>
          <span class="ct-negbar-title">Active Negotiation</span>
        </div>
        <div class="ct-negbar-row">
          {% if latest_offer %}
            <div class="ct-negbar-stats">
              <div class="ct-stat">
                <span class="ct-stat-label">Current Offer</span>
                <span class="ct-stat-value ct-stat-value--price">&#8377;{{ "{:,.2f}".format(latest_offer.amount) }}</span>
              </div>
              <div class="ct-stat">
                <span class="ct-stat-label">Status</span>
                <span class="ct-stat-value"><span class="ct-neg-dot"></span>{{ latest_offer.status.value|title }}</span>
              </div>
              <div class="ct-stat">
                <span class="ct-stat-label">Last Updated</span>
                <span class="ct-stat-value ct-stat-value--muted">
                  <time data-relative datetime="{{ latest_offer.updated_at.isoformat() }}">{{ latest_offer.updated_at.strftime('%d %b %Y') }}</time>
                </span>
              </div>
            </div>
            <a class="ct-negbar-btn" href="{{ url_for('negotiation.conversation_negotiation', public_id=conversation.public_id) }}">Open Negotiation</a>
          {% elif conversation %}
            <p class="ct-negbar-empty">No offer yet — start bargaining by sending an offer.</p>
            <a class="ct-negbar-btn" href="{{ url_for('negotiation.conversation_negotiation', public_id=conversation.public_id) }}">Open Negotiation</a>
          {% else %}
            <p class="ct-negbar-empty">No offer yet — make an offer to begin bargaining.</p>
            <a class="ct-negbar-btn" href="{{ url_for('negotiation.start_negotiation', listing_public_id=listing.public_id) }}">Open Negotiation</a>
          {% endif %}
        </div>
      </div>

      <div class="ct-thread" data-chat-messages
           role="log" aria-live="polite" aria-label="Conversation messages" tabindex="0"
           {% if conversation %}data-poll-url="{{ url_for('chat.thread_messages', public_id=conversation.public_id) }}"{% endif %}>
        {% include "chat/_conversation_timeline.html" %}
      </div>

      <div class="ct-composer-wrap">
        {% if is_closed %}
          <div class="ct-closed" role="status">
            <i class="bi bi-lock" aria-hidden="true"></i> This conversation is closed.
          </div>
        {% elif messaging_state and messaging_state.limit_reached %}
          {% include "advertisements/_ad_rewarded.html" %}
        {% else %}
          {% if messaging_state and messaging_state.counting_active and not messaging_state.premium %}
            <div class="ct-quota">
              <p class="ct-remaining mb-0">
                <i class="bi bi-chat-dots" aria-hidden="true"></i>
                Messages remaining:
                <span class="fw-semibold"><span data-remaining-count>{{ messaging_state.total_remaining }}</span> / {{ messaging_state.allowance }}</span>
                <a class="ct-remaining-upsell" href="{{ url_for('premium.index') }}">
                  <i class="bi bi-star-fill" aria-hidden="true"></i> Premium members chat without limits
                </a>
              </p>
              {% if messaging_state.can_watch_ad %}
                {# Opens the rewarded-ad modal; the reward is granted only after the
                   simulated ad completes and the user presses Continue. A future
                   cooldown (config REWARDED_AD_COOLDOWN_SECONDS > 0) swaps the
                   button for the countdown chip via JS. #}
                <span class="ct-reward-slot" data-reward-slot>
                  <button type="button" class="ct-reward-inline-btn" data-watch-ad-trigger
                          data-watching-label="<i class='bi bi-megaphone'></i> Watching advertisement…">
                    <i class="bi bi-megaphone" aria-hidden="true"></i>
                    Watch Ad <span class="ct-reward-inline-plus">+{{ messaging_state.unlock_size }} messages</span>
                  </button>
                  <span class="ct-cooldown d-none" data-cooldown hidden>
                    <i class="bi bi-hourglass-split" aria-hidden="true"></i>
                    Next advertisement in <strong data-cooldown-time>0s</strong>
                  </span>
                </span>
              {% endif %}
            </div>
            {# Temporary reward banner: a reused static node (hidden by default).
               After a reward is claimed, initRewardExtras() reveals it from the
               persisted signal, holds it ~4.5s, then slides it away and sets it
               hidden — reclaiming the space so the chat returns to full height.
               No permanent "Latest Reward" card, so history is never shrunk. #}
            <div class="ct-reward-banner" data-reward-banner role="status" aria-live="polite" hidden>
              <span class="ct-reward-banner-emoji" aria-hidden="true">🎁</span>
              <div class="ct-reward-banner-body">
                <p class="ct-reward-banner-title" data-reward-banner-title>+{{ messaging_state.unlock_size }} Messages Added</p>
                <p class="ct-reward-banner-text">You can continue chatting now.</p>
              </div>
            </div>
          {% endif %}
          <form method="post" action="{{ form_action }}" class="ct-composer" data-emoji-composer>
            {{ form.hidden_tag() }}
            <div class="ct-emoji" data-emoji-root>
              <button type="button" class="ct-composer-icon ct-emoji-toggle"
                      aria-label="Insert emoji" aria-expanded="false" aria-haspopup="true"
                      data-emoji-toggle>
                <i class="bi bi-emoji-smile" aria-hidden="true"></i>
              </button>
            </div>
            <div class="ct-composer-field">
              {{ form.message(class="ct-composer-input", rows="1", placeholder="Type your message…", aria_label="Message", **{"data-emoji-target": ""}) }}
              <button type="submit" class="ct-send" aria-label="Send message">
                <i class="bi bi-send-fill" aria-hidden="true"></i>
              </button>
            </div>
          </form>
          <p class="ct-composer-note">
            <i class="bi bi-lock-fill" aria-hidden="true"></i>
            Keep the conversation on CampusCart for campus safety.
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{# Rewarded-advertisement modal — one instance, shared by every Watch Ad trigger
   in this thread (inline composer notice + limit-reached card). #}
{% if not is_closed and conversation and messaging_state and messaging_state.can_watch_ad %}
  {% include "advertisements/_rewarded_ad_modal.html" %}
{% endif %}

{# Reward-claim feedback (shown once, on the reload after a reward is claimed).
   Reused static nodes — JS toggles them; no elements are created at runtime. #}
{% if conversation %}
  <div class="ct-reward-celebrate" data-reward-celebration data-convo="{{ conversation.public_id }}" role="status" aria-live="polite" hidden>
    <div class="ct-reward-celebrate-card">
      <span class="ct-reward-celebrate-emoji" aria-hidden="true">🎉</span>
      <p class="ct-reward-celebrate-title" data-celebrate-title>+5 Messages Added</p>
      <p class="ct-reward-celebrate-text">You can continue chatting now.</p>
    </div>
  </div>
  <div class="ct-reward-badge" data-reward-badge aria-hidden="true" hidden>+5 Messages</div>
{% endif %}
{% endblock %}