function LoginScreen({ onLoggedIn }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [errMsg, setErrMsg] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    setBusy(true);
    setErrMsg("");
    try {
      await window.OKR_AUTH.signInWithPassword(email, password);
      onLoggedIn();
    } catch (err) {
      setErrMsg(err.message || "เข้าสู่ระบบไม่สำเร็จ");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="login-page">
      <form className="login-card" onSubmit={handleSubmit}>
        <h1>OKR Evaluation System</h1>
        <p className="subtitle">ระบบประเมินผล OKR + Competency</p>
        <label>
          อีเมล
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </label>
        <label>
          รหัสผ่าน
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
        </label>
        {errMsg && <div className="error-msg">{errMsg}</div>}
        <button type="submit" disabled={busy}>{busy ? "กำลังเข้าสู่ระบบ..." : "เข้าสู่ระบบ"}</button>
      </form>
    </div>
  );
}