/* password-field.jsx — PasswordField + StrengthMeter (the `.pw` composite), shared by the auth
 * screens (auth-app.jsx) and the account menu's change-password dialog (account-menu.jsx).
 * Moved out of auth-app.jsx 2026-09-20, markup unchanged (the error line's class is now
 * `pw-err`). Wrapped in an IIFE: planner scripts share one global scope, so a top-level const
 * here would collide with the host page's own. Needs window.__AUTH (auth-helpers.js) for
 * pwRules/meterTone and password-field.css. Exports window.RadishPassword. */
(function () {
  const { useState, useId } = React;
  const REQS = [["len", "10+ characters"], ["digit", "A number"], ["symbol", "A symbol"]];

  function StrengthMeter({ password }) {
    const A = window.__AUTH;
    const rules = A.pwRules(password);
    const tone = A.meterTone(rules.score);
    return (
      <>
        <div className={"meter" + (tone ? " " + tone : "")} aria-hidden="true">
          {[0, 1, 2].map((i) => <i key={i} className={i < rules.score ? "on" : ""}></i>)}
        </div>
        <div className="reqs">
          {REQS.map(([key, text]) => (
            <span key={key} className={rules[key] ? "ok" : ""}>
              <em aria-hidden="true">{rules[key] ? "✓" : "·"}</em>
              {text}
              <span className="auth-sr">{rules[key] ? " (met)" : " (not met)"}</span>
            </span>
          ))}
        </div>
      </>
    );
  }

  /* `.pw` composite: a 32px row holding a borderless input + Show/Hide. Show/Hide state is per-field. */
  function PasswordField({ label, right, value, onChange, onBlur, error, placeholder, autoComplete, autoFocus, meter, inputRef }) {
    const id = useId();
    const [show, setShow] = useState(false);
    return (
      <div>
        <div className="field-label"><label htmlFor={id}>{label}</label>{right}</div>
        <div className={"pw" + (error ? " invalid" : "")}>
          <input id={id} ref={inputRef} type={show ? "text" : "password"} value={value}
                 placeholder={placeholder} autoComplete={autoComplete} autoFocus={autoFocus}
                 aria-invalid={error ? "true" : undefined} aria-describedby={error ? id + "-err" : undefined}
                 onChange={(e) => onChange(e.target.value)} onBlur={onBlur} />
          <button type="button" aria-pressed={show} aria-label={show ? "Hide password" : "Show password"}
                  onClick={() => setShow((s) => !s)}>{show ? "Hide" : "Show"}</button>
        </div>
        {error ? <div className="pw-err" id={id + "-err"} role="alert">{error}</div> : null}
        {meter && <StrengthMeter password={value} />}
      </div>
    );
  }

  window.RadishPassword = { PasswordField, StrengthMeter };
})();