{% extends "base.html" %}
{% import "_icons.html" as icons %}
{% block title %}{{ wedstrijd.naam }} — ClayTracker{% endblock %}
{% block content %}
  <div class="card kop">
    <div class="kop-titel">
      <h2>{{ wedstrijd.naam }} <span class="kop-datum">{{ wedstrijd.datum }}</span></h2>
      <p class="kop-banen">
        {% for baan in banen %}Baan {{ baan.volgnummer }}: {{ baan.discipline }} ({{ baan.aantal_duiven }}){% if not loop.last %} &middot; {% endif %}{% endfor %}
        &middot; <span class="badge badge-{{ wedstrijd.status }}">{{ wedstrijd.status }}</span>
      </p>
    </div>
    <div class="kop-acties">
      {% if wedstrijd.status == "actief" %}
        <button type="button" class="knop-secundair" onclick="document.getElementById('instellingen-modal').showModal()">
          {{ icons.instellingen() }} Instellingen
        </button>
        <form method="post" action="{{ url_for('wedstrijden.afsluiten', wedstrijd_id=wedstrijd.id) }}">
          <button type="submit">{{ icons.vink() }} Wedstrijd afsluiten</button>
        </form>
      {% endif %}
      <form method="post" action="{{ url_for('wedstrijden.verwijderen', wedstrijd_id=wedstrijd.id) }}"
            onsubmit="return confirm('Wedstrijd &quot;{{ wedstrijd.naam }}&quot; helemaal verwijderen? Alle deelnemers en scores van deze wedstrijd gaan definitief verloren. Weet je dit heel zeker?');">
        <button type="submit" class="knop-secundair knop-gevaar">{{ icons.prullenbak() }} Wedstrijd verwijderen</button>
      </form>
    </div>
  </div>

  {% if wedstrijd.status == "actief" %}
    <dialog id="instellingen-modal" class="modal">
      <h3>Instellingen</h3>

      <h4>Naam en datum</h4>
      <form method="post" action="{{ url_for('wedstrijden.bewerken', wedstrijd_id=wedstrijd.id) }}" class="modal-rij-form">
        <div class="veld modal-veld-klein">
          <label for="modal-naam">Naam</label>
          <input type="text" id="modal-naam" name="naam" value="{{ wedstrijd.naam }}" required>
        </div>
        <div class="veld modal-veld-klein">
          <label for="modal-datum">Datum</label>
          <input type="date" id="modal-datum" name="datum" value="{{ wedstrijd.datum }}" required>
        </div>
        <button type="submit">Opslaan</button>
      </form>

      <hr>

      <h4>Banen</h4>
      <form id="banen-form" method="post" action="{{ url_for('wedstrijden.banen_bewerken', wedstrijd_id=wedstrijd.id) }}"></form>
      <form id="baan-toevoegen-form" method="post" action="{{ url_for('wedstrijden.baan_toevoegen', wedstrijd_id=wedstrijd.id) }}"></form>
      {% for baan in banen %}
        <form id="baan-verwijderen-{{ baan.id }}-form" method="post"
              action="{{ url_for('wedstrijden.baan_verwijderen', wedstrijd_id=wedstrijd.id, baan_id=baan.id) }}"></form>
      {% endfor %}

      <div class="banen-editor">
        <div class="banen-editor-kop">Baan</div>
        <div class="banen-editor-kop">Discipline</div>
        <div class="banen-editor-kop">Aantal</div>
        <div class="banen-editor-kop"></div>

        {% for baan in banen %}
          <div class="banen-editor-nr">{{ baan.volgnummer }}</div>
          <div class="banen-editor-discipline">
            <select form="banen-form" name="discipline_{{ baan.volgnummer }}" class="discipline-select">
              <option value="">-- kies --</option>
              {% for discipline in disciplines %}
                <option value="{{ discipline }}" {% if baan.discipline == discipline %}selected{% endif %}>{{ discipline }}</option>
              {% endfor %}
              <option value="{{ vrije_tekst_optie }}" {% if baan.discipline not in disciplines %}selected{% endif %}>{{ vrije_tekst_optie }}</option>
            </select>
            <input type="text" form="banen-form" name="discipline_vrij_{{ baan.volgnummer }}" class="discipline-vrij"
                   placeholder="Eigen discipline"
                   value="{% if baan.discipline not in disciplines %}{{ baan.discipline }}{% endif %}"
                   {% if baan.discipline in disciplines %}hidden{% endif %}>
          </div>
          <div>
            <input type="number" form="banen-form" min="1" name="aantal_duiven_{{ baan.volgnummer }}"
                   value="{{ baan.aantal_duiven }}" required>
          </div>
          <div>
            <button type="submit" form="baan-verwijderen-{{ baan.id }}-form" class="icon-btn"
                    title="Baan {{ baan.volgnummer }} verwijderen" aria-label="Baan {{ baan.volgnummer }} verwijderen"
                    onclick="return confirm('Baan {{ baan.volgnummer }} verwijderen? Ingevoerde scores op deze baan gaan verloren.');">
              {{ icons.prullenbak() }}
            </button>
          </div>
        {% endfor %}

        {% if banen|length < max_banen %}
          <div class="banen-editor-nr">+</div>
          <div class="banen-editor-discipline">
            <select form="baan-toevoegen-form" name="discipline" class="discipline-select">
              <option value="">-- kies --</option>
              {% for discipline in disciplines %}
                <option value="{{ discipline }}">{{ discipline }}</option>
              {% endfor %}
              <option value="{{ vrije_tekst_optie }}">{{ vrije_tekst_optie }}</option>
            </select>
            <input type="text" form="baan-toevoegen-form" name="discipline_vrij" class="discipline-vrij"
                   placeholder="Eigen discipline" hidden>
          </div>
          <div>
            <input type="number" form="baan-toevoegen-form" min="1" name="aantal_duiven" placeholder="aantal">
          </div>
          <div>
            <button type="submit" form="baan-toevoegen-form" class="icon-btn icon-btn-toevoegen"
                    title="Baan toevoegen" aria-label="Baan toevoegen">
              {{ icons.plus() }}
            </button>
          </div>
        {% else %}
          <div class="banen-editor-vol">Maximum van {{ max_banen }} banen bereikt.</div>
        {% endif %}
      </div>

      <button type="submit" form="banen-form" class="banen-opslaan-knop">Banen opslaan</button>

      <button type="button" class="knop-secundair modal-sluiten" onclick="document.getElementById('instellingen-modal').close()">Sluiten</button>
    </dialog>

    <script>
      document.querySelectorAll('.discipline-select').forEach((select) => {
        const vrijInput = select.closest('.banen-editor-discipline').querySelector('.discipline-vrij');
        select.addEventListener('change', () => {
          vrijInput.hidden = select.value !== {{ vrije_tekst_optie | tojson }};
        });
      });

      const instellingenModal = document.getElementById('instellingen-modal');
      instellingenModal.addEventListener('click', (event) => {
        if (event.target === instellingenModal) instellingenModal.close();
      });
    </script>
  {% endif %}

  {% if wedstrijd.status == "actief" %}
    <div class="card deelnemer-balk">
      <span class="deelnemer-balk-label">Deelnemer toevoegen</span>
      {% if beschikbare_schutters %}
        <form method="post" action="{{ url_for('deelnemers.toevoegen', wedstrijd_id=wedstrijd.id) }}" class="deelnemer-balk-form">
          <select id="schutter_id" name="schutter_id" required>
            <option value="">-- kies lid --</option>
            {% for schutter in beschikbare_schutters %}
              <option value="{{ schutter.id }}">{{ schutter.voornaam }} {{ schutter.achternaam }}</option>
            {% endfor %}
          </select>
          <input type="text" id="rotte" name="rotte" placeholder="Rotte (optioneel)">
          <button type="submit" class="icon-btn-tekst" title="Deelnemer toevoegen">{{ icons.plus() }} Toevoegen</button>
        </form>
      {% else %}
        <span class="deelnemer-balk-leeg"><em>Alle bekende leden zijn al ingeschreven.</em></span>
      {% endif %}
      <a href="{{ url_for('leden.nieuw') }}" class="icon-btn-tekst knop-secundair" title="Nieuw lid aanmaken">
        {{ icons.plus() }} Nieuw lid
      </a>
    </div>
  {% endif %}

  <h3>Deelnemers</h3>
  {% if deelnemers %}
    <div class="card">
      <div class="veld">
        <label for="deelnemer-zoeken">Zoek deelnemer of rotte</label>
        <input type="text" id="deelnemer-zoeken" placeholder="Typ een naam of rottenummer...">
      </div>

      <div class="table-wrap">
        <table id="score-grid">
          <thead>
            <tr>
              <th>Deelnemer</th>
              <th>Rotte</th>
              {% for baan in banen %}
                <th>Baan {{ baan.volgnummer }} (max {{ baan.aantal_duiven }})</th>
                <th>2e schot baan {{ baan.volgnummer }}</th>
              {% endfor %}
              <th>Totaal</th>
              <th>Totaal 2e schot</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for deelnemer in deelnemers %}
              <tr data-inschrijving-id="{{ deelnemer.inschrijving_id }}" data-rotte="{{ (deelnemer.rotte or '') | lower }}">
                <td>{{ deelnemer.naam }}</td>
                <td>
                  <input type="text" class="rotte-input" value="{{ deelnemer.rotte or '' }}"
                         {% if wedstrijd.status != "actief" %}disabled{% endif %}>
                </td>
                {% for baan in banen %}
                  {% set score = deelnemer.scores.get(baan.id, {}) %}
                  <td>
                    <input type="number" min="0" max="{{ baan.aantal_duiven }}"
                           class="totaal-input" data-baan-id="{{ baan.id }}"
                           value="{{ score.get('totaal_geraakt', 0) }}"
                           {% if wedstrijd.status != "actief" %}disabled{% endif %}>
                  </td>
                  <td>
                    <input type="number" min="0" max="{{ baan.aantal_duiven }}"
                           class="tweede-input" data-baan-id="{{ baan.id }}"
                           value="{{ score.get('tweede_schot_treffers', 0) }}"
                           {% if wedstrijd.status != "actief" %}disabled{% endif %}>
                  </td>
                {% endfor %}
                <td class="totaal-output">{{ deelnemer.totaal }}</td>
                <td class="totaal-tweede-output">{{ deelnemer.totaal_tweede_schot }}</td>
                <td class="actie-cel">
                  {% if wedstrijd.status == "actief" %}
                    <form method="post"
                          action="{{ url_for('deelnemers.verwijderen', wedstrijd_id=wedstrijd.id, inschrijving_id=deelnemer.inschrijving_id) }}"
                          onsubmit="return confirm('Deze deelnemer verwijderen uit de wedstrijd?');">
                      <button type="submit" class="icon-btn" title="Deelnemer verwijderen" aria-label="Deelnemer verwijderen">
                        {{ icons.prullenbak() }}
                      </button>
                    </form>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <p id="moeilijkste-baan-info" class="info-banner">
        {% if moeilijkste_baan %}
          Moeilijkste baan op dit moment: Baan {{ moeilijkste_baan.volgnummer }} ({{ moeilijkste_baan.discipline }})
        {% endif %}
      </p>
    </div>

    <div class="card">
      <h3>Tussenstand (live)</h3>
      <p>
        <a class="knop" href="{{ url_for('wedstrijden.scorebord', wedstrijd_id=wedstrijd.id) }}"
           target="_blank" rel="noopener">Live scorebord openen (nieuw tabblad)</a>
      </p>
      <div class="table-wrap">
        <table id="ranking-tabel">
          <thead>
            <tr><th>Plek</th><th>Naam</th><th>Totaal</th><th>Totaal 2e schot</th><th>Klasse</th></tr>
          </thead>
          <tbody>
            {% for deelnemer in ranking %}
              <tr>
                <td>{{ deelnemer.plek }}{% if deelnemer.gedeeld %} (gedeeld){% endif %}</td>
                <td>{{ deelnemer.naam }}</td>
                <td>{{ deelnemer.totaal }}</td>
                <td>{{ deelnemer.totaal_tweede_schot }}</td>
                <td><span class="badge badge-{{ deelnemer.klasse[0] | lower }}">{{ deelnemer.klasse }}</span></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <script>
      const WEDSTRIJD_ID = {{ wedstrijd.id | tojson }};
      const BANEN = {{ banen_json | tojson }};

      function berekenTotaal(row) {
        let totaal = 0;
        let totaalTweede = 0;
        row.querySelectorAll('.totaal-input').forEach((input) => {
          totaal += parseInt(input.value, 10) || 0;
        });
        row.querySelectorAll('.tweede-input').forEach((input) => {
          totaalTweede += parseInt(input.value, 10) || 0;
        });
        row.querySelector('.totaal-output').textContent = totaal;
        row.querySelector('.totaal-tweede-output').textContent = totaalTweede;
      }

      function opslaanRotte(row) {
        const rotteInput = row.querySelector('.rotte-input');
        const inschrijvingId = row.dataset.inschrijvingId;
        const url = `/wedstrijden/${WEDSTRIJD_ID}/deelnemers/${inschrijvingId}/rotte`;

        fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: new URLSearchParams({ rotte: rotteInput.value }),
        })
          .then((response) => response.json())
          .then((data) => {
            row.dataset.rotte = (data.rotte || '').toLowerCase();
          });
      }

      function opslaan(row, baanId) {
        const totaalInput = row.querySelector(`.totaal-input[data-baan-id="${baanId}"]`);
        const tweedeInput = row.querySelector(`.tweede-input[data-baan-id="${baanId}"]`);
        const inschrijvingId = row.dataset.inschrijvingId;
        const url = `/wedstrijden/${WEDSTRIJD_ID}/deelnemers/${inschrijvingId}/scores/${baanId}`;

        fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: new URLSearchParams({
            totaal_geraakt: totaalInput.value || '0',
            tweede_schot_treffers: tweedeInput.value || '0',
          }),
        })
          .then((response) => response.json().then((data) => ({ status: response.status, data })))
          .then(({ status, data }) => {
            if (status !== 200) {
              totaalInput.classList.add('veld-fout');
              tweedeInput.classList.add('veld-fout');
              totaalInput.title = data.error || 'Kon score niet opslaan.';
              tweedeInput.title = data.error || 'Kon score niet opslaan.';
            } else {
              totaalInput.classList.remove('veld-fout');
              tweedeInput.classList.remove('veld-fout');
              totaalInput.title = '';
              tweedeInput.title = '';
            }
          });
      }

      function berekenKlasseGroottes(n) {
        const basis = Math.floor(n / 3);
        const rest = n % 3;
        if (rest === 0) return [basis, basis, basis];
        if (rest === 1) return [basis, basis, basis + 1];
        return [basis + 1, basis + 1, basis];
      }

      function berekenMoeilijkheid() {
        const totalen = {};
        BANEN.forEach((baan) => { totalen[baan.id] = { totaal: 0, tweede: 0 }; });

        document.querySelectorAll('#score-grid tbody tr').forEach((row) => {
          row.querySelectorAll('.totaal-input').forEach((input) => {
            totalen[input.dataset.baanId].totaal += parseInt(input.value, 10) || 0;
          });
          row.querySelectorAll('.tweede-input').forEach((input) => {
            totalen[input.dataset.baanId].tweede += parseInt(input.value, 10) || 0;
          });
        });

        const banenMetIndex = BANEN.map((baan) => {
          const t = totalen[baan.id];
          const index = t.totaal > 0 ? t.tweede / t.totaal : 0;
          return Object.assign({}, baan, { moeilijkheidsindex: index });
        });
        banenMetIndex.sort((a, b) => (
          b.moeilijkheidsindex - a.moeilijkheidsindex || a.volgnummer - b.volgnummer
        ));
        return banenMetIndex;
      }

      function berekenRanking() {
        const rijen = Array.from(document.querySelectorAll('#score-grid tbody tr')).map((row) => {
          const scores = {};
          row.querySelectorAll('.totaal-input').forEach((input) => {
            const baanId = input.dataset.baanId;
            scores[baanId] = scores[baanId] || { totaal: 0, tweede: 0 };
            scores[baanId].totaal = parseInt(input.value, 10) || 0;
          });
          row.querySelectorAll('.tweede-input').forEach((input) => {
            const baanId = input.dataset.baanId;
            scores[baanId] = scores[baanId] || { totaal: 0, tweede: 0 };
            scores[baanId].tweede = parseInt(input.value, 10) || 0;
          });
          return {
            naam: row.querySelector('td').textContent,
            totaal: parseInt(row.querySelector('.totaal-output').textContent, 10) || 0,
            totaalTweede: parseInt(row.querySelector('.totaal-tweede-output').textContent, 10) || 0,
            scores: scores,
          };
        });

        const moeilijkheid = berekenMoeilijkheid();
        if (moeilijkheid.length > 0) {
          const moeilijkste = moeilijkheid[0];
          document.getElementById('moeilijkste-baan-info').textContent =
            `Moeilijkste baan op dit moment: Baan ${moeilijkste.volgnummer} (${moeilijkste.discipline})`;
        }

        function vergelijk(a, b) {
          if (b.totaal !== a.totaal) return b.totaal - a.totaal;
          if (a.totaalTweede !== b.totaalTweede) return a.totaalTweede - b.totaalTweede;
          for (const baan of moeilijkheid) {
            const scoreA = a.scores[baan.id] || { totaal: 0, tweede: 0 };
            const scoreB = b.scores[baan.id] || { totaal: 0, tweede: 0 };
            if (scoreB.totaal !== scoreA.totaal) return scoreB.totaal - scoreA.totaal;
            if (scoreA.tweede !== scoreB.tweede) return scoreA.tweede - scoreB.tweede;
          }
          return 0;
        }

        rijen.sort(vergelijk);

        // Groepeer aaneengesloten rijen die na alle tiebreakers exact gelijk staan.
        const groepen = [];
        rijen.forEach((rij) => {
          const laatsteGroep = groepen[groepen.length - 1];
          if (laatsteGroep && vergelijk(laatsteGroep[0], rij) === 0) {
            laatsteGroep.push(rij);
          } else {
            groepen.push([rij]);
          }
        });

        const [grootteA, grootteB] = berekenKlasseGroottes(rijen.length);
        const grensA = grootteA;
        const grensB = grootteA + grootteB;

        const tbody = document.querySelector('#ranking-tabel tbody');
        tbody.innerHTML = '';
        let positie = 0;
        const klasseTeller = { A: 1, B: 1, C: 1 };
        groepen.forEach((groep, groepIndex) => {
          const plek = groepIndex + 1;
          const gedeeld = groep.length > 1;

          let label;
          if (positie < grensA) label = 'A';
          else if (positie < grensB) label = 'B';
          else label = 'C';
          const klassePositie = klasseTeller[label];
          klasseTeller[label] += 1;

          groep.forEach((rij) => {
            const tr = document.createElement('tr');
            const plekTekst = gedeeld ? `${plek} (gedeeld)` : `${plek}`;
            const gewoneCellen = [plekTekst, rij.naam, rij.totaal, rij.totaalTweede];
            gewoneCellen.forEach((waarde) => {
              const td = document.createElement('td');
              td.textContent = waarde;
              tr.appendChild(td);
            });

            const klasseTd = document.createElement('td');
            const klasseBadge = document.createElement('span');
            klasseBadge.className = `badge badge-${label.toLowerCase()}`;
            klasseBadge.textContent = `${label}${klassePositie}`;
            klasseTd.appendChild(klasseBadge);
            tr.appendChild(klasseTd);

            tbody.appendChild(tr);
          });

          positie += groep.length;
        });
      }

      document.querySelectorAll('#score-grid tbody tr').forEach((row) => {
        berekenTotaal(row);
        row.querySelectorAll('.totaal-input, .tweede-input').forEach((input) => {
          const baanId = input.dataset.baanId;
          input.addEventListener('input', () => {
            berekenTotaal(row);
            berekenRanking();
          });
          input.addEventListener('change', () => opslaan(row, baanId));
        });
        row.querySelector('.rotte-input').addEventListener('change', () => opslaanRotte(row));
      });

      document.getElementById('deelnemer-zoeken').addEventListener('input', (event) => {
        const zoekterm = event.target.value.trim().toLowerCase();
        document.querySelectorAll('#score-grid tbody tr').forEach((row) => {
          const naam = row.querySelector('td').textContent.toLowerCase();
          const rotte = row.dataset.rotte || '';
          row.hidden = zoekterm !== '' && !naam.includes(zoekterm) && !rotte.includes(zoekterm);
        });
      });
    </script>
  {% else %}
    <p><em>Nog geen deelnemers ingeschreven.</em></p>
  {% endif %}
{% endblock %}