// login.jsx — login screen, shown only when the server has auth enabled
// (MAXAB_AUTH=1) and there is no active session. Real: posts to /api/auth/login.
const { useState: useStateLogin } = React;

function LoginScreen({ onSuccess }) {
  const [email, setEmail] = useStateLogin("");
  const [password, setPassword] = useStateLogin("");
  const [busy, setBusy] = useStateLogin(false);
  const [err, setErr] = useStateLogin(null);

  const submit = (e) => {
    if (e) e.preventDefault();
    if (busy || !email.trim() || !password) return;
    setBusy(true); setErr(null);
    API.auth.login({ email: email.trim(), password })
      .then((r) => onSuccess && onSuccess(r.user))
      .catch((ex) => setErr(/401/.test(ex.message) ? "Invalid email or password." : (ex.message || "Login failed")))
      .finally(() => setBusy(false));
  };

  return (
    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--bg-2)" }}>
      <form onSubmit={submit} className="fade-up" style={{ width: 380, maxWidth: "92vw", background: "#fff", border: "1px solid var(--border-1)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: 28 }}>
        <div style={{ textAlign: "center", marginBottom: 22 }}>
          <img src="assets/logo-dark.png" alt="Maxab Hub" style={{ height: 30, marginBottom: 14 }} />
          <div style={{ fontWeight: 800, fontSize: 18 }}>Sign in</div>
          <div style={{ fontSize: 13, color: "var(--fg-4)", marginTop: 2 }}>Maxab Sales Agent</div>
        </div>
        <Field label="Work email">
          <input className="input" type="email" autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@maxabhub.com" />
        </Field>
        <Field label="Password">
          <input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" />
        </Field>
        {err && <div className="row" style={{ gap: 8, color: "var(--color-danger)", fontSize: 12.5, marginBottom: 12 }}><Icon name="alert" size={15} />{err}</div>}
        <Button variant="primary" block icon="lock" disabled={busy || !email.trim() || !password}>{busy ? "Signing in…" : "Sign in"}</Button>
      </form>
    </div>
  );
}

window.LoginScreen = LoginScreen;