/* ============================================================
   THREDLY — Forgot password
   Ask for the email, then show a "check your inbox" state.
   ============================================================ */
function ForgotApp() {
  const [email, setEmail] = useAu('');
  const [sent, setSent] = useAu(false);
  const [busy, setBusy] = useAu(false);
  const [err, setErr] = useAu('');

  const submit = () => {
    setErr('');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setErr('Enter a valid email address.'); return; }
    setBusy(true);
    setTimeout(() => { setBusy(false); setSent(true); }, 850);
  };

  return (
    <AuShell scene={{
      eyebrow: 'Account recovery',
      title: 'Locked out? We\u2019ll get you back in.',
      sub: 'Enter the email on your account and we\u2019ll send a secure link to set a new password.',
    }}>
      <AuTop back={{ href: 'Login.html', label: 'Back to sign in' }} />

      {!sent ? (
        <React.Fragment>
          <div className="au-head">
            <div className="au-kicker">Reset password</div>
            <h1 className="au-title">Forgot your password?</h1>
            <p className="au-sub">No problem. Tell us your email and we'll send you a reset link.</p>
          </div>

          {err && <div className="au-formerr"><Icon.info size={14} /> {err}</div>}

          <div className="au-form">
            <div className="au-field">
              <label className="au-label" htmlFor="fp-email">Email</label>
              <div className="au-inwrap">
                <span className="au-in-ico"><Icon.mail size={17} /></span>
                <input id="fp-email" className="au-input has-ico" type="email" value={email}
                  onChange={e => setEmail(e.target.value)} placeholder="you@institution.edu"
                  autoComplete="email" onKeyDown={e => { if (e.key === 'Enter') submit(); }} />
              </div>
            </div>
            <button className="au-submit" onClick={submit} disabled={busy}>
              {busy ? <span className="au-spin"></span> : <React.Fragment>Send reset link <Icon.send size={16} /></React.Fragment>}
            </button>
          </div>

          <div className="au-altrow">
            Remembered it? <a href="Login.html">Back to sign in</a>
          </div>
        </React.Fragment>
      ) : (
        <div className="au-center">
          <span className="au-ring plum"><Icon.mail size={28} /></span>
          <h1 className="au-title" style={{ marginTop: '20px' }}>Check your inbox</h1>
          <p className="au-sub">If an account exists for that email, a reset link is on its way.</p>
          <div className="au-sent-mail"><Icon.mail size={17} /> {email}</div>

          <div className="au-tip">
            <Icon.info size={16} />
            <span>The link expires in 60 minutes. Didn't get it? Check spam, or resend below.</span>
          </div>

          {/* demo affordance: jump to the page they'd land on from the email */}
          <a className="au-submit as-link" href={'Reset Password.html?email=' + encodeURIComponent(email)} style={{ marginTop: '20px' }}>
            Open reset link <Icon.arrowRight size={17} />
          </a>
          <button className="au-secondary" onClick={() => setSent(false)}>
            <Icon.mail size={16} /> Resend to a different email
          </button>

          <div className="au-altrow"><a href="Login.html">Back to sign in</a></div>
        </div>
      )}
    </AuShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ForgotApp />);