// ============================================================
// LOGIN — schermata di accesso (medico o paziente)
// ============================================================
function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!username.trim() || !password) return;
    setBusy(true); setErr("");
    try {
      await window.NefroAPI.login(username.trim(), password);
      location.reload();   // il boot rileva il ruolo e mostra l'area giusta
    } catch (ex) {
      setErr(ex.message || "Accesso non riuscito.");
      setBusy(false);
    }
  };

  return (
    <div className="login-scr">
      <form className="login-card" onSubmit={submit}>
        <div className="login-brand">
          <div className="brand-mark"><Icon name="droplet" size={22} /></div>
          <div className="login-title">AtaMed</div>
          <div className="login-sub">AULSS 7 · Nefrologia — Accesso</div>
        </div>
        <label className="field">
          <span className="field-label">Username</span>
          <input className="field-input" autoFocus value={username}
            onChange={(e) => setUsername(e.target.value)} placeholder="es. nome.cognome" autoComplete="username" />
        </label>
        <label className="field">
          <span className="field-label">Password</span>
          <input className="field-input" type="password" value={password}
            onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" autoComplete="current-password" />
        </label>
        {err && <div className="login-err"><Icon name="alert" size={14} /> {err}</div>}
        <button className={`btn btn-primary login-btn ${busy ? "btn-disabled" : ""}`} type="submit" disabled={busy}>
          {busy ? "Accesso…" : "Entra"}
        </button>
        <div className="login-hint">Medici e pazienti usano lo stesso accesso; il sistema riconosce il ruolo.</div>
      </form>
    </div>
  );
}
window.Login = Login;