{{ block title }}Bargaining Phase{{ endblock }}
{{ block content }}
{% if round_number == 2 %}
    <strong>Practice Round</strong>
{% else %}
    Round <strong>{{ display_round }}</strong> of <strong>{{ display_total }}</strong>
{% endif %}

<style>
#bargaining-wrap { max-width: 740px; margin: 0 auto; }

/* ── Visual slider (read-only, display only) ── */
#track-outer {
  position: relative;
  margin: 80px 24px 0;
  user-select: none;
  -webkit-user-select: none;
}
#track-bg {
  position: relative;
  height: 28px;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
}
.tick { position: absolute; top: 0; width: 2px; height: 28px; background: rgba(255,255,255,0.35); pointer-events: none; z-index: 6; }
.tick-major { background: rgba(255,255,255,0.80); }
#tick-canvas { position: absolute; top: 0; left: 0; right: 0; height: 28px; pointer-events: none; z-index: 6; }
#tick-label-row { position: relative; height: 20px; margin-top: 4px; margin-bottom: 80px; }
.tick-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; color: #adb5bd; white-space: nowrap; pointer-events: none; user-select: none; }
#deal-fill { position: absolute; top: 0; bottom: 0; background: rgba(25,135,84,.35); border-radius: 4px; display: none; pointer-events: none; z-index: 5; }
.track-endpoint { position: absolute; top: 14px; transform: translateY(-50%); font-size: 12px; color: #6c757d; font-weight: 500; }
#lbl-min { right: calc(100% + 8px); }
#lbl-max { left:  calc(100% + 8px); }

/* Thumbs are now purely visual — no drag cursor */
.price-thumb { position: absolute; top: 14px; width: 8px; height: 52px; border-radius: 4px; transform: translate(-50%,-50%); z-index: 10; transition: left .12s linear; box-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
.thumb-buyer  { background: #0d6efd; }
.thumb-seller { background: #dc3545; }
.price-bubble { position: absolute; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 5px; pointer-events: none; line-height: 1.3; }
#seller-bubble { bottom: calc(100% + 10px); }
#seller-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent; }
#buyer-bubble { top: calc(100% + 10px); }
#buyer-bubble::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent; }
.role-label { position: absolute; top: calc(100% + 46px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; color: #6c757d; }

/* ── Price input box ── */
#price-input-section {
  margin-top: 24px;
  padding: 18px 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#price-input-section label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}
#price-input {
  width: 110px;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  border: 2px solid #adb5bd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
#price-input:focus { border-color: #0d6efd; }
#price-input:disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; }
#submit-price-btn {
  padding: 9px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#submit-price-btn:hover { background: #0b5ed7; }
#submit-price-btn:disabled { background: #adb5bd; cursor: not-allowed; }
#price-feedback { font-size: 0.85rem; color: #dc3545; font-style: italic; }

/* ── Timer ── */
#timer-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.t-card { flex: 1 1 160px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 10px 14px; text-align: center; }
.t-card .t-label { font-size: 11px; text-transform: uppercase; color: #6c757d; letter-spacing: .5px; }
.t-card .t-value { font-size: 26px; font-weight: 700; }
#card-remaining .t-value { color: #0d6efd; }

#status-msg { margin-top: 18px; min-height: 44px; }

/* ── Appraiser value box ── */
#appraiser-box {
  display: none;
  background: #f3eeff;
  border: 3px solid #6f42c1;
  border-radius: 16px;
  padding: 16px 32px;
  text-align: center;
  margin-top: 16px;
}
#appraiser-box .ap-label { font-size: 0.85rem; font-weight: 600; color: #6f42c1; margin-bottom: 4px; }
#appraiser-box .ap-value { font-size: 2.4rem; font-weight: 800; color: #6f42c1; }

/* ── Invite button section ── */
#invite-section {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fff8e1;
  border: 1px solid #ffc107;
  border-radius: 10px;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#invite-btn {
  background: #6f42c1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#invite-btn:hover { background: #5a30a8; }
#invite-btn:disabled { background: #adb5bd; cursor: not-allowed; }
#invite-timer-label { font-size: 0.85rem; color: #664d03; }
#invite-countdown { font-size: 1.1rem; font-weight: 700; color: #dc3545; }
#invite-status { font-size: 0.85rem; color: #6c757d; font-style: italic; }
</style>

<div id="bargaining-wrap">

  {% if round_number == 2 %}
  <div class="alert alert-warning text-center fw-bold mb-3" style="font-size:1.2rem;">
    ⚠️ Practice Round — This round does not count toward your payment
  </div>
  {% endif %}

  {# ── Seller reminder ── #}
  {% if role == 'Seller' %}
  <div class="alert alert-info text-start mb-3" id="seller-reminder">
    <strong>Reminder:</strong>
    <ol class="mt-2 mb-0">
      <li>Only the buyer can invite the expert, and the buyer pays for the appraisal. You cannot call the expert and never pay for it.</li>
      <li>In each round, you are matched with a buyer who is paired with the same expert across all 20 rounds.</li>
      <li>If the buyer invites the expert, the appraisal will be revealed to both you and the buyer at no cost to you. If the buyer does not invite the expert, no appraisal will be shown.</li>
      <li>The expert's appraisal is based on a 10-point range that contains the true value, but the expert may report any number between 100 and 400.</li>
      <li>The final realized value will always be drawn from the 10-point range observed by the expert and will be revealed at the end of the round.</li>
    </ol>
  </div>
  {% endif %}

  {# ── Buyer reminder ── #}
  {% if is_buyer %}
  <div class="alert alert-info text-start mb-3" id="buyer-reminder">
    <strong>Reminder:</strong>
    <ol class="mt-2 mb-0">
      <li>Only you can invite the expert, and you pay 5 points for the appraisal.</li>
      <li>You are paired with the same expert across all 20 rounds.</li>
      <li>If you invite the expert, the appraisal will be revealed to both you and the seller. If you do not invite the expert, no appraisal will be shown.</li>
      <li>The expert's appraisal is based on a 10-point range that contains the true value, but the expert may report any number between 100 and 400.</li>
      <li>The final realized value will always be drawn from the 10-point range observed by the expert and will be revealed at the end of the round.</li>
    </ol>
  </div>
  {% endif %}

  <p class="text-muted mb-1">
    You are the <strong>{{ role }}</strong>.
    The <strong style="color:#0d6efd">blue marker</strong> is the Buyer's current price;
    the <strong style="color:#dc3545">red marker</strong> is the Seller's current price.
  </p>

  {# ── Visual price track (read-only display) ── #}
  <div id="track-outer">
    <span class="track-endpoint" id="lbl-min">{{ price_min }}</span>
    <span class="track-endpoint" id="lbl-max">{{ price_max }}</span>
    <div id="track-bg">
      <div id="deal-fill"></div>
    </div>
    <div id="tick-canvas"></div>
    <div id="tick-label-row"></div>

    <div class="price-thumb thumb-buyer" id="buyer-thumb" data-role="buyer">
      <div class="price-bubble" id="buyer-bubble">0</div>
      <div class="role-label">Buyer{% if is_buyer %}&nbsp;(you){% endif %}</div>
    </div>

    <div class="price-thumb thumb-seller" id="seller-thumb" data-role="seller">
      <div class="price-bubble" id="seller-bubble">400</div>
      <div class="role-label">Seller{% if role == 'Seller' %}&nbsp;(you){% endif %}</div>
    </div>
  </div>

  {# ── Price input box ── #}
  <div id="price-input-section">
    <label for="price-input">
      {% if is_buyer %}Enter your offer (0–400):{% else %}Enter your offer (0–400):{% endif %}
    </label>
    <input type="number" id="price-input" min="{{ price_min }}" max="{{ price_max }}"
           value="{% if is_buyer %}0{% else %}400{% endif %}" />
    <button type="button" id="submit-price-btn">Submit (or press Enter)</button>
    <span id="price-feedback"></span>
  </div>

  {# ── Invite button (Buyer only) ── #}
  <div id="invite-section" style="display:{% if is_buyer %}flex{% else %}none{% endif %};">
    <button id="invite-btn" type="button">Invite Expert</button>
    <div>
      <div id="invite-timer-label">Window closes in: <span id="invite-countdown">{{ invite_window }}s</span></div>
      <div id="invite-status"></div>
    </div>
  </div>

  {# ── Appraiser value box (shown when invited) ── #}
  <div id="appraiser-box">
    <div class="ap-label">Expert's Appraisal</div>
    <div class="ap-value" id="appraiser-val-display">—</div>
  </div>

  <div id="timer-row">
    <div class="t-card" id="card-remaining">
      <div class="t-label">Time Remaining</div>
      <div class="t-value" id="remaining-val">{{ max_seconds }}s</div>
    </div>
  </div>

  <div id="status-msg"></div>

</div>

<script>
(function () {

  const ROLE         = "{{ role }}";
  const IS_BUYER     = {% if is_buyer %}true{% else %}false{% endif %};
  const PRICE_MIN    = {{ price_min }};
  const PRICE_MAX    = {{ price_max }};
  const MAX_SEC      = {{ max_seconds }};
  const INVITE_WIN   = {{ invite_window }};
  const START_MS     = {{ round_start_ms }};

  // Pre-loaded appraiser value if already invited (e.g. page refresh)
  const PRELOAD_APPRAISER = {% if already_invited %}{{ appraiser_value }}{% else %}null{% endif %};

  let buyerPos  = 0;
  let sellerPos = 400;
  let myPos     = IS_BUYER ? 0 : 400;
  let ACTIVE    = true;
  let inviteDecisionMade = false;

  const trackBg             = document.getElementById('track-bg');
  const dealFill            = document.getElementById('deal-fill');
  const buyerThumb          = document.getElementById('buyer-thumb');
  const sellerThumb         = document.getElementById('seller-thumb');
  const buyerBubble         = document.getElementById('buyer-bubble');
  const sellerBubble        = document.getElementById('seller-bubble');
  const remainingEl         = document.getElementById('remaining-val');
  const statusEl            = document.getElementById('status-msg');
  const inviteSection       = document.getElementById('invite-section');
  const inviteBtn           = document.getElementById('invite-btn');
  const inviteCountdown     = document.getElementById('invite-countdown');
  const appraiserBox        = document.getElementById('appraiser-box');
  const appraiserValDisplay = document.getElementById('appraiser-val-display');
  const buyerReminder       = document.getElementById('buyer-reminder');
  const priceInput          = document.getElementById('price-input');
  const submitBtn           = document.getElementById('submit-price-btn');
  const priceFeedback       = document.getElementById('price-feedback');

  // Style bubble arrow colours
  function styleBubble(el, color, isBelow) {
    el.style.background = color;
    const s = document.createElement('style');
    if (isBelow) s.textContent = `#${el.id}::before { border-bottom-color: ${color}; }`;
    else         s.textContent = `#${el.id}::after  { border-top-color:    ${color}; }`;
    document.head.appendChild(s);
  }
  styleBubble(buyerBubble,  '#0d6efd', true);
  styleBubble(sellerBubble, '#dc3545', false);

  const TICKER = setInterval(tick, 200);

  function pct(val) { return ((val - PRICE_MIN) / (PRICE_MAX - PRICE_MIN)) * 100; }

  // Update the visual track to reflect current buyerPos / sellerPos
  function render() {
    buyerThumb.style.left   = pct(buyerPos) + '%';
    sellerThumb.style.left  = pct(sellerPos) + '%';
    buyerBubble.textContent  = buyerPos;
    sellerBubble.textContent = sellerPos;
    if (buyerPos >= sellerPos) {
      dealFill.style.left    = pct(sellerPos) + '%';
      dealFill.style.width   = (pct(buyerPos) - pct(sellerPos)) + '%';
      dealFill.style.display = 'block';
    } else {
      dealFill.style.display = 'none';
    }
  }

  function advancePage() { const f = document.querySelector('form'); if (f) f.submit(); }

  function hardStop() {
    if (!ACTIVE) return;
    ACTIVE = false;
    clearInterval(TICKER);
    if (priceInput)  { priceInput.disabled  = true; }
    if (submitBtn)   { submitBtn.disabled   = true; }
    if (inviteSection) inviteSection.style.display = 'none';
  }

  function hideInviteSection() {
    if (inviteSection) inviteSection.style.display = 'none';
    if (buyerReminder) buyerReminder.style.display = 'none';
  }

  function showAppraiserValue(val) {
    if (val !== null && val !== undefined) {
      appraiserValDisplay.textContent = val;
      appraiserBox.style.display = 'block';
    }
  }

  function elapsed_total() { return (Date.now() - START_MS) / 1000; }

  function showStatus(html, type) {
    statusEl.innerHTML = `<div class="alert alert-${type} mt-2">${html}</div>`;
  }

  // If appraiser already invited (e.g. page reload), show value immediately
  if (PRELOAD_APPRAISER !== null) {
    showAppraiserValue(PRELOAD_APPRAISER);
    inviteDecisionMade = true;
    hideInviteSection();
  }

  // ── Price input submission ──
  function submitPrice() {
    if (!ACTIVE) return;
    const raw = priceInput.value.trim();
    const val = parseInt(raw, 10);

    // Validate
    if (isNaN(val) || val < PRICE_MIN || val > PRICE_MAX) {
      priceFeedback.textContent = 'Please enter a whole number between ' + PRICE_MIN + ' and ' + PRICE_MAX + '.';
      return;
    }
    priceFeedback.textContent = '';

    // Update own position — do NOT clear the input box, leave it at submitted value
    myPos = val;
    if (IS_BUYER) buyerPos  = val;
    else          sellerPos = val;

    render();

    // Send position update to server (same message type as before)
    liveSend({ type: 'position_update', value: val });
  }

  // Submit on button click
  submitBtn.addEventListener('click', submitPrice);

  // Submit on Enter key in input box
  priceInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      submitPrice();
    }
  });

  // ── Invite button ──
  if (inviteBtn) {
    inviteBtn.addEventListener('click', function () {
      if (!ACTIVE || inviteDecisionMade) return;
      inviteDecisionMade = true;
      hideInviteSection();
      liveSend({ type: 'invite_appraiser', time: elapsed_total() });
    });
  }

  // ── Timer tick ──
  function tick() {
    if (!ACTIVE) { clearInterval(TICKER); return; }

    const el  = elapsed_total();
    const rem = Math.max(0, MAX_SEC - el);

    remainingEl.textContent = rem.toFixed(1) + 's';
    remainingEl.style.color = rem <= 10 ? '#dc3545' : '';

    // Invite window countdown
    if (IS_BUYER && !inviteDecisionMade) {
      const invRem = Math.max(0, INVITE_WIN - el);
      if (inviteCountdown) inviteCountdown.textContent = invRem.toFixed(1) + 's';
      if (invRem <= 0) {
        inviteDecisionMade = true;
        hideInviteSection();
        liveSend({ type: 'invite_declined' });
      }
    }

    if (rem <= 0) {
      hardStop();
      liveSend({ type: 'timeout', reason: 'timer', time_in_round: Math.round(el), total_time: Math.round(el) });
    }
  }

  // ── Live receive from server ──
  window.liveRecv = function (data) {
    switch (data.type) {

      case 'position_update':
        if (!ACTIVE) return;
        // Update positions from server broadcast, but keep our own position
        buyerPos  = data.buyer_pos;
        sellerPos = data.seller_pos;
        if (IS_BUYER) buyerPos  = myPos;
        else          sellerPos = myPos;
        render();
        // Check for deal: buyer price >= seller price
        if (buyerPos >= sellerPos) {
          const el    = elapsed_total();
          const price = sellerPos;
          hardStop();
          liveSend({ type: 'deal', price, time_in_round: Math.round(el), total_time: Math.round(el) });
        }
        break;

      case 'deal_confirmed':
        hardStop();
        showStatus(`🤝 <strong>Deal confirmed!</strong> Price: <strong>${data.price}</strong>`, 'success');
        setTimeout(advancePage, 1500);
        break;

      case 'timeout':
        hardStop();
        showStatus('⏰ <strong>Time is up!</strong> The bargaining phase has ended without a deal.', 'warning');
        setTimeout(advancePage, 1500);
        break;

      case 'appraiser_invited':
        showAppraiserValue(data.appraiser_value);
        break;
    }
  };

  // Initial render with starting positions
  render();
  liveSend({ type: 'position_update', value: myPos });

  // Draw tick marks on the track
  setTimeout(function () {
    const canvas = document.getElementById('tick-canvas');
    const lbr    = document.getElementById('tick-label-row');
    for (let v = PRICE_MIN + 20; v < PRICE_MAX; v += 20) {
      const p    = pct(v) + '%';
      const tick = document.createElement('div');
      tick.className  = 'tick' + (v % 100 === 0 ? ' tick-major' : '');
      tick.style.left = p;
      canvas.appendChild(tick);
      const lbl = document.createElement('span');
      lbl.className   = 'tick-label';
      lbl.style.left  = p;
      lbl.textContent = v;
      lbr.appendChild(lbl);
    }
  }, 0);

})();
</script>
{{ endblock }}