let currentStep = 1;
let formData = {};

function validateZipCode(zip) {
  return /^\d{5}$/.test(zip);
}

function validateStep(step) {
  const form = document.getElementById('quote-form');
  
  switch(step) {
    case 1:
      const zipcode = document.getElementById('zipcode').value;
      return validateZipCode(zipcode);
    case 2:
      const year = form.querySelector('[name="year"]').value;
      const make = form.querySelector('[name="make"]').value;
      const model = form.querySelector('[name="model"]').value;
      return year && make && model;
    case 3:
      const services = form.querySelectorAll('[name="services"]:checked');
      return services.length > 0;
    case 4:
      const name = form.querySelector('[name="name"]').value;
      const phone = form.querySelector('[name="phone"]').value;
      const email = form.querySelector('[name="email"]').value;
      const address = form.querySelector('[name="address"]').value;
      return name && phone && email && address;
    default:
      return false;
  }
}

function updateProgressBar() {
  const progressBar = document.getElementById('progress-bar');
  const currentStepSpan = document.getElementById('current-step');
  const progress = (currentStep / 4) * 100;
  
  progressBar.style.width = `${progress}%`;
  currentStepSpan.textContent = currentStep;
}

function showStep(step) {
  // Hide all steps
  document.querySelectorAll('.form-step').forEach(el => el.classList.add('hidden'));
  
  // Show current step
  document.getElementById(`step-${step}`).classList.remove('hidden');
  
  // Update buttons
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const submitBtn = document.getElementById('submit-btn');
  
  // Show/hide previous button
  if (step === 1) {
    prevBtn.classList.add('hidden');
  } else {
    prevBtn.classList.remove('hidden');
  }
  
  // Show/hide next/submit buttons
  if (step === 4) {
    nextBtn.classList.add('hidden');
    submitBtn.classList.remove('hidden');
  } else {
    nextBtn.classList.remove('hidden');
    submitBtn.classList.add('hidden');
  }
  
  updateProgressBar();
  updateNextButtonState();
  
  if (step === 4) {
    updateSummary();
  }
}

function updateNextButtonState() {
  const nextBtn = document.getElementById('next-btn');
  const isValid = validateStep(currentStep);
  
  nextBtn.disabled = !isValid;
  if (isValid) {
    nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
  } else {
    nextBtn.classList.add('opacity-50', 'cursor-not-allowed');
  }
}

function updateSummary() {
  const form = document.getElementById('quote-form');
  const summaryDiv = document.getElementById('quote-summary');
  
  const zipcode = form.querySelector('[name="zipcode"]').value;
  const year = form.querySelector('[name="year"]').value;
  const make = form.querySelector('[name="make"]').value;
  const model = form.querySelector('[name="model"]').value;
  const services = Array.from(form.querySelectorAll('[name="services"]:checked')).map(el => el.value);
  
  let html = `
    <div><strong>Location:</strong> ${zipcode}</div>
    <div><strong>Vehicle:</strong> ${year} ${make} ${model}</div>
    <div><strong>Services:</strong> ${services.join(', ')}</div>
  `;
  
  summaryDiv.innerHTML = html;
}

function setupCustomCheckboxes() {
  document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    const customDiv = checkbox.parentNode.querySelector('.checkbox-custom');
    
    function updateCheckbox() {
      if (checkbox.checked) {
        customDiv.classList.add('bg-blue-600', 'border-blue-600');
        customDiv.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
        checkbox.parentNode.classList.add('border-blue-500', 'bg-blue-50');
      } else {
        customDiv.classList.remove('bg-blue-600', 'border-blue-600');
        customDiv.innerHTML = '';
        checkbox.parentNode.classList.remove('border-blue-500', 'bg-blue-50');
      }
    }
    
    checkbox.addEventListener('change', updateCheckbox);
    updateCheckbox();
  });
}

function preselectService(serviceName) {
  // Map service data attributes to form checkbox values
  const serviceMap = {
    'diagnostics': 'diagnostics',
    'starter': 'battery',
    'alternator': 'battery', 
    'ac': 'ac',
    'brakes': 'brakes',
    'cv-axle': 'suspension',
    'battery': 'battery',
    'inspection': 'diagnostics',
    'motor-mounts': 'suspension',
    'maintenance': 'maintenance',
    'tires': 'tires',
    'spark-plugs': 'maintenance',
    'water-pump': 'cooling',
    'fuel-pump': 'suspension',
    'control-arm': 'suspension',
    'serpentine-belt': 'maintenance'
  };
  
  const formValue = serviceMap[serviceName];
  if (formValue) {
    const checkbox = document.querySelector(`[name="services"][value="${formValue}"]`);
    if (checkbox) {
      checkbox.checked = true;
      // Trigger the custom checkbox update
      checkbox.dispatchEvent(new Event('change'));
    }
  }
}

function handleServiceCardClick(e) {
  const card = e.currentTarget;
  const service = card.getAttribute('data-service');
  
  // Scroll to quote section
  const quoteSection = document.getElementById('quote');
  if (quoteSection) {
    quoteSection.scrollIntoView({ behavior: 'smooth' });
    
    // Wait for scroll to complete, then preselect service
    setTimeout(() => {
      preselectService(service);
      updateNextButtonState();
    }, 800);
  }
}

function toggleServices() {
  const hiddenServices = document.querySelectorAll('.mobile-hidden-service');
  const showMoreBtn = document.getElementById('show-more-services');
  const showLessBtn = document.getElementById('show-less-services');
  
  hiddenServices.forEach(service => {
    if (service.classList.contains('flex')) {
      // Hide services
      service.classList.remove('flex');
      service.classList.add('hidden');
    } else {
      // Show services
      service.classList.remove('hidden');
      service.classList.add('flex');
    }
  });
  
  // Toggle buttons
  showMoreBtn.classList.toggle('hidden');
  showLessBtn.classList.toggle('hidden');
}

function handleShowMoreServices() {
  toggleServices();
}

function handleShowLessServices() {
  toggleServices();
}

function nextStep() {
  if (validateStep(currentStep) && currentStep < 4) {
    currentStep++;
    showStep(currentStep);
  }
}

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

function handleSubmit(e) {
  e.preventDefault();
  
  // Hide form, show success
  document.querySelectorAll('.form-step').forEach(el => el.classList.add('hidden'));
  document.querySelector('.flex.justify-between').classList.add('hidden');
  document.getElementById('success-message').classList.remove('hidden');
  
  // Form will be submitted by the contact form handler
  // since it has data-landingsite-contact-form attribute
}

function init() {
  // Set up service card click handlers
  document.querySelectorAll('.service-card').forEach(card => {
    card.addEventListener('click', handleServiceCardClick);
  });
  
  // Set up show more/less button handlers
  const showMoreBtn = document.getElementById('show-more-services');
  const showLessBtn = document.getElementById('show-less-services');
  
  if (showMoreBtn) showMoreBtn.addEventListener('click', handleShowMoreServices);
  if (showLessBtn) showLessBtn.addEventListener('click', handleShowLessServices);
  
  // Set up form event listeners
  const nextBtn = document.getElementById('next-btn');
  const prevBtn = document.getElementById('prev-btn');
  const form = document.getElementById('quote-form');
  
  if (nextBtn) nextBtn.addEventListener('click', nextStep);
  if (prevBtn) prevBtn.addEventListener('click', prevStep);
  if (form) form.addEventListener('submit', handleSubmit);
  
  // ZIP code validation
  const zipcodeInput = document.getElementById('zipcode');
  if (zipcodeInput) {
    zipcodeInput.addEventListener('input', function() {
      const errorDiv = document.getElementById('zip-error');
      const isValid = validateZipCode(this.value);
      
      if (this.value && !isValid) {
        errorDiv.classList.remove('hidden');
      } else {
        errorDiv.classList.add('hidden');
      }
      
      updateNextButtonState();
    });
  }
  
  // Form field validation
  document.querySelectorAll('input, select').forEach(input => {
    input.addEventListener('input', updateNextButtonState);
    input.addEventListener('change', updateNextButtonState);
  });
  
  // Checkbox handling
  document.querySelectorAll('[name="services"]').forEach(checkbox => {
    checkbox.addEventListener('change', updateNextButtonState);
  });
  
  // Initialize
  setupCustomCheckboxes();
  if (form) {
    showStep(1);
  }
}

function teardown() {
  // Remove service card listeners
  document.querySelectorAll('.service-card').forEach(card => {
    card.removeEventListener('click', handleServiceCardClick);
  });
  
  // Remove show more/less button handlers
  const showMoreBtn = document.getElementById('show-more-services');
  const showLessBtn = document.getElementById('show-less-services');
  
  if (showMoreBtn) showMoreBtn.removeEventListener('click', handleShowMoreServices);
  if (showLessBtn) showLessBtn.removeEventListener('click', handleShowLessServices);
  
  // Remove form event listeners
  const nextBtn = document.getElementById('next-btn');
  const prevBtn = document.getElementById('prev-btn');
  const form = document.getElementById('quote-form');
  const zipcodeInput = document.getElementById('zipcode');
  
  if (nextBtn) nextBtn.removeEventListener('click', nextStep);
  if (prevBtn) prevBtn.removeEventListener('click', prevStep);
  if (form) form.removeEventListener('submit', handleSubmit);
  if (zipcodeInput) zipcodeInput.removeEventListener('input', updateNextButtonState);
  
  document.querySelectorAll('input, select').forEach(input => {
    input.removeEventListener('input', updateNextButtonState);
    input.removeEventListener('change', updateNextButtonState);
  });
  
  document.querySelectorAll('[name="services"]').forEach(checkbox => {
    checkbox.removeEventListener('change', updateNextButtonState);
  });
}

export { init, teardown };