import { useMemo } from 'react';
import { useT } from '@/lib/i18n';

export interface PasswordStrengthResult {
  score: 0 | 1 | 2 | 3 | 4;
  label: string;
  checks: { length: boolean; lower: boolean; upper: boolean; number: boolean; symbol: boolean };
}

export function evaluatePassword(pw: string, labels: readonly string[] = ['Zeer zwak', 'Zwak', 'Redelijk', 'Sterk', 'Zeer sterk']): PasswordStrengthResult {
  const checks = {
    length: pw.length >= 8,
    lower: /[a-z]/.test(pw),
    upper: /[A-Z]/.test(pw),
    number: /\d/.test(pw),
    symbol: /[^A-Za-z0-9]/.test(pw),
  };
  let score = 0;
  if (checks.length) score++;
  if (checks.lower && checks.upper) score++;
  if (checks.number) score++;
  if (checks.symbol) score++;
  if (pw.length >= 12 && score >= 3) score = 4;
  return { score: Math.min(score, 4) as 0 | 1 | 2 | 3 | 4, label: labels[Math.min(score, 4)], checks };
}

const BAR_COLORS = [
  'bg-destructive',
  'bg-destructive',
  'bg-yellow-500',
  'bg-green-500',
  'bg-green-600',
];

export default function PasswordStrength({ password }: { password: string }) {
  const t = useT();
  const labels = [
    t('Zeer zwak', 'Very weak'),
    t('Zwak', 'Weak'),
    t('Redelijk', 'Fair'),
    t('Sterk', 'Strong'),
    t('Zeer sterk', 'Very strong'),
  ];
  const { score, label, checks } = useMemo(() => evaluatePassword(password, labels), [password, labels]);
  if (!password) {
    return <p className="text-xs text-muted-foreground mt-1">{t('Minimaal 8 tekens', 'Minimum 8 characters')}</p>;
  }
  return (
    <div className="mt-2 space-y-1.5">
      <div className="flex gap-1" aria-hidden="true">
        {[0, 1, 2, 3].map((i) => (
          <div
            key={i}
            className={`h-1.5 flex-1 rounded-full transition-colors ${
              i < score ? BAR_COLORS[score] : 'bg-muted'
            }`}
          />
        ))}
      </div>
      <div className="flex items-center justify-between text-xs">
        <span className="text-muted-foreground">{t('Wachtwoordsterkte', 'Password strength')}</span>
        <span className="font-medium">{label}</span>
      </div>
      <ul className="text-[11px] text-muted-foreground space-y-0.5">
        <li className={checks.length ? 'text-green-600' : ''}>• {t('Minimaal 8 tekens', 'Minimum 8 characters')}</li>
        <li className={checks.upper && checks.lower ? 'text-green-600' : ''}>• {t('Hoofd- en kleine letters', 'Upper and lower case letters')}</li>
        <li className={checks.number ? 'text-green-600' : ''}>• {t('Minimaal 1 cijfer', 'At least 1 number')}</li>
        <li className={checks.symbol ? 'text-green-600' : ''}>• {t('Minimaal 1 speciaal teken', 'At least 1 special character')}</li>
      </ul>
    </div>
  );
}