{{ extends 'global/Page.html' }}
{{ block title }}Your Input: Island Rankings{{ endblock }}

{{ block content }}

<style>
.rank-interfaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin: 16px auto;
}
.rank-box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    min-width: 200px;
}
.rank-box-caption {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center;
}
.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: 160px;
}
.dnd-pool.dnd-over { background: #e8f4ff; border-color: #5aafe8; }
.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;
}
.island-icon:active { cursor: grabbing; }
.rank-table { border-collapse: collapse; margin: 0 auto; }
.rank-table th, .rank-table td { border: 1px solid #ddd; padding: 4px 8px; text-align: center; }
.rank-table th { font-weight: bold; }
.slot-drop-zone {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px dashed #bbb; display: flex;
    align-items: center; justify-content: center;
    margin: 0 auto; background: #f5f5f5;
}
.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; }
/* 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>

<p>The island rankings you and all other travelers report may have a <b>cap</b>.</p>
<p>This limits the number of islands you can rank in your submission. <b>You cannot be sent to unranked islands.</b></p>
<p>Feel free to click below to explore how the interface works. Double-clicking on an island will rank it in your top unfilled slot.</p>

<div class="rank-interfaces">

    <!-- Cap: 6 interface -->
    <div>
        <p class="rank-box-caption">Cap: None</p>
        <div class="rank-box">
            <p>Please submit your ranking:</p>
            <div id="pool-cap6" 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>
            <table class="rank-table">
                <thead><tr><th>Rank</th><th>Island</th><th></th></tr></thead>
                <tbody id="tbody-cap6" role="listbox" aria-label="Rank slots">
                    <tr><td>1</td><td><div class="slot-drop-zone" data-field="prac_rank1" role="option" tabindex="0" aria-label="Rank 1 slot, empty" aria-disabled="false"></div><input type="hidden" name="prac_rank1" id="prac_rank1-input" value=""></td><td><button type="button" class="delete-btn" data-slot="1" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>2</td><td><div class="slot-drop-zone" data-field="prac_rank2" role="option" tabindex="-1" aria-label="Rank 2 slot, locked. Fill rank 1 first." aria-disabled="true"></div><input type="hidden" name="prac_rank2" id="prac_rank2-input" value=""></td><td><button type="button" class="delete-btn" data-slot="2" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>3</td><td><div class="slot-drop-zone" data-field="prac_rank3" role="option" tabindex="-1" aria-label="Rank 3 slot, locked. Fill rank 2 first." aria-disabled="true"></div><input type="hidden" name="prac_rank3" id="prac_rank3-input" value=""></td><td><button type="button" class="delete-btn" data-slot="3" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>4</td><td><div class="slot-drop-zone" data-field="prac_rank4" role="option" tabindex="-1" aria-label="Rank 4 slot, locked. Fill rank 3 first." aria-disabled="true"></div><input type="hidden" name="prac_rank4" id="prac_rank4-input" value=""></td><td><button type="button" class="delete-btn" data-slot="4" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>5</td><td><div class="slot-drop-zone" data-field="prac_rank5" role="option" tabindex="-1" aria-label="Rank 5 slot, locked. Fill rank 4 first." aria-disabled="true"></div><input type="hidden" name="prac_rank5" id="prac_rank5-input" value=""></td><td><button type="button" class="delete-btn" data-slot="5" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>6</td><td><div class="slot-drop-zone" data-field="prac_rank6" role="option" tabindex="-1" aria-label="Rank 6 slot, locked. Fill rank 5 first." aria-disabled="true"></div><input type="hidden" name="prac_rank6" id="prac_rank6-input" value=""></td><td><button type="button" class="delete-btn" data-slot="6" style="display:none">&#x2715;</button></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Cap: 2 interface -->
    <div>
        <p class="rank-box-caption">Cap: {{ C.NUM_CAP_TREAT }}</p>
        <div class="rank-box">
            <p>Please submit your ranking:</p>
            <div id="pool-cap2" 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>
            <table class="rank-table">
                <thead><tr><th>Rank</th><th>Island</th><th></th></tr></thead>
                <tbody id="tbody-cap2" role="listbox" aria-label="Rank slots">
                    <tr><td>1</td><td><div class="slot-drop-zone" data-field="prac_cap2_rank1" role="option" tabindex="0" aria-label="Rank 1 slot, empty" aria-disabled="false"></div><input type="hidden" name="prac_cap2_rank1" id="prac_cap2_rank1-input" value=""></td><td><button type="button" class="delete-btn" data-slot="1" style="display:none">&#x2715;</button></td></tr>
                    <tr><td>2</td><td><div class="slot-drop-zone" data-field="prac_cap2_rank2" role="option" tabindex="-1" aria-label="Rank 2 slot, locked. Fill rank 1 first." aria-disabled="true"></div><input type="hidden" name="prac_cap2_rank2" id="prac_cap2_rank2-input" value=""></td><td><button type="button" class="delete-btn" data-slot="2" style="display:none">&#x2715;</button></td></tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

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

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

<script>
var allCancelSelectionFns = [];

function initRankInterface(poolId, tbodyId) {
    var pool = document.getElementById(poolId);
    var tbody = document.getElementById(tbodyId);
    var slots = tbody.querySelectorAll('.slot-drop-zone');
    var dragging = { island: null, el: null, sourceZone: null };
    var kbSelected = null;

    // Lock all slots except first on load
    slots.forEach(function(slot, i) { if (i > 0) slot.classList.add('locked'); });

    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.');
    }
    allCancelSelectionFns.push(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();
    }
    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();
            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.');
        }
    });

    // Double-click a pool icon → place 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();
        announce('Island ' + icon.dataset.island + ' placed at rank ' + (idx + 1) + '.');
    });

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

    pool.addEventListener('dragstart', function(e) {
        var icon = e.target.closest('.island-icon');
        if (!icon || !pool.contains(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 };
    });

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

document.addEventListener('DOMContentLoaded', function() {
    // Escape cancels selection in whichever interface is active
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') allCancelSelectionFns.forEach(function(fn) { fn(); });
    });
    initRankInterface('pool-cap6', 'tbody-cap6');
    initRankInterface('pool-cap2', 'tbody-cap2');
});
</script>

{{ endblock }}