// FRAZIER Finance OS — login. Real session auth (see api/lib/fin-auth.php),
// no self-signup — accounts are provisioned manually. Founder-only per spec.

function FinLogin({ onLoggedIn }) {
  const [loginId, setLoginId] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    if (busy || !loginId.trim() || !password) return;
    setBusy(true); setErr(null);
    try {
      const d = await finApi('fin_login', { body: { loginId: loginId.trim(), password } });
      onLoggedIn(d.user);
    } catch (e2) {
      setErr((e2 && e2.message) || 'Could not log in.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="fin-login">
      <form className="fin-login-card" onSubmit={submit}>
        <div className="fin-login-mark" aria-hidden="true">F</div>
        <h1>FRAZIER Finance OS</h1>
        <p className="fin-login-sub">Private — founder access only.</p>
        <label className="fin-field">
          <span>Login ID</span>
          <input className="fin-input" autoFocus autoComplete="username" value={loginId} onChange={(e) => setLoginId(e.target.value)} />
        </label>
        <label className="fin-field">
          <span>Password</span>
          <input className="fin-input" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} />
        </label>
        {err ? <div className="fin-login-err" role="alert"><FinIcon name="warn" size={14} />{err}</div> : null}
        <button type="submit" className="fin-btn is-primary fin-login-go" disabled={busy || !loginId.trim() || !password}>
          {busy ? 'Logging in…' : 'Log in'}
        </button>
      </form>
    </div>
  );
}

Object.assign(window, { FinLogin });