// Dabil password strength meter.
// Attach with: <input type="password" data-pwmeter> and include this script.
// Shows a live strength bar + requirements checklist, and blocks form
// submission until the password has at least 8 characters including an
// uppercase letter, a lowercase letter, a number and a special character.
(function () {
  'use strict';

  var RULES = [
    [/.{8,}/,         'At least 8 characters'],
    [/[A-Z]/,         'An uppercase letter (A–Z)'],
    [/[a-z]/,         'A lowercase letter (a–z)'],
    [/[0-9]/,         'A number (0–9)'],
    [/[^A-Za-z0-9]/,  'A special character (e.g. ! @ # $ %)']
  ];
  var LEVELS = [
    ['#EF4444', 'Very weak'], ['#EF4444', 'Weak'], ['#F59E0B', 'Fair'],
    ['#F59E0B', 'Good'], ['#3B82F6', 'Almost there'], ['#10B981', 'Strong']
  ];

  var css =
    '.pwm-box{margin-top:8px;font-family:inherit}' +
    '.pwm-track{height:6px;border-radius:99px;background:#E5E9F2;overflow:hidden}' +
    '.pwm-fill{height:100%;width:0;border-radius:99px;background:#EF4444;transition:width .25s ease,background .25s ease}' +
    '.pwm-label{font-size:.72rem;font-weight:700;margin-top:4px;min-height:1em;color:#64748B}' +
    '.pwm-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}' +
    '.pwm-list li{font-size:.74rem;color:#94A3B8;display:flex;align-items:center;gap:7px;transition:color .2s ease}' +
    '.pwm-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #CBD5E1;background:#fff;transition:all .2s ease}' +
    '.pwm-dot svg{width:8px;height:8px;stroke:#fff;stroke-width:3.5;fill:none;opacity:0}' +
    '.pwm-list li.ok{color:#10B981}' +
    '.pwm-list li.ok .pwm-dot{background:#10B981;border-color:#10B981}' +
    '.pwm-list li.ok .pwm-dot svg{opacity:1}' +
    '.pwm-err{display:none;font-size:.76rem;font-weight:600;color:#EF4444;margin-top:6px}' +
    '.pwm-box.pwm-show-err .pwm-err{display:block}';

  function injectCss() {
    if (document.getElementById('pwm-style')) return;
    var s = document.createElement('style');
    s.id = 'pwm-style';
    s.textContent = css;
    document.head.appendChild(s);
  }

  function build() {
    var box = document.createElement('div');
    box.className = 'pwm-box';
    var items = RULES.map(function (r) {
      return '<li><span class="pwm-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' + r[1] + '</li>';
    }).join('');
    box.innerHTML =
      '<div class="pwm-track"><div class="pwm-fill"></div></div>' +
      '<div class="pwm-label"></div>' +
      '<ul class="pwm-list">' + items + '</ul>' +
      '<div class="pwm-err">Please meet all the password requirements above.</div>';
    return box;
  }

  function attach(input) {
    if (input.__pwm) return;
    input.__pwm = true;
    var box = build();
    var p = input.parentElement;
    if (p && p !== input.form && !p.querySelector('button')) p.appendChild(box);
    else if (p && p !== input.form) p.insertAdjacentElement('afterend', box);
    else input.insertAdjacentElement('afterend', box);

    var fill  = box.querySelector('.pwm-fill');
    var label = box.querySelector('.pwm-label');
    var lis   = box.querySelectorAll('.pwm-list li');

    function score(v) {
      var n = 0;
      RULES.forEach(function (r, i) {
        var ok = r[0].test(v);
        if (ok) n++;
        lis[i].classList.toggle('ok', ok);
      });
      return n;
    }
    function update() {
      var v = input.value;
      var n = score(v);
      fill.style.width = (v ? Math.max(n / RULES.length * 100, 8) : 0) + '%';
      fill.style.background = LEVELS[n][0];
      label.textContent = v ? LEVELS[n][1] : '';
      label.style.color = v ? LEVELS[n][0] : '#64748B';
      if (n === RULES.length) box.classList.remove('pwm-show-err');
    }
    input.addEventListener('input', update);
    update();

    if (input.form && !input.form.__pwmHooked) {
      input.form.__pwmHooked = true;
      input.form.addEventListener('submit', function (e) {
        var bad = null;
        input.form.querySelectorAll('input[data-pwmeter]').forEach(function (inp) {
          var must = inp.required || inp.value !== '';
          var okAll = RULES.every(function (r) { return r[0].test(inp.value); });
          if (must && !okAll && !bad) bad = inp;
        });
        if (bad) {
          e.preventDefault();
          (bad.__pwmBox || box).classList.add('pwm-show-err');
          bad.focus();
          try { bad.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (err) {}
        }
      });
    }
    input.__pwmBox = box;
  }

  function init() {
    injectCss();
    document.querySelectorAll('input[type="password"][data-pwmeter]').forEach(attach);
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
