/* global React, Icon */

const { useState } = React;

const validateRules = (pw) => ({
  len:   pw.length >= 8,
  upper: /[A-Z]/.test(pw),
  lower: /[a-z]/.test(pw),
  digit: /[0-9]/.test(pw),
});

const ChangePasswordPage = ({ onSuccess }) => {
  const [newPw,     setNewPw]     = useState("");
  const [confirmPw, setConfirmPw] = useState("");
  const [showNew,   setShowNew]   = useState(false);
  const [showConf,  setShowConf]  = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const rules = validateRules(newPw);
  const allRulesPass = rules.len && rules.upper && rules.lower && rules.digit;
  const pwMatch = newPw === confirmPw;
  const canSubmit = allRulesPass && confirmPw.length > 0;

  const handleSubmit = () => {
    setSubmitted(true);
    if (!allRulesPass || !pwMatch) return;
    onSuccess();
  };

  const showMismatchError = submitted && confirmPw.length > 0 && !pwMatch;

  const Rule = ({ pass, label }) => (
    <div className={"auth-pw-rule" + (newPw.length === 0 ? "" : pass ? " auth-pw-rule--pass" : " auth-pw-rule--fail")}>
      <span className="auth-pw-rule__dot" />
      {label}
    </div>
  );

  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-logo">
          <div className="auth-logo__icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2L2 7l10 5 10-5-10-5z"/>
              <path d="M2 17l10 5 10-5"/>
              <path d="M2 12l10 5 10-5"/>
            </svg>
          </div>
          <div>
            <div className="auth-logo__name">DG SKU 管理系統</div>
            <div className="auth-logo__sub">Uber Eats Taiwan</div>
          </div>
        </div>

        <div className="auth-title">設定新密碼</div>
        <div className="auth-subtitle">首次登入須完成密碼設定，設定後需重新登入</div>

        <div className="auth-field">
          <label className="auth-field__label">新密碼</label>
          <div className="auth-field__input-wrap">
            <input
              type={showNew ? "text" : "password"}
              className={"auth-field__input auth-field__input--pw" + (submitted && !allRulesPass ? " auth-field__input--error" : "")}
              placeholder="請輸入新密碼"
              value={newPw}
              onChange={e => setNewPw(e.target.value)}
              autoComplete="new-password"
            />
            <button className="auth-field__pw-toggle" onClick={() => setShowNew(v => !v)} tabIndex={-1} type="button">
              {showNew
                ? <Icon name="eye" size={16} />
                : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
              }
            </button>
          </div>
        </div>

        <div className="auth-pw-rules">
          <div className="auth-pw-rules__title">密碼規則</div>
          <Rule pass={rules.len}   label="8 位以上" />
          <Rule pass={rules.upper} label="至少一個大寫英文字母" />
          <Rule pass={rules.lower} label="至少一個小寫英文字母" />
          <Rule pass={rules.digit} label="至少一個數字" />
        </div>

        <div className="auth-field">
          <label className="auth-field__label">確認新密碼</label>
          <div className="auth-field__input-wrap">
            <input
              type={showConf ? "text" : "password"}
              className={"auth-field__input auth-field__input--pw" + (showMismatchError ? " auth-field__input--error" : "")}
              placeholder="再次輸入新密碼"
              value={confirmPw}
              onChange={e => setConfirmPw(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") handleSubmit(); }}
              autoComplete="new-password"
            />
            <button className="auth-field__pw-toggle" onClick={() => setShowConf(v => !v)} tabIndex={-1} type="button">
              {showConf
                ? <Icon name="eye" size={16} />
                : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
              }
            </button>
          </div>
          {showMismatchError && (
            <div className="auth-field__error">
              <Icon name="alertCircle" size={13} />
              兩次密碼輸入不符，請重新確認
            </div>
          )}
        </div>

        <button
          className="auth-submit-btn"
          disabled={!canSubmit}
          onClick={handleSubmit}
        >
          確認設定
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { ChangePasswordPage });