{{ block title }}Decision Task{{ endblock }}

{{ block content }}
<div id="task-app">

    <!-- Progress bar -->
    <div style="margin-bottom:24px;">
        <div style="height:6px; background:#ddd8ce; border-radius:3px; overflow:hidden;">
            <div id="progress-fill" style="height:100%; background:#2a6e7c; transition:width .3s; width:0%"></div>
        </div>
        <div id="progress-label" style="font-size:.8rem; color:#6b7280; margin-top:4px; text-align:right;">Loading…</div>
    </div>

    <div class="card" id="situation-card" style="display:none; position:relative; overflow:hidden;">

        <h2 id="situation-title"></h2>
        <p id="situation-subtitle" style="color:#6b7280; margin-bottom:20px;"></p>

        <!-- Situation-change banner (shown briefly between situations) -->
        <div id="situation-banner" style="display:none; position:absolute; left:0; right:0;
             top:50%; transform:translateY(-50%); z-index:10; text-align:center;
             pointer-events:none;">
            <div style="display:inline-block; background:#2a6e7c; color:#fff;
                        padding:14px 32px; border-radius:8px; font-size:1.1rem;
                        font-weight:bold; box-shadow:0 4px 16px rgba(0,0,0,.18);">
                Next situation loading…
            </div>
        </div>

        <!-- Option boxes -->
        <div style="display:flex; gap:20px; margin:20px 0; justify-content:center;">

            <div id="box-left" onclick="selectOption('left')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Left Option</div>
                <div id="left-label" style="display:none;">—</div>
                <svg id="left-viz" width="100%"
                     viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;">
                </svg>
                <div id="left-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; min-height:32px;"></div>
            </div>

            <div id="box-right" onclick="selectOption('right')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Right Option</div>
                <div id="right-label" style="display:none;">—</div>
                <svg id="right-viz" width="100%"
                     viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;">
                </svg>
                <div id="right-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; min-height:32px;"></div>
            </div>
        </div>

        <!-- THRESHOLD controls -->
        <div id="threshold-controls" style="display:none; text-align:center; margin-top:16px;">
            <p style="margin-bottom:8px;">
                Move the slider to set your personal threshold for this decision.
            </p>
            <!-- Slider labels -->
            <div style="display:flex; justify-content:space-between; max-width:500px;
                        margin:0 auto 4px; font-size:.8rem; color:#6b7280;">
                <span>Always Left</span>
                <span>Always Right</span>
            </div>
            <!-- Slider wrapper: placeholder bar behind, transparent native slider on top -->
            <div id="slider-wrapper" style="position:relative; width:100%; max-width:500px;
                 height:20px; margin:10px auto; cursor:pointer;">
                <div id="slider-placeholder"
                     style="position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
                             height:6px; background:#ddd8ce; border-radius:3px; pointer-events:none;">
                </div>
                <input type="range" id="threshold-slider" min="0" max="11" value="5"
                       style="position:absolute; top:0; left:0; width:100%; height:100%;
                              opacity:0; accent-color:#2a6e7c; cursor:pointer; margin:0;"
                       onmousedown="onSliderActivate(this)" ontouchstart="onSliderActivate(this)"
                       oninput="onSliderChange(this.value)">
            </div>
            <div style="font-size:.95rem; color:#1e2228; margin-top:10px; min-height:1.4em;">
                <strong id="slider-label-text"></strong>
            </div>
        </div>

        <!-- STAIRCASE info -->
        <div id="staircase-info" style="display:none; text-align:center; margin-top:16px;">
            <p id="staircase-prompt" style="color:#6b7280;">
                If in this situation, <strong id="sc-n-left">5</strong> out of 10 people choose the left option, which option would you choose?
            </p>
        </div>

        <!-- FULL MPL info -->
        <div id="full-mpl-info" style="display:none; text-align:center; margin-top:16px;">
            <p style="color:#6b7280;">
                If in this situation, <strong id="mpl-n-left">—</strong> out of 10 people choose the left option, which option would you choose?
            </p>
        </div>


        <div style="display:flex; justify-content:flex-end; margin-top:24px;">
            <button type="button" id="btn-next" onclick="nextSituation()" disabled
                    style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                           border-radius:8px; cursor:pointer; font-size:1rem; opacity:.5;">
                Next →
            </button>
        </div>
    </div>

    <!-- Hidden fields appended to oTree's form on submit -->
    <input type="hidden" id="decisions-field"      name="task_decisions" value="">
    <input type="hidden" id="sc-state-field"       name="staircase_state_data" value="">
    <input type="hidden" id="situation-order-field" name="situation_order_data" value="">
</div>

<script type="application/json" id="situations-data">{{ situations }}</script>

<script>
const TASK_TYPE          = "{{ task_type }}";
const CONDITION          = "{{ condition }}";
const SITUATIONS         = JSON.parse(document.getElementById('situations-data').textContent);
const NUM_PAIRS          = {{ num_pairs }};
const DICTATOR_ENDOWMENT = {{ dictator_endowment }};

let decisions = [];
let sitIdx    = 0;
let scState   = {};
let selectedSide = null;

window.addEventListener('DOMContentLoaded', () => {
    initDecisions();
    console.log(
        TASK_TYPE + ' situation order:',
        SITUATIONS.map((s, i) => (i+1) + ': sit_' + s.id +
            ' (' + s.left.option_id + ' vs ' + s.right.option_id + ')')
    );
    renderSituation();
});

function initDecisions() {
    // Pre-fill a fixed-length array indexed by global situation ID (0–14).
    // decisions[sit.id] always refers to the correct pair regardless of
    // the randomised presentation order.
    decisions = Array.from({length: NUM_PAIRS}, (_, id) => ({
        situation_id:    id,
        task_type:       TASK_TYPE,
        left_option_id:  null,
        right_option_id: null,
        a_is_left:       null,
        condition:       CONDITION,
        threshold:       null,
        switching_point: null,
        choices_map:     {},
        chosen_option:   null,
    }));
    // Fill in presentation details from SITUATIONS (which carry the global id)
    SITUATIONS.forEach(s => {
        decisions[s.id].left_option_id  = s.left.option_id;
        decisions[s.id].right_option_id = s.right.option_id;
        decisions[s.id].a_is_left       = s.a_is_left;
    });
}

function renderSituation() {
    if (sitIdx >= SITUATIONS.length) { submitAll(); return; }

    const sit = SITUATIONS[sitIdx];
    document.getElementById('situation-card').style.display = '';

    const taskLabel = TASK_TYPE === 'dictator' ? 'Allocation Task' : 'Lottery Task';
    document.getElementById('situation-title').textContent =
        taskLabel + ' — Decision ' + (sitIdx+1) + ' of ' + SITUATIONS.length;

    const pct = Math.round((sitIdx / SITUATIONS.length) * 100);
    document.getElementById('progress-fill').style.width = pct + '%';
    document.getElementById('progress-label').textContent =
        'Situation ' + (sitIdx+1) + ' of ' + SITUATIONS.length;

    // Draw visualizations
    if (TASK_TYPE === 'risk') {
        drawRiskWheel('left-viz',  sit.left,  TASK_TYPE);
        drawRiskWheel('right-viz', sit.right, TASK_TYPE);
    } else {
        drawDictatorCard('left-viz',  sit.left,  DICTATOR_ENDOWMENT);
        drawDictatorCard('right-viz', sit.right, DICTATOR_ENDOWMENT);
    }

    resetSelection();

    document.getElementById('threshold-controls').style.display = 'none';
    document.getElementById('staircase-info').style.display     = 'none';
    document.getElementById('full-mpl-info').style.display      = 'none';

    if (CONDITION === 'threshold')  renderThreshold(sit);
    else if (CONDITION === 'staircase') renderStaircase(sit);
    else renderFullMPL(sit);


}

// ---- Option selection ----
function selectOption(side) {
    if (CONDITION === 'threshold') return;
    selectedSide = side;
    document.getElementById('box-left').style.borderColor  = side==='left'  ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-right').style.borderColor = side==='right' ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-left').style.background   = side==='left'  ? '#e8f4f7' : '';
    document.getElementById('box-right').style.background  = side==='right' ? '#e8f4f7' : '';
    const btn = document.getElementById('btn-next');
    btn.disabled = false; btn.style.opacity = '1';
}

function resetSelection() {
    selectedSide = null;
    document.getElementById('box-left').style.borderColor  = '#ddd8ce';
    document.getElementById('box-right').style.borderColor = '#ddd8ce';
    document.getElementById('box-left').style.background   = '';
    document.getElementById('box-right').style.background  = '';
    const btn = document.getElementById('btn-next');
    if (CONDITION !== 'threshold') { btn.disabled = true; btn.style.opacity = '.5'; }
}

// ---- Dictator game card visualization ----
// Draws a two-row card showing initial split and final payouts.
// Coin radius scales as sqrt(amount / endowment) * MAX_R so face area ∝ amount.
function drawDictatorCard(svgId, opt, endowment) {
    const svg = document.getElementById(svgId);
    if (!svg) return;
    while (svg.firstChild) svg.removeChild(svg.firstChild);

    const ns      = 'http://www.w3.org/2000/svg';
    const MAX_R   = 26;   // radius for maximum amount (endowment)
    const W       = 260;
    const H       = 310;
    const COL_YOU = 105;
    const COL_OTH = 220;
    const DIV_V   = 162;  // horizontal divider y

    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);

    function mk(tag, attrs) {
        const el = document.createElementNS(ns, tag);
        for (const [k,v] of Object.entries(attrs)) el.setAttribute(k, v);
        return el;
    }
    function mkText(txt, x, y, size, weight, fill) {
        const el = mk('text', {
            'font-family':'sans-serif', 'font-size': size || 13,
            'font-weight': weight || '400', fill: fill || '#333',
            'text-anchor':'middle', 'dominant-baseline':'central',
            x, y
        });
        el.textContent = txt;
        return el;
    }

    // Arrow marker
    const defs = mk('defs', {});
    const marker = mk('marker', {id: svgId+'-arr', viewBox:'0 0 10 10',
        refX:8, refY:5, markerWidth:6, markerHeight:6, orient:'auto-start-reverse'});
    const markerPath = mk('path', {d:'M2 1L8 5L2 9', fill:'none',
        stroke:'#666', 'stroke-width':'1.5', 'stroke-linecap':'round', 'stroke-linejoin':'round'});
    marker.appendChild(markerPath);
    defs.appendChild(marker);
    svg.appendChild(defs);

    // Column headers
    const hYou = mkText('You',   COL_YOU, 22, 13, '600', '#444'); svg.appendChild(hYou);
    const hOth = mkText('Other', COL_OTH, 22, 13, '600', '#444'); svg.appendChild(hOth);

    // Dividers
    svg.appendChild(mk('line', {x1:162, y1:30, x2:162, y2:295, stroke:'#ccc', 'stroke-width':1}));
    svg.appendChild(mk('line', {x1:10,  y1:DIV_V, x2:255, y2:DIV_V, stroke:'#ccc', 'stroke-width':1}));

    // Row labels
    const lbls = [['initial','split',95,107],['final','payouts',228,240]];
    lbls.forEach(([l1,l2,y1,y2]) => {
        const t1 = mkText(l1, 27, y1, 11, '400', '#888'); svg.appendChild(t1);
        const t2 = mkText(l2, 27, y2, 11, '400', '#888'); svg.appendChild(t2);
    });

    // Draw a single coin centred at (cx, cy) with given amount
    function drawCoin(cx, cy, amount) {
        const r  = Math.sqrt(amount / endowment) * MAX_R;
        const th = Math.max(8, r * 0.55);
        const ry = Math.max(3, r * 0.37);
        // Inset ring: 85% of face radius, y-radius scales proportionally
        const rRing  = r * 0.85;
        const ryRing = ry * 0.85;

        const g = mk('g', {transform: 'translate(' + cx + ',' + cy + ')'});
        // Bottom ellipse (dark)
        g.appendChild(mk('ellipse', {cx:0, cy:th/2, rx:r, ry:ry, fill:'#b8881a', stroke:'none'}));
        // Side rect (same dark, no stroke)
        g.appendChild(mk('rect', {x:-r, y:-th/2, width:r*2, height:th, fill:'#b8881a', stroke:'none'}));
        // Top ellipse (bright gold, no stroke)
        g.appendChild(mk('ellipse', {cx:0, cy:-th/2, rx:r, ry:ry, fill:'#e8c86a', stroke:'none'}));
        // Dotted ring inset on face
        g.appendChild(mk('ellipse', {cx:0, cy:-th/2, rx:rRing, ry:ryRing,
            fill:'none', stroke:'#c8a030', 'stroke-width':'1.2', 'stroke-dasharray':'3 3'}));
        // Serif "1" numeral on face — only if coin is large enough to fit it
        if (r >= 14) {
            const t = mk('text', {
                'font-family':'serif', 'font-size': Math.round(r * 0.72),
                'font-weight':'700', fill:'#a07010',
                'text-anchor':'middle', 'dominant-baseline':'central',
                x: 0, y: -th/2
            });
            t.textContent = '1';
            g.appendChild(t);
        }
        svg.appendChild(g);
    }

    // Compute values
    const ownPayoff    = opt.own_payoff;
    const transfer     = opt.transfer;
    const multiplier   = opt.multiplier;
    const otherInitial = transfer;
    const otherFinal   = transfer * multiplier;

    // ROW 1: coins at y=80
    if (ownPayoff    > 0) drawCoin(COL_YOU, 80, ownPayoff);
    if (otherInitial > 0) drawCoin(COL_OTH, 80, otherInitial);

    // ROW 1: MU labels at y=120
    const t1 = mkText(ownPayoff    + ' MU', COL_YOU, 120, 13, '700', '#333'); svg.appendChild(t1);
    const t2 = mkText(otherInitial + ' MU', COL_OTH, 120, 13, '700', '#333'); svg.appendChild(t2);

    // Arrows passing through banner labels
    function drawArrow(cx, label, isMultiplier) {
        const mUrl = 'url(#' + svgId + '-arr)';
        // Line above banner
        svg.appendChild(mk('line', {x1:cx, y1:138, x2:cx, y2:150,
            stroke:'#666', 'stroke-width':'1.5'}));
        // Banner box
        const bw = isMultiplier ? 44 : 64;
        svg.appendChild(mk('rect', {x:cx-bw/2, y:150, width:bw, height:19,
            rx:4, fill:'white', stroke:'#ccc', 'stroke-width':'0.8'}));
        // Banner text
        const bt = mkText(label, cx, 160,
            isMultiplier ? 11 : 10,
            isMultiplier ? '700' : '400',
            isMultiplier ? '#333' : '#555');
        svg.appendChild(bt);
        // Line below banner with arrowhead
        svg.appendChild(mk('line', {x1:cx, y1:169, x2:cx, y2:182,
            stroke:'#666', 'stroke-width':'1.5', 'marker-end':mUrl}));
    }

    drawArrow(COL_YOU, 'you keep', false);
    drawArrow(COL_OTH, '× ' + multiplier, true);

    // ROW 2: coins at y=215
    if (ownPayoff  > 0) drawCoin(COL_YOU, 215, ownPayoff);
    if (otherFinal > 0) drawCoin(COL_OTH, 215, otherFinal);

    // ROW 2: MU labels at y=255
    const t3 = mkText(ownPayoff  + ' MU', COL_YOU, 255, 13, '700', '#333'); svg.appendChild(t3);
    const t4 = mkText(otherFinal + ' MU', COL_OTH, 255, 13, '700', '#333'); svg.appendChild(t4);
}

// ---- Risk wheel visualization ----
// Left outcome = LEFT half (centered at 9 o'clock).
// Split line is vertical (12 to 6 o'clock position).
// For an 80/20 split: orange occupies 80%, centered on the left (9 o'clock side).
// No divider lines drawn. Payoffs always at y=0 (the horizontal midline).
function drawRiskWheel(svgId, opt, taskType) {
    const svg = document.getElementById(svgId);
    if (!svg) return;
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    svg.setAttribute('viewBox', '-100 -100 200 200');

    const ns     = 'http://www.w3.org/2000/svg';
    const R      = 80;
    const ORANGE = '#E07B2A';
    const PURPLE = '#7C5CBF';

    function mkEl(tag, attrs) {
        const el = document.createElementNS(ns, tag);
        for (const [k,v] of Object.entries(attrs)) el.setAttribute(k,v);
        return el;
    }
    function mkText(txt, x, y, size) {
        const el = document.createElementNS(ns, 'text');
        el.setAttribute('x', x); el.setAttribute('y', y);
        el.setAttribute('fill', 'white'); el.setAttribute('font-family', 'sans-serif');
        el.setAttribute('font-size', size || 16); el.setAttribute('font-weight', '700');
        el.setAttribute('text-anchor', 'middle'); el.setAttribute('dominant-baseline', 'central');
        el.textContent = txt + ' MU';
        return el;
    }

    const pLeft  = parseFloat(opt.probability_left);
    const pRight = 1 - pLeft;
    const lOut   = opt.left_outcome;
    const rOut   = opt.right_outcome;

    const certain = (lOut === rOut) || pLeft >= 0.999;

    // Full orange circle always
    svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R, fill:ORANGE}));

    if (!certain) {
        // Purple sector: occupies the right side, centered at 3 o'clock.
        // It spans pRight x 360deg symmetrically around 3 o'clock (angle=0).
        const halfSweep = pRight * Math.PI;
        const topAngle  = -halfSweep;   // above 3 o'clock
        const botAngle  =  halfSweep;   // below 3 o'clock

        const tx = Math.cos(topAngle) * R;
        const ty = Math.sin(topAngle) * R;
        const bx = Math.cos(botAngle) * R;
        const by = Math.sin(botAngle) * R;
        const largeArc = pRight > 0.5 ? 1 : 0;

        // Purple sector: from top point, clockwise (sweep=1) to bottom point
        svg.appendChild(mkEl('path', {
            d: `M0,0 L${tx},${ty} A${R},${R} 0 ${largeArc},1 ${bx},${by} Z`,
            fill: PURPLE
        }));

        // Border ring
        svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R, fill:'none',
            stroke:'white', 'stroke-width':'1', opacity:'0.25'}));

        // Labels: orange always on left (9 o'clock), purple always on right (3 o'clock)
        svg.appendChild(mkText(lOut, -(R * 0.48), 0, 16));
        svg.appendChild(mkText(rOut,  (R * 0.48), 0, 16));
    } else {
        // Certain outcome — just the orange circle with centred label
        svg.appendChild(mkText(lOut, 0, 0, 19));
    }

    updateProbLabel(svgId, Math.round(pLeft*100), Math.round(pRight*100));
}

function updateProbLabel(svgId, pL, pR, hide) {
    let el = document.getElementById(svgId + '-prob');
    if (!el) {
        el = document.createElement('div');
        el.id = svgId + '-prob';
        el.style.cssText = 'text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;font-family:sans-serif;';
        const svg = document.getElementById(svgId);
        if (svg && svg.parentNode) svg.parentNode.insertBefore(el, svg.nextSibling);
    }
    if (hide) { el.textContent = ''; return; }
    el.textContent = pR === 0 ? '100%' : pL + '% / ' + pR + '%';
}

// ---- People pictograms ----
function renderPeople(containerId, nActive, total, allGrey) {
    const c = document.getElementById(containerId);
    c.innerHTML = '';
    for (let i = 0; i < total; i++) {
        const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
        svg.setAttribute('viewBox','0 0 24 24');
        svg.setAttribute('width','24'); svg.setAttribute('height','24');
        const active = !allGrey && i < nActive;
        svg.style.fill    = active ? '#2a6e7c' : '#c0bdb5';
        svg.style.opacity = active ? '.85'     : '.4';
        svg.innerHTML = '<circle cx="12" cy="6" r="3.5"/><path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>';
        c.appendChild(svg);
    }
}

// ---- THRESHOLD ----
function renderThreshold(sit) {
    document.getElementById('threshold-controls').style.display = '';
    const prev   = decisions[sit.id].threshold;
    const slider = document.getElementById('threshold-slider');
    const btn    = document.getElementById('btn-next');
    if (prev !== null) {
        // Previously set — show styled slider, hide gray placeholder, restore value
        slider.style.opacity = '1';
        slider.style.pointerEvents = '';
        document.getElementById('slider-placeholder').style.display = 'none';
        slider.value = prev;
        onSliderChange(prev);
        btn.disabled = false; btn.style.opacity = '1';
    } else {
        // Not yet touched — show gray placeholder bar, keep slider transparent/interactive
        slider.style.opacity = '0';
        slider.style.pointerEvents = '';
        document.getElementById('slider-placeholder').style.display = '';
        renderPeople('left-people',  0, 10, true);
        renderPeople('right-people', 0, 10, true);
        document.getElementById('slider-label-text').textContent = '';
        btn.disabled = true; btn.style.opacity = '.5';
    }
}

function onSliderActivate(slider) {
    // Reveal the slider on first click even if value does not change
    const placeholder = document.getElementById('slider-placeholder');
    if (slider.style.opacity === '0') {
        slider.style.opacity = '1';
        placeholder.style.display = 'none';
        // Trigger a full update with the current value
        onSliderChange(slider.value);
    }
}

function onSliderChange(val) {
    val = parseInt(val);
    decisions[SITUATIONS[sitIdx].id].threshold = val;

    // Enable next on first interaction
    const btn = document.getElementById('btn-next');
    btn.disabled = false; btn.style.opacity = '1';

    const labelEl = document.getElementById('slider-label-text');
    const boxL = document.getElementById('box-left');
    const boxR = document.getElementById('box-right');
    // Reset any extreme-value border emphasis before applying new state
    boxL.style.border = '2px solid #ddd8ce';
    boxR.style.border = '2px solid #ddd8ce';
    if (val === 0) {
        labelEl.textContent = 'I would always choose the left option.';
        // All icons on the right (the unchosen side); left box gets emphasis
        renderPeople('left-people',  0,  10);
        renderPeople('right-people', 10, 10);
        boxL.style.border = '3px solid #2a6e7c';
    } else if (val === 11) {
        labelEl.textContent = 'I would always choose the right option.';
        // All icons on the left (the unchosen side); right box gets emphasis
        renderPeople('left-people',  10, 10);
        renderPeople('right-people', 0,  10);
        boxR.style.border = '3px solid #2a6e7c';
    } else {
        labelEl.textContent =
            'I would choose the left option if at least ' + val +
            ' out of 10 people chose it; otherwise I would choose the right option.';
        renderPeople('left-people',  val,      10);
        renderPeople('right-people', 10 - val, 10);
    }
}

// ---- STAIRCASE ----
// The staircase identifies the participant's threshold T in [0,10]:
// T is the minimum number of people choosing left for the participant to also choose left.
// Algorithm: maintain [lo, hi] as the range of still-possible threshold values.
// Always show mid = floor((lo + hi) / 2).
//   Chose left  at mid -> threshold <= mid -> hi = mid
//   Chose right at mid -> threshold >= mid+1 -> lo = mid+1
// After 4 steps lo === hi and the threshold is identified exactly.
// Start: lo=0, hi=10, first split shown = floor((0+10)/2) = 5.

function initScForSit(idx) {
    if (!scState[idx]) {
        scState[idx] = {
            lo: 0, hi: 11,
            sequence: [5],   // splits shown, for the record
            responses: [],   // 'left' or 'right' per step
            done: false,
            switching_point: null,
        };
    }
}

function renderStaircase(sit) {
    initScForSit(sit.id);
    const sc = scState[sit.id];
    document.getElementById('staircase-info').style.display = '';
    const nLeft = sc.sequence[sc.responses.length];
    document.getElementById('sc-n-left').textContent = nLeft;
    renderPeople('left-people',  nLeft,      10);
    renderPeople('right-people', 10 - nLeft, 10);
}

function recordStaircaseChoice(chosenId) {
    const sit = SITUATIONS[sitIdx];
    initScForSit(sit.id);
    const sc  = scState[sit.id];
    const mid = sc.sequence[sc.responses.length];
    const side = chosenId === sit.left.option_id ? 'left' : 'right';
    sc.responses.push(side);

    if (side === 'left') {
        // Threshold is at most mid
        sc.hi = mid;
    } else {
        // Threshold is at least mid + 1
        sc.lo = mid + 1;
    }

    if (sc.lo === sc.hi) {
        // Range collapsed — threshold identified
        sc.done = true;
        sc.switching_point = sc.lo;
        decisions[sit.id].switching_point = sc.lo;
        return;
    }

    // Bisect the remaining range and queue the next split
    const next = Math.floor((sc.lo + sc.hi) / 2);
    sc.sequence.push(next);

    // Reset highlight and re-render for the next split
    resetSelection();
    renderStaircase(sit);
}

// ---- FULL MPL ----
function initMPLForSit(idx) {
    if (!decisions[idx].mpl_order) {
        const arr = Array.from({length:11}, (_,i) => i);
        for (let i = arr.length-1; i > 0; i--) {
            const j = Math.floor(Math.random()*(i+1));
            [arr[i],arr[j]] = [arr[j],arr[i]];
        }
        decisions[idx].mpl_order = arr;
        decisions[idx].mpl_step  = 0;
    }
}

function renderFullMPL(sit) {
    initMPLForSit(sit.id);
    document.getElementById('full-mpl-info').style.display = '';
    const dec = decisions[sit.id];
    const val = dec.mpl_order[dec.mpl_step];
    document.getElementById('mpl-n-left').textContent = val;
    renderPeople('left-people',  val,      10);
    renderPeople('right-people', 10 - val, 10);
}

function recordMPLChoice(chosenId) {
    const sit = SITUATIONS[sitIdx];
    const dec = decisions[sit.id];
    const val = dec.mpl_order[dec.mpl_step];
    dec.choices_map[val] = chosenId;
    dec.mpl_step++;
    if (dec.mpl_step < 11) {
        resetSelection();
        renderFullMPL(SITUATIONS[sitIdx]);
    }
}

// ---- Navigation ----
function advanceToNextSituation() {
    // Lock all interactions immediately
    document.getElementById('box-left').style.pointerEvents  = 'none';
    document.getElementById('box-right').style.pointerEvents = 'none';
    document.getElementById('slider-wrapper').style.pointerEvents = 'none';
    // Show banner briefly, then render next situation
    const banner = document.getElementById('situation-banner');
    banner.style.display = '';
    const btn = document.getElementById('btn-next');
    btn.disabled = true; btn.style.opacity = '.5';
    setTimeout(function() {
        banner.style.display = 'none';
        // Restore interactions for the next situation
        document.getElementById('box-left').style.pointerEvents  = '';
        document.getElementById('box-right').style.pointerEvents = '';
        document.getElementById('slider-wrapper').style.pointerEvents = '';
        sitIdx++;
        renderSituation();
    }, 900);
}

function nextSituation() {
    const sit = SITUATIONS[sitIdx];

    if (CONDITION === 'staircase') {
        const chosenId = selectedSide === 'left' ? sit.left.option_id : sit.right.option_id;
        recordStaircaseChoice(chosenId);
        if (scState[sit.id].done) {
            advanceToNextSituation();
        }
        // If not done, recordStaircaseChoice already called resetSelection+renderStaircase
        return;
    }

    if (CONDITION === 'full_MPL') {
        const chosenId = selectedSide === 'left' ? sit.left.option_id : sit.right.option_id;
        recordMPLChoice(chosenId);
        if (decisions[sit.id].mpl_step >= 11) {
            advanceToNextSituation();
        }
        // If not done, recordMPLChoice already called resetSelection+renderFullMPL
        return;
    }

    // threshold: advance directly (no sub-steps)
    advanceToNextSituation();
}

function prevSituation() {
    if (sitIdx > 0) { sitIdx--; renderSituation(); }
}

// ---- Submit ----
function activateSlider() {
    // No-op: the native slider now sits on top of the placeholder and handles
    // clicks itself. This function is kept in case it is called elsewhere.
}

function submitAll() {
    const btn = document.getElementById('btn-next');
    btn.disabled = true; btn.style.opacity = '.5'; btn.textContent = 'Saving…';
    document.getElementById('decisions-field').value = JSON.stringify(decisions);
    document.getElementById('sc-state-field').value  = JSON.stringify(scState);
    // Save situation presentation order as list of global situation IDs
    document.getElementById('situation-order-field').value =
        JSON.stringify(SITUATIONS.map(s => s.id));
    document.querySelector('form').submit();
}
</script>

<style>
.card {
    background:#fff; border:1px solid #ddd8ce; border-radius:8px;
    padding:28px 32px; margin-bottom:20px;
}
h2 { font-size:1.3rem; color:#1a4f5a; margin-bottom:12px; }


</style>

{{ endblock }}