const CC_FORM_CONTAINER_ID = 'captain_compliance_form_container';
const CC_FORM_ID = 'captain_compliance_form';
const CC_SERVER_URL = 'https://cc-platform-api-prod.fly.dev';
const CC_ACCESS_TOKEN = document.currentScript.getAttribute('access-token');

const CC_ELEMENT_TYPES = {
  TEXT: {
    element: ({ code }) => `
    <input type="text" id="${code}" name="${code}" placeholder="" class="cc-form-input">
    `,
  },
  EMAIL: {
    element: ({ code }) => `
    <input type="email" id="${code}" name="${code}" placeholder="" class="cc-form-input">
    `,
  },
  PHONE: {
    element: ({ code }) => `
    <input type="tel" id="${code}" name="${code}" placeholder="" class="cc-form-input">
    `,
  },
  NUMBER: {
    element: ({ code }) => `
    <input type="number" id="${code}" name="${code}" placeholder="" class="cc-form-input">
    `,
  },
  TEXTAREA: {
    element: ({ code }) =>
      `
      <textarea id="${code}" name="${code}" class="cc-form-input cc-form-text-area">
      </textarea>
      `,
  },
  FILE: {
    element: ({ code }) => `
    <input type="file" id="${code}" name="${code}" placeholder="" class="cc-form-input">
    `,
  },
  DROPDOWN: {
    element: ({ code, metadata }) => `
    <select name="${code}" id="${code}" class="cc-form-input">
      ${metadata.data
        .map(({ value, label }) => `<option value="${value}">${label}</option>`)
        .join(' ')}
    </select>
    `,
  },
};

function addStyles(styles) {
  const themeColor = styles.theme;
  const fontColor = styles.fontColor;
  const borderRadius = styles.borderRadius;
  const borderWidth = styles.borderWidth;
  const someStyle = `
  <style type="text/css" id="captain_compliance_styles">

  .cc-form-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    row-gap: 5px;
  }
  .cc-form-container-item {
    display: flex;
    flex-direction: column;
  }
  .cc-default-btn {
    letter-spacing: 2px;
    font-weight: 200;
    border: none;
    padding: 10px 20px;
    margin: 0;
    box-shadow: none;
    color: white;
    background: ${themeColor};
    border-radius: ${borderRadius};
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
  }

  .cc-default-btn-disabled {
    background: #EEEEEE;
    color: #000;
  }

  .cc-default-btn-disabled:hover {
    background: #EEEEEE;
    color: #000;
  }

  .cc-default-btn-disabled:active {
    background: #EEEEEE;
    color: #000;
  }
  
  .cc-default-btn:hover {
    background: ${themeColor};
  }
  
  .cc-default-btn:active {
    background: ${themeColor};
  }
  .cc-form-input {
    padding: 10px;
    border: ${borderWidth} solid #ccc;
    border-radius: ${borderRadius};
    width: 100%;
    box-sizing: border-box;
    color: #2C3E50;
    font-size: 12px;
  }

  .cc-form-select-item {
    font-size: 12px;
  }

  .cc-form-title {
    font-size: 2rem;
    font-weight: 500;
  }

  .cc-form-text-area {
    resize: none;
    height: 10em;
  }

  .cc-form-title-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .cc-form-container-item-label {
    margin-bottom: 5px;
    color: ${fontColor};
  }
  .cc-form-container-item-error {
    display: none;
    color: red;
    margin-top: 3px;
  }
  </style>
`;
  document.head.insertAdjacentHTML('beforeend', someStyle);
}

async function loadFormData(accessToken) {
  const response = await fetch(
    `${CC_SERVER_URL}/requestForm/form-token?access-token=${accessToken}`,
  );
  return await response.json();
}

function handleSubmitButton() {
  const submitButton = document.getElementById('cc-form-submit-button');
  submitButton.disabled = true;
  submitButton.value = 'Submitting...';
  submitButton.classList.add('cc-default-btn-disabled');
  return () => {
    submitButton.disabled = false;
    submitButton.value = 'Submit';
    submitButton.classList.remove('cc-default-btn-disabled');
  };
}

function sendFormRequest(requestFormId, data, cb) {
  fetch(`${CC_SERVER_URL}/requestFormSubmit`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ data, requestFormId }),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((data) => {
      console.log('API response:', data);
      cb();
    })
    .catch((error) => {
      console.error('There was a problem with the API request:', error.message);
      cb();
    });
}

function createForm({ fields, description, id }) {
  const formContainer = document.getElementById(CC_FORM_CONTAINER_ID);
  if (formContainer) {
    const fieldsToRender = fields.filter(({ disabled }) => !disabled);
    const inputs = fieldsToRender
      .map(({ label, code, type, metadata }) => {
        const component = CC_ELEMENT_TYPES[type];
        return `
        <div class="cc-form-container-item">
          <label for="${code}" class="cc-form-container-item-label">${label}</label>
          ${component.element({ code, metadata })}
          <span id="${code}Error" class="cc-form-container-item-error"></span><br>
        </div>
    `;
      })
      .join(' ');
    const form = document.createElement('form');
    form.setAttribute('id', CC_FORM_ID);
    form.classList.add('cc-form-container');
    form.innerHTML += `
      <div class="cc-form-title-container">
        <h1 class="cc-form-title">Data Subject Access Request Form</h1>
        ${description ? `<p>${description}</p>` : ''}
      </div>
        ${inputs}
        <input type="submit" value="Submit" id="cc-form-submit-button" class="cc-default-btn">
    `;
    formContainer.appendChild(form);
    form.addEventListener('submit', (event) => {
      let isValid = true;
      const formData = {};

      fieldsToRender.forEach(({ code, label, type }) => {
        const input = document.getElementById(code);
        const error = document.getElementById(`${code}Error`);
        if (type === 'EMAIL') {
          const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailPattern.test(input.value)) {
            error.style.display = 'block';
            error.textContent = 'Please enter a valid email address';
            isValid = false;
          } else {
            formData[code] = {
              type,
              code,
              label,
              value: input.value,
            };
            error.style.display = 'none';
            error.textContent = '';
          }
        } else if (type === 'PHONE') {
          const phonePattern = /^\d{10}$/; // Assuming a 10-digit phone number
          if (!phonePattern.test(input.value)) {
            error.style.display = 'block';
            error.textContent = 'Please enter a valid phone number';
            isValid = false;
          } else {
            formData[code] = {
              type,
              code,
              label,
              value: input.value,
            };
            error.style.display = 'none';
            error.textContent = '';
          }
        } else if (type === 'NUMBER') {
          const age = parseInt(input.value);
          if (isNaN(age) || age <= 0) {
            error.style.display = 'block';
            error.textContent = `Please enter a valid ${label.toLowerCase()}`;
            isValid = false;
          } else {
            formData[code] = {
              type,
              code,
              label,
              value: input.value,
            };
            error.style.display = 'none';
            error.textContent = '';
          }
        } else {
          if (input.value.trim() === '') {
            error.style.display = 'block';
            error.textContent = `${
              label.charAt(0).toUpperCase() + label.slice(1)
            } is required`;
            isValid = false;
          } else {
            formData[code] = {
              type,
              code,
              label,
              value: input.value,
            };
            error.style.display = 'none';
            error.textContent = '';
          }
        }
      });
      if (!isValid) {
        return event.preventDefault();
      }
      if (isValid) {
        event.preventDefault();
        const done = handleSubmitButton();
        sendFormRequest(id, formData, () => {
          form.reset();
          done();
        });
        console.log('SUCCESS');
      }
    });
    observer.disconnect();
  }
}

const observer = new MutationObserver(handleMutations);

async function handleMutations() {
  const formContainer = document.getElementById(CC_FORM_CONTAINER_ID);
  const formAdded = document.getElementById(CC_FORM_ID);
  if (!formAdded && formContainer) {
    const data = await loadFormData(CC_ACCESS_TOKEN);
    if (data) {
      createForm(data);
      addStyles(data.styles);
      observer.disconnect();
    }
  }
}

observer.observe(document.documentElement, { childList: true, subtree: true });