// Public account page
function AccountPage({ onNav }) {
  const [mode, setMode] = React.useState("login");
  const [session, setSession] = React.useState(() => window.dzAuth.getSession());
  const [form, setForm] = React.useState({
    username: "",
    displayName: "",
    email: "",
    password: "",
  });
  const [err, setErr] = React.useState("");

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    setErr("");
  };

  const login = async (e) => {
    e.preventDefault();
    setErr("正在登录...");
    const result = window.dzAuth.loginAsync
      ? await window.dzAuth.loginAsync(form.username, form.password)
      : window.dzAuth.login(form.username, form.password);
    if (!result.ok) { setErr(result.err); return; }
    setSession(result.session);
    setErr("");
  };

  const register = async (e) => {
    e.preventDefault();
    setErr("正在创建账户...");
    const result = window.dzAuth.registerAsync
      ? await window.dzAuth.registerAsync(form)
      : window.dzAuth.register(form);
    if (!result.ok) { setErr(result.err); return; }
    setSession(result.session);
    setErr("");
  };

  const logout = async () => {
    if (window.dzAuth.logoutAsync) await window.dzAuth.logoutAsync();
    else window.dzAuth.logout();
    setSession(null);
    setForm({ username: "", displayName: "", email: "", password: "" });
  };

  if (session) {
    const internal = window.dzAuth.hasInternalAccess(session);
    return (
      <div className="page account-page">
        <section className="account-hero">
          <div className="app">
            <div className="kicker mb-4"><span className="dot">●</span>ACCOUNT / 市民账户</div>
            <h1 className="serif">欢迎回来，{session.displayName || session.username}。</h1>
            <p>这个账号会用于保留你的署名、相遇记录和未来的命名/来信/守望任务。审核台权限需要单独认证。</p>
          </div>
        </section>
        <section className="section">
          <div className="app account-grid">
            <div className="account-card main">
              <div className="account-role-pill">
                {session.role === "super" ? "超级管理员" : session.role === "admin" ? "管理员" : session.role === "volunteer" ? "认证审核员" : "市民账户"}
              </div>
              <h2>{session.displayName || session.username}</h2>
              <dl>
                <div><dt>账号</dt><dd>{session.username}</dd></div>
                <div><dt>邮箱</dt><dd>{session.email || "未填写"}</dd></div>
                <div><dt>权限</dt><dd>{internal ? "可进入审核台" : "普通市民"}</dd></div>
              </dl>
              <div className="account-actions">
                <button className="btn btn-accent" onClick={() => onNav("upload")}>记录一次相遇 →</button>
                <button className="btn btn-ghost" onClick={() => onNav("notice")}>查看告示栏</button>
                {internal && <button className="btn btn-ghost" onClick={() => onNav("review")}>进入审核台</button>}
                <button className="btn btn-ghost" onClick={logout}>退出登录</button>
              </div>
            </div>
            <div className="account-card">
              <h3>账户说明</h3>
              <p>普通市民账号可以用于提交观察、保留署名和参与未来的命名活动。审核台账号由项目组认证后开通，不能自行注册获得。</p>
              <p>上线版账号会优先使用 Cloudflare D1 与 HttpOnly Cookie 会话；若后端尚未完成绑定，页面会临时使用本机兜底账号。</p>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page account-page">
      <section className="account-hero">
        <div className="app">
          <div className="kicker mb-4"><span className="dot">●</span>ACCOUNT / 市民账户</div>
          <h1 className="serif">登录动物城账户。</h1>
          <p>普通市民可注册账户，用于记录相遇和保留署名。审核台权限由项目组另行开通。</p>
        </div>
      </section>

      <section className="section">
        <div className="app account-auth-wrap">
          <div className="account-tabs">
            <button className={mode === "login" ? "active" : ""} onClick={() => { setMode("login"); setErr(""); }}>登录</button>
            <button className={mode === "register" ? "active" : ""} onClick={() => { setMode("register"); setErr(""); }}>注册市民账户</button>
          </div>

          <form className="account-form" onSubmit={mode === "login" ? login : register}>
            {mode === "register" && (
              <>
                <label className="form-label">显示名称 · Display name</label>
                <input className="form-input" value={form.displayName} onChange={e => update("displayName", e.target.value)} placeholder="例如：山林漫步者" />
              </>
            )}

            <label className="form-label">账号 · Username{mode === "login" ? " / Email" : ""}</label>
            <input className="form-input" value={form.username} onChange={e => update("username", e.target.value)} placeholder={mode === "login" ? "账号或邮箱" : "2-24 位中文、字母或数字"} autoComplete="username" />

            {mode === "register" && (
              <>
                <label className="form-label">邮箱 · Email（选填）</label>
                <input className="form-input" value={form.email} onChange={e => update("email", e.target.value)} placeholder="用于未来找回与通知" autoComplete="email" />
              </>
            )}

            <label className="form-label">密码 · Password</label>
            <input className="form-input" type="password" value={form.password} onChange={e => update("password", e.target.value)} placeholder={mode === "register" ? "至少 10 位，包含字母和数字" : "输入密码"} autoComplete={mode === "login" ? "current-password" : "new-password"} />

            {err && <div className="account-error">{err}</div>}

            <button className="btn btn-accent" type="submit">
              {mode === "login" ? "登录 →" : "注册并登录 →"}
            </button>
          </form>

          <div className="account-note">
            审核台不在顶部菜单显示。认证审核员请从页面底部“审核台登录”进入；普通市民账号登录后仍需项目组认证才可访问审核台。
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AccountPage });