// Full-screen login gate. Rendered by app.jsx whenever
// GET /api/auth/me returns 401 (fresh page load or session expired).
//
// Rules-of-Hooks: every useState / useEffect is declared BEFORE any
// early return so hook order can never change between renders. This
// pattern has bit us three times in other admin views — keep it strict.

function Login({ onAuthed }) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  async function submit(e) {
    e.preventDefault();
    setErr(null); setBusy(true);
    try {
      const user = await window.login(username.trim(), password);
      if (typeof onAuthed === 'function') onAuthed(user);
    } catch (e2) {
      setErr(e2.message || 'sign in failed');
    } finally { setBusy(false); }
  }

  const INPUT = {
    width: '100%', padding: '8px 11px', background: 'var(--surface)',
    border: '1px solid var(--border-2)', borderRadius: 3,
    color: 'var(--text)', fontFamily: 'var(--mono)', fontSize: 13, outline: 'none',
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'radial-gradient(ellipse at center, #0e151f 0%, #06090d 70%)',
    }}>
      <form onSubmit={submit} className="card" style={{ width: 340, padding: 0 }}>
        <div className="card-head" style={{ gap: 8 }}>
          <div className="brand-logo" style={{ width: 12, height: 12 }} />
          <h3 style={{ margin: 0 }}>Pulse · sign in</h3>
          <span className="spacer" style={{ flex: 1 }} />
          <span className="sub">LAN monitoring</span>
        </div>
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="tweak-row">
            <label>Username</label>
            <input style={INPUT} autoFocus autoComplete="username"
                   value={username} onChange={e => setUsername(e.target.value)}
                   required />
          </div>
          <div className="tweak-row">
            <label>Password</label>
            <input style={INPUT} type="password" autoComplete="current-password"
                   value={password} onChange={e => setPassword(e.target.value)}
                   required />
          </div>
          {err && <div style={{ color: 'var(--crit)', fontSize: 12 }}>✗ {err}</div>}
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <button type="submit" className="btn" disabled={busy || !username.trim() || !password}
              style={{ color: 'var(--accent)', borderColor: 'var(--accent-dim)',
                       background: 'var(--accent-bg)', padding: '7px 16px', fontSize: 12 }}>
              {busy ? 'signing in…' : 'sign in'}
            </button>
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-mute)', marginTop: 4, lineHeight: 1.5 }}>
            First time? Default admin user is <code>admin</code> with the password stored in
            <br /><code>backend/.admin_password</code> (or <code>$PULSE_ADMIN_PASSWORD</code>).
          </div>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { Login });