const { useState } = React;

window.LoginPage = function LoginPage({ onLogin }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState(null);
  const [busy, setBusy] = useState(false);

  async function submit(e) {
    e.preventDefault();
    setErr(null);
    setBusy(true);
    try {
      const { user } = await window.api.post("/auth/login", { email, password });
      onLogin(user);
    } catch (e) {
      setErr(
        e.status === 401 ? "Fel email eller lösenord." :
        e.status === 400 ? "Fyll i både email och lösenord." :
        "Något gick fel — försök igen."
      );
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="login-shell">
      <div className="login-card">
        <img src="/assets/jms-logo.svg" alt="JM Sandberg" className="login-jms-logo" />
        <h1>Logga in</h1>
        <p className="lead">MarTech Portal — use case-katalog för dig och dina kunder.</p>

        {err && <div className="err">{err}</div>}

        <form onSubmit={submit}>
          <div className="field-row">
            <label className="field-label">Email</label>
            <input
              className="field"
              type="email"
              autoComplete="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoFocus
            />
          </div>
          <div className="field-row">
            <label className="field-label">Lösenord</label>
            <input
              className="field"
              type="password"
              autoComplete="current-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button className="btn btn-primary" type="submit" disabled={busy}>
            {busy ? <span className="spinner" /> : null}
            {busy ? "Loggar in…" : "Logga in"}
          </button>
        </form>
      </div>
    </div>
  );
};