veza/apps/web/src/components/forms/PasswordStrengthIndicator.tsx

import { useMemo } from 'react';
import { cn } from '@/lib/utils';
import { validatePasswordStrength } from '@/lib/passwordValidator';

interface PasswordStrengthIndicatorProps {
  password: string;
}

interface PasswordStrength {
  score: number; // 0-5
  checks: {
    length: boolean;
    upper: boolean;
    lower: boolean;
    number: boolean;
    special: boolean;
  };
}

export function PasswordStrengthIndicator({ password }: PasswordStrengthIndicatorProps) {
  // T0197: Use validatePasswordStrength from passwordValidator
  const strength = useMemo<PasswordStrength>(() => {
    const validation = validatePasswordStrength(password);
    const score =
      (validation.strength.length ? 1 : 0) +
      (validation.strength.upper ? 1 : 0) +
      (validation.strength.lower ? 1 : 0) +
      (validation.strength.number ? 1 : 0) +
      (validation.strength.special ? 1 : 0);

    return {
      score,
      checks: validation.strength,
    };
  }, [password]);

  const strengthLabels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'];
  const strengthColors = [
    'bg-red-500',
    'bg-orange-500',
    'bg-yellow-500',
    'bg-blue-500',
    'bg-green-500',
  ];
  const strengthTextColors = [
    'text-red-600',
    'text-orange-600',
    'text-yellow-600',
    'text-blue-600',
    'text-green-600',
  ];

  if (!password) return null;

  const currentStrengthLabel = strengthLabels[strength.score - 1] || 'Very Weak';
  const currentStrengthColor = strengthColors[strength.score - 1] || 'bg-gray-400';
  const currentTextColor = strengthTextColors[strength.score - 1] || 'text-gray-600';

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
          <div
            className={cn(
              'h-2 rounded-full transition-all duration-300',
              currentStrengthColor
            )}
            style={{ width: `${(strength.score / 5) * 100}%` }}
            role="progressbar"
            aria-valuenow={strength.score}
            aria-valuemin={0}
            aria-valuemax={5}
            aria-label={`Password strength: ${currentStrengthLabel}`}
          />
        </div>
        <span className={cn('text-sm font-medium min-w-[80px] text-right', currentTextColor)}>
          {currentStrengthLabel}
        </span>
      </div>
      <ul className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.length ? 'text-green-600 dark:text-green-400' : ''
          )}
        >
          <span>{strength.checks.length ? '✓' : '○'}</span>
          <span>At least 8 characters</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.upper ? 'text-green-600 dark:text-green-400' : ''
          )}
        >
          <span>{strength.checks.upper ? '✓' : '○'}</span>
          <span>One uppercase letter</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.lower ? 'text-green-600 dark:text-green-400' : ''
          )}
        >
          <span>{strength.checks.lower ? '✓' : '○'}</span>
          <span>One lowercase letter</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.number ? 'text-green-600 dark:text-green-400' : ''
          )}
        >
          <span>{strength.checks.number ? '✓' : '○'}</span>
          <span>One number</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.special ? 'text-green-600 dark:text-green-400' : ''
          )}
        >
          <span>{strength.checks.special ? '✓' : '○'}</span>
          <span>One special character</span>
        </li>
      </ul>
    </div>
  );
}