{% extends 'base.html' %}
{% block content %}
<div class="space-y-6">

  {% if locked_ui %}
  <div class="bg-green-50 border rounded-2xl p-4">
    <strong>Voting complete.</strong> All awards have consensus winners.
  </div>
  {% endif %}


  <div class="bg-white p-4 rounded-2xl shadow">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold mb-2">Consensus Winners</h2>
    </div>
    {% if winners_display and winners_display|length > 0 %}
      <div class="space-y-3">
        {% for w in winners_display %}
          <div class="border rounded-xl p-3 bg-slate-50">
            <div class="text-sm font-medium">{{ w.award_name }}</div>
            <div class="text-xs text-gray-500 mb-1">{{ w.award_desc }}</div>
            <div class="inline-block px-3 py-1 rounded-full bg-emerald-600 text-white text-sm">{{ w.player_name }}</div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-sm text-gray-600">No consensus yet. Keep voting below.</div>
    {% endif %}
  </div>

  <div class="bg-white p-4 rounded-2xl shadow">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold mb-2">Remaining Awards</h2>
      <div id="progress" class="text-sm text-gray-600">Assigned 0/{{ players_count }}</div>
    </div>
    <p class="text-sm text-gray-600 mb-4">
      Choose from the players who haven’t already won a consensus award. Changing a selection updates your other dropdowns.
    </p>

    <div id="awards" class="space-y-3">
      {% for a in remaining_awards %}
      <div class="border rounded-xl p-3">
        <div class="text-sm font-medium">{{ a.name }}</div>
        <div class="text-xs text-gray-500 mb-2">{{ a.description }}</div>
        <select id="sel-{{ a.id }}" class="player-select w-full border rounded-lg p-2 text-sm"
                data-award-id="{{ a.id }}" {% if locked_ui %}disabled{% endif %}>
          <option value="">Select player...</option>
        </select>
      </div>
      {% endfor %}
      {% if remaining_awards|length == 0 %}
        <div class="text-sm text-gray-600">All awards have a consensus winner.</div>
      {% endif %}
    </div>

    <div class="flex gap-3 mt-4">
      <button id="btn-save" class="px-4 py-2 rounded bg-gray-800 text-white disabled:opacity-50"
              onclick="saveDraft()" {% if locked_ui %}disabled{% endif %}>Save for later</button>
      <button id="btn-submit" class="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-50"
              onclick="submitBallot()" {% if locked_ui %}disabled{% endif %}>Submit</button>
    </div>
    <div id="toast" class="hidden mt-3 text-sm"></div>
  </div>
</div>

<script>
/* Let Flask generate correct absolute URLs */
const URLS = {
  optionsPattern: {{ url_for('api_options', award_id=0) | tojson }},
  setPick:        {{ url_for('api_set_pick') | tojson }},
  save:           {{ url_for('coach_save') | tojson }},
  submit:         {{ url_for('coach_submit') | tojson }},
};

function optionsUrl(id) { return URLS.optionsPattern.replace(/0$/, String(id)); }

async function loadOptionsFor(awardId) {
  const r = await fetch(optionsUrl(awardId), { credentials: 'same-origin' });
  const j = await r.json();

  // If this award became locked somehow, don’t render options (shouldn't be in remaining list though)
  if (j.locked) return {count: 0, total: 0};

  const sel = document.getElementById(`sel-${awardId}`);
  if (!sel) return {count: 0, total: 0};

  const current = j.selected ? String(j.selected) : "";
  sel.innerHTML = '<option value="">Select player...</option>';
  j.options.forEach(o => {
    const opt = document.createElement('option');
    opt.value = String(o.id);
    opt.textContent = o.name;
    sel.appendChild(opt);
  });
  if (current) sel.value = current;
  return {count: j.count, total: j.total};
}

async function loadAllOptions() {
  const selects = document.querySelectorAll('.player-select');
  let count = 0, total = {{ players_count }};
  for (const sel of selects) {
    const res = await loadOptionsFor(sel.dataset.awardId);
    count = res.count || count;
    total = res.total || total;
  }
  updateProgress(count, total);
}

function updateProgress(count, total) {
  const el = document.getElementById('progress');
  el.textContent = `Assigned ${count}/${total}`;
}

async function setPick(awardId, playerId) {
  const fd = new FormData();
  fd.append('award_id', awardId);
  fd.append('player_id', playerId); // "" clears
  const r = await fetch(URLS.setPick, { method: 'POST', body: fd, credentials: 'same-origin' });
  const j = await r.json();
  if (!j.ok) { alert(j.error || 'Error updating pick'); }
  await loadAllOptions();
}

async function saveDraft() {
  const r = await fetch(URLS.save, { method: 'POST', credentials: 'same-origin' });
  const j = await r.json();
  showToast(j.ok ? 'Draft saved.' : (j.error || 'Save failed'), j.ok);
}

async function submitBallot() {
  const r = await fetch(URLS.submit, { method: 'POST', credentials: 'same-origin' });
  const j = await r.json();
  if (j.ok) { location.reload(); } else { showToast(j.error || 'Submit failed', false); }
}

function showToast(msg, ok) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.className = `mt-3 text-sm p-2 rounded ${ok ? 'bg-green-100' : 'bg-red-100'}`;
  setTimeout(() => { t.className = 'hidden'; }, 3000);
}

document.addEventListener('DOMContentLoaded', () => {
  loadAllOptions();
  document.querySelectorAll('.player-select').forEach(sel => {
    sel.addEventListener('change', (e) => {
      const awardId = e.target.dataset.awardId;
      const val = e.target.value; // "" clears
      setPick(awardId, val);
    });
  });
});
</script>
{% endblock %}