/* tennis-liga.at dialogs on native <dialog class="tl-dialog"> (no Bootstrap).
   Open:  <button data-tl-dialog-open="matchModal12"> (a leading # is ignored) or window.tlDialog.open(id).
   Close: [data-tl-dialog-close], Esc (native) or a click on the backdrop.
   Result dialogs ([data-tl-result]) get set highlighting, the winner line, the forfeit switch
   and the confirm summary ([data-tl-result-mode="confirm"]). */
(function () {
  function byId(id) {
    return id ? document.getElementById(String(id).replace(/^#/, '')) : null;
  }

  function open(id) {
    var dialog = byId(id);
    if (!dialog || typeof dialog.showModal !== 'function') return null;
    if (!dialog.open) dialog.showModal();
    return dialog;
  }

  function close(dialog) {
    if (dialog && dialog.open) dialog.close();
  }

  document.addEventListener('click', function (event) {
    var opener = event.target.closest('[data-tl-dialog-open]');
    if (opener) {
      event.preventDefault();
      open(opener.getAttribute('data-tl-dialog-open'));
      return;
    }
    var closer = event.target.closest('[data-tl-dialog-close]');
    if (closer) {
      event.preventDefault();
      close(closer.closest('dialog'));
      return;
    }
    // A click on the dialog element itself (not its content) is a click on the backdrop.
    if (event.target.matches && event.target.matches('dialog.tl-dialog')) {
      var rect = event.target.getBoundingClientRect();
      var inside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
      if (!inside) close(event.target);
    }
  });

  /* ---------- Match result ---------- */
  function num(input) {
    var value = input.value.trim();
    return value === '' ? null : parseInt(value, 10);
  }

  function updateResult(dialog) {
    var rows = [dialog.querySelectorAll('[data-tl-score="1"]'), dialog.querySelectorAll('[data-tl-score="2"]')];
    var setsWon = [0, 0];
    var parts = [];
    for (var i = 0; i < 3; i++) {
      var a = rows[0][i], b = rows[1][i];
      if (!a || !b) continue;
      var x = num(a), y = num(b);
      a.classList.toggle('tl-score-box--win', x !== null && y !== null && x > y);
      b.classList.toggle('tl-score-box--win', x !== null && y !== null && y > x);
      if (x !== null && y !== null) {
        if (x > y) setsWon[0] += 1;
        if (y > x) setsWon[1] += 1;
        parts.push(x + ':' + y);
      }
    }
    var winner = dialog.querySelector('[data-tl-result-winner]');
    if (!winner) return;
    var forfeit = dialog.querySelector('[data-tl-forfeit-switch]');
    var name = '';
    if (!(forfeit && forfeit.checked) && setsWon[0] !== setsWon[1]) {
      name = dialog.getAttribute(setsWon[0] > setsWon[1] ? 'data-tl-name-1' : 'data-tl-name-2');
    }
    winner.hidden = !name;
    var target = winner.querySelector('b');
    if (target) target.textContent = name ? name + ' · ' + parts.join(' ') : '';
  }

  function syncForfeit(dialog) {
    var toggle = dialog.querySelector('[data-tl-forfeit-switch]');
    if (!toggle) return;
    var options = dialog.querySelector('[data-tl-forfeit-options]');
    var none = dialog.querySelector('[data-tl-forfeit-none]');
    var radios = dialog.querySelectorAll('[data-tl-forfeit-options] input[type="radio"]');
    if (options) options.hidden = !toggle.checked;
    radios.forEach(function (radio) { radio.required = toggle.checked; });
    if (!toggle.checked) {
      if (none) none.checked = true;
    } else if (none && none.checked) {
      none.checked = false;
    }
    dialog.querySelectorAll('[data-tl-score]').forEach(function (input) {
      if (input.hasAttribute('data-tl-required')) input.required = !toggle.checked;
    });
    updateResult(dialog);
  }

  function setConfirmEditing(dialog, editing) {
    dialog.setAttribute('data-tl-editing', editing ? 'true' : 'false');
    dialog.querySelectorAll('[data-tl-summary-only]').forEach(function (el) { el.hidden = editing; });
    dialog.querySelectorAll('[data-tl-edit-only]').forEach(function (el) { el.hidden = !editing; });
    dialog.querySelectorAll('[data-tl-score], [data-tl-result-date]').forEach(function (input) {
      input.readOnly = !editing;
    });
  }

  function initResult(dialog) {
    dialog.addEventListener('input', function (event) {
      if (event.target.matches('[data-tl-score]')) updateResult(dialog);
    });
    dialog.addEventListener('change', function (event) {
      if (event.target.matches('[data-tl-forfeit-switch]')) syncForfeit(dialog);
    });
    dialog.addEventListener('click', function (event) {
      var toggle = event.target.closest('[data-tl-result-edit]');
      if (!toggle) return;
      event.preventDefault();
      setConfirmEditing(dialog, toggle.getAttribute('data-tl-result-edit') === 'on');
    });
    if (dialog.getAttribute('data-tl-result-mode') === 'confirm') {
      setConfirmEditing(dialog, false);
      dialog.addEventListener('close', function () { setConfirmEditing(dialog, false); });
    }
    syncForfeit(dialog);
  }

  function init() {
    document.querySelectorAll('dialog[data-tl-result]').forEach(initResult);
    document.querySelectorAll('dialog[data-tl-feedback]').forEach(function (dialog) {
      var message = dialog.querySelector('textarea');
      function syncPlaceholder() {
        var checked = dialog.querySelector('input[name="feedback_type"]:checked');
        if (checked && message) message.placeholder = checked.getAttribute('data-placeholder') || '';
      }
      dialog.addEventListener('change', function (event) {
        if (event.target.name === 'feedback_type') syncPlaceholder();
      });
      syncPlaceholder();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  window.tlDialog = { open: open, close: close };
})();