import React from "react";

interface PasswordStrengthMeterProps {
  password: string;
  showRequirements?: boolean;
}

interface PasswordRequirement {
  regex: RegExp;
  text: string;
  met: boolean;
}

const PasswordStrengthMeter: React.FC<PasswordStrengthMeterProps> = ({
  password,
  showRequirements = true,
}) => {
  const requirements: PasswordRequirement[] = [
    {
      regex: /.{8,}/,
      text: "At least 8 characters",
      met: /.{8,}/.test(password),
    },
    {
      regex: /[a-z]/,
      text: "One lowercase letter",
      met: /[a-z]/.test(password),
    },
    {
      regex: /[A-Z]/,
      text: "One uppercase letter",
      met: /[A-Z]/.test(password),
    },
    {
      regex: /\d/,
      text: "One number",
      met: /\d/.test(password),
    },
    {
      regex: /[-@$!%*?&#^]/,
      text: "One special character (-@$!%*?&#^)",
      met: /[-@$!%*?&#^]/.test(password),
    },
  ];

  const getPasswordStrength = (): {
    score: number;
    label: string;
    color: string;
  } => {
    if (!password) return { score: 0, label: "", color: "" };

    const metRequirements = requirements.filter((req) => req.met).length;
    const hasCommonPassword = [
      "password",
      "123456",
      "123456789",
      "qwerty",
      "abc123",
      "password123",
    ].includes(password.toLowerCase());

    if (hasCommonPassword) {
      return { score: 0, label: "Too Common", color: "danger" };
    }

    switch (metRequirements) {
      case 0:
      case 1:
        return { score: 1, label: "Very Weak", color: "danger" };
      case 2:
        return { score: 2, label: "Weak", color: "warning" };
      case 3:
        return { score: 3, label: "Fair", color: "info" };
      case 4:
        return { score: 4, label: "Good", color: "primary" };
      case 5:
        return { score: 5, label: "Strong", color: "success" };
      default:
        return { score: 0, label: "", color: "" };
    }
  };

  const strength = getPasswordStrength();
  const progressPercentage = password ? (strength.score / 5) * 100 : 0;

  if (!password) return null;

  return (
    <div className="password-strength-meter mt-2">
      {/* Strength Bar */}
      <div className="mb-2">
        <div className="d-flex justify-content-between align-items-center mb-1">
          <small className="text-muted">Password Strength</small>
          {strength.label && (
            <small className={`text-${strength.color} fw-bold`}>
              {strength.label}
            </small>
          )}
        </div>
        <div className="progress" style={{ height: "4px" }}>
          <div
            className={`progress-bar bg-${strength.color}`}
            role="progressbar"
            style={{ width: `${progressPercentage}%` }}
            aria-valuenow={progressPercentage}
            aria-valuemin={0}
            aria-valuemax={100}
          />
        </div>
      </div>

      {/* Requirements List */}
      {showRequirements && (
        <div className="password-requirements">
          <small className="text-muted d-block mb-1">
            Password must contain:
          </small>
          <ul className="list-unstyled mb-0" style={{ fontSize: "0.75rem" }}>
            {requirements.map((requirement, index) => (
              <li key={index} className="d-flex align-items-center mb-1">
                <i
                  className={`bi ${
                    requirement.met
                      ? "bi-check-circle-fill text-success"
                      : "bi-circle text-muted"
                  } me-2`}
                  style={{ fontSize: "0.75rem" }}
                />
                <span
                  className={requirement.met ? "text-success" : "text-muted"}
                >
                  {requirement.text}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default PasswordStrengthMeter;
