{% block title %}
  <span class="title-left">Discussion</span>
  <span class="title-right">
    <span class="chat-round">Round {{ cur_round }} / {{ num_rounds }}</span>
    <span class="chat-dot">•</span>
    <span id="countdown" class="chat-countdown" aria-live="polite">00:30</span>
  </span>
{% endblock %}

{% block content %}

<!-- Game info card (unchanged) -->
<div class="card info-card">
  <div class="card__header">
    <h4>Reminder</h4>
  </div>
  <div class="card__body">
    <div class="info-grid two-col">
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Endowment</div>
          <div class="info-val"><span class="badge badge-neutral">{{ endowment }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Group Size</div>
          <div class="info-val"><span class="badge badge-neutral">{{ players_per_group }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Threshold A Requirement</div>
          <div class="info-val"><span class="badge badge-neutral">{{ threshold_one }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Threshold B Requirement</div>
          <div class="info-val"><span class="badge badge-neutral">{{ threshold_zero }}</span></div>
        </div>
      </div>
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Threshold A Gain (only if you play action A)</div>
          <div class="info-val"><span class="badge badge-neutral">{{ public_good }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Threshold B Gain (only if you play action B)</div>
          <div class="info-val"><span class="badge badge-neutral">{{ public_good }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Cost if you play A</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_one }}</span></div>
        </div>
        <div class="info-kv">
          <div class="info-key">Cost if you play B</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_zero }}</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Chat card (unchanged body) -->
<div class="chat-card">
  <div class="chat-header">
    <div class="chat-header__left">
      <h4>Group Chat</h4>
      <div class="chat-subtitle">Chat with your group.</div>
    </div>
  </div>

  <div class="card__body" id="chat-wrapper">
    {{ chat channel=chat_channel }}
  </div>
</div>

<!-- Ready bar (HIDDEN until countdown ends) -->
<div class="card ready-card" id="ready-card" style="display:none">
  <div class="card__body ready-row">
    <div class="ready-status">
      <span class="ready-dot" aria-hidden="true"></span>
      <span id="ready-count" class="ready-text">0/{{ players_per_group }} ready</span>
    </div>
    <button id="ready-btn" type="button" class="btn btn-ready">I’m ready to make my decision</button>
  </div>
</div>


<!-- Hidden Next (we'll click it programmatically) -->
<div id="next-wrap" class="next-wrap" style="display:none">
  {{ next_button }}
</div>

<style>
  /* Title bar */
  .otree-title{
    max-width:900px; margin:6px auto 14px auto !important; padding:6px 2px 0 2px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    font-size:22px !important; font-weight:700 !important; letter-spacing:.2px; color:#111827; border:0;
  }
  .title-left{ line-height:1.1; }
  .title-right{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:#111827; }
  .chat-round{ white-space:nowrap; }
  .chat-dot{ color:#9ca3af; }

  /* Cards */
  .card{ max-width: 900px; margin: 16px auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.06); }
  .card__header{ padding: 14px 18px 10px 18px; border-bottom: 1px solid #f0f2f5; background: #fafafa; border-radius: 10px 10px 0 0; }
  .card__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }

  /* Info grid */
  .info-card{ max-width:900px; margin:0 auto 12px auto; }
  .info-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px; }
  .info-kv{ display:grid; grid-template-columns:1fr auto; align-items:center; }
  .info-key{ color:#6b7280; font-size:13px; }
  .info-val{ font-variant-numeric: tabular-nums; }
  .badge{ display:inline-block; padding:4px 10px; border-radius:999px; line-height:1.1; font-weight:600; font-size:13px; }
  .badge-neutral{ background:#f5f7fb; border:1px solid #e2e8f0; color:#111827; }

  /* Ready bar */
  .ready-card{ max-width:900px; margin:0 auto 12px auto; }
  .ready-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ready-status{ display:inline-flex; align-items:center; gap:8px; }
  .ready-dot{ width:10px; height:10px; border-radius:999px; background:#94a3b8; display:inline-block; }
  .ready-text{ font-weight:600; color:#111827; }

  .btn{ border-radius:8px; padding:10px 16px; font-weight:600; border:1px solid #dbe2f3; background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%); color:#1e3a8a; box-shadow:0 4px 10px rgba(30,91,255,.08); cursor:pointer; }
  .btn:hover{ background:linear-gradient(180deg,#eaf0ff 0%,#dee7ff 100%); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .btn-ready{ white-space:nowrap; }

  /* Chat visuals */
  .chat-card{ max-width: 900px; margin: 0 auto 16px auto; border: 1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06); }
  .chat-header{
    padding:14px 18px 10px 18px; border-bottom:1px solid #f0f2f5; background:#fafafa; border-radius:10px 10px 0 0;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .chat-header__left h4{ margin:0; font-weight:600; font-size:18px; }
  .chat-subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }

  #chat-wrapper .otree-chat, #chat-wrapper .otree-chat__messages, #chat-wrapper .otree-chat__composer { width:100% !important; max-width:none !important; }
  #chat-wrapper .otree-chat__messages{
    max-height:360px; overflow-y:auto; padding:10px 12px; border:1px solid #eef2f7; border-radius:8px; background:#fbfcfe;
    margin:0 !important; box-sizing:border-box;
  }
  #chat-wrapper .otree-chat__messages li{
    list-style:none; margin:8px 0; padding:8px 10px; border-radius:8px; background:#fff; border:1px solid #f1f5f9; box-shadow:0 1px 0 rgba(0,0,0,.03);
  }
  #chat-wrapper .otree-chat__sender{ font-weight:600; color:#374151; margin-right:6px; }
  #chat-wrapper .otree-chat__timestamp{ color:#9ca3af; font-size:12px; margin-left:6px; }
  #chat-wrapper .otree-chat__message{ margin-top:4px; white-space:pre-wrap; line-height:1.35; }

  /* Hidden next area (we auto-click it) */
  .next-wrap{ max-width:900px; margin:8px auto 0 auto; display:flex; justify-content:flex-end; }
</style>

<script>
  // --- 30s countdown that reveals the Ready bar ---
  (function() {
    const DURATION = 30; // seconds
    const key = 'chat_countdown_start_round_{{ cur_round }}';
    const countdownEl = document.getElementById('countdown');
    const readyCard = document.getElementById('ready-card');

    // start time persisted per round
    let start = Number(sessionStorage.getItem(key));
    if (!start) {
      start = Date.now();
      sessionStorage.setItem(key, String(start));
    }

    function fmt(sec){
      const s = Math.max(0, sec|0);
      const mm = String(Math.floor(s/60)).padStart(2,'0');
      const ss = String(s%60).padStart(2,'0');
      return mm + ':' + ss;
    }

    function showReadyBar() {
      if (readyCard && readyCard.style.display === 'none') {
        readyCard.style.display = 'block';
      }
    }

    function tick() {
      const elapsed = Math.floor((Date.now() - start)/1000);
      const remain = Math.max(0, DURATION - elapsed);
      if (countdownEl) countdownEl.textContent = fmt(remain);
      if (remain <= 0) {
        showReadyBar();
        clearInterval(timer);
      }
    }

    tick();
    const timer = setInterval(tick, 250);
  })();

  // --- Live wiring ---
  // oTree injects liveSend & liveRecv on pages with live_method.
  // We init the counter & hook up the button.
  (function(){
    const btn = document.getElementById('ready-btn');
    const countEl = document.getElementById('ready-count');
    const nextWrap = document.getElementById('next-wrap');

    // initialize: ask server for current count (in case others already clicked)
    document.addEventListener('DOMContentLoaded', function(){
      if (typeof liveSend === 'function') {
        liveSend({type: 'ping'});
      }
    });

    // button click -> mark ready once
    if (btn) {
      btn.addEventListener('click', function(){
        if (btn.disabled) return;
        btn.disabled = true;
        btn.textContent = 'Waiting for others…';
        const dot = document.querySelector('.ready-dot');
        if (dot) dot.style.background = '#1e3a8a';
        if (typeof liveSend === 'function') {
          liveSend({type: 'ready'});
        }
      });
    }

    // receive updates/broadcasts from server
    window.liveRecv = function(data){
      // update count
      if (typeof data.ready_count !== 'undefined' && typeof data.total !== 'undefined') {
        if (countEl) countEl.textContent = data.ready_count + '/' + data.total + ' ready';
      }
      // everyone ready -> auto advance
      if (data.advance) {
        // Reveal hidden next area and click the button if present, otherwise submit form.
        if (nextWrap) nextWrap.style.display = 'flex';
        const nextBtn = nextWrap ? nextWrap.querySelector('button, .btn, input[type="submit"]') : null;
        if (nextBtn) { nextBtn.click(); }
        else {
          const form = document.querySelector('form');
          if (form) form.submit();
        }
      }
    };
  })();
</script>

{% endblock %}