const form = document.getElementById('rsvp-form');
const statusNode = document.getElementById('form-status');
const attendanceFields = document.getElementById('attendance-fields');
const attendanceInputs = Array.from(document.querySelectorAll('input[name="attendance"]'));
const successModal = document.getElementById('success-modal');
const successOkButton = document.getElementById('success-ok');
const closeModalNodes = Array.from(document.querySelectorAll('[data-close-modal]'));

function updateAttendanceFields() {
  const selected = document.querySelector('input[name="attendance"]:checked');
  const attending = selected?.value === 'si';

  attendanceFields.classList.toggle('attendance-fields--hidden', !attending);

  attendanceFields.querySelectorAll('input, select, textarea').forEach((field) => {
    field.disabled = !attending;
    if (!attending && field.tagName === 'TEXTAREA') field.value = '';
    if (!attending && field.tagName === 'SELECT') field.value = '0';
  });
}

function openSuccessModal() {
  if (!successModal) return;
  successModal.classList.add('success-modal--open');
  successModal.setAttribute('aria-hidden', 'false');
  document.body.classList.add('modal-open');
  successOkButton?.focus();
}

function closeSuccessModal() {
  if (!successModal) return;
  successModal.classList.remove('success-modal--open');
  successModal.setAttribute('aria-hidden', 'true');
  document.body.classList.remove('modal-open');
}

attendanceInputs.forEach((input) => input.addEventListener('change', updateAttendanceFields));
closeModalNodes.forEach((node) => node.addEventListener('click', closeSuccessModal));
successOkButton?.addEventListener('click', closeSuccessModal);
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && successModal?.classList.contains('success-modal--open')) {
    closeSuccessModal();
  }
});
updateAttendanceFields();

function encode(data) {
  return new URLSearchParams(data).toString();
}

form?.addEventListener('submit', async (event) => {
  event.preventDefault();

  if (!form.reportValidity()) return;

  const submitButton = form.querySelector('button[type="submit"]');
  const formData = new FormData(form);

  submitButton.disabled = true;
  statusNode.textContent = 'Invio in corso...';

  try {
    const response = await fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode(formData)
    });

    if (!response.ok) {
      throw new Error('Submission failed');
    }

    form.reset();
    updateAttendanceFields();
    statusNode.textContent = '';
    openSuccessModal();
  } catch (error) {
    statusNode.textContent = 'C’è stato un problema nell’invio. Riprova tra poco.';
  } finally {
    submitButton.disabled = false;
  }
});