// Login — demo-only client-side gate.
// The hardcoded check below is for the investor demo; it is NOT real authentication.
function Login({ onAuth }) {
  const [user, setUser] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    setErr("");
    setBusy(true);
    setTimeout(() => {
      if (user.trim() === "nuco-user" && pw === "nuco-password") {
        onAuth(user.trim());
      } else {
        setErr("Those credentials don't match. Try nuco-user / nuco-password.");
        setBusy(false);
      }
    }, 420);
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="brand" style={{ padding: 0 }}>
          <div className="brand-mark">N</div>
          <div>
            <div className="brand-name">NuCo</div>
            <div className="brand-sub">Workforce Ops</div>
          </div>
        </div>

        <h1 className="login-title">Welcome back.</h1>
        <div className="sub">Connected Care OS · Workforce, Compliance & Agents in one platform.</div>

        <form onSubmit={submit} className="vstack" style={{ gap: 12, marginTop: 20 }}>
          <TextInput label="Username" value={user} onChange={setUser} placeholder="nuco-user" autoFocus />
          <TextInput label="Password" value={pw} onChange={setPw} placeholder="••••••••" type="password" />
          {err && <div className="login-err">{err}</div>}
          <button type="submit" className="btn primary" disabled={busy} data-busy={busy} style={{ justifyContent: "center", marginTop: 4 }}>
            {busy ? "Signing in…" : <>Sign in <Icon name="arrowRight" size={12} /></>}
          </button>
        </form>

        <div className="login-hint">
          Demo credentials · <strong>nuco-user</strong> · <strong>nuco-password</strong>
        </div>
      </div>
      <div className="login-footer">Interactive investor demo · client-side demo auth only.</div>
    </div>
  );
}

Object.assign(window, { Login });