{{ extends 'global/IntroPage.html' }}
{{ block title }}Priority Scores{{ endblock }}

{{ block page_body }}

<style>
.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 #aaa;
    border-radius: 8px;
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    min-height: 380px;
}
.pf-intro-text { min-height: 6.5em; }
.draw-btn {
    display: block;
    margin: 0 auto 14px;
    background-color: rgb(21, 72, 101);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 16px;
    cursor: pointer;
}
.draw-btn:hover { background-color: rgb(16, 55, 80); }
</style>

<div class="pf-intro-text">
<p>You can click below to explore how priority scores are drawn.</p>
<p>Remember, each traveler will have a different priority score.</p>
<button class="draw-btn" type="button" onclick="doDraw()">Draw New Priority Scores</button>
</div>

<div class="box">
    <div class="info-table-container">
        <table class="info-table">
            <tr>
                <th class="row-label">Island</th>
                <th data-island="A"><span class="island-badge" style="background-color:rgb(21,96,130);color:white">A</span></th>
                <th data-island="B"><span class="island-badge" style="background-color:rgb(233,113,50);color:white">B</span></th>
                <th data-island="C"><span class="island-badge" style="background-color:rgb(25,107,36);color:white">C</span></th>
                <th data-island="D"><span class="island-badge" style="background-color:rgb(15,158,213);color:white">D</span></th>
                <th data-island="E"><span class="island-badge" style="background-color:rgb(160,43,147);color:white">E</span></th>
                <th data-island="F"><span class="island-badge" style="background-color:rgb(209,209,209);color:#222">F</span></th>
            </tr>
            <tr style="opacity:0.3">
                <th class="row-label">Points</th>
                <td data-island="A">{{ init_payoffs.0 }}</td>
                <td data-island="B">{{ init_payoffs.1 }}</td>
                <td data-island="C">{{ init_payoffs.2 }}</td>
                <td data-island="D">{{ init_payoffs.3 }}</td>
                <td data-island="E">{{ init_payoffs.4 }}</td>
                <td data-island="F">{{ init_payoffs.5 }}</td>
            </tr>
            <tr>
                <th class="row-label">Priority Score</th>
                <td id="pr-A"></td>
                <td id="pr-B"></td>
                <td id="pr-C"></td>
                <td id="pr-D"></td>
                <td id="pr-E"></td>
                <td id="pr-F"></td>
            </tr>
            <tr>
                <th class="row-label">% Lower Priority</th>
                <td id="pct-A"></td>
                <td id="pct-B"></td>
                <td id="pct-C"></td>
                <td id="pct-D"></td>
                <td id="pct-E"></td>
                <td id="pct-F"></td>
            </tr>
        </table>
    </div>
    <div style="opacity:0.3" id="points-svg-wrapper"></div>
    <div id="priority-svg-wrapper"></div>
</div>

<p></p>
<div class="otree-nav-buttons">{{ back_button }} {{ next_button }}</div>

<script>
const MIN_PTS = {{ C.MIN_PTS }};
const MAX_PTS = {{ C.MAX_PTS }};
const NUM_PLAYERS = {{ num_players }};
const ISLANDS = ['A', 'B', 'C', 'D', 'E', 'F'];
const COLORS = [
    'rgb(21, 96, 130)', 'rgb(233, 113, 50)', 'rgb(25, 107, 36)',
    'rgb(15, 158, 213)', 'rgb(160, 43, 147)', 'rgb(209, 209, 209)'
];
const TEXT_COLORS = ['white', 'white', 'white', 'white', 'white', '#222'];

const initPayoffs = [
    {{ init_payoffs.0 }}, {{ init_payoffs.1 }}, {{ init_payoffs.2 }},
    {{ init_payoffs.3 }}, {{ init_payoffs.4 }}, {{ init_payoffs.5 }}
];
const initPriorities = [
    {{ init_priorities.0 }}, {{ init_priorities.1 }}, {{ init_priorities.2 }},
    {{ init_priorities.3 }}, {{ init_priorities.4 }}, {{ init_priorities.5 }}
];

// Shared SVG number-line builder. showEndLabels adds (Lowest)/(Highest).
function buildDotLineSVG(label, values, vMin, vMax, showEndLabels) {
    const svgWidth = 600, pad = 50, lineWidth = 500, r = 9, spacing = 20;

    const items = values.map((v, i) => ({
        x: pad + (v - vMin) / (vMax - vMin) * lineWidth,
        y: 0,
        color: COLORS[i],
        textColor: TEXT_COLORS[i],
        island: ISLANDS[i]
    }));

    // Initial y grouping for stacked dots
    const groups = {};
    items.forEach(it => {
        const key = Math.round(it.x);
        (groups[key] = groups[key] || []).push(it);
    });
    Object.values(groups).forEach(grp => {
        const n = grp.length;
        grp.sort((a, b) => (a.island < b.island ? -1 : 1));
        grp.forEach((p, j) => { p.y = -(n - 1) / 2 * spacing + j * spacing; });
    });

    // Collision avoidance
    const minSep = 2 * r + 2;
    for (let iter = 0; iter < 300; iter++) {
        let moved = false;
        for (let a = 0; a < items.length; a++) {
            for (let b = a + 1; b < items.length; b++) {
                const ia = items[a], ib = items[b];
                const dx = Math.abs(ia.x - ib.x);
                if (dx >= minSep) continue;
                const neededDy = Math.sqrt(Math.max(0, minSep * minSep - dx * dx));
                const dy = ib.y - ia.y;
                if (Math.abs(dy) < neededDy - 0.01) {
                    const extra = (neededDy - Math.abs(dy)) / 2;
                    if (dy >= 0) { ia.y -= extra; ib.y += extra; }
                    else { ia.y += extra; ib.y -= extra; }
                    moved = true;
                }
            }
        }
        if (!moved) break;
    }

    // Shift so minimum y = r + 8
    const minY = Math.min(...items.map(it => it.y));
    const offset = (r + 8) - minY;
    items.forEach(it => { it.y += offset; });
    const yAxis = Math.floor(offset);
    const maxY = Math.max(...items.map(it => it.y));
    const svgH = Math.max(70, Math.ceil(maxY) + r + 20);

    let s = '<div class="number-line-section">';
    s += `<div class="number-line-label">${label}</div>`;
    s += `<svg width="${svgWidth}" height="${svgH}" class="number-line-svg" overflow="visible">`;
    s += `<line x1="${pad}" y1="${yAxis}" x2="${pad + lineWidth}" y2="${yAxis}" stroke="#888" stroke-width="2"/>`;
    s += `<line x1="${pad}" y1="${yAxis - 5}" x2="${pad}" y2="${yAxis + 5}" stroke="#888" stroke-width="2"/>`;
    s += `<text x="${pad - 10}" y="${yAxis + 5}" text-anchor="end" font-size="16" fill="#444">${vMin}</text>`;
    if (showEndLabels)
        s += `<text x="${pad - 10}" y="${yAxis + 18}" text-anchor="end" font-size="11" fill="#bbb">(Lowest)</text>`;
    const xMax = pad + lineWidth;
    s += `<line x1="${xMax}" y1="${yAxis - 5}" x2="${xMax}" y2="${yAxis + 5}" stroke="#888" stroke-width="2"/>`;
    s += `<text x="${xMax + 10}" y="${yAxis + 5}" text-anchor="start" font-size="16" fill="#444">${vMax}</text>`;
    if (showEndLabels)
        s += `<text x="${xMax + 10}" y="${yAxis + 18}" text-anchor="start" font-size="11" fill="#bbb">(Highest)</text>`;
    items.forEach(it => {
        s += `<circle cx="${it.x.toFixed(1)}" cy="${it.y.toFixed(1)}" r="${r}" fill="${it.color}" stroke="white" stroke-width="1"/>`;
        s += `<text x="${it.x.toFixed(1)}" y="${(it.y + 4).toFixed(1)}" text-anchor="middle" font-size="13" font-weight="bold" fill="${it.textColor}" style="pointer-events:none">${it.island}</text>`;
    });
    s += '</svg></div>';
    return s;
}

function pctLower(score) {
    const pct = 100 * (score - 1) / (NUM_PLAYERS - 1);
    if (pct === 100) return '100%';
    return pct.toFixed(1) + '%';
}

function updatePriorities(scores) {
    ISLANDS.forEach((lbl, i) => {
        document.getElementById('pr-' + lbl).textContent = scores[i];
        document.getElementById('pct-' + lbl).textContent = pctLower(scores[i]);
    });
    document.getElementById('priority-svg-wrapper').innerHTML =
        buildDotLineSVG('Priority Scores', scores, 1, NUM_PLAYERS, true);
}

function doDraw() {
    const scores = ISLANDS.map(() => Math.floor(Math.random() * NUM_PLAYERS) + 1);
    updatePriorities(scores);
    liveSend({'action': 'draw'});
}

// Initialize on page load
document.getElementById('points-svg-wrapper').innerHTML =
    buildDotLineSVG('Points', initPayoffs, MIN_PTS, MAX_PTS, false);
updatePriorities(initPriorities);
</script>

{{ endblock }}