{{ extends 'global/IntroPage.html' }}
{{ block title }}Practice Round{{ endblock }}

{{ block page_body }}

<style>
.row { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 10px; }
.column { float: left; padding: 10px; }
.column-left  { width: 60%; min-width: 400px; }
.column-right { width: 40%; min-width: 300px; display: flex; flex-direction: column; align-items: center; }

.box {
  border: 2px solid black; border-radius: 5px;
  padding: 10px; margin-bottom: 10px;
  width: 100%; box-sizing: border-box; text-align: center;
}

.rank-table { border-collapse: collapse; margin: 8px auto 0 auto; }
.rank-table th, .rank-table td { border: 1px solid #dddddd; padding: 4px 8px; text-align: center; }
.rank-table th { font-weight: bold; }

.island-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-weight: bold; font-size: 13px;
}

.info-table-container { overflow-x: auto; }
.info-table { border-collapse: collapse; margin: 0 auto; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 14px; text-align: center; }
.info-table th.row-label { text-align: left; font-weight: bold; background-color: #f5f5f5; min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }

.dnd-pool {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  min-height: 54px; padding: 6px;
  border: 2px dashed #aaa; border-radius: 8px;
  margin: 0 auto 12px auto; background: #f9f9f9; max-width: 100px;
}
.island-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 15px;
  user-select: none; margin: 3px; flex-shrink: 0;
}
.slot-drop-zone {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px dashed #bbb; margin: 0 auto; background: #f5f5f5;
}

/* Highlight: ranking table Island column */
.island-col-hl { background-color: #dff0ff; }

/* Highlight: info table Priority Score and % Lower Priority rows */
.priority-row-hl td, .priority-row-hl th { background-color: #dff0ff; }
</style>

<div class="row">

  <!-- Left column: instructions, buttons, result display -->
  <div class="column column-left">
    <p>You can click the buttons below to learn how different island rankings and different priorities affect which island you're sent to.</p>
    <p>The other traveler ranked Island <b>{{ other_rank1 }}</b> first and Island <b>{{ other_rank2 }}</b> second.</p>
    <p>You must adjust the island rankings and priorities at least once to proceed.</p>

    <p style="text-align:center; margin-top:16px;">
      <button type="button" class="btn btn-secondary" id="btn-change-ranking">Change Ranking</button>
      &nbsp;
      <button type="button" class="btn btn-secondary" id="btn-change-priority">Change Priorities</button>
    </p>

    <p style="text-align:center; margin-top:12px;"><b>You're sent to</b>: <span id="prac23-island"></span></p>
    <p style="text-align:center;"><b>Your payoff</b>: <span id="prac23-payoff"></span></p>
  </div>

  <!-- Right column: ranking box + info table -->
  <div class="column column-right">

    <!-- Box 1: ranking (pool + 2-row table; updates on Change Ranking) -->
    <div class="box">
      <p>Your ranking:</p>
      <div id="prac23-pool" class="dnd-pool"></div>
      <table class="rank-table">
        <thead>
          <tr><th>Rank</th><th class="island-col-hl">Island</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>1<br><span style="font-size:11px;color:#aaa;">(Highest)</span></td>
            <td class="island-col-hl" id="prac23-slot1"></td>
          </tr>
          <tr>
            <td>2</td>
            <td class="island-col-hl" id="prac23-slot2"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Box 2: info table (priority rows update on Change Priorities) -->
    <div class="box">
      <div class="info-table-container">
        <table class="info-table">
          <thead>
            <tr>
              <th class="row-label">Island</th>
              <th data-island="A"><span class="island-badge" style="background-color:rgb(21,96,130);color:white">A</span></th>
              <th data-island="B"><span class="island-badge" style="background-color:rgb(233,113,50);color:white">B</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="row-label">Points</th>
              <td data-island="A">140</td>
              <td data-island="B">200</td>
            </tr>
            <tr class="priority-row-hl">
              <th class="row-label">Priority Score</th>
              <td data-island="A" id="prac23-priority-a"></td>
              <td data-island="B" id="prac23-priority-b"></td>
            </tr>
            <tr class="priority-row-hl">
              <th class="row-label">% Lower Priority</th>
              <td data-island="A" id="prac23-pct-a"></td>
              <td data-island="B" id="prac23-pct-b"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>

<!-- Hidden fields: track whether each button was clicked at least once -->
<input type="hidden" name="prac23_changed_ranking"  id="prac23-cr-input" value="0">
<input type="hidden" name="prac23_changed_priority" id="prac23-cp-input" value="0">

<!-- Next button: revealed only after both buttons have been clicked at least once -->
<div id="next-btn-container" style="display:none; text-align:center;">
  <p></p>
  {{ next_button }}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {

    var ISLAND_COLORS = {
        'A': { bg: 'rgb(21,96,130)',  txt: 'white' },
        'B': { bg: 'rgb(233,113,50)', txt: 'white' }
    };
    var PAYOFFS  = { 'A': 140, 'B': 200 };
    var RANKINGS = ['A', 'AB', 'B', 'BA'];

    // Initialise ranking index from subject's Intro20 submission
    var initRanking = "{{ init_ranking }}";
    var rankIdx = RANKINGS.indexOf(initRanking);
    if (rankIdx === -1) rankIdx = 0;

    var OTHER_RANKS = [];
    var _or1 = "{{ other_rank1 }}", _or2 = "{{ other_rank2 }}";
    if (_or1) OTHER_RANKS.push(_or1);
    if (_or2) OTHER_RANKS.push(_or2);

    // 4-cycle of (subjectA, subjectB): A1B2 → A2B2 → A2B1 → A1B1 → …
    var PRIORITY_STATES = [
        {a: 1, b: 2},
        {a: 2, b: 2},
        {a: 2, b: 1},
        {a: 1, b: 1},
    ];
    var prioIdx = 0;

    var crCount = 0;  // times Change Ranking was clicked
    var cpCount = 0;  // times Change Priorities was clicked

    // ── DOM helpers ──────────────────────────────────────────────────────────
    function makeIslandBadge(island) {
        var span = document.createElement('span');
        span.className = 'island-badge';
        span.style.backgroundColor = ISLAND_COLORS[island].bg;
        span.style.color = ISLAND_COLORS[island].txt;
        span.textContent = island;
        return span;
    }

    function makeEmptySlot() {
        var div = document.createElement('div');
        div.className = 'slot-drop-zone';
        return div;
    }

    function makePoolIcon(island) {
        var div = document.createElement('div');
        div.className = 'island-icon';
        div.style.backgroundColor = ISLAND_COLORS[island].bg;
        div.style.color = ISLAND_COLORS[island].txt;
        div.textContent = island;
        return div;
    }

    // ── DA assignment for 2 travelers, 2 islands, 1 spot each ───────────────
    function computeAssignment(myRanks, myPrioA, myPrioB, otherRanks) {
        if (myRanks.length === 0) return null;
        var r1 = myRanks[0];
        var o1 = otherRanks.length > 0 ? otherRanks[0] : null;
        if (r1 !== o1) {
            // No conflict on first choice — I get it regardless of priority
            return r1;
        }
        // Conflict: use this island's specific priority to break the tie
        var myPrio = r1 === 'A' ? myPrioA : myPrioB;
        if (myPrio === 2) {
            return r1;  // I win
        } else {
            // I lose — fall back to my second choice
            return myRanks.length > 1 ? myRanks[1] : null;
        }
    }

    // ── Main display update ──────────────────────────────────────────────────
    function updateDisplay() {
        var ranking = RANKINGS[rankIdx];
        var prioA   = PRIORITY_STATES[prioIdx].a;
        var prioB   = PRIORITY_STATES[prioIdx].b;
        var r1 = ranking.charAt(0);
        var r2 = ranking.length > 1 ? ranking.charAt(1) : '';

        var myRanks = r2 ? [r1, r2] : [r1];
        var assignedIsland = computeAssignment(myRanks, prioA, prioB, OTHER_RANKS);

        // Assignment logic
        var assigned, payoff;
        assigned = assignedIsland;
        payoff   = assigned ? PAYOFFS[assigned] : 0;

        // Update assignment text in left column
        document.getElementById('prac23-island').textContent =
            assigned ? 'Island ' + assigned : 'neither island';
        document.getElementById('prac23-payoff').textContent = payoff + ' points';

        // Update pool: show unranked islands
        var pool = document.getElementById('prac23-pool');
        pool.innerHTML = '';
        ['A', 'B'].forEach(function(island) {
            if (ranking.indexOf(island) === -1) {
                pool.appendChild(makePoolIcon(island));
            }
        });

        // Update rank slots
        var slot1 = document.getElementById('prac23-slot1');
        slot1.innerHTML = '';
        slot1.appendChild(makeIslandBadge(r1));

        var slot2 = document.getElementById('prac23-slot2');
        slot2.innerHTML = '';
        slot2.appendChild(r2 ? makeIslandBadge(r2) : makeEmptySlot());

        // Update priority cells
        document.getElementById('prac23-priority-a').textContent = prioA;
        document.getElementById('prac23-priority-b').textContent = prioB;
        document.getElementById('prac23-pct-a').textContent = prioA === 2 ? '100%' : '0.0%';
        document.getElementById('prac23-pct-b').textContent = prioB === 2 ? '100%' : '0.0%';

        // Reveal next button once both buttons have been clicked at least once
        if (crCount > 0 && cpCount > 0) {
            document.getElementById('next-btn-container').style.display = '';
        }
    }

    // ── Button handlers ──────────────────────────────────────────────────────
    document.getElementById('btn-change-ranking').addEventListener('click', function() {
        rankIdx = (rankIdx + 1) % RANKINGS.length;
        crCount++;
        document.getElementById('prac23-cr-input').value = crCount;
        updateDisplay();
    });

    document.getElementById('btn-change-priority').addEventListener('click', function() {
        prioIdx = (prioIdx + 1) % 4;
        cpCount++;
        document.getElementById('prac23-cp-input').value = cpCount;
        updateDisplay();
    });

    // Initial render
    updateDisplay();
});
</script>

{{ endblock }}