// Payment form enhancement JavaScript

let cardNumberInput;
let expiryDateInput;
let ccvInput;

function formatCardNumber(value) {
  // Remove all non-digit characters
  const cleanValue = value.replace(/\D/g, '');
  
  // Add spaces every 4 digits
  const formattedValue = cleanValue.replace(/(\d{4})(?=\d)/g, '$1 ');
  
  return formattedValue.slice(0, 19); // Max length with spaces
}

function formatExpiryDate(value) {
  // Remove all non-digit characters
  const cleanValue = value.replace(/\D/g, '');
  
  // Add slash after 2 digits
  if (cleanValue.length >= 2) {
    return cleanValue.slice(0, 2) + '/' + cleanValue.slice(2, 4);
  }
  
  return cleanValue;
}

function validateCardNumber(cardNumber) {
  // Basic Luhn algorithm validation
  const cleanNumber = cardNumber.replace(/\D/g, '');
  
  if (cleanNumber.length < 13 || cleanNumber.length > 19) {
    return false;
  }
  
  let sum = 0;
  let shouldDouble = false;
  
  for (let i = cleanNumber.length - 1; i >= 0; i--) {
    let digit = parseInt(cleanNumber.charAt(i));
    
    if (shouldDouble) {
      digit *= 2;
      if (digit > 9) {
        digit -= 9;
      }
    }
    
    sum += digit;
    shouldDouble = !shouldDouble;
  }
  
  return sum % 10 === 0;
}

function getCardType(cardNumber) {
  const cleanNumber = cardNumber.replace(/\D/g, '');
  
  if (/^4/.test(cleanNumber)) {
    return 'visa';
  } else if (/^5[1-5]/.test(cleanNumber) || /^2[2-7]/.test(cleanNumber)) {
    return 'mastercard';
  } else if (/^3[47]/.test(cleanNumber)) {
    return 'amex';
  } else if (/^6/.test(cleanNumber)) {
    return 'discover';
  }
  
  return 'unknown';
}

function handleCardNumberInput(event) {
  const input = event.target;
  const formattedValue = formatCardNumber(input.value);
  input.value = formattedValue;
  
  // Update visual feedback
  const cardIcon = input.nextElementSibling;
  const cardType = getCardType(formattedValue);
  
  // Update icon based on card type
  if (cardType === 'visa') {
    cardIcon.className = 'fab fa-cc-visa absolute right-4 top-1/2 transform -translate-y-1/2 text-blue-600';
  } else if (cardType === 'mastercard') {
    cardIcon.className = 'fab fa-cc-mastercard absolute right-4 top-1/2 transform -translate-y-1/2 text-red-500';
  } else if (cardType === 'amex') {
    cardIcon.className = 'fab fa-cc-amex absolute right-4 top-1/2 transform -translate-y-1/2 text-blue-500';
  } else if (cardType === 'discover') {
    cardIcon.className = 'fab fa-cc-discover absolute right-4 top-1/2 transform -translate-y-1/2 text-orange-500';
  } else {
    cardIcon.className = 'fas fa-credit-card absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400';
  }
}

function handleExpiryDateInput(event) {
  const input = event.target;
  const formattedValue = formatExpiryDate(input.value);
  input.value = formattedValue;
  
  // Validation for expiry date
  if (formattedValue.length === 5) {
    const [month, year] = formattedValue.split('/');
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear() % 100;
    const currentMonth = currentDate.getMonth() + 1;
    
    const expMonth = parseInt(month);
    const expYear = parseInt(year);
    
    if (expMonth < 1 || expMonth > 12) {
      input.setCustomValidity('Please enter a valid month (01-12)');
    } else if (expYear < currentYear || (expYear === currentYear && expMonth < currentMonth)) {
      input.setCustomValidity('Card has expired');
    } else {
      input.setCustomValidity('');
    }
  }
}

function handleCCVInput(event) {
  const input = event.target;
  // Only allow numbers
  input.value = input.value.replace(/\D/g, '');
}

function handleFormSubmit(event) {
  const form = event.target;
  const cardNumber = form.querySelector('#cardNumber').value;
  
  // Validate card number with Luhn algorithm
  if (!validateCardNumber(cardNumber)) {
    event.preventDefault();
    alert('Please enter a valid credit card number.');
    return false;
  }
  
  // Additional validation can be added here
  console.log('Payment form submitted successfully');
}

function init() {
  cardNumberInput = document.querySelector('#cardNumber');
  expiryDateInput = document.querySelector('#expiryDate');
  ccvInput = document.querySelector('#ccv');
  const paymentForm = document.querySelector('form[data-landingsite-contact-form]');
  
  if (cardNumberInput) {
    cardNumberInput.addEventListener('input', handleCardNumberInput);
  }
  
  if (expiryDateInput) {
    expiryDateInput.addEventListener('input', handleExpiryDateInput);
  }
  
  if (ccvInput) {
    ccvInput.addEventListener('input', handleCCVInput);
  }
  
  if (paymentForm) {
    paymentForm.addEventListener('submit', handleFormSubmit);
  }
}

function teardown() {
  if (cardNumberInput) {
    cardNumberInput.removeEventListener('input', handleCardNumberInput);
  }
  
  if (expiryDateInput) {
    expiryDateInput.removeEventListener('input', handleExpiryDateInput);
  }
  
  if (ccvInput) {
    ccvInput.removeEventListener('input', handleCCVInput);
  }
  
  const paymentForm = document.querySelector('form[data-landingsite-contact-form]');
  if (paymentForm) {
    paymentForm.removeEventListener('submit', handleFormSubmit);
  }
}

export { init, teardown };