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

{{ block content }}

<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; }
.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; }
.info-table th.row-label { min-width: 150px; }
.info-table th[data-island],
.info-table td[data-island] { min-width: 62px; }
.draw-btn {
    display: block;
    margin: 0 auto;
    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 points are drawn.</p>
<button class="draw-btn" type="button" onclick="doDraw()">Draw New Points</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>
                <th class="row-label">Points</th>
                <td id="pts-A">{{ init_payoffs.0 }}</td>
                <td id="pts-B">{{ init_payoffs.1 }}</td>
                <td id="pts-C">{{ init_payoffs.2 }}</td>
                <td id="pts-D">{{ init_payoffs.3 }}</td>
                <td id="pts-E">{{ init_payoffs.4 }}</td>
                <td id="pts-F">{{ init_payoffs.5 }}</td>
            </tr>
        </table>
    </div>
    <div id="pf-svg-container"></div>
</div>

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

<script>
const MIN_PTS = {{ C.MIN_PTS }};
const MAX_PTS = {{ C.MAX_PTS }};
const PTS_STEP = {{ C.PTS_STEP }};
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 }}
];

function fisherYates(arr) {
    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]];
    }
    return arr;
}

function drawPayoffs() {
    const stepList = [];
    for (let v = MIN_PTS + PTS_STEP; v < MAX_PTS; v += PTS_STEP) stepList.push(v);
    const order = fisherYates([0, 1, 2, 3, 4, 5]);
    const interior = fisherYates([...stepList]).slice(0, 4);
    const payoffs = new Array(6);
    payoffs[order[0]] = MIN_PTS;
    payoffs[order[1]] = MAX_PTS;
    for (let k = 0; k < 4; k++) payoffs[order[k + 2]] = interior[k];
    return payoffs;
}

function buildSVG(payoffs) {
    const svgWidth = 600, pad = 50, lineWidth = 500, r = 9, spacing = 20;

    const items = payoffs.map((p, i) => ({
        x: pad + (p - MIN_PTS) / (MAX_PTS - MIN_PTS) * 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 (matches the axis line position)
    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">Points</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">${MIN_PTS}</text>`;
    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">${MAX_PTS}</text>`;
    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 updateDisplay(payoffs) {
    ISLANDS.forEach((lbl, i) => {
        document.getElementById('pts-' + lbl).textContent = payoffs[i];
    });
    document.getElementById('pf-svg-container').innerHTML = buildSVG(payoffs);
}

function doDraw() {
    updateDisplay(drawPayoffs());
    liveSend({'action': 'draw'});
}

// Initialize with default payoffs
updateDisplay(initPayoffs);
</script>

{{ endblock }}