{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
<link rel="stylesheet" href="{% static 'threshold_hiring/style.css' %}">
<style>
  body {
    --condition-stripe: {% if condition == 'aware' %}#B5451B{% else %}#1D3D5C{% endif %};
  }
  .container, .container-fluid, #otree-content, .col-md-8, .col-md-12 {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #reviewed-deck .th-resume-card,
  #unreviewed-deck .th-resume-card {
    flex: 0 0 auto;
    width: 76px;
    max-width: 76px;
    will-change: transform;
  }
  #reviewed-deck .th-card-body,
  #unreviewed-deck .th-card-body {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  #reviewed-deck .th-stage1-divider {
    align-self: stretch;
    min-height: 130px;
    border-left: 2px dotted #8f8f8f;
    margin: 0 10px;
    position: relative;
    flex: 0 0 auto;
  }
  #reviewed-deck .th-stage1-divider-label {
    position: absolute;
    top: -14px;
    left: 8px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    background: var(--surface);
    padding: 0 4px;
  }
</style>
{% endblock %}

{% block content %}
<div class="th-shell">

  <!-- Sidebar -->
  <aside class="th-sidebar">

    <div>
      <div class="th-section-label">Your task</div>
      <div class="th-task-box">
        You are a <strong>resume screener</strong>. Your job is to decide which candidates should advance to interviews.
      </div>
      {% if condition == 'aware' %}
        <div class="th-threshold-badge">⚠ Top K this round: {{ top_k }}</div>
        <div style="font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6;">
          The top <strong>{{ top_k }}</strong> clicked candidates by Stage 1 score will advance.
        </div>
      {% else %}
        <div class="th-threshold-badge blind">Advancement rule: hidden</div>
        <div style="font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6;">
          Evaluate all candidates carefully.
        </div>
      {% endif %}
    </div>

    <div>
      <div class="th-section-label">Click budget</div>
      <div class="th-budget-wrap">
        <div class="th-budget-number">
          <span id="budget-remaining">{{ budget_remaining }}</span>
          <span>/ {{ total_clicks }}</span>
        </div>
        <div class="th-budget-track">
          <div class="th-budget-fill" id="budget-fill"
               style="width: {{ budget_remaining_pct }}%"></div>
        </div>
        <div style="font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:4px;">
          {{ total_clicks }} clicks per round. Unused clicks do not carry over.
        </div>
      </div>
    </div>

    <div>
      <div class="th-section-label">Signal log</div>
      <div class="th-click-log" id="click-log">
        <div style="font-size:12px;color:var(--text3);font-style:italic;">No clicks yet.</div>
      </div>
    </div>

  </aside>

  <!-- Main content -->
  <main class="th-content th-content--wide">

    <div style="background: #FFF8E1; border: 1px solid #FFD54F; border-radius: 4px; padding: 8px 14px; font-family: var(--mono); font-size: 11px; color: #7B5E00; margin-bottom: 14px; letter-spacing: 0.04em;">
      ⚡ PRACTICE ROUND — This round does not count toward your score.
    </div>

    <div style="font-family:var(--mono);font-size:11px;color:var(--text3);
                letter-spacing:0.08em;margin-bottom:16px;display:flex;
                align-items:center;gap:8px;">
      ROUND
      <span style="font-size:15px;font-weight:500;color:var(--text);
                   letter-spacing:-0.01em;">{{ current_round }}</span>
      <span>/ {{ num_practice_rounds }}</span>
      <span style="margin-left:8px;display:flex;gap:4px;">
        {% for i in round_indices %}
          <span style="width:8px;height:8px;border-radius:50%;
                       background:{% if i < current_round_number %}var(--accent2){% else %}var(--border){% endif %};
                       display:inline-block;"></span>
        {% endfor %}
      </span>
    </div>

    {% if condition == 'aware' %}
      <div class="th-banner aware">
        ▲ The top {{ top_k }} clicked candidates by score advance to Stage 2
      </div>
    {% else %}
      <div class="th-banner blind">
        Some candidates will advance to Stage 2 this round.
      </div>
    {% endif %}

    <details class="th-task-box" style="margin-bottom:14px;" {% if task_reminder_open %}open{% endif %}>
      <summary style="cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--text);font-weight:500;letter-spacing:0.06em;">Task reminder</summary>
      <div style="margin-top:8px;font-size:12px;color:var(--text2);line-height:1.6;">
        • Each click reveals one noisy résumé signal; more clicks make the résumé score more reliable.<br>
        • You have <strong>{{ total_clicks }} clicks this round</strong>; unused clicks do not carry over.<br>
        • Candidates with 0 clicks are screened out and do not reach interviews.<br>
        • In Stage 2, an independent interview committee adds interview scores; the system combines résumé and interview scores, giving more weight to more reliable scores.<br>
        • Bonus is based on your <strong>top-catching rate</strong>: only rounds where the true top candidate is hired count.
      </div>
    </details>

    <div class="th-lane">
      <div class="th-lane-head">
        <div class="th-section-label" style="margin-bottom:0;">UNDER REVIEW</div>
      </div>
      <div class="th-lane-track" id="reviewed-track">
        <div class="th-card-deck" id="reviewed-deck"></div>
      </div>
    </div>

    <div class="th-lane">
      <div class="th-lane-head">
        <div class="th-section-label" style="margin-bottom:0;">NOT YET REVIEWED</div>
      </div>
      <div class="th-lane-track">
        <div class="th-card-deck" id="unreviewed-deck">
          {% for r in rows %}
          <div class="th-resume-card"
               id="row-{{ r.candidate_index }}"
               data-id="{{ r.label }}"
               data-slot="{{ r.slot }}"
               data-clicks="{{ r.clicks }}"
               data-score="{% if r.clicks == 0 %}-Infinity{% else %}{{ r.score }}{% endif %}"
               style="position:relative;">

            <div class="th-pop-zone" id="pop-{{ r.candidate_index }}"></div>

            <div class="th-card-body {% if r.clicks == 0 %}unclicked{% endif %}"
                 id="card-body-{{ r.candidate_index }}"
                 title="If skipped, this candidate is screened out.">

              <div class="th-resume-lines">
                <div class="th-resume-line" style="width:85%"></div>
                <div class="th-resume-line" style="width:100%"></div>
                <div class="th-resume-line" style="width:65%"></div>
                <div class="th-resume-line" style="width:90%"></div>
                <div class="th-resume-line" style="width:75%"></div>
              </div>

              <div class="th-card-label">{{ r.label }}</div>

              <div class="th-card-score {% if r.clicks == 0 %}unseen{% endif %}"
                   id="score-{{ r.candidate_index }}">
                {% if r.clicks == 0 %}—{% else %}{{ r.score }}{% endif %}
              </div>

              <div class="th-card-clicks" id="clicks-{{ r.candidate_index }}">
                {% if r.clicks > 0 %}
                  {{ r.clicks }}×
                {% endif %}
              </div>

              <button type="button"
                      class="th-card-btn"
                      id="btn-{{ r.candidate_index }}"
                      data-idx="{{ r.candidate_index }}">
                + Signal
              </button>

            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="th-footer">
      <div class="th-footer-info">
        <strong>Done collecting signals?</strong><br>
        Candidates without any clicks will be screened out and will not advance.
      </div>
      {{ next_button }}
    </div>

  </main>
</div>
{% endblock %}

{% block scripts %}
<script>
  const TOTAL_CLICKS = {{ total_clicks }};
  const TOP_K = {% if condition == 'aware' %}{{ top_k }}{% else %}null{% endif %};

  function disableAllButtons() {
    document.querySelectorAll('.th-card-btn').forEach(b => b.disabled = true);
  }

  function updateBudgetBar(remaining) {
    const fill = document.getElementById('budget-fill');
    if (fill) fill.style.width = (remaining / TOTAL_CLICKS * 100) + '%';
    const num = document.getElementById('budget-remaining');
    if (num) num.textContent = remaining;
  }

  function addLogEntry(label, signal) {
    const log = document.getElementById('click-log');
    if (!log) return;
    const placeholder = log.querySelector('div');
    if (placeholder && placeholder.style.fontStyle === 'italic') placeholder.remove();
    const entry = document.createElement('div');
    entry.className = 'th-log-entry';
    entry.innerHTML = `<span class="th-log-id">${label}</span><span class="th-log-sig">→ ${signal}</span>`;
    log.insertBefore(entry, log.firstChild);
  }

  const candidateLabels = {};
  document.querySelectorAll('[id^="row-"]').forEach(row => {
    const idx = row.id.replace('row-', '');
    const labelEl = row.querySelector('.th-card-label');
    if (labelEl) candidateLabels[idx] = labelEl.textContent.trim();
  });

  document.querySelectorAll('.th-card-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      liveSend({'candidate_index': parseInt(this.dataset.idx)});
    });
  });

  function cardSortKey(card) {
    const clicks = parseInt(card.dataset.clicks || '0', 10);
    const score = parseFloat(card.dataset.score || '-Infinity');
    return {
      clicks,
      score: Number.isFinite(score) ? score : -Infinity,
      id: card.dataset.id || ''
    };
  }

  function sortReviewedCards(cards) {
    return cards.sort((a, b) => {
      const ka = cardSortKey(a);
      const kb = cardSortKey(b);
      if (kb.score !== ka.score) return kb.score - ka.score;
      if (kb.clicks !== ka.clicks) return kb.clicks - ka.clicks;
      return ka.id.localeCompare(kb.id);
    });
  }

  function sortUnreviewedCards(cards) {
    return cards.sort((a, b) => {
      const sa = parseInt(a.dataset.slot || '0', 10);
      const sb = parseInt(b.dataset.slot || '0', 10);
      return sa - sb;
    });
  }

  function applyAwareCutoffStyles(reviewedCards) {
    let clickedRank = 0;
    reviewedCards.forEach((card) => {
      const body = card.querySelector('.th-card-body');
      const clicks = parseInt(card.dataset.clicks || '0', 10);
      const scoreChip = card.querySelector('.th-card-score');
      card.classList.remove('th-pass', 'th-reviewed-nonpass');
      if (scoreChip) scoreChip.classList.remove('th-pass-score', 'th-nonpass-score');
      if (body) {
        body.style.background = '';
        body.style.borderLeft = '';
        body.style.opacity = '';
      }
      if (clicks <= 0 || TOP_K === null) return;
      const rank = clickedRank;
      clickedRank += 1;
      if (rank < TOP_K) {
        if (scoreChip) scoreChip.classList.add('th-pass-score');
        if (body) {
          body.style.background = '#e8f5e9';
          body.style.borderLeft = '3px solid #4caf50';
          body.style.opacity = '';
        }
      } else {
        if (scoreChip) scoreChip.classList.add('th-nonpass-score');
        if (body) {
          body.style.background = '#f5f5f5';
          body.style.borderLeft = '3px solid #ccc';
          body.style.opacity = '0.75';
        }
      }
    });
  }

  function renderAwareCutoffDivider(reviewedCards) {
    const reviewedDeck = document.getElementById('reviewed-deck');
    if (!reviewedDeck) return;

    reviewedDeck.querySelectorAll('.th-stage1-divider').forEach(el => el.remove());
    if (TOP_K === null || TOP_K <= 0) return;

    const clicked = reviewedCards.filter(card => parseInt(card.dataset.clicks || '0', 10) > 0);
    if (clicked.length < TOP_K) return;

    const divider = document.createElement('div');
    divider.className = 'th-stage1-divider';
    divider.innerHTML = `<span class="th-stage1-divider-label">K = ${TOP_K}</span>`;

    const kth = clicked[TOP_K - 1];
    reviewedDeck.insertBefore(divider, kth.nextSibling);
  }

  function rerankCards() {
    const reviewedDeck = document.getElementById('reviewed-deck');
    const unreviewedDeck = document.getElementById('unreviewed-deck');
    if (!reviewedDeck || !unreviewedDeck) return;

    const reviewed = Array.from(reviewedDeck.querySelectorAll('.th-resume-card'));
    const unreviewed = Array.from(unreviewedDeck.querySelectorAll('.th-resume-card'));

    const firstRects = new Map();
    reviewed.forEach(card => firstRects.set(card.id, card.getBoundingClientRect()));

    const reviewedSorted = sortReviewedCards(reviewed);
    const unreviewedSorted = sortUnreviewedCards(unreviewed);

    reviewedSorted.forEach(card => reviewedDeck.appendChild(card));
    unreviewedSorted.forEach(card => unreviewedDeck.appendChild(card));

    applyAwareCutoffStyles(reviewedSorted);
    renderAwareCutoffDivider(reviewedSorted);

    reviewedSorted.forEach(card => {
      const first = firstRects.get(card.id);
      const last = card.getBoundingClientRect();
      if (!first) return;
      const dx = first.left - last.left;
      const dy = first.top - last.top;
      if (dx || dy) {
        card.style.transition = 'none';
        card.style.transform = `translate(${dx}px, ${dy}px)`;
        card.getBoundingClientRect();
        requestAnimationFrame(() => {
          card.style.transition = 'transform 220ms ease';
          card.style.transform = 'translate(0, 0)';
        });
      }
    });
  }

  function placeInitialCards() {
    const reviewedDeck = document.getElementById('reviewed-deck');
    const unreviewedDeck = document.getElementById('unreviewed-deck');
    if (!reviewedDeck || !unreviewedDeck) return;
    const all = Array.from(document.querySelectorAll('#unreviewed-deck .th-resume-card'));
    all.forEach(card => {
      const clicks = parseInt(card.dataset.clicks || '0', 10);
      if (clicks > 0) reviewedDeck.appendChild(card);
    });
    rerankCards();
  }

  // Non-obvious: animate first-click promotion between lanes, then re-rank.
  function promoteCardToReviewed(cardEl) {
    const reviewedDeck = document.getElementById('reviewed-deck');
    if (!cardEl || !reviewedDeck) return;
    const first = cardEl.getBoundingClientRect();
    reviewedDeck.appendChild(cardEl);
    const last = cardEl.getBoundingClientRect();
    const dx = first.left - last.left;
    const dy = first.top - last.top;

    cardEl.classList.add('th-promoting');
    cardEl.style.transition = 'none';
    cardEl.style.transform = `translate(${dx}px, ${dy}px) scale(0.96)`;
    cardEl.getBoundingClientRect();
    requestAnimationFrame(() => {
      cardEl.style.transition = 'transform 280ms cubic-bezier(.2,.7,.2,1)';
      cardEl.style.transform = 'translate(0, 0) scale(1)';
      setTimeout(() => cardEl.classList.remove('th-promoting'), 320);
    });
  }

  placeInitialCards();

  function liveRecv(data) {
    if (data.error === 'no_budget') { disableAllButtons(); return; }

    const idx      = data.candidate_index;
    const newScore = data.new_score;
    const sig      = data.new_signal;

    const popZone = document.getElementById(`pop-${idx}`);
    if (popZone) {
      const pop = document.createElement('div');
      pop.style.cssText = `
        position:absolute;
        bottom:0; left:50%;
        transform:translateX(-50%) translateY(0);
        font-family:var(--mono);font-size:12px;font-weight:500;
        color:var(--accent2);
        background:var(--accent2-light);
        border:1px solid #b8cfe8;
        border-radius:3px;padding:1px 6px;
        white-space:nowrap;
        pointer-events:none;
        z-index:20;
        transition:transform 0.5s ease-out, opacity 0.5s ease-out;
      `;
      pop.textContent = sig;
      popZone.appendChild(pop);
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          pop.style.transform = 'translateX(-50%) translateY(-26px)';
          pop.style.opacity   = '0';
        });
      });
      setTimeout(() => pop.remove(), 600);
    }

    const cardBody = document.getElementById(`card-body-${idx}`);
    if (cardBody) {
      cardBody.style.borderColor = 'var(--accent2)';
      cardBody.style.boxShadow   = '0 0 0 3px var(--accent2-light)';
      setTimeout(() => {
        cardBody.style.borderColor = '';
        cardBody.style.boxShadow   = '';
      }, 350);
    }

    if (cardBody) {
      cardBody.classList.remove('unclicked');
    }

    const scoreEl = document.getElementById(`score-${idx}`);
    if (scoreEl) {
      scoreEl.textContent = newScore;
      scoreEl.classList.remove('unseen');
      scoreEl.style.color        = 'var(--accent2)';
      scoreEl.style.borderColor  = 'var(--accent2)';
      setTimeout(() => {
        scoreEl.style.color       = '';
        scoreEl.style.borderColor = '';
      }, 500);
    }

    const clicksEl = document.getElementById(`clicks-${idx}`);
    const cardEl = document.getElementById(`row-${idx}`);
    const wasUnreviewed = cardEl && cardEl.parentElement && cardEl.parentElement.id === 'unreviewed-deck';
    if (clicksEl) {
      const prev = parseInt(clicksEl.textContent) || 0;
      clicksEl.textContent = (prev + 1) + '×';
      if (cardEl) cardEl.dataset.clicks = String(prev + 1);
    }
    if (cardEl) cardEl.dataset.score = String(newScore);

    if (wasUnreviewed) {
      promoteCardToReviewed(cardEl);
    }

    rerankCards();

    updateBudgetBar(data.budget_remaining);
    if (data.budget_remaining <= 0) disableAllButtons();

    addLogEntry(candidateLabels[String(idx)] || idx, sig);

  }
</script>
{% endblock %}