document.addEventListener('DOMContentLoaded', function () {
  const passwordInput = document.getElementById('password');
  const confirmPasswordInput = document.getElementById('confirmPassword');
  const passwordToggle = document.getElementById('password-toggle');
  const eyeIcon = document.getElementById('password-eye-icon');
  const eyeSlashIcon = document.getElementById('password-eye-slash-icon');
  const isLoginForm = document.getElementById('login_label');
  const signUpBtn = document.getElementById('submitButton');
  let passwordFeedback = document.getElementById('password-feedback');
  
  function onTypeValidate(value) {
    const requirements = [
      { id: 'length', test: v => v.length >= 8 },
      { id: 'upper', test: v => /[A-Z]/.test(v) },
      { id: 'lower', test: v => /[a-z]/.test(v) },
      { id: 'number', test: v => /[0-9]/.test(v) },
      { id: 'special', test: v => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(v) },
      { id: 'passwordMatch', test: v => (v && confirmPasswordInput && confirmPasswordInput.value) ? v === confirmPasswordInput.value : false },
    ]

    let allMet = true;
    requirements.forEach(req => {
      const li = document.getElementById('pw-req-' + req.id);
      if (!li) return;
      const icon = li.querySelector('.pw-icon');
      const text = li.querySelector('.pw-req-text');
      if (req.test(value)) {
        icon.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="#059669" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
        text.style.color = '#ffffff'; 
      } else {
        icon.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="#ff5c5c" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>'; // cross mark
        text.style.color = '#f15757ff'; 
        allMet = false;
      }
    });
    passwordFeedback.style.color = allMet ? '#059669' : '#ff5c5c';

    if (signUpBtn) {
      signUpBtn.disabled = !allMet;
      signUpBtn.classList.toggle('opacity-50', !allMet); 
      signUpBtn.classList.toggle('cursor-not-allowed', !allMet);
    }
  }

  function disableSubmitButton() {
    if (isLoginForm === null && signUpBtn) {
      signUpBtn.disabled = true;
    }else {
      signUpBtn.disabled = false;
    }
  }

  if(confirmPasswordInput){
    confirmPasswordInput.addEventListener('input', function () {
      onTypeValidate(passwordInput ? passwordInput.value : '');
    });
  }

  if (isLoginForm == null && passwordInput && passwordFeedback) {
    passwordFeedback.hidden = false;
    passwordInput.addEventListener('input', function () {
      onTypeValidate(passwordInput.value);
    });

    // Initial validation in case of pre-filled value
    onTypeValidate(passwordInput.value);
  }

  disableSubmitButton();

  if (passwordToggle && passwordInput) {
    passwordToggle.addEventListener('click', function () {
      const type =
        passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      passwordInput.setAttribute('type', type);

      if (type === 'text') {
        eyeIcon.classList.add('hidden');
        eyeSlashIcon.classList.remove('hidden');
      } else {
        eyeIcon.classList.remove('hidden');
        eyeSlashIcon.classList.add('hidden');
      }
    });
  }

  const confirmPasswordToggle = document.getElementById(
    'confirmPassword-toggle',
  );
  const confirmPasswordEyeIcon = document.getElementById(
    'confirmPassword-eye-icon',
  );
  const confirmPasswordEyeSlashIcon = document.getElementById(
    'confirmPassword-eye-slash-icon',
  );

  if (confirmPasswordToggle && confirmPasswordInput) {
    confirmPasswordToggle.addEventListener('click', function () {
      const type =
        confirmPasswordInput.getAttribute('type') === 'password'
          ? 'text'
          : 'password';
      confirmPasswordInput.setAttribute('type', type);

      if (type === 'text') {
        confirmPasswordEyeIcon.classList.add('hidden');
        confirmPasswordEyeSlashIcon.classList.remove('hidden');
      } else {
        confirmPasswordEyeIcon.classList.remove('hidden');
        confirmPasswordEyeSlashIcon.classList.add('hidden');
      }
    });
  }
});