/* Login.jsx — real auth через POST /api/passenger/auth/login. */

function Login({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [authError, setAuthError] = React.useState("");

  const validate = () => {
    const e = {};
    if (!email) e.email = "Введіть email";
    else if (!email.includes("@")) e.email = "Невірний формат email";
    if (!password) e.password = "Введіть пароль";
    return e;
  };

  const handleSubmit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) return;

    setLoading(true);
    setAuthError("");
    try {
      const res = await window.passengerApi.auth.login(email.trim(), password);
      // Backend поставив httpOnly cookie passenger_session.
      onLogin({ actor: res.actor, role: res.role, name: res.name, capabilities: res.capabilities });
    } catch (err) {
      setLoading(false);
      if (err && err.status === 401) setAuthError("Невірний email або пароль");
      else if (err && err.status === 422) setAuthError("Заповніть email і пароль");
      else setAuthError("Помилка авторизації: " + ((err && err.message) || ""));
    }
  };

  return (
    <div className="login-page">
      <div className="login-left">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 48 }}>
            <div className="sidebar-logo-mark">P</div>
            <span style={{ color: "white", fontSize: 16, fontWeight: 700 }}>passenger</span>
          </div>
          <div className="login-headline">Керуйте мережею.<br />В реальному часі.</div>
          <div className="login-tagline">
            Адмін-панель для операторів міського транспорту.<br />
            Зупинки, маршрути, моніторинг і реакція на алерти.
          </div>
        </div>

        <div style={{ color: "rgba(255,255,255,0.4)", fontSize: 12, lineHeight: 1.5 }}>
          Облікові записи: env <code style={{ background: "rgba(255,255,255,0.1)", padding: "1px 6px", borderRadius: 3 }}>PASSENGER_BOOTSTRAP_USERS</code>
          або таблиця <code style={{ background: "rgba(255,255,255,0.1)", padding: "1px 6px", borderRadius: 3 }}>passenger_users</code>.
          <br />Ролі: dispatcher (read+ack), engineer (CRUD), admin (settings).
        </div>
      </div>

      <div className="login-right">
        <div className="login-form-wrap">
          <div style={{ marginBottom: 32 }}>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.3px", marginBottom: 6 }}>Увійти</div>
            <div style={{ fontSize: 14, color: "var(--text-3)" }}>Введіть ваш email і пароль</div>
          </div>

          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <label className="field-label" htmlFor="email">Email</label>
              <input
                id="email"
                type="email"
                className={"input" + (errors.email ? " error" : "")}
                value={email}
                onChange={e => { setEmail(e.target.value); setErrors(prev => ({ ...prev, email: "" })); setAuthError(""); }}
                placeholder="admin@passenger.app"
                autoComplete="email"
              />
              {errors.email && <div className="field-error">{errors.email}</div>}
            </div>

            <div>
              <label className="field-label" htmlFor="password">Пароль</label>
              <input
                id="password"
                type="password"
                className={"input" + (errors.password ? " error" : "")}
                value={password}
                onChange={e => { setPassword(e.target.value); setErrors(prev => ({ ...prev, password: "" })); setAuthError(""); }}
                placeholder="••••••••"
                autoComplete="current-password"
              />
              {errors.password && <div className="field-error">{errors.password}</div>}
            </div>

            {authError && (
              <div style={{
                padding: "10px 14px", background: "var(--bad-bg)", border: "1px solid var(--bad-border)",
                borderRadius: "var(--radius-sm)", color: "var(--bad)", fontSize: 13.5,
              }}>
                {authError}
              </div>
            )}

            <button type="submit" className="btn btn-primary w-full"
              disabled={loading}
              style={{ justifyContent: "center", marginTop: 4, opacity: loading ? 0.7 : 1 }}>
              {loading
                ? <span style={{ display: "inline-block", animation: "spin 1s linear infinite" }}>⟳</span>
                : null}
              {loading ? "Перевірка…" : "Увійти"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Login });