// Admin login gate + account context
function AdminLogin({ onLogin }) {
  const [u, setU] = React.useState("");
  const [p, setP] = React.useState("");
  const [err, setErr] = React.useState("");

  const submit = (e) => {
    if (e) e.preventDefault();
    const r = window.dzAuth.login(u.trim(), p);
    if (!r.ok) { setErr(r.err); return; }
    setErr("");
    onLogin(r.session);
  };

  const fillDemo = (user, pwd) => { setU(user); setP(pwd); setErr(""); };

  return (
    <div className="admin-login" data-screen-label="Admin · 登录">
      <form className="admin-login-card" onSubmit={submit}>
        <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".18em", marginBottom: 6 }}>
          DALIAN ZOOTOWN · ADMIN
        </div>
        <h2>后台登录</h2>
        <div className="admin-login-sub">野生动物档案 · 管理员通道</div>

        <label>用户名 Username</label>
        <input autoFocus value={u} onChange={e => setU(e.target.value)} placeholder="admin" autoComplete="username" />

        <label>密码 Password</label>
        <input type="password" value={p} onChange={e => setP(e.target.value)} autoComplete="current-password" />

        {err && <div className="admin-login-err">✕ {err}</div>}

        <button type="submit" className="btn btn-accent btn-glow" style={{ width: "100%", marginTop: 24, padding: "12px 20px" }}>
          登录 →
        </button>

        <div className="admin-login-hint">
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, color: "var(--muted)", letterSpacing: ".14em", marginBottom: 8 }}>
            演示账号 DEMO ACCOUNTS
          </div>
          <div style={{ display: "grid", gap: 4 }}>
            <a onClick={() => fillDemo("admin", "admin")} style={{ cursor: "pointer", color: "var(--ink-soft)" }}>
              <span className="mono" style={{ color: "var(--ink)", fontWeight: 600 }}>admin</span> / admin — 超级管理员
            </a>
            <a onClick={() => fillDemo("forest", "forest2026")} style={{ cursor: "pointer", color: "var(--ink-soft)" }}>
              <span className="mono" style={{ color: "var(--ink)", fontWeight: 600 }}>forest</span> / forest2026 — 管理员
            </a>
            <a onClick={() => fillDemo("林间回声", "volunteer")} style={{ cursor: "pointer", color: "var(--ink-soft)" }}>
              <span className="mono" style={{ color: "var(--ink)", fontWeight: 600 }}>林间回声</span> / volunteer — 志愿审核员
            </a>
          </div>
        </div>

        <div style={{ marginTop: 18, textAlign: "center" }}>
          <a onClick={() => window.history.back()} style={{ cursor: "pointer", color: "var(--muted)", fontSize: 11.5 }}>
            ← 返回主站
          </a>
        </div>
      </form>
    </div>
  );
}

// Admin gate wrapper — shows login if no session, else renders AdminPage
function AdminGate({ onNav, adminRoute, setAdminRoute }) {
  const [session, setSession] = React.useState(() => window.dzAuth.getSession());

  React.useEffect(() => {
    // Re-check session on focus (e.g. after logout in another tab)
    const h = () => setSession(window.dzAuth.getSession());
    window.addEventListener("focus", h);
    return () => window.removeEventListener("focus", h);
  }, []);

  if (!session) {
    return <AdminLogin onLogin={setSession} />;
  }

  const logout = () => {
    window.dzAuth.logout();
    setSession(null);
  };

  return <AdminPage onNav={onNav} adminRoute={adminRoute} setAdminRoute={setAdminRoute} session={session} onLogout={logout} />;
}

Object.assign(window, { AdminLogin, AdminGate });