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

{{ block content }}

<style>
.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;
  overflow-x: auto;
  padding: 10px;
}

.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;
                            min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }

.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;
}

.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: 100px;
}
.dnd-pool.dnd-over { background: #e8f4ff; border-color: #5aafe8; }

/* island icons */
.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 practice round are:</p>
      <div class="pf-graph-container">
        {{ pf_graph }}
      </div>
      <p>Each island has room for <b>1</b> traveler. There are <b>2</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: A and B only -->
      <div id="prac-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>

      <!-- ranking table with 2 drop zones -->
      <table class="rank-table">
        <thead><tr><th>Rank</th><th>Island</th><th></th></tr></thead>
        <tbody id="prac-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"
                   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>

<p></p>
{{ next_button }}

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    var RANK_STORAGE_KEY = 'prac_round_ranking';
    var pool  = document.getElementById('prac-pool');
    var tbody = document.getElementById('prac-tbody');
    var slots = tbody.querySelectorAll('.slot-drop-zone');

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

    var dragging = { island: null, el: null, sourceZone: null };
    var 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.');
    }

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

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

    function placeInSlot(zone, iconEl) {
        zone.appendChild(iconEl);
        zone.classList.add('occupied');
        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) {
        zone.classList.remove('occupied');
        getInput(zone).value = '';
    }

    function updateLocking() {
        slots.forEach(function(slot, i) {
            if (i === 0) return;
            slot.classList.toggle('locked', !slots[i - 1].classList.contains('occupied'));
        });
        tbody.querySelectorAll('.delete-btn').forEach(function(btn) {
            var idx = parseInt(btn.dataset.slot) - 1;
            btn.style.display = slots[idx].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
        pool.querySelectorAll('.island-icon').forEach(function(icon) { icon.tabIndex = 0; });
        tbody.querySelectorAll('.island-icon').forEach(function(icon) { icon.tabIndex = -1; });
    }

    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;
            }
        }
    }

    function deleteRank(slotIndex) {
        var icon = slots[slotIndex].querySelector('.island-icon');
        if (!icon) return;
        clearSlot(slots[slotIndex]);
        returnToPool(icon);
        shiftUp(slotIndex);
        updateLocking();
        saveRankingState();
    }

    tbody.querySelectorAll('.delete-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            deleteRank(parseInt(this.dataset.slot) - 1);
        });
    });

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

    // Keyboard: Space/Enter to place; Delete/Backspace to remove from slots
    tbody.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');
            if (slot.classList.contains('occupied')) {
                var occupant = slot.querySelector('.island-icon');
                if (sourceZone) {
                    placeInSlot(sourceZone, occupant);
                } else {
                    returnToPool(occupant);
                    clearSlot(slot);
                }
            } else {
                if (sourceZone) {
                    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);
            updateLocking();
            saveRankingState();
            announce('Island ' + placedIsland + ' placed at rank ' + (idx + 1) + '.');
            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'));
        } else {
            announce('No island selected. Tab to an island in the pool and press Space or Enter to select it first.');
        }
    });

    function saveRankingState() {
        var state = {};
        slots.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 = tbody.querySelector('.slot-drop-zone[data-field="' + field + '"]');
            var icon = pool.querySelector('.island-icon[data-island="' + letter + '"]');
            if (zone && icon) placeInSlot(zone, icon);
        });
        updateLocking();
    }

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

    // ── drop targets ──────────────────────────────────────────────────────────
    function addDropTarget(el, isPool) {
        el.addEventListener('dragover', function(e) {
            if (!dragging.el) return;
            if (!isPool && el.classList.contains('locked')) return;
            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) {
                if (dragging.sourceZone) {
                    var idx = Array.from(slots).indexOf(dragging.sourceZone);
                    clearSlot(dragging.sourceZone);
                    returnToPool(dragging.el);
                    shiftUp(idx);
                } else {
                    returnToPool(dragging.el);
                }
            } else {
                if (el.classList.contains('locked')) return;
                if (el.classList.contains('occupied')) {
                    var occupant = el.querySelector('.island-icon');
                    if (dragging.sourceZone) {
                        placeInSlot(dragging.sourceZone, occupant);
                    } else {
                        returnToPool(occupant);
                        clearSlot(el);
                    }
                } else {
                    if (dragging.sourceZone) return;
                }
                placeInSlot(el, dragging.el);
            }

            updateLocking();
            saveRankingState();
        });
    }

    addDropTarget(pool, true);
    slots.forEach(function(slot) { addDropTarget(slot, false); });

    // ── double-click: place icon in first available slot ──────────────────────
    pool.addEventListener('dblclick', function(e) {
        var icon = e.target.closest('.island-icon');
        if (!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);
        updateLocking();
        saveRankingState();
        announce('Island ' + icon.dataset.island + ' placed at rank ' + (idx + 1) + '.');
    });

    // ── hover highlight: island icons ↔ info table columns ───────────────────
    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');
        });
    }
    document.querySelectorAll('.island-dot').forEach(function(dot) {
        dot.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        dot.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });
    document.querySelectorAll('.island-icon').forEach(function(icon) {
        icon.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        icon.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });

    restoreRankingState();
    updateLocking();
});
</script>

{{ endblock }}