import { formHelpClassName } from '@admin/components/ui/field-styles';
import {
    getPasswordStrengthChecks,
    isPasswordStrong,
    PASSWORD_REQUIREMENTS_HELP,
    passwordStrengthScore,
} from '@admin/lib/password-strength';
import { cn } from '@admin/lib/utils';

type PasswordStrengthIndicatorProps = {
    password: string;
    className?: string;
    showHelpWhenEmpty?: boolean;
};

export function PasswordStrengthIndicator({
    password,
    className,
    showHelpWhenEmpty = true,
}: PasswordStrengthIndicatorProps) {
    const checks = getPasswordStrengthChecks(password);
    const score = passwordStrengthScore(password);
    const allMet = isPasswordStrong(password);
    const showChecks = password.length > 0;

    if (!showChecks && !showHelpWhenEmpty) {
        return null;
    }

    const progressPercent = (score / checks.length) * 100;

    return (
        <div className={cn('mt-2 space-y-2', className)} aria-live="polite">
            {showHelpWhenEmpty && !showChecks && (
                <p className={cn('mb-0', formHelpClassName)}>{PASSWORD_REQUIREMENTS_HELP}</p>
            )}

            {showChecks && (
                <>
                    <div className="flex items-center gap-2">
                        <div className="ti-main-progress h-1.5 flex-1 bg-gray-200 dark:bg-white/10">
                            <div
                                className={cn(
                                    'ti-main-progress-bar h-1.5 transition-all duration-200',
                                    allMet ? 'bg-success' : score >= 2 ? 'bg-primary' : 'bg-danger',
                                )}
                                style={{ width: `${progressPercent}%` }}
                            />
                        </div>
                        <span
                            className={cn(
                                'text-xs font-medium shrink-0',
                                allMet ? 'text-success' : 'text-gray-500 dark:text-white/70',
                            )}
                        >
                            {allMet ? 'Strong' : score >= 2 ? 'Almost there' : 'Weak'}
                        </span>
                    </div>

                    <ul className="space-y-1">
                        {checks.map((check) => (
                            <li
                                key={check.key}
                                className={cn(
                                    'flex items-center gap-2 text-xs',
                                    check.met ? 'text-success' : 'text-gray-500 dark:text-white/70',
                                )}
                            >
                                <i
                                    className={cn(
                                        check.met ? 'ri-checkbox-circle-fill' : 'ri-close-circle-line',
                                        'text-sm shrink-0',
                                    )}
                                    aria-hidden
                                />
                                <span>{check.label}</span>
                            </li>
                        ))}
                    </ul>
                </>
            )}
        </div>
    );
}