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-kodo-red',
    'bg-kodo-orange',
    'bg-kodo-gold',
    'bg-kodo-cyan',
    'bg-kodo-lime',
  ];
  const strengthTextColors = [
    'text-kodo-red',
    'text-kodo-orange',
    'text-kodo-gold',
    'text-kodo-steel',
    'text-kodo-lime',
  ];

  if (!password) return null;

  const currentStrengthLabel =
    strengthLabels[strength.score - 1] || 'Very Weak';
  const currentStrengthColor =
    strengthColors[strength.score - 1] || 'bg-kodo-steel';
  const currentTextColor =
    strengthTextColors[strength.score - 1] || 'text-kodo-content-dim';

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-kodo-steel/30 dark:bg-kodo-steel 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-kodo-content-dim dark:text-kodo-content-dim space-y-1">
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.length ? 'text-kodo-lime dark:text-kodo-lime' : '',
          )}
        >
          <span>{strength.checks.length ? '✓' : '○'}</span>
          <span>At least 8 characters</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.upper ? 'text-kodo-lime dark:text-kodo-lime' : '',
          )}
        >
          <span>{strength.checks.upper ? '✓' : '○'}</span>
          <span>One uppercase letter</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.lower ? 'text-kodo-lime dark:text-kodo-lime' : '',
          )}
        >
          <span>{strength.checks.lower ? '✓' : '○'}</span>
          <span>One lowercase letter</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.number ? 'text-kodo-lime dark:text-kodo-lime' : '',
          )}
        >
          <span>{strength.checks.number ? '✓' : '○'}</span>
          <span>One number</span>
        </li>
        <li
          className={cn(
            'flex items-center gap-1',
            strength.checks.special ? 'text-kodo-lime dark:text-kodo-lime' : '',
          )}
        >
          <span>{strength.checks.special ? '✓' : '○'}</span>
          <span>One special character</span>
        </li>
      </ul>
    </div>
  );
}