function LoginPage({ onLogin, setRoute }) {
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const r = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const data = await r.json();
      if (!r.ok) { setError(data.error || "Identifiants incorrects"); return; }
      sessionStorage.setItem("cb_token", data.token);
      onLogin(data.user);
    } catch {
      setError("Erreur réseau, veuillez réessayer.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main style={{ padding: "80px 0 100px", minHeight: "60vh", display: "flex", alignItems: "center" }}>
      <div className="container" style={{ maxWidth: 420 }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="logo" style={{ justifyContent: "center", marginBottom: 20 }}>
            <img src="assets/logo.webp" alt="Cap Bercy" style={{ height: 52 }} />
          </div>
          <div className="label" style={{ color: "var(--accent)" }}>Espace réservé</div>
          <h2 style={{ marginTop: 6 }}>Connexion administrateur</h2>
        </div>

        <form onSubmit={submit} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 18, padding: 32, boxShadow: "var(--shadow-sm)" }}>
          <div className="field">
            <label className="label">Identifiant</label>
            <input className="input" value={username}
                   onChange={e => setUsername(e.target.value)}
                   placeholder="admin" required autoFocus autoComplete="username" />
          </div>
          <div className="field" style={{ marginTop: 14 }}>
            <label className="label">Mot de passe</label>
            <input className="input" type="password" value={password}
                   onChange={e => setPassword(e.target.value)}
                   placeholder="••••••••" required autoComplete="current-password" />
          </div>

          {error && (
            <div style={{
              marginTop: 12, color: "var(--danger)", fontSize: 13,
              padding: "10px 12px", borderRadius: 8,
              background: "oklch(0.97 0.02 25)", border: "1px solid oklch(0.92 0.04 25)"
            }}>
              {error}
            </div>
          )}

          <button className="btn btn-primary btn-block" style={{ marginTop: 20 }}
                  type="submit" disabled={loading}>
            {loading ? "Connexion…" : <><Icon.Lock /> Se connecter</>}
          </button>
        </form>

        <div style={{ textAlign: "center", marginTop: 20 }}>
          <button className="small muted" onClick={() => setRoute("home")}
                  style={{ background: "none", border: "none", cursor: "pointer", textDecoration: "underline", color: "var(--muted)" }}>
            ← Retour au site
          </button>
        </div>
      </div>
    </main>
  );
}

window.LoginPage = LoginPage;