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 MIN_SUBMIT_MS = 2500; // minimum time window to accept a submission (anti-bot)

let ccFormInitialized = false;

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>
    `,
  },
  SELECT: {
    element: ({ code, metadata }) => `
    <select name="${code}" id="${code}" class="cc-form-input">
      ${metadata.data
        .map(({ value, label }) => `<option value="${value}">${label}</option>`)
        .join(' ')}
    </select>
    `,
  },
};

async function loadCountries() {
  const response = await fetch(`${CC_SERVER_URL}/country`, {
    method: 'GET',
    headers: { Accept: 'application/json' },
  });
  if (!response.ok) {
    throw new Error(`Failed to fetch countries: ${response.status}`);
  }
  return response.json();
}

async function loadStates(idCountry) {
  const response = await fetch(
    `${CC_SERVER_URL}/state/${encodeURIComponent(idCountry)}`,
    {
      method: 'GET',
      headers: { Accept: 'application/json' },
    },
  );
  if (!response.ok) {
    throw new Error(`Failed to fetch states: ${response.status}`);
  }
  return response.json();
}

function pickTextColor(bgHex) {
  // bgHex: e.g. "#1a73e8"
  const hex = bgHex.replace('#', '');
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  // YIQ: > 128 ⇒ usar negro, si no blanco
  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
  return yiq >= 128 ? '#000' : '#FFF';
}

function addStyles(styles) {
  const themeColor = styles.theme;
  const fontColor = styles.fontColor;
  const borderRadius = styles.borderRadius;
  const borderWidth = styles.borderWidth;
  const textColor = pickTextColor(themeColor);
  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: ${textColor};
    background: ${themeColor};
    border-radius: ${borderRadius};
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
  }

  .cc-default-btn-disabled {
    background: #EEEEEE !important;
    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 setFieldError(input, errorEl, message) {
  if (!input || !errorEl) return;
  if (message) {
    errorEl.textContent = message;
    errorEl.style.display = 'block';
    input.classList.add('cc-form-input-error');
    input.setAttribute('aria-invalid', 'true');
    input.setAttribute('aria-describedby', errorEl.id);
  } else {
    errorEl.textContent = '';
    errorEl.style.display = 'none';
    input.classList.remove('cc-form-input-error');
    input.removeAttribute('aria-invalid');
    input.removeAttribute('aria-describedby');
  }
}

function sendFormRequest(requestFormId, data, cb) {
  const formData = new FormData();
  formData.append('data', JSON.stringify(data));
  formData.append('requestFormId', requestFormId);

  fetch(`${CC_SERVER_URL}/requestFormSubmit`, {
    method: 'POST',
    body: formData,
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(() => {
      cb();
    })
    .catch((error) => {
      console.error('There was a problem with the API request:', error.message);
      cb();
    });
}

// Creates an off-screen text input honeypot to trap bots; kept visible in DOM (not hidden)
// so automated fillers are more likely to write into it. Silent failure prevents signal to bots.
function createHoneypotField(form) {
  const name = `company_${Math.random().toString(36).slice(2, 8)}`;
  const input = document.createElement('input');
  input.type = 'text';
  input.name = name;
  input.id = name;
  input.autocomplete = 'off';
  input.tabIndex = -1;
  input.style.position = 'absolute';
  input.style.left = '-9999px';
  input.style.top = 'auto';
  input.style.width = '1px';
  input.style.height = '1px';
  input.style.overflow = 'hidden';

  form.dataset.ccHoneypotName = name;
  form.dataset.ccInitTs = String(Date.now());
  form.appendChild(input);
  return input;
}

function isTooFast(form) {
  const started = Number(form.dataset.ccInitTs || Date.now());
  return Date.now() - started < MIN_SUBMIT_MS;
}

function normalizeFields(fields) {
  return (fields || [])
    .filter(({ disabled }) => !disabled)
    .sort((a, b) => a?.order - b?.order);
}

function attachFormBehavior({ form, fields, id }) {
  if (!form || !fields || form.dataset.ccSubmitAttached === 'true') return;

  const fieldsToRender = normalizeFields(fields);
  form.dataset.ccSubmitAttached = 'true';
  form.dataset.ccFields = JSON.stringify(fieldsToRender);

  const stateCache = new Map();
  const existingHoneypot =
    form.querySelector(`input[name="${form.dataset.ccHoneypotName || ''}"]`) ||
    null;
  const honeypotInput = existingHoneypot || createHoneypotField(form);

  // Attach dependent select logic: country -> state
  const countrySelect = form.querySelector('#country');
  const stateSelect = form.querySelector('#state');

  const renderStates = (states) => {
    if (!stateSelect) return;
    const options =
      `<option value="">Select a state</option>` +
      states
        .map(({ value, label }) => `<option value="${value}">${label}</option>`)
        .join('');
    stateSelect.innerHTML = options;
    stateSelect.disabled = false;
  };

  if (stateSelect) {
    stateSelect.disabled = true;
    stateSelect.innerHTML = '<option value="">Select a country first</option>';
  }

  if (countrySelect && stateSelect) {
    countrySelect.addEventListener('change', async (event) => {
      const countryId = event.target.value;
      if (!countryId) {
        stateSelect.disabled = true;
        stateSelect.innerHTML =
          '<option value="">Select a country first</option>';
        return;
      }
      stateSelect.disabled = true;
      stateSelect.innerHTML = '<option value="">Loading...</option>';
      try {
        const states =
          stateCache.get(countryId) ||
          (await loadStates(countryId)).map(({ id, name }) => ({
            value: id,
            label: name,
          }));
        stateCache.set(countryId, states);
        renderStates(states);
      } catch (error) {
        console.error('[CC FORM] Failed to load states', error);
        stateSelect.innerHTML =
          '<option value="">Error loading states</option>';
        stateSelect.disabled = true;
      }
    });
  }

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    let done = () => {
      console.log('done');
    };

    try {
      if (honeypotInput.value.trim() !== '' || isTooFast(form)) {
        console.warn('[CC FORM] Submit blocked (honeypot/too fast)', {
          honeypotFilled: honeypotInput.value.trim() !== '',
          elapsedMs: Date.now() - Number(form.dataset.ccInitTs || Date.now()),
        });
        return;
      }

      let isValid = true;
      const formData = {};

      for (const { code, label, type } of fieldsToRender) {
        const input = document.getElementById(code);
        const error = document.getElementById(`${code}Error`);
        if (!input || !error) {
          console.error('[CC FORM] Missing input or error node', {
            code,
            type,
          });
          isValid = false;
          continue;
        }

        if (type === 'EMAIL') {
          const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailPattern.test(input.value)) {
            setFieldError(input, error, 'Please enter a valid email address');
            isValid = false;
          } else {
            formData[code] = { type, code, label, value: input.value };
            setFieldError(input, error, '');
          }
        } else if (type === 'PHONE') {
          const normalized = (input.value || '').replace(/[^\d]/g, '');
          const phonePattern = /^\+?[0-9\s().-]{7,20}$/;
          const hasValidFormat = phonePattern.test(input.value);
          const hasValidLength =
            normalized.length >= 7 && normalized.length <= 20;
          if (!hasValidFormat || !hasValidLength) {
            setFieldError(input, error, 'Please enter a valid phone number');
            isValid = false;
          } else {
            formData[code] = { type, code, label, value: input.value };
            setFieldError(input, error, '');
          }
        } else if (type === 'NUMBER') {
          const age = parseInt(input.value);
          if (isNaN(age) || age <= 0) {
            setFieldError(
              input,
              error,
              `Please enter a valid ${label.toLowerCase()}`,
            );
            isValid = false;
          } else {
            formData[code] = { type, code, label, value: input.value };
            setFieldError(input, error, '');
          }
        } else {
          if (input.value.trim() === '') {
            setFieldError(
              input,
              error,
              `${label.charAt(0).toUpperCase() + label.slice(1)} is required`,
            );
            isValid = false;
          } else {
            formData[code] = { type, code, label, value: input.value };
            setFieldError(input, error, '');
          }
        }
      }

      if (!isValid) return;

      done = handleSubmitButton();

      // Include honeypot value so backend can also ignore spam server-side
      formData[honeypotInput.name] = {
        type: 'HONEYPOT',
        code: honeypotInput.name,
        label: honeypotInput.name,
        value: honeypotInput.value || '',
      };

      sendFormRequest(id, formData, () => {
        form.reset();
        done();
      });
    } catch (error) {
      console.error('[CC FORM] Submit handler failed', error);
      done();
    }
  });
}

function createForm({ fields, description, id }) {
  const formContainer = document.getElementById(CC_FORM_CONTAINER_ID);
  if (!formContainer) return;

  if (document.getElementById(CC_FORM_ID)) {
    return;
  }

  const fieldsToRender = normalizeFields(fields);
  const inputs = fieldsToRender
    .map(({ label, code, type, metadata }) => {
      const component = CC_ELEMENT_TYPES[type];
      if (!component) {
        console.error('[CC FORM] Unknown field type; skipping', {
          code,
          type,
        });
        return '';
      }
      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">
    `;
  createHoneypotField(form);
  formContainer.appendChild(form);
  attachFormBehavior({ form, fields: fieldsToRender, id });
}

async function handleMutations() {
  const init = async () => {
    if (ccFormInitialized) return true;
    const formContainer = document.getElementById(CC_FORM_CONTAINER_ID);
    const formAdded = document.getElementById(CC_FORM_ID);

    if (!formContainer && !formAdded) {
      return false;
    }

    const data = await loadFormData(CC_ACCESS_TOKEN);
    let countries = [];
    try {
      const countriesRaw = await loadCountries();
      countries = (countriesRaw || []).map(({ id, name }) => ({
        value: id,
        label: name,
      }));
    } catch (error) {
      console.error('[CC FORM] Failed to load countries', error);
    }
    if (countries.length > 0) {
      data.fields = data.fields?.map((field) =>
        field?.code === 'country'
          ? {
              ...field,
              metadata: {
                ...(field.metadata || {}),
                data: countries,
              },
            }
          : field,
      );
    }
    const fieldsToRender = normalizeFields(data?.fields);
    if (data && formAdded && !formAdded.dataset.ccSubmitAttached) {
      attachFormBehavior({
        form: formAdded,
        fields: fieldsToRender,
        id: data.id,
      });
      addStyles(data.styles);
      ccFormInitialized = true;
      return true;
    }
    if (data && formContainer && !formAdded) {
      createForm({ ...data, fields: fieldsToRender });
      addStyles(data.styles);
      ccFormInitialized = true;
      return true;
    }
    return false;
  };

  const initialized = await init();
  if (initialized) return;

  const observer = new MutationObserver(async () => {
    const done = await init();
    if (done) {
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handleMutations, {
    once: true,
  });
} else {
  handleMutations();
}