// Valitse kaikki lomakkeet
const leadForms = document.querySelectorAll<HTMLFormElement>('[k-el="leadForm"]');

// Viestien ja painikkeiden selektorit
const successMessageSelector = '[k-el="successMessage"]';
const errorMessageSelector = '[k-el="errorMessage"]';
const submitButtonSelector = '[k-el="button"]';

// Lomakkeen lähetyksen käsittely
const handleFormSubmit = async (event: Event, form: HTMLFormElement) => {
  event.preventDefault();
  console.log('Lomakkeen lähetys aloitettu...');

  // Valitse vain tämän lomakkeen elementit
  const successMessage = form.querySelector<HTMLElement>(successMessageSelector);
  const errorMessage = form.querySelector<HTMLElement>(errorMessageSelector);
  const submitButton = form.querySelector<HTMLInputElement>(submitButtonSelector);

  // Piilota aiemmat viestit
  if (successMessage) successMessage.style.display = 'none';
  if (errorMessage) errorMessage.style.display = 'none';

  // Estä lomakkeen painike
  if (submitButton) {
    console.log('Painike estetty ja odotusviesti näytetty.');
    submitButton.disabled = true;
    submitButton.value = submitButton.dataset.wait || 'Sending...';
  }

  // Haetaan pipelineId ja pipelineColumnId lomakkeen piilotetuista kentistä
  const pipelineId = form.querySelector<HTMLInputElement>('input[name="pipelineId"]')?.value;
  const pipelineColumnId = form.querySelector<HTMLInputElement>(
    'input[name="pipelineColumnId"]'
  )?.value;

  console.log('Pipeline ID:', pipelineId);
  console.log('Pipeline Column ID:', pipelineColumnId);

  if (!pipelineId || !pipelineColumnId) {
    console.error('Pipeline ID tai Column ID puuttuu.');
    if (errorMessage) {
      errorMessage.textContent = 'Missing pipeline configuration. Please contact support.';
      errorMessage.style.display = 'block';
    }
    if (submitButton) {
      submitButton.disabled = false;
      submitButton.value = 'Lähetä yhteydenottopyyntö';
    }
    return;
  }

  // Kerää lomakedata
  const formData = new FormData(form);
  formData.append('pipelineId', pipelineId);
  formData.append('pipelineColumnId', pipelineColumnId);

  console.log('Lähetettävä lomakedata:', Object.fromEntries(formData.entries()));

  try {
    const response = await fetch('https://aurinkotekniikka-forms.kuasi-development.workers.dev', {
      method: 'POST',
      body: formData,
    });

    console.log('Vastaus saatu:', response);

    if (response.ok) {
      console.log('Lomake lähetettiin onnistuneesti!');
      if (successMessage) {
        successMessage.textContent = 'Form submitted successfully!';
        successMessage.style.display = 'block';
      }
    } else {
      console.error('Lähetys epäonnistui:', response.statusText);
      if (errorMessage) {
        errorMessage.textContent = 'There was an error submitting the form.';
        errorMessage.style.display = 'block';
      }
    }
  } catch (error) {
    console.error('Fetch-virhe:', error);
    if (errorMessage) {
      errorMessage.textContent = 'An error occurred. Please try again later.';
      errorMessage.style.display = 'block';
    }
  } finally {
    if (submitButton) {
      console.log('Painike palautettu normaalitilaan.');
      submitButton.disabled = false;
      submitButton.value = 'Lähetä yhteydenottopyyntö';
    }
  }
};

// Lisää tapahtumakäsittelijä jokaiseen lomakkeeseen
leadForms.forEach((form) => {
  form.addEventListener('submit', (event) => handleFormSubmit(event, form));
});