document.addEventListener("DOMContentLoaded", () => {
  const steps = [...document.querySelectorAll("[data-step]")];
  const controls = document.querySelector("[data-step-controls]");
  const progressBar = document.querySelector("[data-step-progress]");
  const currentStepNumber = document.querySelector("[data-current-step]");
  let currentStepIndex = 0;
  
  const validateCurrentStep = () => {
    const currentStep = steps[currentStepIndex];
    const requiredRadioGroups = currentStep.querySelectorAll('input[type="radio"][required]');
    const radioGroupNames = [...new Set([...requiredRadioGroups].map(radio => radio.name))];
    const radioGroupsValid = radioGroupNames.every(groupName => {
      const checkedRadio = currentStep.querySelector(`input[name="${groupName}"]:checked`);
      return checkedRadio !== null;
    });
    const requiredInputs = currentStep.querySelectorAll('input[required]:not([type="radio"]), select[required], textarea[required]');
 
    const inputsValid = [...requiredInputs].every(input => {
      if (input.type === 'checkbox') {
        return input.checked;
      }
      return input.value.trim() !== '';
    });
    
    return radioGroupsValid && inputsValid;
  };

  const highlightInvalidFields = () => {
    const currentStep = steps[currentStepIndex];

    clearFieldHighlights();

    const requiredRadioGroups = currentStep.querySelectorAll('input[type="radio"][required]');
    const radioGroupNames = [...new Set([...requiredRadioGroups].map(radio => radio.name))];
    
    radioGroupNames.forEach(groupName => {
      const checkedRadio = currentStep.querySelector(`input[name="${groupName}"]:checked`);
      if (!checkedRadio) {
       
        const radioButtons = currentStep.querySelectorAll(`input[name="${groupName}"]`);
        radioButtons.forEach(radio => {
          radio.style.outline = `1px solid var(--colors--indicator-red)`;
          radio.style.outlineOffset = '1px';
        });
      }
    });

    const requiredInputs = currentStep.querySelectorAll('input[required]:not([type="radio"]), select[required], textarea[required]');
    
    [...requiredInputs].forEach(input => {
      let isValid = false;
      
      if (input.type === 'checkbox') {
        isValid = input.checked;
      } else {
        isValid = input.value.trim() !== '';
      }
      
      if (!isValid) {
        input.style.outline = `1px solid var(--colors--indicator-red)`;
        input.style.outlineOffset = '1px';
      }
    });
  };

  const clearFieldHighlights = () => {
    const currentStep = steps[currentStepIndex];
    const allInputs = currentStep.querySelectorAll('input, select, textarea');
    
    allInputs.forEach(input => {
      input.style.outline = '';
      input.style.outlineOffset = '';
    });
  };
  
  const updateNextButtonState = () => {
    const nextButtons = document.querySelectorAll('[data-step-button="next"]');
    const isValid = validateCurrentStep();
    
    nextButtons.forEach(btn => {
      btn.disabled = !isValid;
      btn.classList.toggle('disabled', !isValid);
      btn.style.opacity = isValid ? '1' : '0.5';
    });

    if (isValid) {
      clearFieldHighlights();
    }
  };
  
  const addValidationListeners = () => {
    const currentStep = steps[currentStepIndex];
    const allInputs = currentStep.querySelectorAll('input, select, textarea');
    allInputs.forEach(input => {
      input.addEventListener('input', updateNextButtonState);
      input.addEventListener('change', updateNextButtonState);
    });
  };
  
  const removeValidationListeners = () => {
    const allInputs = document.querySelectorAll('input, select, textarea');
    allInputs.forEach(input => {
      input.removeEventListener('input', updateNextButtonState);
      input.removeEventListener('change', updateNextButtonState);
    });
  };
  
  const showStep = (index) => {
    removeValidationListeners();
    
    steps.forEach((step, i) => {
      step.classList.remove("is-active");
      step.style.display = i === index ? "flex" : "none";
      setTimeout(() => {
        step.classList.add("is-active");
      }, 100);
    });
    
    if (controls) {
      controls.style.display = index === steps.length - 1 ? "none" : "flex";
      progressBar.style.width = `${((index + 1) / (steps.length - 1)) * 100}%`;
      currentStepNumber.textContent = index + 1;
    }
    
    addValidationListeners();
    updateNextButtonState();
  };
  
  const goToNextStep = () => {
    if (validateCurrentStep()) {
      if (currentStepIndex < steps.length - 1) {
        currentStepIndex++;
        showStep(currentStepIndex);
      }
    } else {
      
      highlightInvalidFields();
    }
  };
  
  const goToPrevStep = () => {
    if (currentStepIndex > 0) {
      currentStepIndex--;
      showStep(currentStepIndex);
    }
  };
  
  showStep(currentStepIndex);
  
  document.querySelectorAll('[data-step-button="next"]').forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      goToNextStep();
    });
  });
  
  document.querySelectorAll('[data-step-button="prev"]').forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      goToPrevStep();
    });
  });
  
 // send counter value in form
document.querySelectorAll('[data-quize-form-batton]').forEach((btn) => {
  btn.addEventListener('click', (e) => {
    
    const days = document.querySelector('[data-days]')?.textContent || '00';
    const hours = document.querySelector('[data-hours]')?.textContent || '00';
    const minutes = document.querySelector('[data-minutes]')?.textContent || '00';
    const seconds = document.querySelector('[data-seconds]')?.textContent || '00';
   
    const counterValue = `${days}d ${hours}h ${minutes}m ${seconds}s`;
    
    const form = btn.closest('form');
    
    if (form) {
      
      let counterField = form.querySelector('[name="curentValueCounter"]');
      
      if (!counterField) {
        counterField = document.createElement('input');
        counterField.type = 'hidden';
        counterField.name = 'curentValueCounter';
        form.appendChild(counterField);
      }
      
      counterField.value = counterValue;
      
      console.log('Counter value:', counterValue); 
    }
  });
});
});