// Approve link page (Jay, Oct 30 2026): #/admin/members?pending=<user_id>, the link in the "new member waiting" admin
// email and push. Admin > Members with that person highlighted at the top: handle, when they joined, paid status, and
// big Approve / Decline buttons (Decline asks inline, no pop-up). Rules + copy: utils/pending-approve.js. Calls:
// BBGroupMembers.fetchMembers / act(approve | reject), the same ones the Members list uses. No modals.
(function () {
  const { useState, useEffect, useCallback } = React;

  function PendingApproveCard({ pendingId, apiBase, token, withCode, isAdmin, authed, navigate }) {
    const P = window.BBPendingApprove;
    const GM = window.BBGroupMembers;
    const C = P.COPY;
    const [data, setData] = useState(null);
    const [done, setDone] = useState(null);         // {kind: "approved"|"declined", text}
    const [busy, setBusy] = useState("");           // "approve" | "reject"
    const [asking, setAsking] = useState(false);    // inline Decline confirm open
    const [note, setNote] = useState(null);         // {kind, text} inline after a failed action
    const [forbidden, setForbidden] = useState(false);
    const [handle, setHandle] = useState("");
    const load = useCallback(() => {
      if (!GM || !isAdmin || !token) return Promise.resolve();
      return GM.fetchMembers(apiBase, token, withCode).then((d) => {
        setData(d);
        const m = P.findMember(d, pendingId);
        if (m && m.handle) setHandle(m.handle);
      });
    }, [apiBase, token, withCode, isAdmin, pendingId]); // eslint-disable-line react-hooks/exhaustive-deps
    useEffect(() => { setDone(null); setNote(null); setAsking(false); setData(null); load(); }, [load]);
    // The Members list below changes too (approve / reject there): re-read so this card never shows a stale row.
    useEffect(() => {
      const on = () => { load(); };
      window.addEventListener("bb-members-changed", on);
      return () => window.removeEventListener("bb-members-changed", on);
    }, [load]);

    const state = P.stateFor({ authed, isAdmin, pendingId, data, done, forbidden });
    const member = P.findMember(data, pendingId);
    const name = (member && member.handle) || handle || "This person";
    const goMembers = (e) => { if (e) e.preventDefault(); navigate("/admin/members", { replace: true }); };
    const membersLink = (label, testid) => (
      <a href={window.BBRouter.href("/admin/members")} onClick={goMembers} className="btn-alt px-4 py-2 rounded inline-block font-semibold"
        data-testid={testid}>{label}</a>
    );

    const act = async (action) => {
      setBusy(action);
      setNote(null);
      const r = await GM.act(apiBase, token, withCode, pendingId, action, false);
      setBusy("");
      setAsking(false);
      const o = P.outcomeOf(action, r, name);
      if (o.kind === "approved" || o.kind === "declined") setDone(o);
      else if (o.kind === "not-admin") setForbidden(true);
      else if (o.kind !== "handled") setNote(o);
      await load();
      try { window.dispatchEvent(new CustomEvent("bb-members-changed")); } catch (e) {}
    };

    const shell = (kind, children) => (
      <section className={`card rounded-xl p-4 mb-4 bb-approve-link bb-approve-link--${kind}`} data-testid="pending-approve" data-state={kind}
        style={kind === "pending" ? { border: "2px solid var(--brand)", boxShadow: "0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent)" } : undefined}
        aria-live="polite">
        {children}
      </section>
    );

    if (state === "none" || state === "signin") return null;
    if (state === "not-admin") return shell("not-admin", (
      <>
        <h2 className="text-xl font-semibold mb-2" data-testid="pending-approve-msg">{C.notAdmin}</h2>
        <p className="muted mb-4">{C.notAdminHint}</p>
        <a href={window.BBRouter.href("/games")} className="btn-alt px-4 py-2 rounded inline-block font-semibold" data-testid="pending-approve-games"
          onClick={(e) => { e.preventDefault(); navigate("/games", { replace: true }); }}>{C.gamesLink}</a>
      </>
    ));
    if (state === "loading") return shell("loading", <div className="muted" role="status">{C.loading}</div>);
    if (state === "unavailable") return shell("unavailable", <p className="muted">{C.unavailable}</p>);
    if (state === "error") return shell("error", (
      <>
        <p className="mb-3" role="alert">{C.error}</p>
        <button type="button" className="btn-alt px-4 py-2 rounded" onClick={() => { setData(null); load(); }}>{C.retry}</button>
      </>
    ));
    if (state === "approved" || state === "declined") return shell(state, (
      <>
        <h2 className="text-xl font-semibold mb-2" role="status" data-testid="pending-approve-msg">{done.text}</h2>
        {membersLink(C.backToMembers, "pending-approve-members")}
      </>
    ));
    if (state === "handled") return shell("handled", (
      <>
        <h2 className="text-xl font-semibold mb-2" data-testid="pending-approve-msg">{C.handled}</h2>
        <p className="muted mb-4">{C.handledHint}</p>
        {membersLink(C.membersLink, "pending-approve-members")}
      </>
    ));

    // state === "pending"
    const pay = P.payInfo(member);
    const joined = P.formatJoined(P.joinedAtOf(member));
    return shell("pending", (
      <>
        <div className="muted text-sm font-semibold" style={{ letterSpacing: ".04em", textTransform: "uppercase" }}>{C.title}</div>
        <div className="flex items-center gap-2 flex-wrap">
          <h2 className="text-2xl font-bold" data-testid="pending-approve-handle" style={{ wordBreak: "break-word" }}>{member.handle}</h2>
          {pay.badge && <span className={`bb-member-chip bb-member-chip--${pay.badge}`} data-testid="pending-approve-pay">{pay.badge === "paid" ? C.paid : C.unpaid}</span>}
        </div>
        {joined && <div className="muted text-sm mb-2" data-testid="pending-approve-joined">{joined}</div>}
        <p className="text-sm mb-3">{C.intro}</p>
        {pay.blocked && (
          <p className="bb-pending-pay-note rounded-xl p-3 text-sm mb-3" id="pending-approve-paynote" data-testid="pending-approve-paynote">{C.needsPay}</p>
        )}
        {note && (
          <p className="bb-pending-pay-note rounded-xl p-3 text-sm mb-3" role="alert" data-testid="pending-approve-note" data-kind={note.kind}>{note.text}</p>
        )}
        {!asking ? (
          <div className="flex gap-3 flex-wrap">
            <button type="button" className="btn px-4 py-3 rounded-xl text-lg font-semibold disabled:opacity-50" style={{ flex: "1 1 9rem", minHeight: "3.25rem" }}
              data-testid="pending-approve-approve" disabled={!!busy || pay.blocked}
              aria-describedby={pay.blocked ? "pending-approve-paynote" : undefined} onClick={() => act("approve")}>
              {busy === "approve" ? C.approving : C.approve}
            </button>
            <button type="button" className="btn-alt bb-member-danger px-4 py-3 rounded-xl text-lg font-semibold disabled:opacity-50" style={{ flex: "1 1 9rem", minHeight: "3.25rem" }}
              data-testid="pending-approve-decline" disabled={!!busy} onClick={() => { setNote(null); setAsking(true); }}>
              {C.decline}
            </button>
          </div>
        ) : (
          <div className="bb-member-transfer" role="group" aria-label={C.decline} data-testid="pending-approve-confirm">
            <p className="font-semibold mb-2">{C.declineAsk(member.handle)}</p>
            <div className="flex gap-3 flex-wrap">
              <button type="button" className="btn-alt bb-member-danger px-4 py-3 rounded-xl font-semibold disabled:opacity-50" style={{ flex: "1 1 8rem" }}
                data-testid="pending-approve-decline-yes" disabled={!!busy} onClick={() => act("reject")}>
                {busy === "reject" ? C.declining : C.declineYes}
              </button>
              <button type="button" className="btn-alt px-4 py-3 rounded-xl font-semibold" style={{ flex: "1 1 8rem" }}
                data-testid="pending-approve-decline-no" disabled={!!busy} onClick={() => setAsking(false)}>{C.declineNo}</button>
            </div>
          </div>
        )}
      </>
    ));
  }

  // Admin > Members (#/admin/members). With ?pending=<id>: the approve card on top, then the full Members list.
  function MembersPage({ pendingId, apiBase, token, withCode, isAdmin, authed, navigate }) {
    const List = window.GroupMembersSetting;
    return (
      <div className="bb-admin-members-page" data-testid="admin-members-page">
        {pendingId && <PendingApproveCard key={pendingId} pendingId={pendingId} apiBase={apiBase} token={token} withCode={withCode}
          isAdmin={isAdmin} authed={authed} navigate={navigate} />}
        {isAdmin && List && <List apiBase={apiBase} token={token} withCode={withCode} />}
      </div>
    );
  }

  window.BBPendingApproveUI = { Card: PendingApproveCard, MembersPage };
})();