import React, { useState, useMemo, useCallback } from 'react';
import './PasswordInput.css';

function levelOf(v) {
  if (!v) return '';
  let s = 0;
  if (v.length >= 8) s++;
  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
  if (/\d/.test(v)) s++;
  if (/[^A-Za-z0-9]/.test(v)) s++;
  if (v.length >= 12) s++;
  if (s <= 2) return 'weak';
  if (s <= 3) return 'mid';
  return 'strong';
}

export default function PasswordInput({ value = '', placeholder = '请输入密码', showStrength = true, onChange }) {
  const [visible, setVisible] = useState(false);
  const [focused, setFocused] = useState(false);

  const level = useMemo(() => levelOf(value), [value]);
  const tip = useMemo(() => {
    if (level === 'weak') return '弱：建议使用字母、数字与符号组合';
    if (level === 'mid') return '中：再增加长度或符号更安全';
    if (level === 'strong') return '强：密码强度良好';
    return '';
  }, [level]);

  const handle = useCallback(
    (e) => {
      if (onChange) onChange(e.target.value);
    },
    [onChange]
  );

  const barClass = (i) => {
    if (!showStrength || !level) return '';
    const on =
      (level === 'weak' && i < 1) || (level === 'mid' && i < 2) || (level === 'strong' && i < 3);
    return on ? 'on ' + level : '';
  };

  return (
    <div className="aa-pwd">
      <div className={'aa-pwd-field' + (focused ? ' is-focus' : '')}>
        <input
          className="aa-pwd-input"
          type={visible ? 'text' : 'password'}
          value={value}
          placeholder={placeholder}
          onChange={handle}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        />
        <button className="aa-pwd-toggle" type="button" onClick={() => setVisible((v) => !v)}>
          {visible ? '隐藏' : '显示'}
        </button>
      </div>
      {showStrength && (
        <div className="aa-pwd-strength">
          {[0, 1, 2].map((i) => (
            <span key={i} className={'aa-pwd-bar ' + barClass(i)} />
          ))}
        </div>
      )}
      <div className="aa-pwd-tip">{tip}</div>
    </div>
  );
}