{% block title %}
Scenario {{ player.round_number }}: Please review your responses
{% endblock %}


{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

{{ if participant.switch_order }}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 1: we WILL tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
        <div class="card-text">
            <ol id="modalList" class="mb-0">
            </ol>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 2: we WILL NOT tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
        {% if treatment != "ambiguous" %}
        <h6 class="card-subtitle mb-2 text-muted">
            <strong>ℹ️ {{ recipient_cap }} {{ recipient_knows }} that if we don't tell {{ config.alex_pronoun }} {{ config.learns_question }}, there is at least a {{ ms_pct }}% chance that
            {% if config.item_singular == "donation" %}
                the donation goes to {{ ms_item }}.
            {% elif app_name == "catfishing" %}
                {{ config.alex_pronoun_subject }} chats with the {{ ms_item }}.
            {% elif app_name == "surveillance" %}
                we {% if treatment == "high" %}do not monitor{% else %}monitor{% endif %} {{ config.alex_pronoun }}.
            {% else %}
                {{ config.alex_pronoun_subject }} {{ pronoun_has }} the {{ ms_item }}.
            {% endif %}</strong>
        </h6>
        {% endif %}
        <div class="card-text">
            <ol id="modalList2" class="mb-0">
            </ol>
        </div>
    </div>
</div>

{{ else }}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 1: we WILL NOT tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
        {% if treatment != "ambiguous" %}
        <h6 class="card-subtitle mb-2 text-muted">
            <strong>ℹ️ {{ recipient_cap }} {{ recipient_knows }} that if we don't tell {{ config.alex_pronoun }} {{ config.learns_question }}, there is at least a {{ ms_pct }}% chance that
            {% if config.item_singular == "donation" %}
                the donation goes to {{ ms_item }}.
            {% elif app_name == "catfishing" %}
                {{ config.alex_pronoun_subject }} chats with the {{ ms_item }}.
            {% elif app_name == "surveillance" %}
                we {% if treatment == "high" %}do not monitor{% else %}monitor{% endif %} {{ config.alex_pronoun }}.
            {% else %}
                {{ config.alex_pronoun_subject }} {{ pronoun_has }} the {{ ms_item }}.
            {% endif %}</strong>
        </h6>
        {% endif %}
        <div class="card-text">
            <ol id="modalList2" class="mb-0">
            </ol>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 2: we WILL tell {{ config.recipient }} {% if app_name == "song" %}whether the poem was written by a human or generated by AI{% elif app_name == "eggs" %}whether the eggs are free-range or caged{% elif app_name == "books" %}whether the book is the one with the original or fake note{% else %}{{ config.learns_question }}{% endif %}</h5>
        <div class="card-text">
            <ol id="modalList" class="mb-0">
            </ol>
        </div>
    </div>
</div>

{{ endif }}

{{ formfield 'confirm' }}
<div id="confirmError" class="text-danger fw-bold" style="display: none;">Please answer the question above before continuing.</div>

<p>
    Please click "Next" to proceed to the next page.
</p>

<div class="text-end"><button type="button" class="btn btn-primary btn-large" id="nextBtn">Next</button></div>

<input type="hidden" name="timeSpentReview" id="timeSpentReview" />

<!-- Confirmation modal for "No" -->
<div class="modal fade" id="confirmRedoModal" tabindex="-1" aria-labelledby="confirmRedoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmRedoModalLabel">Are you sure?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>You indicated that the statements do <strong>not</strong> accurately reflect your preferences.</p>
                <p>If you want to change your answers, click the button below.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmRedoBtn">Change answers</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block styles %}
<style>
    .bold {
        font-weight: bold;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
let pageTimeElapsed = 0;
let pageTimerID = -1;
function pageTick() {
    pageTimeElapsed++;
    document.getElementById("timeSpentReview").value = pageTimeElapsed;
}
window.onload = function() {
    if (pageTimerID === -1) {
        pageTimerID = setInterval(pageTick, 100);
    }
};

function generateModalRows(myId, dollarValues, row, indifference) {
    var modalList = document.getElementById(myId);
    if (!modalList) return;

    var originalLabel = "{{ config.original_long }}";
    var fakeLabel = "{{ config.fake_long }}";
    var recipient = "{{ config.recipient }}";
    var appName = "{{ app_name }}";
    var originalFirst = {{ original_first_json }};

    // For misuse, use short labels (e.g. "John's charity") to match IntroduceMPL
    if (appName === 'misuse') {
        originalLabel = "{{ config.original_label }}";
        fakeLabel = "{{ config.fake_label }}";
    }
    // For catfishing, use noun phrases since the prefix already says "chat with"
    if (appName === 'catfishing') {
        originalLabel = "a real creator";
        fakeLabel = "an AI creator";
    }

    if (appName === 'surveillance') {
        originalLabel = recipient + "'s location to not be monitored";
        fakeLabel = "it being monitored";
    }

    var preferPrefix = (appName === 'misuse') ? 'I prefer the donation to go to ' : (appName === 'catfishing') ? 'I prefer ' + recipient + ' to chat with ' : (appName === 'surveillance') ? 'I prefer ' : 'I prefer ' + recipient + ' to receive ';
    var indiffPrefix = (appName === 'misuse') ? 'I am indifferent between the donation going to ' : (appName === 'catfishing') ? 'I am indifferent between ' + recipient + ' chatting with ' : (appName === 'surveillance') ? 'I am indifferent between ' : 'I am indifferent between ' + recipient + ' receiving ';
    var bonusPrefix = (appName === 'misuse' || appName === 'catfishing' || appName === 'surveillance') ? ' and ' + recipient + ' gets $' : ' and $';

    var originalBonuses = [bonusPrefix + '1', '', ''];
    var fakeBonuses = ['', '', bonusPrefix + '1'];
    for (var i = 0; i < dollarValues.length; i++) {
        originalBonuses.push('');
        fakeBonuses.push(bonusPrefix + dollarValues[i].toString());
    }

    var leftList = [];
    var rightList = [];

    var indifferentList = [];

    if (appName === 'surveillance') {
        var origAsFirst = recipient + "'s location not being monitored";
        var origAsSecond = "it not being monitored";
        var fakeAsFirst = recipient + "'s location being monitored";
        var fakeAsSecond = "it being monitored";
        var origColor = originalFirst ? 'blue' : 'chocolate';
        var fakeColor = originalFirst ? 'chocolate' : 'blue';

        for (var i = 0; i < fakeBonuses.length; i++) {
            leftList.push(preferPrefix + '<span style="color: ' + origColor + '">' + origAsFirst + originalBonuses[i] + '</span>' +
                ' over <span style="color: ' + fakeColor + '">' + fakeAsSecond + fakeBonuses[i] + '</span>');
            rightList.push(preferPrefix + '<span style="color: ' + fakeColor + '">' + fakeAsFirst + fakeBonuses[i] + '</span>' +
                ' over <span style="color: ' + origColor + '">' + origAsSecond + originalBonuses[i] + '</span>');
            indifferentList.push(indiffPrefix + '<span style="color: ' + origColor + '">' + origAsFirst + originalBonuses[i] + '</span>' +
                ' and <span style="color: ' + fakeColor + '">' + fakeAsSecond + fakeBonuses[i] + '</span>');
        }
    } else if (originalFirst) {
        for (var i = 0; i < fakeBonuses.length; i++) {
            leftList.push(preferPrefix + '<span style="color: blue">' + originalLabel + originalBonuses[i] + '</span>' +
                ' over <span style="color: chocolate">' + fakeLabel + fakeBonuses[i] + '</span>');
            rightList.push(preferPrefix + '<span style="color: chocolate">' + fakeLabel + fakeBonuses[i] + '</span>' +
                ' over <span style="color: blue">' + originalLabel + originalBonuses[i] + '</span>');
            indifferentList.push(indiffPrefix + '<span style="color: blue">' + originalLabel + originalBonuses[i] + '</span>' +
                ' and <span style="color: chocolate">' + fakeLabel + fakeBonuses[i] + '</span>');
        }
    } else {
        for (var i = 0; i < fakeBonuses.length; i++) {
            leftList.push(preferPrefix + '<span style="color: chocolate">' + originalLabel + originalBonuses[i] + '</span>' +
                ' over <span style="color: blue">' + fakeLabel + fakeBonuses[i] + '</span>');
            rightList.push(preferPrefix + '<span style="color: blue">' + fakeLabel + fakeBonuses[i] + '</span>' +
                ' over <span style="color: chocolate">' + originalLabel + originalBonuses[i] + '</span>');
            indifferentList.push(indiffPrefix + '<span style="color: chocolate">' + originalLabel + originalBonuses[i] + '</span>' +
                ' and <span style="color: blue">' + fakeLabel + fakeBonuses[i] + '</span>');
        }
    }

    var myAnswer = 'left';
    for (var i = 0; i < originalBonuses.length; i++) {
        if (row <= i) {
            myAnswer = 'right';
        }

        var listItem = document.createElement("li");

        if (i == row && indifference) {
            myAnswer = 'indifference';
        }

        if (myAnswer == 'right') {
            listItem.innerHTML = rightList[i];
        } else if (myAnswer == 'indifference') {
            listItem.innerHTML = indifferentList[i];
            myAnswer = 'right';
        } else {
            listItem.innerHTML = leftList[i];
        }

        modalList.appendChild(listItem);
    }
}

var dollarValues = {{ wtp_values_json }};
generateModalRows('modalList', dollarValues, {{ Trad_row }}, {{ Trad_indifference_json }});
generateModalRows('modalList2', dollarValues, {{ ES_row }}, {{ ES_indifference_json }});

// Intercept Next button: require confirm answer, and if "No" show confirmation modal
document.getElementById('nextBtn').addEventListener('click', function() {
    var checkedRadio = document.querySelector('input[name="confirm"]:checked');
    if (!checkedRadio) {
        // No selection made — show error
        var errMsg = document.getElementById('confirmError');
        if (errMsg) errMsg.style.display = '';
        return;
    }
    // Hide error if previously shown
    var errMsg = document.getElementById('confirmError');
    if (errMsg) errMsg.style.display = 'none';

    if (checkedRadio.value === '2') {
        var modal = new bootstrap.Modal(document.getElementById('confirmRedoModal'));
        modal.show();
    } else {
        // Normal submit
        document.querySelector('form').submit();
    }
});

// "Yes, go back and redo" button in modal submits the form
document.getElementById('confirmRedoBtn').addEventListener('click', function() {
    document.querySelector('form').submit();
});

// Hide error as soon as user selects a confirm option
document.querySelectorAll('input[name="confirm"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        var errMsg = document.getElementById('confirmError');
        if (errMsg) errMsg.style.display = 'none';
    });
});
</script>
{% endblock %}