{{ extends "global/Page.html" }}
{{ block title }}Codebreaker Session{{ endblock }}

{{ block content }}
<div class="ds-page" style="max-width:900px;">

  <!-- ══ TREATMENT: Persistent reminder banner ══ -->
  {{ if is_treatment }}
  <div class="persistent-banner">
    <span style="font-size:16px;flex-shrink:0;">ℹ️</span>
    <span><strong>Notice:</strong> Your codebreaker has been assigned back-to-back client
          sessions today and does not have control over their schedule — it is set by the
          research team.</span>
  </div>
  {{ endif }}

  <!-- ══ HUD ══ -->
  <div class="task-hud">
    <div class="hud-tile">
      <div class="hud-val" id="timer-display">10:00</div>
      <div class="hud-label">Time Remaining</div>
    </div>
    <div class="hud-tile">
      <div class="hud-val" id="earnings-display">$0.00</div>
      <div class="hud-label">Current Earnings</div>
    </div>
    <div class="hud-tile">
      <div class="hud-val" id="count-display">0</div>
      <div class="hud-label">Submitted</div>
    </div>
  </div>

  <!-- ══ MAIN TASK PANEL ══ -->
  <div class="task-panel">

    <!-- LEFT: Sentence queue -->
    <div class="sentence-queue">
      <div class="queue-title">Available Sentences</div>
      <div class="queue-hint">💡 Start with the longest sentences to maximise your bonus.</div>
      <div id="sentence-list"></div>
    </div>

    <!-- RIGHT: Action + result -->
    <div id="right-col" style="display:flex;flex-direction:column;gap:12px;">

      <!-- Last result (hidden until first result) -->
      <div id="result-panel" class="result-panel" style="display:none;"></div>

      <!-- Action panel -->
      <div id="action-panel" class="action-panel">

        <!-- State A: nothing selected -->
        <div id="state-empty">
          <div class="rp-title">No Sentence Selected</div>
          <p style="font-size:13px;color:#718096;margin:0;">
            Click a sentence on the left to select it, then press Submit.
          </p>
        </div>

        <!-- State B: sentence selected -->
        <div id="state-selected" style="display:none;">
          <div class="rp-title">Submit Selected Sentence</div>
          <div style="font-size:13px;color:#4a5568;margin-bottom:14px;">
            <strong id="sel-label"></strong>&ensp;&middot;&ensp;
            <span id="sel-steps"></span>&ensp;&middot;&ensp;
            <span id="sel-earn"></span>
          </div>
          <button type="button" class="btn btn-primary" id="submit-btn" onclick="submitSentence()">
            Submit Sentence
          </button>
        </div>

        <!-- State C: processing (word-by-word progress bar) -->
        <div id="state-processing" style="display:none;">
          <div class="rp-title">Decoding in Progress&hellip;</div>
          <div class="decode-progress-wrap">
            <div class="decode-progress-bar">
              <div class="decode-progress-fill" id="progress-fill"></div>
            </div>
            <div class="decode-progress-label" id="progress-label">Starting&hellip;</div>
          </div>
          <p style="font-size:13px;color:#718096;text-align:center;margin:8px 0 0;">
            Your codebreaker is working on <strong id="proc-label"></strong>.
          </p>
          <!-- Shown only when timer hits 0 mid-decode -->
          <div id="time-up-notice" style="display:none;margin-top:12px;padding:10px 14px;
               background:#fffbeb;border:1.5px solid #f6ad55;border-radius:8px;
               font-size:13px;color:#92400e;text-align:center;">
            ⏰ <strong>Time's up</strong> — your session is finishing the current sentence before moving on.
          </div>
        </div>

      </div><!-- /action-panel -->

      <!-- End Session Early (shown after first result) -->
      <button type="button" class="btn btn-green" id="end-btn" style="display:none;" onclick="exitEarly()">
        End Session Early
      </button>
      <div id="end-hint" style="display:none;font-size:11px;color:#a0aec0;text-align:center;margin-top:-8px;">
        Your earnings are locked in when you end the session.
      </div>

    </div><!-- /right-col -->
  </div><!-- /task-panel -->

</div><!-- /ds-page -->

<!-- Hidden oTree next button — triggered by JS when session ends -->
<div style="display:none;" id="next-btn-wrap">{{ next_button }}</div>

<script>
/* ─────────────────────────────────────────────────────────
   CONSTANTS FROM SERVER
───────────────────────────────────────────────────────── */
const SENTENCES      = js_vars.sentences;        // sorted high→low by word_count
const EPW            = js_vars.earnings_per_word; // $0.04
const DURATION       = js_vars.session_duration;  // 600 s
const RUSH_THRESHOLD = js_vars.rush_threshold;    // min total_service_time across sentences

/* ─────────────────────────────────────────────────────────
   STATE
───────────────────────────────────────────────────────── */
let timeLeft         = DURATION;
let timerInterval    = null;
let selectedId       = null;
let submittedIds     = new Set();
let processingId     = null;
let firstResult      = false;
let totalEarnings    = 0.00;
let results          = {};      // sentence_id → result payload
let waitingToAdvance = false;   // true when timer expired mid-decode

/* ─────────────────────────────────────────────────────────
   TIMER
───────────────────────────────────────────────────────── */
function fmt(s) {
  const m   = Math.floor(s / 60);
  const sec = String(s % 60).padStart(2, '0');
  return `${m}:${sec}`;
}

function startTimer() {
  document.getElementById('timer-display').textContent = fmt(DURATION);
  timerInterval = setInterval(() => {
    timeLeft--;
    const el = document.getElementById('timer-display');
    el.textContent = fmt(Math.max(timeLeft, 0));

    // Colour progression: amber at 30 s, red at 0
    if (timeLeft <= 30 && timeLeft > 0) {
      el.style.color = '#d97706';   // amber: time is getting low
    }
    if (timeLeft <= 0) {
      el.style.color = '#e53e3e';   // red: time is up
      clearInterval(timerInterval);
      if (processingId !== null) {
        // A sentence is mid-decode — keep the interface and progress bar live.
        // Page advances automatically once the decode result arrives.
        waitingToAdvance = true;
        const notice = document.getElementById('time-up-notice');
        if (notice) notice.style.display = 'block';
      } else {
        advancePage();
      }
    }
  }, 1000);
}

let _advancing = false;   // guard against double-advance
function advancePage() {
  if (_advancing) return;
  _advancing = true;
  const wrap = document.getElementById('next-btn-wrap');
  wrap.style.display = 'block';
  const btn = wrap.querySelector('button') || wrap.querySelector('[type=submit]');
  if (btn) { btn.click(); } else { document.querySelector('form').submit(); }
}

/* ─────────────────────────────────────────────────────────
   TIER HELPERS
───────────────────────────────────────────────────────── */
function tierInfo(tier) {
  switch (tier) {
    case 'high':     return { cls: 'tier-high',     label: 'High'     };
    case 'moderate': return { cls: 'tier-moderate', label: 'Moderate' };
    default:         return { cls: 'tier-low',      label: 'Low'      };
  }
}

/* ─────────────────────────────────────────────────────────
   RENDER SENTENCE LIST
───────────────────────────────────────────────────────── */
function renderList() {
  const container = document.getElementById('sentence-list');
  container.innerHTML = '';

  SENTENCES.forEach(s => {
    const submitted  = submittedIds.has(s.id);
    const processing = (processingId === s.id);
    const selected   = (selectedId   === s.id);
    const res        = results[s.id];
    const ti         = tierInfo(s.tier);
    const maxEarn    = (s.word_count * EPW).toFixed(2);

    let earnText = `up to $${maxEarn}`;
    if (res)        earnText = `$${res.earnings.toFixed(2)} earned`;
    if (processing) earnText = 'decoding…';

    let cls = 'sentence-item';
    if (submitted)      cls += ' submitted';
    else if (selected)  cls += ' selected';

    const preview = s.cipher.length > 68 ? s.cipher.slice(0, 68) + '…' : s.cipher;

    const div = document.createElement('div');
    div.className  = cls;
    div.dataset.id = s.id;
    div.innerHTML  = `
      <div class="si-top">
        <span class="si-id">Sentence ${s.id}
          ${submitted  ? ' &middot; ✓ Done'       : ''}
          ${processing ? ' &middot; ⏳ Decoding…' : ''}
        </span>
        <span class="si-steps">${s.word_count} steps</span>
        <span class="si-earn">${earnText}</span>
      </div>
      <div class="si-cipher">${preview}</div>
      <div class="si-meta">
        <span><span class="tier-badge ${ti.cls}">${ti.label} Complexity</span></span>
      </div>`;

    if (!submitted && !processing && processingId === null) {
      div.addEventListener('click', () => selectSentence(s.id));
    }

    container.appendChild(div);
  });

  updateActionPanel();
}

/* ─────────────────────────────────────────────────────────
   ACTION PANEL STATE MACHINE
───────────────────────────────────────────────────────── */
function updateActionPanel() {
  const stEmpty = document.getElementById('state-empty');
  const stSel   = document.getElementById('state-selected');
  const stProc  = document.getElementById('state-processing');
  const endBtn  = document.getElementById('end-btn');
  const endHint = document.getElementById('end-hint');

  const showEnd = firstResult && processingId === null;
  endBtn.style.display  = showEnd ? 'block' : 'none';
  endHint.style.display = showEnd ? 'block' : 'none';

  if (processingId !== null) {
    stEmpty.style.display = 'none';
    stSel.style.display   = 'none';
    stProc.style.display  = 'block';
    return;
  }

  stProc.style.display = 'none';

  if (selectedId === null) {
    stEmpty.style.display = 'block';
    stSel.style.display   = 'none';
  } else {
    stEmpty.style.display = 'none';
    stSel.style.display   = 'block';
    const s = SENTENCES.find(x => x.id === selectedId);
    if (s) {
      document.getElementById('sel-label').textContent = `Sentence ${s.id}`;
      document.getElementById('sel-steps').textContent = `${s.word_count} decoding steps`;
      document.getElementById('sel-earn').textContent  = `up to $${(s.word_count * EPW).toFixed(2)}`;
    }
  }
}

/* ─────────────────────────────────────────────────────────
   SELECTION & SUBMISSION
───────────────────────────────────────────────────────── */
function selectSentence(id) {
  if (submittedIds.has(id) || processingId !== null) return;
  selectedId = (selectedId === id) ? null : id;   // toggle
  renderList();
}

function submitSentence() {
  if (selectedId === null || processingId !== null) return;
  const sid = selectedId;
  processingId = sid;
  selectedId   = null;

  // Reset progress bar
  document.getElementById('progress-fill').style.width    = '0%';
  document.getElementById('progress-label').textContent   = 'Starting…';
  document.getElementById('proc-label').textContent       = `Sentence ${sid}`;
  renderList();

  liveSend({ type: 'submit', sentence_id: sid, time_remaining: timeLeft });
}

/* ─────────────────────────────────────────────────────────
   WORD-BY-WORD PROGRESS BAR
   Drives a setTimeout chain, one tick per word, using the
   actual Phase-1 per-word processing times.
───────────────────────────────────────────────────────── */
function startProgressBar(sid, wordTimes) {
  let wordsDone = 0;
  const total   = wordTimes.length;
  const fill    = document.getElementById('progress-fill');
  const label   = document.getElementById('progress-label');

  function decodeNextWord() {
    if (wordsDone >= total) {
      // All words decoded — request result from server
      liveSend({ type: 'get_result', sentence_id: sid });
      return;
    }
    const delay = wordTimes[wordsDone] * 1000;
    wordsDone++;
    const pct = (wordsDone / total) * 100;
    fill.style.width    = pct + '%';
    label.textContent   = `Decoding word ${wordsDone} of ${total}…`;
    setTimeout(decodeNextWord, delay);
  }

  setTimeout(decodeNextWord, 0);
}

/* ─────────────────────────────────────────────────────────
   LIVE RECV
───────────────────────────────────────────────────────── */
function liveRecv(data) {

  if (data.type === 'ack') {
    // Drive the progress bar with real Phase-1 per-word times
    startProgressBar(data.sentence_id, data.word_times);
    return;
  }

  if (data.type === 'result') {
    const sid     = data.sentence_id;
    submittedIds.add(sid);
    results[sid]  = data;
    processingId  = null;
    firstResult   = true;
    totalEarnings = data.total_earnings;

    document.getElementById('earnings-display').textContent = `$${totalEarnings.toFixed(2)}`;
    document.getElementById('count-display').textContent    = submittedIds.size;

    showResult(data);
    renderList();

    // If the timer already expired while this decode was in flight, advance now.
    if (waitingToAdvance) {
      advancePage();
      return;
    }
    return;
  }

  if (data.type === 'exit_confirmed') {
    advancePage();
  }
}

/* ─────────────────────────────────────────────────────────
   RESULT DISPLAY  (word-level)
   Correct words shown normally; wrong words shown in red
   as their cipher form (what the codebreaker produced).
───────────────────────────────────────────────────────── */
function showResult(data) {
  const panel  = document.getElementById('result-panel');
  const errSet = new Set(data.error_word_indices);
  const words  = data.decoded_words;

  const html = words.map((w, i) =>
    errSet.has(i)
      ? `<span class="error-word">${w}</span>`
      : w
  ).join(' ');

  const totalWords = data.correct_words + data.num_word_errors;

  panel.innerHTML = `
    <div class="rp-title">Latest Result — Sentence ${data.sentence_id}</div>
    <div class="decoded-text">${html}</div>
    <div class="result-meta">
      ${data.correct_words} of ${totalWords} words correct
      &nbsp;&middot;&nbsp;
      ${data.num_word_errors} error${data.num_word_errors !== 1 ? 's' : ''}
      ${data.num_word_errors > 0 ? ' <span style="color:#e53e3e;">(shown in red)</span>' : ''}
    </div>
    <div class="earn-update">+ $${data.earnings.toFixed(2)} added to your earnings</div>`;
  panel.style.display = 'block';
}

/* ─────────────────────────────────────────────────────────
   EARLY EXIT
───────────────────────────────────────────────────────── */
function exitEarly() {
  if (!firstResult) return;
  clearInterval(timerInterval);
  document.getElementById('end-btn').disabled = true;
  liveSend({ type: 'exit_early' });
}

/* ─────────────────────────────────────────────────────────
   INIT
───────────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function () {
  renderList();
  startTimer();
});
</script>
{{ endblock }}