{% 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;
  }
  #s2-card-deck {
    gap: 24px;
  }
  #s2-card-deck .th-stage2-card {
    min-width: 192px;
  }
  #s2-card-deck .th-card-body {
    width: 100%;
    min-width: 0;
  }
  .th-stage2-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .th-stage2-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
  }
</style>
{% endblock %}

{% block content %}
<main class="th-content th-content--wide">

  <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_task_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 %}var(--accent2){% else %}var(--border){% endif %};
                     display:inline-block;"></span>
      {% endfor %}
    </span>
  </div>

  {% if condition == 'aware' %}
    <div class="th-banner aware">
      Stage 2: interview committee scores are combined with your Stage 1 résumé scores.
    </div>
  {% else %}
    <div class="th-banner blind">
      Stage 2: interview committee scores are combined with your Stage 1 résumé scores.
    </div>
  {% endif %}

  {% if has_advanced %}

    <div class="th-reveal-note" id="reveal-complete-note">
          Interviews will be done in order. The system combines résumé and interview scores and makes a hiring decision.
    </div>

      <div class="th-card-deck" id="s2-card-deck">
      {% for c in candidates %}
      <div class="th-resume-card th-stage2-card"
           id="s2row-{{ c.index }}"
           data-idx="{{ c.index }}"
           data-resume="{{ c.resume_score }}"
           data-interview="{{ c.interview_score }}"
           data-posterior="{{ c.posterior_mean }}"
           data-hired="{% if c.is_hired %}1{% else %}0{% endif %}"
           style="min-width:192px;">

        <div class="th-pop-zone" id="s2-pop-{{ c.index }}"></div>

        <div class="th-card-body" id="s2-card-body-{{ c.index }}" style="display:flex;flex-direction:column;align-items:stretch;">

          <!-- Résumé lines -->
          <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>

          <!-- Candidate label -->
          <div class="th-card-label">{{ c.label }}</div>

          <div style="display:flex;flex-direction:column;gap:6px;width:100%;margin-top:6px;">
            <div class="th-stage2-metric">
              <div class="th-stage2-label" style="color:var(--accent2);">Interview</div>
              <div>
                <div class="th-stage2-int-placeholder" id="int-placeholder-{{ c.index }}">interviewing…</div>
                <div class="th-card-score th-stage2-int-chip is-hidden"
                     id="int-chip-{{ c.index }}"
                     style="font-size:15px;font-weight:500;color:var(--accent2);
                            border-color:var(--accent2);min-width:46px;padding:1px 8px;text-align:center;">
                  —
                </div>
              </div>
            </div>

            <div class="th-stage2-metric">
              <div class="th-stage2-label" style="color:var(--text2);">Resume</div>
              <div class="th-card-score"
                   style="font-size:11px;color:var(--text2);min-width:46px;padding:1px 8px;text-align:center;">
                {{ c.resume_score }}
              </div>
            </div>

            <div class="th-stage2-metric">
              <div class="th-stage2-label" style="color:var(--green);">Combined</div>
              <div class="th-card-score th-stage2-post-chip is-hidden"
                   id="post-chip-{{ c.index }}"
                   style="font-size:12px;font-weight:500;color:var(--green);
                          border-color:var(--green);min-width:46px;padding:1px 8px;text-align:center;">
                —
              </div>
            </div>
          </div>

          <div class="th-stage2-star is-hidden"
               id="star-{{ c.index }}"
            style="display:none;margin-top:6px;font-family:var(--mono);font-size:9px;color:var(--green);font-weight:600;">
            ★ Overall Top Scorer
          </div>

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

    <div class="th-footer">
      <div class="th-footer-info">
        <strong>Interviews in progress.</strong> Next is available after all interview scores are revealed.
      </div>
      {{ next_button }}
    </div>

  {% else %}
    <div style="padding: 32px; text-align: center; color: var(--text2); font-size: 13px;">
      No candidates reached Stage 2 in this round.<br>
      Continue to the next round and allocate your clicks to identify likely top performers.
    </div>
    <div class="th-footer" style="max-width:520px;margin-left:auto;margin-right:auto;">
      <div class="th-footer-info">No hire can be made this round. Continue.</div>
      {{ next_button }}
    </div>
  {% endif %}

</main>
{% endblock %}

{% block scripts %}
{% if has_advanced %}
<script>
  // Client-side staged reveal: no server round-trip.
  (function() {
    const cards = Array.from(document.querySelectorAll('.th-stage2-card'));
    const doneNote = document.getElementById('reveal-complete-note');
    if (!cards.length) return;

    cards.forEach(card => {
      const star = document.getElementById(`star-${card.dataset.idx}`);
      if (star) {
        star.classList.add('is-hidden');
        star.style.display = 'none';
      }
    });

    const queue = cards.sort((a, b) => {
      const ra = parseFloat(a.dataset.resume || '0');
      const rb = parseFloat(b.dataset.resume || '0');
      if (rb !== ra) return rb - ra;
      return a.id.localeCompare(b.id);
    });

    const totalBudgetMs = 7000;
    const staggerMs = Math.min(900, Math.max(220, Math.floor(totalBudgetMs / Math.max(1, queue.length))));

    function popReveal(idx, value) {
      const zone = document.getElementById(`s2-pop-${idx}`);
      if (!zone) return;
      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 = value;
      zone.appendChild(pop);
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          pop.style.transform = 'translateX(-50%) translateY(-26px)';
          pop.style.opacity = '0';
        });
      });
      setTimeout(() => pop.remove(), 620);
    }

    function revealCard(card) {
      const idx = card.dataset.idx;
      const interview = card.dataset.interview;
      const posterior = card.dataset.posterior;

      const intPlaceholder = document.getElementById(`int-placeholder-${idx}`);
      const intChip = document.getElementById(`int-chip-${idx}`);
      const postChip = document.getElementById(`post-chip-${idx}`);

      if (intPlaceholder) intPlaceholder.style.display = 'none';
      if (intChip) {
        intChip.textContent = interview;
        intChip.classList.remove('is-hidden');
        intChip.classList.add('is-live');
      }

      popReveal(idx, interview);

      setTimeout(() => {
        if (postChip) {
          postChip.textContent = posterior;
          postChip.classList.remove('is-hidden');
          postChip.classList.add('is-live');
        }
      }, 200);
    }

    function finishSequence() {
      if (doneNote) doneNote.classList.add('show');

      const hiredCards = queue.filter(card => card.dataset.hired === '1');
      let winner = null;

      if (hiredCards.length > 0) {
        winner = hiredCards.reduce((best, card) => {
          const pm = parseFloat(card.dataset.posterior || '0');
          const idx = parseInt(card.dataset.idx || '0', 10);
          if (!best) return { card, pm, idx };
          if (pm > best.pm) return { card, pm, idx };
          if (pm === best.pm && idx < best.idx) return { card, pm, idx };
          return best;
        }, null);
      }

      if (!winner) {
        queue.forEach(card => {
          const pm = parseFloat(card.dataset.posterior || '0');
          const idx = parseInt(card.dataset.idx || '0', 10);
          if (!winner || pm > winner.pm || (pm === winner.pm && idx < winner.idx)) {
            winner = { card, pm, idx };
          }
        });
      }

      queue.forEach(card => {
        const star = document.getElementById(`star-${card.dataset.idx}`);
        if (star) {
          star.classList.add('is-hidden');
          star.style.display = 'none';
        }
      });
      if (winner) {
        const star = document.getElementById(`star-${winner.card.dataset.idx}`);
        if (star) {
          star.classList.remove('is-hidden');
          star.style.display = 'block';
        }
      }
    }

    queue.forEach((card, i) => {
      setTimeout(() => {
        revealCard(card);
        if (i === queue.length - 1) {
          setTimeout(finishSequence, 450);
        }
      }, 350 + i * staggerMs);
    });
  })();
</script>
{% endif %}
{% endblock %}