{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <title>Offer — {{ product_title }}</title>
{%- endblock %}

{% block content %}
<section class="one-column offer-page" data-offer-id="{{ id }}" data-offer-state="{{ state }}">

  <div class="offer-header well">
    <h1 class="type-title">Offer for "{{ product_title }}"</h1>

    <div class="offer-state-badge offer-state-{{ state }}">{{ state_human }}</div>

    <p>
      <strong>Current amount:</strong> ${{ "%.2f"|format(current_amount) }}
      &middot;
      Round {{ round_count }}
    </p>
    <p><strong>Buyer:</strong> <a href="/profile/{{ buyer_handle }}{% if shop_id %}?shop={{ shop_id }}{% endif %}">{{ buyer_name }}</a></p>
    {% if buyer_message %}
      <p><em>Buyer note:</em> {{ buyer_message }}</p>
    {% endif %}
    {% if seller_message %}
      <p><em>Seller note:</em> {{ seller_message }}</p>
    {% endif %}
  </div>

  {# State-aware notice — explains the current offer state to the viewer
     regardless of JS / flash availability. #}
  {% if is_declined %}
    <div class="alert alert-error offer-state-notice" name="alert">
      <p class="alert-message">This offer was below the seller's minimum and was automatically declined &mdash; try a higher amount.</p>
    </div>
  {% elif is_withdrawn %}
    <div class="alert alert-warning offer-state-notice" name="alert">
      <p class="alert-message">This offer was withdrawn by the buyer.</p>
    </div>
  {% elif is_expired %}
    <div class="alert alert-warning offer-state-notice" name="alert">
      <p class="alert-message">This offer expired before it was accepted.</p>
    </div>
  {% elif is_paid %}
    <div class="alert alert-success offer-state-notice" name="alert">
      <p class="alert-message">Paid &mdash; this offer is complete.</p>
    </div>
  {% elif is_accepted %}
    <div class="alert alert-success offer-state-notice" name="alert">
      <p class="alert-message">Offer accepted{% if request.user and request.user.uuid_str == buyer_id %} &mdash; pay now to complete your purchase{% elif not is_paid %} &mdash; waiting on the buyer to pay ${{ "%.2f"|format(current_amount) }}{% endif %}.</p>
    </div>
  {% elif can_act %}
    <div class="alert alert-info offer-state-notice" name="alert">
      <p class="alert-message">It's your turn &mdash; accept, counter, or decline below.</p>
    </div>
  {% elif is_open %}
    <div class="alert alert-info offer-state-notice" name="alert">
      <p class="alert-message">Waiting on the other party to respond.</p>
    </div>
  {% endif %}

  {% if can_act %}
    <section class="offer-actions well">
      <h3 class="type-title">Your turn</h3>

      {# Terminal actions (accept / decline / withdraw) carry a confirm
         prompt. offer.js bails if the prompt was cancelled (it checks
         event.defaultPrevented), so the AJAX path respects it too. #}
      <form method="post" action="/o/{{ id }}/accept" class="offer-action-form"
            onsubmit="return confirm('Accept this offer for ${{ "%.2f"|format(current_amount) }} and continue to checkout? This is final.');">
        <input type="text" name="message" placeholder="Optional message" />
        <input type="submit" class="mps-submit" value="Accept ${{ "%.2f"|format(current_amount) }}" />
      </form>

      <form method="post" action="/o/{{ id }}/counter" class="offer-action-form" style="margin-top: var(--space-3);">
        <label>Counter offer (USD)</label>
        <input type="number" step="0.01" min="0.01" name="amount" required />
        <input type="text" name="message" placeholder="Optional message" />
        <input type="submit" class="mps-button" value="Counter" />
      </form>

      <form method="post" action="/o/{{ id }}/decline" class="offer-action-form" style="margin-top: var(--space-3);"
            onsubmit="return confirm('Decline this offer? This ends the negotiation and cannot be undone.');">
        <input type="text" name="message" placeholder="Reason (optional)" />
        <input type="submit" class="mps-button" value="Decline" />
      </form>

      {% if actor_party == 0 %}
        <form method="post" action="/o/{{ id }}/withdraw" class="offer-action-form" style="margin-top: var(--space-3);"
              onsubmit="return confirm('Withdraw your offer? This ends the negotiation.');">
          <input type="submit" class="mps-button" value="Withdraw offer" />
        </form>
      {% endif %}
    </section>
  {% elif is_open %}
    <section class="well">
      <p><em>Waiting on the other party.</em></p>
    </section>
  {% endif %}

  {# Accepted-but-not-paid: the buyer gets the pay-now CTA; the seller
     (or shop editor) gets a shareable link to send the buyer, since the
     seller cannot pay on the buyer's behalf. #}
  {% if is_accepted and not is_paid %}
    {% if request.user and request.user.uuid_str == buyer_id %}
      <section class="well offer-pay-cta">
        <form method="post" action="/o/{{ id }}/checkout">
          <input type="submit" class="mps-submit mps-button-green" value="Pay ${{ "%.2f"|format(current_amount) }} now" />
        </form>
        {% if pay_deadline_human %}
        <p class="offer-pay-deadline-note">Payment due <strong{% if pay_deadline_timestamp_ms %} data-pay-deadline="{{ pay_deadline_timestamp_ms }}"{% endif %}>{{ pay_deadline_human }}</strong>, after which this offer auto-expires.</p>
        {% endif %}
        <form method="post" action="/o/{{ id }}/cancel" class="offer-cancel-form" onsubmit="return confirm('Cancel this accepted offer? You will not be able to pay this amount again unless the seller accepts a new offer.');">
          <button type="submit" class="cart-remove-link">Cancel this offer</button>
        </form>
      </section>
    {% elif request.user %}
      <section class="well offer-await-pay">
        <h3 class="type-title">Awaiting payment</h3>
        <p>You accepted <a href="/profile/{{ buyer_handle }}?shop={{ shop_id }}">{{ buyer_name }}</a>&rsquo;s offer at <strong>${{ "%.2f"|format(current_amount) }}</strong>. We emailed them a one-time checkout link &mdash; this offer can be redeemed only once.</p>
        {% if pay_deadline_human %}
        <p class="offer-await-deadline-note">Buyer must pay <strong{% if pay_deadline_timestamp_ms %} data-pay-deadline="{{ pay_deadline_timestamp_ms }}"{% endif %}>{{ pay_deadline_human }}</strong>; the offer auto-expires after that.</p>
        {% endif %}
        <p class="offer-await-share-note">If they need it again, share this same page:</p>
        <div class="offer-pay-link-row">
          <input type="text" readonly class="offer-pay-link" value="{{ request.scheme }}://{{ request.host }}/o/{{ id }}" onclick="this.select();" />
          <button type="button" class="mps-button-small js-only"
                  onclick="if(navigator.clipboard){navigator.clipboard.writeText(this.previousElementSibling.value);this.textContent='Copied!';}else{this.previousElementSibling.select();}">Copy link</button>
        </div>
      </section>
    {% endif %}
  {% endif %}

  <section class="offer-timeline well">
    <h3 class="type-title">History</h3>
    <ol class="offer-events">
      {% for e in events %}
        <li class="offer-event">
          <strong>{{ e.event_human }}</strong>
          {% if e.actor_id %} by <a href="/profile/{{ e.actor_handle }}{% if shop_id %}?shop={{ shop_id }}{% endif %}">{{ e.actor_name }}</a>{% else %} <span class="offer-event-system">(system)</span>{% endif %}
          {% if e.amount is not none %} &middot; ${{ "%.2f"|format(e.amount) }}{% endif %}
          {% if e.message %} &mdash; <em>{{ e.message }}</em>{% endif %}
        </li>
      {% endfor %}
    </ol>
  </section>

</section>
<script src="/static/js/offer.js?v={{ request.git_hash }}"></script>
{% endblock %}
