import { getPasswordRequirementStatus } from '@/lib/password';
import { cn } from '@/lib/utils';
import { Check, X } from 'lucide-react';

interface Props {
    password: string;
    className?: string;
}

export default function PasswordStrengthMeter({ password, className }: Props) {
    if (!password) return null;

    const statuses = getPasswordRequirementStatus(password);
    const metCount = statuses.filter((s) => s.met).length;

    const strength =
        metCount <= 2
            ? { label: 'Weak', bar: 'bg-destructive', text: 'text-destructive' }
            : metCount <= 4
              ? {
                    label: 'Fair',
                    bar: 'bg-amber-500',
                    text: 'text-amber-600 dark:text-amber-400',
                }
              : {
                    label: 'Strong',
                    bar: 'bg-emerald-500',
                    text: 'text-emerald-600 dark:text-emerald-400',
                };

    return (
        <div className={className}>
            <div className="mb-2 flex items-center gap-2">
                <div className="flex h-1.5 flex-1 gap-1">
                    {statuses.map((s, i) => (
                        <div
                            key={s.id}
                            className={cn(
                                'h-full flex-1 rounded-full transition-colors',
                                i < metCount ? strength.bar : 'bg-border',
                            )}
                        />
                    ))}
                </div>
                <span className={cn('text-xs font-semibold', strength.text)}>
                    {strength.label}
                </span>
            </div>
            <ul className="grid grid-cols-2 gap-x-3 gap-y-1">
                {statuses.map((s) => (
                    <li
                        key={s.id}
                        className={cn(
                            'flex items-center gap-1.5 text-xs',
                            s.met
                                ? 'text-emerald-600 dark:text-emerald-400'
                                : 'text-muted-foreground',
                        )}
                    >
                        {s.met ? (
                            <Check className="h-3 w-3 shrink-0" />
                        ) : (
                            <X className="h-3 w-3 shrink-0 opacity-40" />
                        )}
                        {s.label}
                    </li>
                ))}
            </ul>
        </div>
    );
}