const form = document.getElementById('userForm');
const confirmation = document.getElementById('confirmation');
const summary = document.getElementById('summary');

const fields = {
  firstName: {
    required: true,
    element: document.getElementById('firstName'),
    error: document.getElementById('error-firstName'),
    message: 'You must provide a first name.'
  },
  lastName: {
    required: true,
    element: document.getElementById('lastName'),
    error: document.getElementById('error-lastName'),
    message: 'You must provide a last name.'
  },
  accept: {
    required: true,
    element: document.getElementById('accept'),
    error: document.getElementById('error-accept'),
    message: 'You must accept the data processing.'
  }
};

let hasAttemptedSubmit = false;

function loadFromSession() {
  const saved = sessionStorage.getItem('formData');
  if (!saved) return;

  try {
    const data = JSON.parse(saved);
    fields.firstName.element.value = data.firstName || '';
    fields.lastName.element.value = data.lastName || '';
    document.getElementById('message').value = data.message || '';
    fields.accept.element.checked = !!data.accept;
  } catch (e) {
    console.error('Session Storage parsing error:', e);
  }
}

function saveToSession() {
  const data = {
    firstName: fields.firstName.element.value,
    lastName: fields.lastName.element.value,
    message: document.getElementById('message').value,
    accept: fields.accept.element.checked
  };
  sessionStorage.setItem('formData', JSON.stringify(data));
}

function clearSession() {
  sessionStorage.removeItem('formData');
}

function validateField(key) {
  const { required, element, error, message } = fields[key];
  const isValid = required
    ? (element.type === 'checkbox' ? element.checked : element.value.trim() !== '')
    : true;

  element.setAttribute('aria-invalid', !isValid);
  error.hidden = isValid;
  error.textContent = isValid ? '' : message;
  element.classList.toggle('invalid', !isValid);

  return isValid;
}

function getCurrentErrorMessages() {
  return Object.keys(fields)
    .filter(key => {
      const { required, element } = fields[key];
      return required && (
        element.type === 'checkbox'
          ? !element.checked
          : element.value.trim() === ''
      );
    })
    .map(key => fields[key].message);
}

function updateSummary() {
  const messages = getCurrentErrorMessages();
  if (messages.length > 0) {
    summary.innerHTML = `<p>Correct the following errors:</p><ul>${messages.map(msg => `<li>${msg}</li>`).join('')}</ul>`;
  } else {
    summary.innerHTML = '';
  }
}

function validateForm() {
  let allValid = true;
  let firstInvalid = null;

  Object.keys(fields).forEach(key => {
    const isValid = validateField(key);
    if (!isValid && !firstInvalid) {
      firstInvalid = fields[key].element;
      allValid = false;
    }
  });

  updateSummary();

  if (!allValid && firstInvalid) {
    firstInvalid.focus();
  }

  return allValid;
}

// Blur validation after first attempt
Object.keys(fields).forEach(key => {
  fields[key].element.addEventListener('blur', () => {
    if (hasAttemptedSubmit) {
      validateField(key);
      updateSummary();
    }
  });
});

// Save input changes
Object.keys(fields).forEach(key => {
  fields[key].element.addEventListener('change', saveToSession);
});
document.getElementById('message').addEventListener('input', saveToSession);

// Initial submit handler
form.addEventListener('submit', (e) => {
  e.preventDefault();
  hasAttemptedSubmit = true;

  if (validateForm()) {
    form.hidden = true;
    confirmation.hidden = false;
  }
});

document.getElementById('edit').addEventListener('click', () => {
  confirmation.hidden = true;
  form.hidden = false;
});

document.getElementById('finalSubmit').addEventListener('click', () => {
  clearSession();
  alert('Form successfully submitted!');
  confirmation.hidden = true;
  form.reset();
  form.hidden = false;
  hasAttemptedSubmit = false;
  summary.innerHTML = '';

  Object.keys(fields).forEach(key => {
    fields[key].element.classList.remove('invalid');
    fields[key].element.setAttribute('aria-invalid', 'false');
    fields[key].error.hidden = true;
  });
});

loadFromSession();