{% load otree %}

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

{{ block content }}
<style>
    .shell { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    .hdr   { font-weight: 400; margin: 6px 0 12px; }
    .muted { color:#666; }
    .center { text-align:center; }
    .hidden { display:none; }

    .pm-wrap { display:flex; justify-content:center; margin: 10px 0 18px; }

    table.pmatrix { border-collapse: collapse; border-spacing: 0; font-size: 16px; }
    .pmatrix thead th { border: 0; padding: 8px 14px; text-align: center; white-space: nowrap; font-weight: 700; }
    .pmatrix tbody td { border: 1.5px solid #9aa0a6; padding: 8px 14px; text-align: center; white-space: nowrap; background: #fff; }
    .pmatrix tbody th { border: 0; padding: 8px 14px; white-space: nowrap; text-align: center; font-weight: 700; }

    .pm-other { color:#b91c1c; }
    .pm-you   { color:#1e40af; }

    .pmatrix tbody td:hover { background: #f8fafc; }
    .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px 18px; box-shadow: 0 6px 18px rgba(27,31,35,.04); }

    .choice-column { display:flex; flex-direction:column; gap:12px; margin: 8px 0 14px; align-items:center; }
    .choice-column label { font-size: 16px; cursor: pointer; user-select: none; }
    .choice-column input[type=radio] { margin-right:8px; }

    .btn { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; transition: transform .06s ease, background .15s ease; display:inline-block; width:auto; }
    .btn-narrow { padding:6px 12px; min-width: 72px; }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background:#2d6cdf; color:#fff; }
    .btn-primary[disabled] { background:#9bb7f0; cursor:not-allowed; }
    .btn-secondary { background:#e2e8f0; }
    .btn-secondary:hover { background:#cfd8e3; }
</style>

<div class="shell">
    {% if player.treatment == 'gender' %}
    <div class="card" style="margin-bottom: 14px;">
        <p>This experiment includes both <strong>Male</strong> and <strong>Female</strong> participants.</p>
        <p>
            In this task, you will indicate your decision for two possible matches:
            one with someone of the same gender and one with someone of a different gender.
        </p>
        <p>
            At the end of the experiment, you will be randomly matched with another participant,
            and the corresponding decision will determine your payoff.
        </p>
    </div>
    {% elif player.treatment == 'race' or player.treatment == 'ethnicity' %}
    <div class="card" style="margin-bottom: 14px;">
        <p>This experiment includes both <strong>White</strong>
            and <strong>East Asian</strong> participants.</p>
        <p>
            In this task, you will indicate your decision for two possible matches:
            one with someone of the same ethnicity and one with someone of a different ethnicity.
        </p>
        <p>
            At the end of the experiment, you will be randomly matched with another participant,
            and the corresponding decision will determine your payoff.
        </p>
    </div>
    {% endif %}
    <div id="identityData" data-gender="{{ player.field_maybe_none('gender') }}" data-race="{{ player.field_maybe_none('ethnicity') }}"></div>
    <div class="pm-wrap">
        <table class="pmatrix" aria-label="Payoff matrix">
            <thead>
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th class="pm-other" colspan="2">
                    Other
                    <div id="matrixOtherLabel" class="muted" style="font-size: 14px; font-weight: 700;"></div>
                </th>
            </tr>
            <tr>
                <th class="pm-other">X</th>
                <th class="pm-other">Y</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th class="pm-you" rowspan="2">
                    You
                    <div id="matrixYouLabel" class="muted" style="font-size: 14px; font-weight: 700;"></div>
                </th>
                <th class="pm-you">X</th>
                <td><span class="pm-you">60</span>, <span class="pm-other">60</span></td>
                <td><span class="pm-you">0</span>, <span class="pm-other">40</span></td>
            </tr>
            <tr>
                <th class="pm-you">Y</th>
                <td><span class="pm-you">40</span>, <span class="pm-other">0</span></td>
                <td><span class="pm-you">40</span>, <span class="pm-other">40</span></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="questionWrap" class="card hidden">
        <div id="progress" class="muted"></div>
        <div id="prompt" class="hdr"></div>

        <form id="choiceForm" onsubmit="return false;">
            <div class="choice-column">
                <label><input type="radio" name="choice" value="A"> <strong>X</strong></label>
                <label><input type="radio" name="choice" value="B"> <strong>Y</strong></label>
            </div>
            <div style="display:flex; gap:12px; justify-content:center; margin-top:10px;">
                <button type="button" id="submitBtn" class="btn btn-primary" disabled>Submit</button>
            </div>
            <div id="status" class="muted" style="margin-top:10px;"></div>
        </form>
    </div>

    <div id="autoNext" class="hidden">
        {{ next_button }}
    </div>
    {{ endblock }}

    {{ block scripts }}
    <script>
        const identityData = document.getElementById('identityData');
        const playerGender = identityData ? (identityData.dataset.gender || '') : '';
        const playerRace = identityData ? (identityData.dataset.race || '') : '';

        function genderLabel(value) {
            if (!value) return 'your gender';
            return value;
        }

        function raceLabel(value) {
            if (value) return `${value}`;
            return 'your race/ethnicity';
        }

        function otherGender(value, sameGroup) {
            if (sameGroup || !value) return genderLabel(value);
            if (value === 'Male') return 'Female';
            if (value === 'Female') return 'Male';
            return 'a different gender';
        }

        function otherRace(value, sameGroup) {
            if (sameGroup || !value) return raceLabel(value);
            if (value === 'White') return 'East Asian';
            if (value === 'East Asian') return 'White';
            return 'a different race/ethnicity';
        }

        let current = null;

        function labelFor(q){
            if (q.treatment === 'baseline') {
                return 'Please indicate your decision when matched with another participant.';
            }
            if (q.treatment === 'gender') {
                const you = genderLabel(playerGender);
                const other = otherGender(playerGender, q.same_group);
                return `You are <strong>${you}</strong>. Please indicate your decision when the other participant is <strong>${other}</strong>.`;
            }
            if (q.treatment === 'race' || q.treatment === 'ethnicity') {
                const you = raceLabel(playerRace);
                const other = otherRace(playerRace, q.same_group);
                return `You are <strong>${you}</strong>. Please indicate your decision when the other participant is <strong>${other}</strong>.`;
            }
            const groupLabel = q.same_group ? 'same' : 'different';
            return `Please indicate your decision when matched with a participant of the ${groupLabel} group.`;
        }

        function showQuestion(q){
            current = q;
            document.getElementById('questionWrap').classList.remove('hidden');
            document.getElementById('progress').textContent = `Decision ${q.index} of ${q.total}`;
            document.getElementById('prompt').innerHTML = labelFor(q);
            document.getElementById('status').textContent = '';
            document.querySelectorAll('input[name="choice"]').forEach(el => el.checked = false);
            document.getElementById('submitBtn').disabled = true;

            const matrixYouLabel = document.getElementById('matrixYouLabel');
            const matrixOtherLabel = document.getElementById('matrixOtherLabel');
            if (q.treatment === 'gender') {
                if (matrixYouLabel) matrixYouLabel.textContent = genderLabel(playerGender);
                if (matrixOtherLabel) matrixOtherLabel.textContent = otherGender(playerGender, q.same_group);
            } else if (q.treatment === 'race' || q.treatment === 'ethnicity') {
                if (matrixYouLabel) matrixYouLabel.textContent = raceLabel(playerRace);
                if (matrixOtherLabel) matrixOtherLabel.textContent = otherRace(playerRace, q.same_group);
            } else {
                if (matrixYouLabel) matrixYouLabel.textContent = '';
                if (matrixOtherLabel) matrixOtherLabel.textContent = '';
            }
        }

        function showDone(){
            document.getElementById('questionWrap').classList.add('hidden');
            const nextBtn = document.querySelector('#autoNext button');
            if (nextBtn) {
                nextBtn.click();
            }
        }

        function liveRecv(msg){
            if (msg.type === 'show'){
                showQuestion(msg.question);
                return;
            }
            if (msg.type === 'done'){
                showDone();
                return;
            }
            if (msg.type === 'error'){
                document.getElementById('status').textContent = msg.msg || 'Invalid response.';
            }
        }

        document.querySelectorAll('input[name="choice"]').forEach(el => {
            el.addEventListener('change', () => {
                document.getElementById('submitBtn').disabled = false;
            });
        });

        document.getElementById('submitBtn').addEventListener('click', () => {
            const checked = document.querySelector('input[name="choice"]:checked');
            if (!checked || !current) {
                return;
            }
            document.getElementById('submitBtn').disabled = true;
            liveSend({ type: 'submit_choice', seq: current.seq, choice: checked.value });
        });

        function boot(){
            if (typeof liveSend === 'undefined'){ setTimeout(boot, 50); return; }
            liveSend({ type: 'init_choice' });
        }
        boot();
    </script>
    {{ endblock }}