// A tiny, dependency-free password strength meter. Purely advisory client-side
// UX — the api is the authority on password policy. Scores 0–4 on length +
// character-class variety and renders a labelled bar.
import type { ReactNode } from 'react'
import { useT } from '@voltro/i18n'

const score = (pw: string): number => {
  if (pw.length === 0) return 0
  let s = 0
  if (pw.length >= 8) s++
  if (pw.length >= 12) s++
  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s++
  if (/\d/.test(pw) && /[^A-Za-z0-9]/.test(pw)) s++
  return Math.min(s, 4)
}

const LEVEL_KEYS = ['pw.weak', 'pw.weak', 'pw.fair', 'pw.good', 'pw.strong'] as const

export function PasswordStrength({ value }: { readonly value: string }): ReactNode {
  const s = score(value)
  const label = useT(LEVEL_KEYS[s] ?? 'pw.weak')
  if (value.length === 0) return null
  return (
    <div className="pw-meter" aria-hidden={false}>
      <div className="pw-bars">
        {[0, 1, 2, 3].map((i) => (
          <span key={i} className={i < s ? `bar on lvl${s}` : 'bar'} />
        ))}
      </div>
      <span className="pw-label">{label}</span>
    </div>
  )
}