(function() {
  const appUrl = "https://forms.colart.com";
  const formId = "67c6cadc2538d900a817122f";
  const submitUrl = appUrl + "/api/forms/submit/" + formId;
  const formUrl = appUrl + "/api/embed/" + formId;

  fetch(formUrl)
    .then(response => response.text())
    .then(layout => {
      const container = document.querySelector(`#colartform_${formId}`) || document.querySelector('#colartform_preview');
      if (!container) {
        console.error('colartform not found');
        return;
      }

      container.innerHTML = layout;

      /* Add geolocation fields */
      const form = container.querySelector('form');
      const geoFields = ['latitude', 'longitude', 'accuracy', 'error'].map(field => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = '_geo_' + field;
        return input;
      });
      geoFields.forEach(field => form.appendChild(field));
      
      /* Try to get location */
      if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition(
          function(position) {
            geoFields[0].value = position.coords.latitude;
            geoFields[1].value = position.coords.longitude;
            geoFields[2].value = position.coords.accuracy;
          },
          function(error) {
            geoFields[3].value = error.message;
          },
          {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
          }
        );
      } else {
        geoFields[3].value = 'Geolocation not supported';
      }

      /* Modify existing email field */
      const existingEmailField = form.querySelector('input[name="email"]');
      if (existingEmailField) {
        existingEmailField.name = 'ue'; // Change name to 'ue'
      }

      /* Add honeypot field */
      const honeypotEmail = document.createElement('input');
      honeypotEmail.type = 'text';
      honeypotEmail.name = 'email'; 
      honeypotEmail.autocomplete = 'off';
      honeypotEmail.style.position = 'absolute'; 
      honeypotEmail.style.left = '-9999px';
      form.appendChild(honeypotEmail);

      const setHiddenFileSrc = (hiddenField, url) => {
        if (hiddenField) {
          hiddenField.value = url;
        } else {
          console.error('S3 Direct Uploader: hiddenField not found');
        }
      };

      const getPresignedUrl = async (file) => {
        try {
          const response = await fetch("https://shopify-tools.colart.com/s3-presigned-url/index.php?upload_file_name=" + file.name + "&bucket=colart-form-uploads", {
            method: 'GET',
            headers: {
              'x-colart': 'colartunited'
            },
          });
          if (!response.ok) return;
      
          const data = await response.json();
          return data.url;
        } catch (error) {
          console.error('S3 Direct Uploader: unknown error occurred', error);
          return;
        }
      };

      const fileInputs = container.querySelectorAll('input[type="file"]');
      fileInputs.forEach((fileInput, index) => {
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        const baseName = fileInput.name.split('-')[0];
        hiddenInput.name = `${baseName}-${index}-hidden`;
        fileInput.insertAdjacentElement('afterend', hiddenInput);

        fileInput.addEventListener('change', async (e) => {
          fileInput.disabled = true;
          const file = e.target.files[0];
          if (!file) {
            console.warn('S3 Direct Uploader: no file selected');
            fileInput.disabled = false;
            return;
          }
      
          const presignedUrl = await getPresignedUrl(file);
          if (!presignedUrl) {
            console.error('S3 Direct Uploader: failed to get presigned url');
            alert('Failed to get presigned url');
            fileInput.disabled = false;
            return;
          }
          const fileUrl = presignedUrl.split('?')[0];
      
          const form = fileInput.closest('form');
          if (form) {
            const submitButton = form.querySelector('button[type="submit"]');
            if (submitButton) {
              submitButton.disabled = true;
            }
          }

          try {
            const response = await fetch(presignedUrl, {
              method: 'PUT',
              headers: {
                'Content-Type': file.type,
              },
              body: file
            });
            if (response.ok) {
              const hiddenInput = fileInput.nextElementSibling;
              setHiddenFileSrc(hiddenInput, fileUrl);
              if (hiddenInput) {
                const span = document.createElement('span');
                span.textContent = "File uploaded: " + file.name;
                hiddenInput.innerHTML = '';
                hiddenInput.appendChild(span);
              }
              fileInput.disabled = false;
              if (form) {
                const submitButton = form.querySelector('button[type="submit"]');
                if (submitButton) {
                  submitButton.disabled = false;
                }
              }
            } else {
              alert('File upload failed!');
              const responseText = await response.text();
              console.error('Upload failed:', responseText);
            }
          } catch (error) {
            console.error('Error uploading file:', error);
            alert('Error uploading file!');
          }
        });
      });

      const validateForm = () => {
        let isValid = true;
        const requiredFields = form.querySelectorAll('[required]');
        requiredFields.forEach(field => {
          if (field.type === 'radio') {
            const radioGroup = form.querySelectorAll(`input[name="${field.name}"]`);
            const isChecked = Array.from(radioGroup).some(radio => radio.checked);
            if (!isChecked) {
              isValid = false;
              radioGroup.forEach(radio => radio.parentElement.style.color = 'red');
            } else {
              radioGroup.forEach(radio => radio.parentElement.style.color = '');
            }
          } else if (!field.value) {
            isValid = false;
            field.style.borderColor = 'red';
          } else {
            field.style.borderColor = '';
          }
        });
        return isValid;
      };

      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        if (!validateForm()) {
          alert('Please fill in all required fields.');
          return;
        }
        const formData = new FormData(form);
        /* Group form fields, collecting file fields into arrays */
        const data = Array.from(formData.entries()).reduce((acc, [name, value]) => {
          /* Handle file fields */
          if (name.includes('-hidden')) {
            const [baseName] = name.split('-');
            if (!acc[baseName]) {
              acc[baseName] = [];
            }
            /* Only add non-empty values */
            if (value) {
              acc[baseName].push(value);
            }
          } else if (!name.includes('-')) { /* Regular fields (not file inputs) */
            acc[name] = value;
          }
          return acc;
        }, {});

        try {
          const response = await fetch(submitUrl, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          });
          if (response.ok) {
            const successMessage = document.createElement('p');
            successMessage.textContent = form.dataset.successMessage;
            container.innerHTML = '';
            container.appendChild(successMessage);
          } else {
            const responseText = await response.text();
            console.error('Form submission failed:', responseText);
            const errorMessage = document.createElement('p');
            errorMessage.textContent = 'Form submission failed. Please try again later.';
            container.innerHTML = '';
            container.appendChild(errorMessage);
          }
        } catch (error) {
          console.error('Error submitting form:', error);
          const errorMessage = document.createElement('p');
          errorMessage.textContent = 'Error submitting form. Please try again later.';
          container.innerHTML = '';
          container.appendChild(errorMessage);
        }
      });
    })
    .catch(error => {
      console.error('Error fetching form layout:', error);
    });
})();