{{ extends 'global/Page.html' }}
{{ block title }}Round {{player.round_number}} {{ endblock }}

{{ block content }}

<style>
.otree-timer { display: none; }
.rank-table {
    border-collapse: collapse;
    margin: 10px auto;
}

.rank-table th,
.rank-table td {
    border: 1px solid #dddddd;
    padding: 4px 8px;
    text-align: center;
}

.rank-table th {
    font-weight: bold;
}


.row {
  display: flex;
  flex-wrap: nowrap; /* Prevent columns from wrapping to the next line */
  overflow-x: auto; /* Enable horizontal scrolling if necessary */
  padding: 10px; /* Set minimum padding/space between the columns */
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

.column-left {
  width: 70%;
  min-width: 500px;
  align-items: center;
}

.column-right {
  width: 30%;
  display: flex;
  min-width: 250px;
  flex-direction: column;
  align-items: center;
}

.info-table-container { overflow-x: auto; margin-bottom: 16px; }
.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; }

.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.number-line-section { margin: 6px auto; text-align: center; }
.number-line-section:last-child { margin-bottom: 0; }
.number-line-label { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.number-line-svg { display: block; margin: 0 auto; max-width: 100%; }

.box {
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px 10px;
  margin-bottom: 10px;
}

.pf-graph-container {
    margin-top: 4px;
    padding-top: 0;
}

#pfs-box > p {
    margin: 4px 0;
}

.hidden {
    display: none;
}

.info-col-highlight {
    background-color: #dff0ff;
}

/* pool */
.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;
    transition:background 0.15s,border-color 0.15s;
    max-width: 160px;   /* 3 icons × 42px + padding/border → 2-row × 3-col layout */
}
.dnd-pool.dnd-over { background:#e8f4ff; border-color:#5aafe8; }

/* island icons — round, match SVG circle colors */
.island-icon {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:bold; font-size:15px;
    cursor:grab; user-select:none; margin:3px; flex-shrink:0;
    transition:transform 0.1s;
}
.island-icon:hover { transform:scale(1.12); }
.island-icon:active { cursor:grabbing; }

/* drop slots */
.slot-drop-zone {
    width:42px; height:42px; border-radius:50%;
    border:2px dashed #bbb; display:flex;
    align-items:center; justify-content:center;
    margin:0 auto; background:#f5f5f5;
    transition:background 0.15s,border-color 0.15s;
}
.slot-drop-zone.dnd-over  { background:#dff0ff; border-color:#5aafe8; border-style:solid; }
.slot-drop-zone.occupied  { border-style:solid; border-color:#888; background:transparent; }
.slot-drop-zone.locked {
    opacity: 0.4;
    background: #e8e8e8;
    cursor: not-allowed;
}
.delete-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}
.delete-btn:hover { color: #e05; }
.rank-table tr:has(.slot-drop-zone.locked) {
    background-color: #f0f0f0;
    color: #aaa;
}

/* ── Keyboard accessibility ───────────────────── */
.kb-selected {
    outline: 3px solid #d400d4;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(212,0,212,0.25);
}
.island-icon:focus { outline: 2px solid #0057b8; outline-offset: 2px; }
.slot-drop-zone:focus { outline: 2px solid #0057b8; outline-offset: 2px; }
.slot-drop-zone.locked:focus { outline: none; }
.sr-only {
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

</style>

<div class = "row">
  <div class = "column column-left">
    <div id = "pfs-box" class = "box", style = "text-align: center;">
      <p>Your points and priorities for this round are:</p>
      <div class="pf-graph-container">
        {{ pf_graph }}
      </div>
      <p>Each island has room for <b>{{C.NUM_QUOTA}}</b> travelers. There are <b>{{C.NUM_PLAYERS}}</b> travelers.</p>
    </div>
  </div>

  <div class = "column column-right">
    <div id = "rol-box" class = "box", style = "text-align: center;">
      <p>Please submit your ranking:</p>

      <!-- available islands pool -->
      <div id="islands-pool" class="dnd-pool"
           role="listbox" aria-label="Available islands">
        <div class="island-icon" data-island="A" draggable="true"
             role="option" tabindex="0" aria-label="Island A"
             style="background-color:rgb(21,96,130);color:white">A</div>
        <div class="island-icon" data-island="B" draggable="true"
             role="option" tabindex="0" aria-label="Island B"
             style="background-color:rgb(233,113,50);color:white">B</div>
        <div class="island-icon" data-island="C" draggable="true"
             role="option" tabindex="0" aria-label="Island C"
             style="background-color:rgb(25,107,36);color:white">C</div>
        <div class="island-icon" data-island="D" draggable="true"
             role="option" tabindex="0" aria-label="Island D"
             style="background-color:rgb(15,158,213);color:white">D</div>
        <div class="island-icon" data-island="E" draggable="true"
             role="option" tabindex="0" aria-label="Island E"
             style="background-color:rgb(160,43,147);color:white">E</div>
        <div class="island-icon" data-island="F" draggable="true"
             role="option" tabindex="0" aria-label="Island F"
             style="background-color:rgb(209,209,209);color:#222">F</div>
      </div>

      <!-- ranking table with circular drop zones -->
      <table class="rank-table">
        <thead><tr><th>Rank</th><th>Island</th><th></th></tr></thead>
        <tbody role="listbox" aria-label="Rank slots">
          {{ for field in rank_fields }}
          <tr>
            <td>{{ forloop.counter }}{{ if forloop.counter == 1 }}<br><span style="font-size:11px;color:#aaa;">(Highest)</span>{{ endif }}</td>
            <td>
              <div class="slot-drop-zone" data-field="{{ field }}"
                   role="option" tabindex="-1"
                   aria-label="Rank {{ forloop.counter }} slot, empty"
                   aria-disabled="true"></div>
              <input type="hidden" name="{{ field }}" id="{{ field }}-input"
                     class="rank-input" value="">
              {{ formfield_errors field }}
            </td>
            <td>
              <button type="button" class="delete-btn"
                      data-slot="{{ forloop.counter }}" style="display:none">&#x2715;</button>
            </td>
          </tr>
          {{ endfor }}
        </tbody>
      </table>


    </div>
</div>
</div>

<!-- Hidden oTree next button — triggered programmatically by Confirm -->
<div style="display:none;" id="next-button">{{ next_button }}</div>

<!-- Hidden field: records how many times Submit was clicked -->
<input type="hidden" name="smt_ct" id="submit-count-input" value="0">

<!-- Step 1: Submit button (shown once rank1 is filled) -->
<div style="text-align:center; display:none;" id="submit-btn-container">
    <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
</div>

<!-- Step 2: Confirmation UI (shown after Submit is clicked) -->
<div style="text-align:center; display:none;" id="confirm-container">
    <p>Does your submission look good to you?</p>
    <button type="button" class="btn btn-secondary" id="make-changes-btn">Make Changes</button>
    &nbsp;
    <button type="submit" class="btn btn-success" id="confirm-btn">Confirm</button>
</div>

<div id="sr-announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ── Submission flow state ─────────────────────────────────────────────────
    var confirmState = false;
    var submitCount = 0;
    var submitBtnContainer = document.getElementById('submit-btn-container');
    var confirmContainer   = document.getElementById('confirm-container');
    var submitCountInput   = document.getElementById('submit-count-input');

    // Show Submit button when rank1 is filled; hide everything when it is empty.
    // Does not alter the UI if we are already in the confirmation state.
    function checkAtLeastOneRankFilled() {
        var rank1 = document.getElementById('rank1-input');
        var filled = rank1 && rank1.value.trim() !== '';
        if (!filled) {
            confirmState = false;
            submitBtnContainer.style.display = 'none';
            confirmContainer.style.display   = 'none';
        } else if (!confirmState) {
            submitBtnContainer.style.display = '';
        }
    }

    // Called after every drag / delete: exits confirmation if active, then
    // updates locking and submit-button visibility, and saves state.
    function onRankingChanged() {
        if (confirmState) {
            confirmState = false;
            confirmContainer.style.display = 'none';
        }
        updateLocking();
        checkAtLeastOneRankFilled();
        saveRankingState();
    }

    // Submit button: increment counter, switch to confirmation UI
    document.getElementById('submit-btn').addEventListener('click', function() {
        submitCount++;
        submitCountInput.value = submitCount;
        submitBtnContainer.style.display = 'none';
        confirmState = true;
        confirmContainer.style.display = '';
    });

    // Make Changes: return to Submit button
    document.getElementById('make-changes-btn').addEventListener('click', function() {
        confirmState = false;
        confirmContainer.style.display   = 'none';
        submitBtnContainer.style.display = '';
    });

    // Check initially in case fields are pre-filled
    checkAtLeastOneRankFilled();

    // ── Drag-and-Drop ranking ─────────────────────────────────────────────────
    var RANK_STORAGE_KEY = 'rankingState_round{{ player.round_number }}';
    const pool = document.getElementById('islands-pool');
    const slots = document.querySelectorAll('.slot-drop-zone');

    // Lock rows 2–6 on page load (before restore)
    slots.forEach(function(slot, i) {
        if (i > 0) slot.classList.add('locked');
    });

    // Track what is being dragged
    let dragging = { island: null, el: null, sourceZone: null }; // sourceZone: null = pool

    let kbSelected = null;

    function announce(msg) {
        var r = document.getElementById('sr-announce');
        if (!r) return;
        r.textContent = '';
        setTimeout(function() { r.textContent = msg; }, 50);
    }

    function kbSelectIcon(iconEl) {
        if (kbSelected) {
            kbSelected.classList.remove('kb-selected');
            kbSelected.removeAttribute('aria-selected');
        }
        kbSelected = iconEl;
        if (!iconEl) return;
        iconEl.classList.add('kb-selected');
        iconEl.setAttribute('aria-selected', 'true');
        announce('Island ' + iconEl.dataset.island + ' selected. Tab to a rank slot and press Space or Enter to place it.');
    }

    function kbCancelSelection() {
        if (!kbSelected) return;
        var name = kbSelected.dataset.island;
        kbSelectIcon(null);
        announce('Selection of island ' + name + ' cancelled.');
    }

    function setOccupied(zone, bool) {
        zone.classList.toggle('occupied', bool);
    }

    function getInput(zone) {
        return document.getElementById(zone.dataset.field + '-input');
    }

    function placeInSlot(zone, iconEl) {
        zone.appendChild(iconEl);
        setOccupied(zone, true);
        getInput(zone).value = iconEl.dataset.island;
        iconEl.tabIndex = -1;
        iconEl.classList.remove('kb-selected');
        iconEl.removeAttribute('aria-selected');
    }

    function returnToPool(iconEl) {
        pool.appendChild(iconEl);
        iconEl.tabIndex = 0;
        iconEl.classList.remove('kb-selected');
        iconEl.removeAttribute('aria-selected');
    }

    function clearSlot(zone) {
        setOccupied(zone, false);
        getInput(zone).value = '';
    }

    // Update locked state and delete button visibility after every state change
    function updateLocking() {
        slots.forEach(function(slot, i) {
            if (i === 0) return; // rank1 always unlocked
            var locked = !slots[i - 1].classList.contains('occupied');
            slot.classList.toggle('locked', locked);
        });
        document.querySelectorAll('.delete-btn').forEach(function(btn) {
            var slotIndex = parseInt(btn.dataset.slot) - 1;
            btn.style.display = slots[slotIndex].classList.contains('occupied') ? '' : 'none';
        });
        // Sync tabindex, aria-disabled, and aria-label per slot
        slots.forEach(function(slot, i) {
            var isLocked   = slot.classList.contains('locked');
            var isOccupied = slot.classList.contains('occupied');
            var icon       = slot.querySelector('.island-icon');
            slot.tabIndex = isLocked ? -1 : 0;
            slot.setAttribute('aria-disabled', isLocked ? 'true' : 'false');
            if (isOccupied && icon) {
                slot.setAttribute('aria-label',
                    'Rank ' + (i+1) + ' slot, occupied by island ' + icon.dataset.island +
                    '. Press Delete or Backspace to remove, or Space/Enter to select.');
            } else if (isLocked) {
                slot.setAttribute('aria-label',
                    'Rank ' + (i+1) + ' slot, locked. Fill rank ' + i + ' first.');
            } else {
                slot.setAttribute('aria-label',
                    'Rank ' + (i+1) + ' slot, empty. Press Space or Enter to place selected island here.');
            }
        });
        // Pool icons: focusable only when in pool
        document.querySelectorAll('.island-icon').forEach(function(icon) {
            icon.tabIndex = pool.contains(icon) ? 0 : -1;
        });
    }

    // Shift islands up from fromIndex onward (fill the gap left by a deletion)
    function shiftUp(fromIndex) {
        for (var i = fromIndex; i < slots.length - 1; i++) {
            var nextIcon = slots[i + 1].querySelector('.island-icon');
            if (nextIcon) {
                placeInSlot(slots[i], nextIcon);
                clearSlot(slots[i + 1]);
            } else {
                break;
            }
        }
    }

    // Handle ✕ button: clear slot, return island to pool, shift remaining up
    function deleteRank(slotIndex) {
        var icon = slots[slotIndex].querySelector('.island-icon');
        if (!icon) return;
        clearSlot(slots[slotIndex]);
        returnToPool(icon);
        shiftUp(slotIndex);
        onRankingChanged();
    }

    // Wire up delete buttons
    document.querySelectorAll('.delete-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            deleteRank(parseInt(this.dataset.slot) - 1);
        });
    });

    function saveRankingState() {
        var state = {};
        document.querySelectorAll('.slot-drop-zone').forEach(function(zone) {
            var icon = zone.querySelector('.island-icon');
            state[zone.dataset.field] = icon ? icon.dataset.island : '';
        });
        try { sessionStorage.setItem(RANK_STORAGE_KEY, JSON.stringify(state)); } catch(e) {}
    }

    function restoreRankingState() {
        var saved;
        try { saved = sessionStorage.getItem(RANK_STORAGE_KEY); } catch(e) {}
        if (!saved) return;
        var state = JSON.parse(saved);
        Object.keys(state).forEach(function(field) {
            var letter = state[field];
            if (!letter) return;
            var zone = document.querySelector('.slot-drop-zone[data-field="' + field + '"]');
            var icon = pool.querySelector('.island-icon[data-island="' + letter + '"]');
            if (zone && icon) placeInSlot(zone, icon);
        });
        updateLocking();
        checkAtLeastOneRankFilled();
    }

    // ── Keyboard interaction ─────────────────────────────────────────────────
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') kbCancelSelection();
    });

    // Pool icons: Space/Enter to select/deselect
    document.addEventListener('keydown', function(e) {
        if (e.key !== ' ' && e.key !== 'Enter') return;
        var icon = e.target.closest('.island-icon');
        if (!icon || !pool.contains(icon)) return;
        e.preventDefault();
        kbSelected === icon ? kbCancelSelection() : kbSelectIcon(icon);
    });

    // Rank slots: Space/Enter to place; Delete/Backspace to remove
    document.addEventListener('keydown', function(e) {
        var slot = e.target.closest('.slot-drop-zone');
        if (!slot || slot.classList.contains('locked')) return;
        var idx = Array.from(slots).indexOf(slot);

        if (e.key === 'Delete' || e.key === 'Backspace') {
            if (!slot.classList.contains('occupied')) return;
            e.preventDefault();
            var removedIsland = slot.querySelector('.island-icon').dataset.island;
            deleteRank(idx);
            announce('Island ' + removedIsland + ' removed from rank ' + (idx + 1) + '.');
            var focusTarget = slots[idx].classList.contains('locked')
                ? (idx > 0 ? slots[idx - 1] : null) : slots[idx];
            if (focusTarget) focusTarget.focus();
            return;
        }

        if (e.key !== ' ' && e.key !== 'Enter') return;
        e.preventDefault();

        if (kbSelected) {
            var sourceZone = kbSelected.closest('.slot-drop-zone'); // null if in pool
            if (slot.classList.contains('occupied')) {
                var occupant = slot.querySelector('.island-icon');
                if (sourceZone) {
                    placeInSlot(sourceZone, occupant); // swap
                } else {
                    returnToPool(occupant);            // pool → occupied: occupant to pool
                    clearSlot(slot);
                }
            } else {
                if (sourceZone) {                      // slot → empty: disallowed (gap)
                    announce('Cannot place here — this would create a gap. Delete a lower rank first.');
                    return;
                }
            }
            var placedIsland = kbSelected.dataset.island;
            placeInSlot(slot, kbSelected);
            kbSelectIcon(null);
            onRankingChanged();
            announce('Island ' + placedIsland + ' placed at rank ' + (idx + 1) + '.');
            // Move focus to next available slot
            var next = null;
            for (var j = idx + 1; j < slots.length; j++) {
                if (!slots[j].classList.contains('locked')) { next = slots[j]; break; }
            }
            (next || slot).focus();

        } else if (slot.classList.contains('occupied')) {
            kbSelectIcon(slot.querySelector('.island-icon')); // select occupant
        } else {
            announce('No island selected. Tab to an island in the pool and press Space or Enter to select it first.');
        }
    });
    // ── End keyboard interaction ─────────────────────────────────────────────

    // ── dragstart ──────────────────────────────────────────────────────────
    document.addEventListener('dragstart', function(e) {
        const icon = e.target.closest('.island-icon');
        if (!icon) return;
        dragging.island = icon.dataset.island;
        dragging.el = icon;
        dragging.sourceZone = icon.closest('.slot-drop-zone') || null;
        setTimeout(function() { icon.style.opacity = '0.4'; }, 0);
    });

    document.addEventListener('dragend', function(e) {
        if (dragging.el) dragging.el.style.opacity = '';
        dragging = { island: null, el: null, sourceZone: null };
    });

    // ── dragover / dragleave / drop helpers ────────────────────────────────
    function addDropTarget(el, isPool) {
        el.addEventListener('dragover', function(e) {
            if (!dragging.el) return;
            if (!isPool && el.classList.contains('locked')) return;
            // Slot → empty slot: disallowed (would create a gap); slot → occupied slot: swap OK
            if (!isPool && dragging.sourceZone && !el.classList.contains('occupied')) return;
            e.preventDefault();
            el.classList.add('dnd-over');
        });
        el.addEventListener('dragleave', function() {
            el.classList.remove('dnd-over');
        });
        el.addEventListener('drop', function(e) {
            e.preventDefault();
            el.classList.remove('dnd-over');
            if (!dragging.el) return;

            if (isPool) {
                // Drop onto pool → return icon, shift up from source slot
                if (dragging.sourceZone) {
                    var slotIndex = Array.from(slots).indexOf(dragging.sourceZone);
                    clearSlot(dragging.sourceZone);
                    returnToPool(dragging.el);
                    shiftUp(slotIndex);
                } else {
                    returnToPool(dragging.el);
                }
            } else {
                if (el.classList.contains('locked')) return;
                const targetZone = el;
                const targetHasIcon = targetZone.classList.contains('occupied');

                if (targetHasIcon) {
                    // Swap: move occupant to source, place dragged icon in target
                    const occupant = targetZone.querySelector('.island-icon');
                    if (dragging.sourceZone) {
                        // Slot → occupied slot: swap
                        placeInSlot(dragging.sourceZone, occupant);
                    } else {
                        // Pool → occupied slot: send occupant back to pool
                        returnToPool(occupant);
                        clearSlot(targetZone);
                    }
                } else {
                    // Target is empty — only reachable from pool (slot → empty is blocked above)
                    if (dragging.sourceZone) return;
                }
                placeInSlot(targetZone, dragging.el);
            }

            onRankingChanged();
        });
    }

    addDropTarget(pool, true);
    slots.forEach(function(slot) { addDropTarget(slot, false); });
    restoreRankingState();
    updateLocking(); // ensure ARIA/tabindex is correct even when there is no saved state
    // ─────────────────────────────────────────────────────────────────────────

    function highlightIsland(island) {
        document.querySelectorAll('.info-table [data-island="' + island + '"]').forEach(function(cell) {
            cell.classList.add('info-col-highlight');
        });
    }
    function unhighlightIsland(island) {
        document.querySelectorAll('.info-table [data-island="' + island + '"]').forEach(function(cell) {
            cell.classList.remove('info-col-highlight');
        });
    }

    // Island circle hover → highlight matching column in info table
    document.querySelectorAll('.island-dot').forEach(function(dot) {
        dot.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        dot.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });

    // Ranking pool/slot icon hover → same highlight
    document.querySelectorAll('.island-icon').forEach(function(icon) {
        icon.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        icon.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });

    // Double-click a pool icon → place it in the first available slot
    document.addEventListener('dblclick', function(e) {
        var icon = e.target.closest('.island-icon');
        if (!icon || !pool.contains(icon)) return;
        var target = null;
        for (var i = 0; i < slots.length; i++) {
            if (!slots[i].classList.contains('occupied') && !slots[i].classList.contains('locked')) {
                target = slots[i];
                break;
            }
        }
        if (!target) return;
        var idx = Array.from(slots).indexOf(target);
        placeInSlot(target, icon);
        onRankingChanged();
        announce('Island ' + icon.dataset.island + ' placed at rank ' + (idx + 1) + '.');
    });
});
</script>

{{ endblock }}