/**
 * PasswordStrength — indicateur de complexité de mot de passe.
 *
 * Props :
 *   password : string  — valeur en cours de saisie
 *
 * Affiche uniquement quand password est non vide.
 */

function buildRules(minLen) {
  return [
  { id: 'len',     label: `${minLen} caractères minimum`,      test: p => p.length >= minLen },
  { id: 'upper',   label: 'Une lettre majuscule (A–Z)',     test: p => /[A-Z]/.test(p) },
  { id: 'lower',   label: 'Une lettre minuscule (a–z)',     test: p => /[a-z]/.test(p) },
  { id: 'digit',   label: 'Un chiffre (0–9)',               test: p => /[0-9]/.test(p) },
  { id: 'special', label: 'Un caractère spécial (!@#…)',    test: p => /[^A-Za-z0-9]/.test(p) },
  ];
}

const LEVELS = [
  { min: 0, label: 'Très faible', color: '#ef4444' },
  { min: 1, label: 'Faible',      color: '#f97316' },
  { min: 2, label: 'Moyen',       color: '#eab308' },
  { min: 3, label: 'Bon',         color: '#84cc16' },
  { min: 4, label: 'Fort',        color: '#22c55e' },
  { min: 5, label: 'Très fort',   color: '#10b981' },
];

function getLevel(score) {
  // score = nombre de règles respectées (0..5)
  for (let i = LEVELS.length - 1; i >= 0; i--) {
    if (score >= LEVELS[i].min) return LEVELS[i];
  }
  return LEVELS[0];
}

export default function PasswordStrength({ password, minLength = 8 }) {
  if (!password) return null;

  const RULES  = buildRules(minLength);
  const results = RULES.map(r => ({ ...r, ok: r.test(password) }));
  const score   = results.filter(r => r.ok).length;
  const level   = getLevel(score);
  const pct     = Math.round((score / RULES.length) * 100);

  return (
    <div style={{ marginTop: 8 }}>
      {/* Barre de progression */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <div style={{
          flex: 1, height: 5, borderRadius: 3,
          background: 'var(--border, #e5e7eb)',
          overflow: 'hidden',
        }}>
          <div style={{
            height: '100%',
            width: `${pct}%`,
            background: level.color,
            borderRadius: 3,
            transition: 'width .25s ease, background .25s ease',
          }} />
        </div>
        <span style={{
          fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
          color: level.color,
          minWidth: 64, textAlign: 'right',
          transition: 'color .25s ease',
        }}>
          {level.label}
        </span>
      </div>

      {/* Liste des règles */}
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 4 }}>
        {results.map(r => (
          <li key={r.id} style={{
            display: 'flex', alignItems: 'center', gap: 7,
            fontSize: 12,
            color: r.ok ? '#16a34a' : 'var(--text-muted)',
            transition: 'color .2s ease',
          }}>
            {r.ok ? (
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            ) : (
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
              </svg>
            )}
            {r.label}
          </li>
        ))}
      </ul>
    </div>
  );
}
