/* global React */
const { useState: useStateLg } = React;

/* Agent Portal Login.
   Demo creds (filled in placeholder hint): agent@district52.com / district52
   Any non-empty email + password also "works" so demos are smooth.
*/
function PortalLogin({ navigate, onLogin }) {
  const [email, setEmail] = useStateLg("");
  const [pwd, setPwd] = useStateLg("");
  const [remember, setRemember] = useStateLg(true);
  const [error, setError] = useStateLg(null);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@") || pwd.length < 4) {
      setError("Check your email and password — password must be at least 4 characters.");
      return;
    }
    setError(null);
    onLogin({ email, remember });
    navigate("portal");
  };

  const useDemo = () => {
    setEmail("agent@district52.com");
    setPwd("district52");
    setError(null);
  };

  return (
    <div className="login-page">
      <div className="login-card">
        <h1>Welcome back.</h1>
        <p className="sub">Sign in to the District 52 agent portal.</p>

        {error && <div className="login-error">{error}</div>}

        <form onSubmit={submit}>
          <div className="field">
            <label>Email</label>
            <input type="email" autoComplete="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="you@district52.com" />
          </div>
          <div className="field">
            <label>Password</label>
            <input type="password" autoComplete="current-password" required value={pwd} onChange={e => setPwd(e.target.value)} placeholder="••••••••" />
          </div>
          <div className="row">
            <label><input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} /> Remember me</label>
            <a href="#">Forgot password?</a>
          </div>
          <button type="submit">Sign in</button>
        </form>

        <div style={{ marginTop: 20, textAlign: "center" }}>
          <button onClick={useDemo} style={{ background: "transparent", border: 0, color: "var(--color-primary)", font: "var(--type-caption)", cursor: "pointer", padding: 8 }}>
            Use demo credentials
          </button>
        </div>

        <div className="signup">
          Not yet an agent? <a href="#/opportunities" onClick={(e) => { e.preventDefault(); navigate("opportunities"); }} style={{ color: "var(--color-primary)" }}>See open cohorts</a>
        </div>
      </div>
    </div>
  );
}

window.PortalLogin = PortalLogin;