/* ============================================================
   PainTrack App — Login
   ============================================================ */

function Login({ onLogin }) {
  const [role, setRole] = useState("patient");
  const [email, setEmail] = useState("maya.okonkwo@email.ca");
  const [pw, setPw] = useState("demo1234");
  const [show, setShow] = useState(false);
  const [busy, setBusy] = useState(false);

  function pick(r) {
    setRole(r);
    setEmail(r === "patient" ? "maya.okonkwo@email.ca" : "dr.perelman@northwaypain.ca");
    setPw("demo1234");
  }
  function submit(e) {
    e.preventDefault();
    setBusy(true);
    setTimeout(() => onLogin(role), 650);
  }

  return (
    <div className="login">
      {/* Brand side */}
      <div className="login__brand">
        <div className="login__brand-top">
          <div className="brand"><Brand h={44} className="pt-logo--on-dark" /></div>
        </div>
        <div className="login__brand-mid">
          <span className="kicker kicker--light">Between-visits outcome tracking</span>
          <h1>Pick up exactly where the data left off.</h1>
          <p>Your relief curve, your check-ins, your caseload — measured, private, and ready the moment you sign in.</p>
        </div>
        <div className="login__curve" aria-hidden="true">
          <ReliefChart series={PATIENTS[0].series} procedureDay={14} retreatDay={98} w={460} h={180} />
        </div>
        <div className="login__brand-foot">
          <span><Icon name="shield" size={15} /> PHIPA / PIPEDA aligned</span>
          <span><Icon name="lock" size={15} /> Canadian data residency</span>
        </div>
      </div>

      {/* Form side */}
      <div className="login__form-wrap">
        <form className="login__form" onSubmit={submit}>
          <div className="brand brand--ink login__form-logo"><Brand h={38} /></div>
          <h2>Sign in</h2>
          <p className="login__sub">Welcome back. Choose how you're signing in.</p>

          <div className="role-toggle" role="tablist">
            <button type="button" role="tab" aria-selected={role === "patient"}
                    className={"role-toggle__btn" + (role === "patient" ? " on" : "")} onClick={() => pick("patient")}>
              <Icon name="user" size={18} /> Patient
            </button>
            <button type="button" role="tab" aria-selected={role === "clinician"}
                    className={"role-toggle__btn" + (role === "clinician" ? " on" : "")} onClick={() => pick("clinician")}>
              <Icon name="pulse" size={18} /> Clinician
            </button>
          </div>

          <label className="field">
            <span>Email</span>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" />
          </label>
          <label className="field">
            <span>Password</span>
            <div className="field__pw">
              <input type={show ? "text" : "password"} value={pw} onChange={e => setPw(e.target.value)} autoComplete="current-password" />
              <button type="button" className="field__eye" onClick={() => setShow(s => !s)} aria-label="Toggle password">
                <Icon name="eye" size={17} />
              </button>
            </div>
          </label>

          <div className="login__row">
            <label className="checkbox"><input type="checkbox" defaultChecked /> <span>Stay signed in</span></label>
            <a href="#" onClick={e => e.preventDefault()}>Forgot password?</a>
          </div>

          <button type="submit" className={"btn btn--primary btn--block" + (busy ? " is-busy" : "")} disabled={busy}>
            {busy ? "Signing in…" : <>Sign in as {role === "patient" ? "patient" : "clinician"} <Icon name="arrowR" size={17} /></>}
          </button>

          <div className="demo-note">
            <Icon name="sparkle" size={14} />
            <span>Demo build — credentials are pre-filled. Switch the role above to see both sides of PainTrack.</span>
          </div>

          <a className="login__back" href="PainTrack.html">← Back to paintrack.ca</a>
        </form>
      </div>
    </div>
  );
}

window.Login = Login;