export function initPasswordToggles() {
  const inputs = document.querySelectorAll('input[type="password"]');
  if (!inputs.length) {return;}

  inputs.forEach((input) => {
    if (!(input instanceof HTMLInputElement)) {return;}
    const label = input.closest('label');
    if (!label) {return;}

    const wrapper = document.createElement('div');
    wrapper.className = 'login-password-wrapper';

    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.className = 'login-password-toggle';
    toggle.setAttribute('aria-label', 'Show password');
    toggle.tabIndex = -1;
    toggle.innerHTML = '<i class="bi bi-eye" aria-hidden="true"></i>';

    input.replaceWith(wrapper);
    wrapper.appendChild(input);
    wrapper.appendChild(toggle);

    toggle.addEventListener('click', () => {
      const isPassword = input.type === 'password';
      input.type = isPassword ? 'text' : 'password';
      toggle.innerHTML = isPassword
        ? '<i class="bi bi-eye-slash" aria-hidden="true"></i>'
        : '<i class="bi bi-eye" aria-hidden="true"></i>';
      toggle.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
      input.focus();
    });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initPasswordToggles);
} else {
  initPasswordToggles();
}