// Multi-step form functionality
let currentStep = 1;
const totalSteps = 4;

function updateProgressBar() {
  const progressBar = document.querySelector('.progress-bar-fill');
  const progressText = document.querySelector('.progress-text');
  const stepText = document.querySelector('.step-text');
  
  if (progressBar) {
    const percentage = (currentStep / totalSteps) * 100;
    progressBar.style.width = `${percentage}%`;
  }
  
  if (progressText) {
    progressText.textContent = 'Application Progress';
  }
  
  if (stepText) {
    stepText.textContent = `Step ${currentStep} of ${totalSteps}`;
  }
}

function showStep(step) {
  // Hide all steps
  for (let i = 1; i <= totalSteps; i++) {
    const stepElement = document.querySelector(`[data-step="${i}"]`);
    if (stepElement) {
      stepElement.style.display = 'none';
    }
  }
  
  // Show current step
  const currentStepElement = document.querySelector(`[data-step="${step}"]`);
  if (currentStepElement) {
    currentStepElement.style.display = 'block';
  }
  
  // Update navigation buttons
  const prevBtn = document.querySelector('.prev-step-btn');
  const nextBtn = document.querySelector('.next-step-btn');
  const submitBtn = document.querySelector('.submit-btn');
  
  if (prevBtn) {
    prevBtn.style.display = step === 1 ? 'none' : 'flex';
  }
  
  if (nextBtn) {
    nextBtn.style.display = step === totalSteps ? 'none' : 'flex';
  }
  
  if (submitBtn) {
    submitBtn.style.display = step === totalSteps ? 'flex' : 'none';
  }
  
  updateProgressBar();
}

function nextStep() {
  if (currentStep < totalSteps && validateCurrentStep()) {
    currentStep++;
    showStep(currentStep);
  }
}

function prevStep() {
  if (currentStep > 1) {
    currentStep--;
    showStep(currentStep);
  }
}

function validateCurrentStep() {
  const currentStepElement = document.querySelector(`[data-step="${currentStep}"]`);
  if (!currentStepElement) return true;
  
  const requiredFields = currentStepElement.querySelectorAll('input[required], select[required]');
  let isValid = true;
  
  requiredFields.forEach(field => {
    if (!field.value.trim()) {
      field.classList.add('border-red-500');
      isValid = false;
    } else {
      field.classList.remove('border-red-500');
    }
  });
  
  if (!isValid) {
    // Show error message
    let errorMsg = currentStepElement.querySelector('.step-error');
    if (!errorMsg) {
      errorMsg = document.createElement('div');
      errorMsg.className = 'step-error text-red-500 text-sm mt-2';
      errorMsg.textContent = 'Please fill in all required fields before continuing.';
      currentStepElement.insertBefore(errorMsg, currentStepElement.firstChild);
    }
  } else {
    // Remove error message
    const errorMsg = currentStepElement.querySelector('.step-error');
    if (errorMsg) {
      errorMsg.remove();
    }
  }
  
  return isValid;
}

function handleNextClick(event) {
  event.preventDefault();
  nextStep();
}

function handlePrevClick(event) {
  event.preventDefault();
  prevStep();
}

function handleSubmit(event) {
  event.preventDefault();
  if (validateCurrentStep()) {
    // Handle form submission
    const form = document.querySelector('[data-landingsite-contact-form]');
    if (form) {
      // Create a hidden input to indicate this is a multi-step form completion
      const completedInput = document.createElement('input');
      completedInput.type = 'hidden';
      completedInput.name = 'application_completed';
      completedInput.value = 'true';
      form.appendChild(completedInput);
      
      // Submit the form
      form.submit();
    }
  }
}

function init() {
  // Add event listeners for navigation buttons
  const nextBtns = document.querySelectorAll('.next-step-btn');
  const prevBtns = document.querySelectorAll('.prev-step-btn');
  const submitBtns = document.querySelectorAll('.submit-btn');
  
  nextBtns.forEach(btn => {
    btn.addEventListener('click', handleNextClick);
  });
  
  prevBtns.forEach(btn => {
    btn.addEventListener('click', handlePrevClick);
  });
  
  submitBtns.forEach(btn => {
    btn.addEventListener('click', handleSubmit);
  });
  
  // Initialize first step
  currentStep = 1;
  showStep(currentStep);
}

function teardown() {
  // Remove event listeners
  const nextBtns = document.querySelectorAll('.next-step-btn');
  const prevBtns = document.querySelectorAll('.prev-step-btn');
  const submitBtns = document.querySelectorAll('.submit-btn');
  
  nextBtns.forEach(btn => {
    btn.removeEventListener('click', handleNextClick);
  });
  
  prevBtns.forEach(btn => {
    btn.removeEventListener('click', handlePrevClick);
  });
  
  submitBtns.forEach(btn => {
    btn.removeEventListener('click', handleSubmit);
  });
}

// Export functions for the system to use
if (typeof module !== 'undefined' && module.exports) {
  module.exports = { init, teardown };
} else {
  window.applicationForm = { init, teardown };
}