{% extends "global/Page.html" %}
{% load otree static %}

{% block scripts %}
<script>
/**
 * ManagerDecisionPage interactions
 * - No defaults shown initially
 * - Transfer options only visible if "Yes" to stealing
 * - Must pick Yes/No to stealing; if Yes, must enter 1–50 and pick Yes/No to transfer
 * - Preview blank until a choice is made; shows 0 if "No", computes if "Yes"
 * - Re-enables the Next button instantly if client-side validation blocks submit
 */
(function () {
  // Safer binding of server values into JS (string → Number fallback)
  const WORKER_POINTS = {{ worker_points_earned }};

  function qs(sel)  { return document.querySelector(sel); }
  function qsa(sel) { return Array.from(document.querySelectorAll(sel)); }

  function yesChecked() { return !!qs('input[name="wants_to_take"][value="True"]:checked'); }
  function noChecked()  { return !!qs('input[name="wants_to_take"][value="False"]:checked'); }
  function anyChecked() { return !!qs('input[name="wants_to_take"]:checked'); }

  function clearTransferRadios() {
    const yes = qs('input[name="wants_to_pay_transfer"][value="True"]');
    const no  = qs('input[name="wants_to_pay_transfer"][value="False"]');
    if (yes) yes.checked = false;
    if (no)  no.checked  = false;
  }

  function computePreview() {
    const out = qs('#earnings-display');
    const pctEl = qs('#pct-input');
    if (!out || !pctEl) return;

    // Nothing selected yet → keep preview blank
    if (!anyChecked()) { out.textContent = ''; return; }

    // Picked "No" → explicit 0 preview
    if (noChecked())   { out.textContent = `You will receive 0 ECUs (0% of ${WORKER_POINTS}).`; return; }

    // Picked "Yes" → compute only if valid integer 1–50
    const pct = parseInt(pctEl.value, 10);
    if (Number.isInteger(pct) && pct >= 1 && pct <= 50) {
      const amt = Math.round((pct / 100) * WORKER_POINTS);
      out.textContent = `You will receive ${amt} ECUs (${pct}% of ${WORKER_POINTS}).`;
    } else {
      out.textContent = '';
    }
  }

  // Show/hide the theft options panel
  function toggleTakeOptions(show) {
    const panel = qs('#take-options');
    const pctEl = qs('#pct-input');
    if (!panel || !pctEl) return;

    panel.style.display = show ? 'block' : 'none';
    pctEl.required = show;

    if (!show) {
      // Hide & inert inputs when not stealing; keep UI blank and revert choices
      pctEl.value = '';
      pctEl.disabled = true;
      clearTransferRadios();
    } else {
      pctEl.disabled = false;
      if (!pctEl.value || pctEl.value === '0') pctEl.value = '';
    }
    computePreview();
  }

  // Centralized validation for both submit & button-click flows
  function validateForm() {
    // Must pick Yes/No to stealing
    if (!anyChecked()) {
      alert("Please select whether you want to take from the worker's earnings (Yes or No).");
      return false;
    }
    // If stealing, must enter valid percentage AND pick transfer Yes/No
    if (yesChecked()) {
      const pctEl = qs('#pct-input');
      const pct = pctEl ? parseInt(pctEl.value, 10) : NaN;
      if (!Number.isInteger(pct) || pct < 1 || pct > 50) {
        alert('Please enter a valid percentage between 1 and 50.');
        return false;
      }
      const transferPicked = !!qs('input[name="wants_to_pay_transfer"]:checked');
      if (!transferPicked) {
        alert('Please select whether you want to pay a transfer to the authority (Yes or No).');
        return false;
      }
    }
    return true;
  }

  function reenableNextButtonSoon() {
    // oTree disables the Next button to prevent double-clicks;
    // if we block the submit, turn it back on immediately so people don’t panic.
    setTimeout(() => {
      const btn = document.querySelector('.otree-btn-next');
      if (btn) btn.disabled = false;
    }, 0);
  }

  document.addEventListener('DOMContentLoaded', function () {
    // Initial: nothing selected, panel hidden, inputs inert
    toggleTakeOptions(false);

    const pctEl = qs('#pct-input');
    if (pctEl) {
      pctEl.addEventListener('input', computePreview);
      pctEl.addEventListener('change', computePreview);
    }

    qsa('input[name="wants_to_take"]').forEach(el => {
      el.addEventListener('change', function () {
        toggleTakeOptions(this.value === 'True');
      });
    });

    const form = document.querySelector('form');
    const nextBtn = document.querySelector('.otree-btn-next');

    // Guard at the button level so the button never stays disabled if we block submit
    if (nextBtn) {
      nextBtn.addEventListener('click', function (e) {
        // Let the normal flow happen only if validation passes
        if (!validateForm()) {
          e.preventDefault();
          e.stopPropagation();
          reenableNextButtonSoon();
        }
      });
    }

    // Extra safety: guard the form submit as well (e.g., Enter key)
    if (form) {
      form.addEventListener('submit', function (e) {
        if (!validateForm()) {
          e.preventDefault();
          reenableNextButtonSoon();
        }
      });
    }
  });
})();
</script>

<style>
  /* Small usability tweaks */
  input[type="number"] { width: 60px; text-align: center; }
  .input-label-container { display: flex; align-items: center; justify-content: center; gap: 5px; }
  .radio-container {
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    gap: 40px; margin: 10px auto; width: fit-content;
  }
  .otree-radio-option { margin: 0; display: flex; align-items: center; }
  .otree-radio-option label { margin: 0 5px; }
  .otree-timer { background-color: transparent !important; color: black !important; font-weight: normal;
    border: none; padding: 0; text-align: right; }
</style>
{% endblock %}

{% block content %}
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px;">
  <div><p>Your role is: <strong>{{ player.get_role }}</strong></p></div>
  <div style="text-align:center;"><h1 style="font-weight:bold;font-size:20px;">Decision Task</h1></div>
  <div style="text-align:right;"><p>Round: {{ player.round_number }} of {{ C.NUM_ROUNDS }}</p></div>
</div>

<p>You earned <strong>{{ points_earned }}</strong> points in the addition task.</p>

<p>
  You have been matched with a worker from one of 3 groups.
  The matched worker solved <strong>{{ worker_solved_problems }}</strong> problems correctly
  and earned <strong>{{ worker_points_earned }}</strong> ECUs in the addition task.
</p>

<!-- Step 1: Do you want to take from the worker's earnings? -->
<p>Do you want to take from the worker's earnings?</p>
<div class="radio-container">
  <label><input type="radio" name="wants_to_take" value="True"> Yes</label>
  <label><input type="radio" name="wants_to_take" value="False"> No</label>
  {{ formfield_errors 'wants_to_take' }}
</div>

<!-- Step 2: (visible only if Yes) -->
<div id="take-options" style="display:none;margin-top:20px;text-align:left;">
  <p>
    If you would like to take a percentage of this worker's earnings from the addition task, please enter the amount below.
    You can only take a maximum of 50%.
  </p>

  <div class="input-label-container">
    <label>Percentage Taken</label>
    <input id="pct-input" type="number" name="percentage_taken" min="1" max="50" style="width:60px;text-align:center;">
    <span>%</span>
  </div>
  {{ formfield_errors 'percentage_taken' }}

  <p id="earnings-display" style="font-weight:bold;margin-top:10px;" aria-live="polite"></p>

  <p style="margin-top:15px;">
    If you have taken from a worker, the worker in your group may make a report in your group.
    You can offer a transfer to the authority to intervene on your behalf.
  </p>
  <ul style="margin-top:10px;">
    <li>If the authority does not intervene on your behalf, you face a {{ penalty_percentage }}% chance of losing your earnings for this round.</li>
    <li>If the authority intervenes on your behalf, you face a {{ treatment_percentage }}% chance of losing your earnings for this period.</li>
  </ul>

  <div class="transfer-option" style="margin-top:10px;">
    <p>Do you want to pay a transfer of 60 ECUs to the authority?</p>
    <div class="radio-container">
      <label><input type="radio" name="wants_to_pay_transfer" value="True"> Yes</label>
      <label><input type="radio" name="wants_to_pay_transfer" value="False"> No</label>
      {{ formfield_errors 'wants_to_pay_transfer' }}
    </div>
  </div>
</div>

<div style="text-align:right;margin-top:20px;">
  {{ next_button }}
</div>
{% endblock %}