// CORE-02 · Forgot password  (standalone auth screen — no admin shell)
// Email reset link flow.
const ForgotPage = () => {
  const Ic = window.Icons;
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [busy, setBusy] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setBusy(true);
    setTimeout(() => { setBusy(false); setSent(true); }, 700);
  };

  return (
    <div className="auth-pane" style={{ minHeight: "100vh" }}>
      <div className="auth-card auth-card-center">
        {!sent ? (
          <>
            <span className="auth-mark-sm"><Ic.Key size={20}/></span>
            <div className="auth-h1">Reset your password</div>
            <div className="auth-p">Enter the email linked to your account and we'll send a secure reset link. The link expires in 30 minutes.</div>
            <form className="auth-form" onSubmit={submit} style={{ textAlign: "left" }}>
              <div className="field">
                <label className="label">Work email</label>
                <div className="auth-input-wrap">
                  <Ic.Mail size={16} className="ic"/>
                  <input className="input" type="email" value={email} onChange={(e)=> setEmail(e.target.value)} placeholder="you@amoms.co.ke" autoFocus/>
                </div>
              </div>
              <Button variant="primary" className="auth-submit" type="submit" disabled={busy}>{busy ? "Sending…" : "Send reset link"}</Button>
            </form>
            <div className="auth-foot"><a className="auth-link" href="CORE-01.html"><Ic.ChevronLeft size={13} style={{ verticalAlign: "-2px" }}/> Back to sign in</a></div>
          </>
        ) : (
          <>
            <span className="auth-success-ring"><Ic.Mail size={26}/></span>
            <div className="auth-h1">Check your email</div>
            <div className="auth-p">If an account exists for <b>{email}</b>, a password reset link is on its way. It expires in 30 minutes.</div>
            <div className="auth-route-list" style={{ marginTop: 22 }}>
              <div className="auth-route-item"><Ic.Info size={15} className="r"/><span>Didn't get it? Check spam, or wait 60 seconds and resend.</span></div>
            </div>
            <div className="auth-form" style={{ marginTop: 18 }}>
              <Button variant="outline" className="auth-submit" icon={Ic.Refresh} onClick={()=> setSent(false)}>Resend link</Button>
              <Button variant="ghost" onClick={()=> { window.location.href = "CORE-01.html"; }}>Back to sign in</Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const coreForgotRoot = ReactDOM.createRoot(document.getElementById("root"));
coreForgotRoot.render(<ToastProvider><ForgotPage/></ToastProvider>);