{% 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 %}
<div class="th-shell">

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

    <div>
      <div class="th-section-label">Your task</div>
      <div class="th-task-box">
        Stage 2 is handled by an <strong>independent interview committee</strong>. They generate interview scores for advanced candidates, and the system combines those with your Stage 1 résumé scores.
      </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;">
          Top {{ top_k }} clicked candidates advanced.
        </div>
      {% else %}
        <div class="th-threshold-badge blind">K: hidden</div>
        <div style="font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6;">
          Evaluate all candidates carefully.
        </div>
      {% endif %}
    </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">
        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 %}

        {% if current_round_number == 1 %}
        <div class="th-reveal-note show" style="margin-bottom:10px;">
          Practice tip: watch interview scores arrive one-by-one. The Combined score updates right after each interview result.
        </div>
        {% endif %}

        <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>
        Practice complete for this round. Continue to begin the main task rounds.
      </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 practice round. Continue.</div>
        {{ next_button }}
      </div>
    {% endif %}

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

{% block scripts %}
{% if has_advanced %}
<script>
  (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 %}