// Link a board (#/pair) and Enter a code (#/pair/enter). Pages only, no modals. Rules, copy and the API client live in
// utils/board-pair.js (window.BBBoardPair); this file only renders the steps:
//   #/pair:       account check -> preview (board label) -> confirm (group, picker for 2+) -> "Board linked to <group>"
//   #/pair/enter: the short code field, then the same flow.
// Every error page has "Enter a code instead". Long board and group names wrap (overflow-wrap: anywhere).
// Read-only for everything else: no grading, ledger, balances, picks or wagers.
(function () {
  const { useState, useEffect, useRef } = React;
  const P = () => window.BBBoardPair;
  const WRAP = { overflowWrap: "anywhere", wordBreak: "break-word", minWidth: 0 };
  const BTN = { maxWidth: "100%", whiteSpace: "normal" };

  function Actions({ children }) {
    return <div className="flex flex-wrap gap-2 mt-4 bb-pair-actions" style={{ minWidth: 0 }}>{children}</div>;
  }

  function EnterCodePage({ navigate, initialError }) {
    const [code, setCode] = useState("");
    const [err, setErr] = useState(initialError || "");
    const submit = (e) => {
      e.preventDefault();
      const c = P().normalizeCode(code);
      if (!c) { setErr("Enter the code shown on your board."); return; }
      P().setPending(sessionStorage, c);
      navigate("/pair");
    };
    return (
      <form className="card rounded-xl p-4 grid gap-3 bb-pair bb-pair-enter" data-testid="pair-enter" onSubmit={submit} noValidate style={{ minWidth: 0 }}>
        <p className="text-sm muted" style={WRAP}>Type the short code shown on your Bragwire Board to link it to one of your groups.</p>
        <label htmlFor="bb-pair-code" className="font-semibold">Enter code</label>
        <input id="bb-pair-code" type="text" className="chip px-3 py-2 rounded w-full" data-testid="pair-code-input"
          value={code} onChange={(e) => { setCode(e.target.value); setErr(""); }} autoComplete="one-time-code" autoCapitalize="characters"
          spellCheck={false} maxLength={64} inputMode="text" aria-invalid={err ? "true" : "false"} aria-describedby={err ? "bb-pair-code-err" : undefined}
          style={{ boxSizing: "border-box", maxWidth: "100%", textTransform: "uppercase", letterSpacing: "0.08em" }} />
        {err && <p id="bb-pair-code-err" className="text-sm is-error" role="alert" data-testid="pair-code-error">{err}</p>}
        <button type="submit" className="btn px-4 py-2 rounded" data-testid="pair-code-submit" style={BTN}>Continue</button>
      </form>
    );
  }

  function ErrorPage({ kind, onEnterCode, onRetry, onPickGroup, onSignIn, onAccount }) {
    const c = P().copyFor(kind);
    return (
      <section className="card rounded-xl p-4 bb-pair bb-pair-error" data-testid="pair-error" data-kind={kind} role="alert" style={{ minWidth: 0 }}>
        <h3 className="text-lg font-semibold" data-testid="pair-error-title" style={WRAP}>{c.title}</h3>
        <p className="text-sm mt-2" data-testid="pair-error-body" style={WRAP}>{c.body}</p>
        <Actions>
          {onPickGroup && <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-pick-group" style={BTN} onClick={onPickGroup}>Pick another group</button>}
          {onSignIn && <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-signin" style={BTN} onClick={onSignIn}>Sign in</button>}
          {onAccount && <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-account" style={BTN} onClick={onAccount}>Go to My account</button>}
          {onRetry && <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-retry" style={BTN} onClick={onRetry}>Try again</button>}
          <button type="button" className="btn-alt px-4 py-2 rounded" data-testid="pair-enter-code" style={BTN} onClick={onEnterCode}>Enter a code instead</button>
        </Actions>
      </section>
    );
  }

  // mode: "link" (#/pair) | "enter" (#/pair/enter). accountAvailable: null while checking, then true / false.
  // token: the app (handle) session, the same one My boards sends. accountAvailable picks which sign-in page to open.
  function BoardPairPage({ mode, apiBase, token, navigate, accountAvailable, currentGroupCode }) {
    const [st, setSt] = useState({ step: "loading" });   // loading | confirm | claiming | success | error
    const [pick, setPick] = useState("");
    const [nonce, setNonce] = useState(0);
    const live = useRef(true);
    useEffect(() => { live.current = true; return () => { live.current = false; }; }, []);
    const client = () => P().createClient({ apiBase, token: () => token });
    const enterCode = () => { P().clearPending(sessionStorage); navigate("/pair/enter"); };
    // My account sign-in (its Enter <group> opens the app session and lands back on #/pair); without accounts, the
    // handle + PIN sign-in with next=/pair.
    const signIn = (auto) => {
      P().markResume(sessionStorage);
      const to = accountAvailable === true ? "/account/signin" : window.BBRouter.build("signin", null, { next: "/pair" });
      // From the first render's effect the App's route listener may not be subscribed yet: hop on the next tick.
      if (auto === true) setTimeout(() => { if (live.current) navigate(to, { replace: true }); }, 0); else navigate(to);
    };

    useEffect(() => {
      if (mode !== "link" || !P()) return undefined;
      // #/pair?c= opened inside the app (hashchange): keep the code, strip c.
      P().capture(window);
      const c = P().peekPending(sessionStorage);
      if (!c) { navigate("/pair/enter", { replace: true }); return undefined; }
      if (!P().appToken(token)) {
        // Came back from sign-in without an app session: show Sign in instead of redirecting again.
        if (P().resuming(sessionStorage)) { setSt({ step: "error", kind: "signed_out" }); return undefined; }
        if (accountAvailable == null) { setSt({ step: "loading" }); return undefined; }
        signIn(true); return undefined;
      }
      P().takeResume(sessionStorage);
      let on = true;
      setSt({ step: "loading" });
      (async () => {
        const pv = await client().preview(c);
        if (!on) return;
        if (!pv.ok) { setSt({ step: "error", kind: pv.kind }); return; }
        const gs = await client().groups(currentGroupCode);
        if (!on) return;
        if (!gs.ok) { setSt({ step: "error", kind: gs.kind }); return; }
        const groups = gs.groups;
        if (!groups.length) { setSt({ step: "error", kind: "no_groups" }); return; }
        setPick((p) => (groups.some((g) => g.key === p) ? p : groups[0].key));
        setSt({ step: "confirm", board: pv.board, groups });
      })();
      return () => { on = false; };
    }, [mode, apiBase, token, accountAvailable, nonce]); // eslint-disable-line react-hooks/exhaustive-deps

    if (!P()) return <div className="p-4 muted">Board linking failed to load. Please refresh.</div>;
    if (mode === "enter") return <EnterCodePage navigate={navigate} />;

    const link = async () => {
      if (st.step !== "confirm") return;
      const group = st.groups.find((g) => g.key === pick) || st.groups[0];
      const prev = st;
      setSt({ ...st, step: "claiming" });
      const r = await client().claim(P().peekPending(sessionStorage), group.groupCode, group.sendHandle ? group.handle : "");
      if (!live.current) return;
      if (r.ok) {
        P().clearPending(sessionStorage);
        const L = r.linked || {};
        setSt({ step: "success", groupName: L.groupName || group.groupName, boardLabel: L.boardLabel || prev.board.label, handle: L.handle || group.handle });
        return;
      }
      setSt({ step: "error", kind: r.kind, back: prev });
    };

    if (st.step === "loading") return <div className="muted p-4" role="status" data-testid="pair-loading">Loading…</div>;
    if (st.step === "error") {
      const k = st.kind;
      const back = st.back;
      return (
        <ErrorPage kind={k} onEnterCode={enterCode}
          onPickGroup={k === "not_member" && back && back.groups.length > 1 ? () => setSt(back) : null}
          onSignIn={k === "signed_out" ? () => signIn(false) : null}
          onAccount={k === "no_groups" ? () => navigate("/account") : null}
          onRetry={k === "rate_limited" || k === "network" || k === "generic" || k === "unavailable" ? () => (back ? setSt(back) : setNonce((n) => n + 1)) : null} />
      );
    }
    if (st.step === "success") {
      return (
        <section className="card rounded-xl p-4 bb-pair bb-pair-success" data-testid="pair-success" role="status" style={{ minWidth: 0 }}>
          <h3 className="text-lg font-semibold" data-testid="pair-success-title" style={WRAP}>Board linked to {st.groupName}</h3>
          {st.handle && <p className="text-sm mt-2" data-testid="pair-success-handle" style={WRAP}>Owner: {st.handle}</p>}
          <p className="text-sm muted mt-2" style={WRAP}>{st.boardLabel ? st.boardLabel + " switches" : "Your board switches"} over in a few seconds.</p>
          <Actions>
            <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-go-games" style={BTN} onClick={() => navigate("/games")}>Go to Games</button>
          </Actions>
        </section>
      );
    }
    const busy = st.step === "claiming";
    const many = st.groups.length > 1;
    const one = st.groups[0];
    return (
      <section className="card rounded-xl p-4 grid gap-3 bb-pair bb-pair-confirm" data-testid="pair-confirm" style={{ minWidth: 0 }}>
        <div style={{ minWidth: 0 }}>
          <div className="text-sm muted">Board</div>
          <div className="text-lg font-semibold" data-testid="pair-board-label" style={WRAP}>{st.board.label}</div>
        </div>
        {many ? (
          <fieldset className="grid gap-2" data-testid="pair-group-picker" style={{ minWidth: 0, border: 0, padding: 0, margin: 0 }}>
            <legend className="text-sm muted mb-1">Link it to</legend>
            {st.groups.map((g) => (
              <label key={g.key} className="chip rounded px-3 py-2 flex items-center gap-2" data-testid={`pair-group-${g.groupCode}${g.sendHandle ? "-" + g.handle : ""}`} style={{ minWidth: 0, cursor: "pointer" }}>
                <input type="radio" name="bb-pair-group" value={g.key} checked={pick === g.key} disabled={busy}
                  onChange={() => setPick(g.key)} style={{ flex: "0 0 auto" }} />
                <span style={{ ...WRAP, display: "grid" }}>
                  <span>{g.groupName}</span>
                  {g.handle && <span className="text-xs muted" style={WRAP}>as {g.handle}</span>}
                </span>
              </label>
            ))}
          </fieldset>
        ) : (
          <div style={{ minWidth: 0 }}>
            <div className="text-sm muted">Link it to</div>
            <div className="font-semibold" data-testid="pair-group-name" style={WRAP}>{one.groupName}</div>
          </div>
        )}
        <Actions>
          <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-link" disabled={busy} style={BTN} onClick={link}>{busy ? "Linking…" : "Link this board"}</button>
          <button type="button" className="btn-alt px-4 py-2 rounded" data-testid="pair-enter-code" disabled={busy} style={BTN} onClick={enterCode}>Enter a code instead</button>
        </Actions>
      </section>
    );
  }

  window.BBBoardPairUI = { BoardPairPage };
})();