(function() {
  'use strict';

  function eventRenderer() {
    console.log('Event renderer initialized');
    // Listen for messages from the waitlist form
    document.querySelector('.waitlist-form').addEventListener('waitlistMessage', function(event) {
        const { message, type } = event.detail;
        const messageContainer = document.getElementById('message-container');
        
        // Update the message container
        messageContainer.textContent = message;
        messageContainer.className = type; // 'success' or 'error'
        
        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
        setTimeout(() => {
            messageContainer.textContent = '';
            messageContainer.className = '';
        }, 5000);
        }
    });
  }
  // Attach event handlers to form elements
  function initializeForm() {
    
    eventRenderer();

    const form = document.querySelector('.waitlist-form');
    if (!form) {
      console.error('Waitlist form container not found');
      return;
    }

    const emailInput = form.querySelector('#waitlist-email');
    const submitBtn = form.querySelector('#join-btn');

    if (!emailInput || !submitBtn) {
      console.error('Waitlist form inputs not found');
      return;
    }

    // Handle submit button click
    submitBtn.addEventListener('click', handleSubmit);

    // Allow Enter key to submit
    emailInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        handleSubmit(e);
      }
    });

    async function handleSubmit(e) {
        console.log('Form submitted');
      e.preventDefault();


        console.log('Form submitted 2');
      const email = emailInput.value.trim();
      if (!email) {
        showMessage('Please enter your email', 'error');
        return;
      }

      // Basic email validation
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        showMessage('Please enter a valid email address', 'error');
        return;
      }

      submitBtn.disabled = true;
      submitBtn.textContent = 'Joining...';

      try {
        const response = await fetch('https://api.journiywellness.com/waitlist', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: 'email=' + encodeURIComponent(email)
        });

        const data = await response.json();

        if (response.ok) {
          // Remove form elements from DOM
          emailInput.remove();
          submitBtn.remove();

          // Remove any existing transient message container
          const messageContainer = document.getElementById('message-container');
          if (messageContainer) {
            messageContainer.remove();
          }

          // Create and add permanent message
          const successMessage = document.createElement('div');
          successMessage.textContent = "Thanks! We've received your email address. Once verified, we will add your address to our waitlist.";
          successMessage.className = 'waitlist-confirmed';
          form.appendChild(successMessage);
        } else {
          showMessage(data.detail || 'Something went wrong. Please try again.', 'error');
          submitBtn.disabled = false;
          submitBtn.textContent = 'Join the Waitlist';
        }
      } catch (error) {
        showMessage('Network error. Please try again.', 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Join the Waitlist';
      }
    }

    function showMessage(text, type) {
      // Dispatch custom event for parent page to handle message display
      const event = new CustomEvent('waitlistMessage', {
        detail: { message: text, type: type }
      });
      form.dispatchEvent(event);
      console.log('Message shown:', text, type);
    }
  }

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeForm);
  } else {
    initializeForm();
  }
})();