// You > Display > Wall (owner wall editor) and the "Add next tile" step on the pairing success screen.
// Rules, copy and the API client: utils/board-wall.js (window.BBBoardWall); grid model: shared/wall-grid.js wallGridModel (shared with api/esp32/client.js).
// Behind the esp32Walls flag (GET /api/config, off by default; the server's BB_ESP32_WALLS): with it off, nothing here renders and no wall request is made.
// Pages / inline only, no modals. The grid map looks like the physical wall (one numbered cell per 128x64 board) and
// always fits the screen width, whatever the column count (1..16): nothing scrolls sideways, nothing is cut off.
// Tapping a cell (or its "Pick board" button in the cell list below) opens the picker page in place of the editor:
// full board names, wrapped. A board can be in only one cell: picking one already placed moves it, with a note.
// Read-only for everything else: no grading, ledger, balances, picks or wagers.
(function () {
  const { useState, useEffect, useRef } = React;
  const W = () => window.BBBoardWall;
  const WRAP = { overflowWrap: "anywhere", wordBreak: "break-word", minWidth: 0 };
  const BTN = { maxWidth: "100%", whiteSpace: "normal" };
  const cellNo = (cell, cols) => cell.row * cols + cell.col + 1;

  // true / false once /api/config answers; false while checking (fail closed).
  function useWallFlag() {
    const [on, setOn] = useState(false);
    useEffect(() => {
      let live = true;
      if (!W() || !window.BBWallGrid) return undefined;
      W().loadFlag().then((v) => { if (live) setOn(v === true); });
      return () => { live = false; };
    }, []);
    return on;
  }

  function Note({ kind, children, testid }) {
    if (!children) return null;
    return (
      <p className={`text-sm mt-2 bb-wall-note ${kind === "error" ? "is-error" : "is-ok"}`} role={kind === "error" ? "alert" : "status"}
        data-testid={testid} style={WRAP}>{children}</p>
    );
  }

  function SideInput({ label, value, onChange, testid, disabled, max }) {
    return (
      <label className="text-sm grid gap-1" style={{ minWidth: 0 }}>
        <span className="muted">{label}</span>
        <input type="number" inputMode="numeric" min={1} max={max} step={1} className="chip px-3 py-2 rounded" data-testid={testid}
          value={value} disabled={disabled} onChange={(e) => onChange(e.target.value)} aria-label={label}
          style={{ width: "100%", maxWidth: "7rem", boxSizing: "border-box" }} />
      </label>
    );
  }

  // The grid map: one numbered square per board, shrinking to fit the width (16 columns still fit at 320px).
  function GridMap({ cells, rows, cols, names, onOpen }) {
    const fs = cols <= 4 ? 13 : cols <= 8 ? 11 : 9;
    const gap = cols > 10 ? 2 : 4;
    // Narrowest cell at 360px (card content ~260px): a number only shows when every digit fits; otherwise the cell is
    // a plain square (its number, row and column are in its label and in the list below), so nothing is ever cut off.
    const minCellW = (260 - gap * (cols - 1)) / cols;
    const fits = (n) => String(n).length * fs * 0.62 + 2 <= minCellW;
    return (
      <div className="bb-wall-grid mt-3" data-testid="wall-table" role="group" aria-label="Wall layout"
        style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap, width: "100%", maxWidth: "100%", boxSizing: "border-box", minWidth: 0 }}>
        {cells.map((c) => {
          const name = c.device_id != null ? (names[String(c.device_id)] || "Board " + c.device_id) : "";
          const filled = c.device_id != null;
          return (
            <button type="button" key={c.row + "-" + c.col} className="bb-wall-cell rounded" data-testid={`wall-cell-${c.row}-${c.col}`}
              data-board={filled ? String(c.device_id) : ""} aria-label={`Cell ${cellNo(c, cols)}, row ${c.row + 1}, column ${c.col + 1}: ${name || "Empty"}`}
              onClick={() => onOpen(c)}
              style={{ minWidth: 0, width: "100%", aspectRatio: "2 / 1", padding: 0, margin: 0, boxSizing: "border-box", overflow: "hidden", fontSize: fs, lineHeight: 1,
                fontWeight: 600, cursor: "pointer", border: "1px solid var(--bb-border, rgba(127,127,127,.45))",
                background: filled ? "var(--bb-accent, #10b981)" : "transparent", color: filled ? "#04130d" : "inherit" }}>
              {fits(cellNo(c, cols)) ? cellNo(c, cols) : null}
            </button>
          );
        })}
      </div>
    );
  }

  // The cell list under the map: every cell's full board name (wrapped, never cut), Pick board, Identify, Place here.
  function CellRow({ cell, cols, names, onOpen, onIdentify, identifyBusy, canPlace, onPlace }) {
    const cur = cell.device_id;
    const name = cur != null ? (names[String(cur)] || "Board " + cur) : "";
    return (
      <li className="bb-wall-cellrow" data-testid={`wall-cellrow-${cell.row}-${cell.col}`} data-board={cur == null ? "" : String(cur)}
        style={{ minWidth: 0, padding: "8px 0", borderTop: "1px solid var(--bb-border, rgba(127,127,127,.25))", listStyle: "none" }}>
        <div className="text-xs muted" style={WRAP}>Cell {cellNo(cell, cols)} · row {cell.row + 1}, column {cell.col + 1}</div>
        <div className="font-semibold text-sm bb-wall-cell-name" data-testid={`wall-cell-name-${cell.row}-${cell.col}`} style={WRAP}>{name || "Empty"}</div>
        <div className="flex flex-wrap gap-2 mt-1" style={{ minWidth: 0 }}>
          <button type="button" className="btn-alt rounded text-sm" data-testid={`wall-pick-${cell.row}-${cell.col}`} data-value={cur == null ? "" : String(cur)}
            style={{ ...BTN, padding: "4px 10px" }} onClick={() => onOpen(cell)}>{cur == null ? "Pick board" : "Change"}</button>
          {cur != null && <button type="button" className="btn-alt rounded text-sm" data-testid={`wall-identify-${cell.row}-${cell.col}`} disabled={identifyBusy}
            style={{ ...BTN, padding: "4px 10px" }} onClick={() => onIdentify(cur)}>Identify</button>}
          {canPlace && cur == null && <button type="button" className="btn rounded text-sm" data-testid={`wall-place-${cell.row}-${cell.col}`}
            style={{ ...BTN, padding: "4px 10px" }} onClick={() => onPlace(cell)}>Place here</button>}
        </div>
      </li>
    );
  }

  // The picker page for one cell (shown in place of the editor, no modal): Empty + the owner's boards in the wall's
  // group, full names wrapped. A board on another of the owner's walls is greyed out (one wall per board); a board
  // elsewhere on THIS wall says where it is and moves here when picked.
  function Picker({ cell, cols, boards, names, cells, walls, wallId, wallName, onPick, onBack }) {
    const B = W();
    const cur = cell.device_id;
    const listed = boards.some((b) => String(b.id) === String(cur));
    const opt = (testid, value, title, sub, disabled, selected) => (
      <li key={testid} style={{ listStyle: "none", minWidth: 0 }}>
        <button type="button" className="btn-alt rounded mt-2" data-testid={testid} data-value={value} disabled={disabled}
          aria-pressed={selected ? "true" : "false"} onClick={() => onPick(cell, value)}
          style={{ ...BTN, display: "block", width: "100%", textAlign: "left", padding: "8px 12px", boxSizing: "border-box", ...WRAP,
            border: selected ? "2px solid var(--brand)" : undefined, opacity: disabled ? 0.6 : 1 }}>
          <span style={{ display: "block", width: "100%", minWidth: 0 }}>
            <span className="font-semibold" style={{ display: "block", ...WRAP }}>{selected ? "✓ " : ""}{title}</span>
            {sub && <span className="text-xs muted" style={{ display: "block", ...WRAP }}>{sub}</span>}
          </span>
        </button>
      </li>
    );
    return (
      <div className="mt-3" data-testid="wall-picker" data-cell={`${cell.row}-${cell.col}`} style={{ minWidth: 0 }}>
        <button type="button" className="btn-alt px-3 py-2 rounded" data-testid="wall-picker-back" style={BTN} onClick={onBack}>‹ Back to the wall</button>
        <h4 className="font-semibold mt-3" style={WRAP}>Pick a board for cell {cellNo(cell, cols)}</h4>
        <p className="muted text-sm" style={WRAP}>Row {cell.row + 1}, column {cell.col + 1}{wallName ? ` of ${wallName}` : ""}. Now: {cur != null ? (names[String(cur)] || "Board " + cur) : "Empty"}</p>
        <ul data-testid="wall-picker-options" style={{ padding: 0, margin: 0, minWidth: 0 }}>
          {opt("wall-option-empty", "", "Empty", "No board in this cell", false, cur == null)}
          {cur != null && !listed && opt(`wall-option-${cur}`, String(cur), names[String(cur)] || "Board " + cur, "In this cell now", false, true)}
          {boards.map((b) => {
            const at = B.whereIs(cells, b.id);
            const here = at && at.row === cell.row && at.col === cell.col;
            const other = B.otherWallOf(walls, wallId, b.id);
            const sub = other ? `On ${other.name || "another wall"}` : here ? "In this cell now" : at ? `Now in cell ${cellNo(at, cols)} (row ${at.row + 1}, column ${at.col + 1}); picking moves it here` : "";
            return opt(`wall-option-${b.id}`, String(b.id), B.boardName(b), sub, !!other, !!here);
          })}
        </ul>
      </div>
    );
  }

  function WallSection({ apiBase, token, navigate, currentGroupCode }) {
    const on = useWallFlag();
    if (!on) return null;
    return <WallEditor apiBase={apiBase} token={token} navigate={navigate} currentGroupCode={currentGroupCode} />;
  }

  function WallEditor({ apiBase, token, navigate, currentGroupCode }) {
    const B = W();
    const client = () => B.createClient({ apiBase, token: () => token });
    const curGroup = currentGroupCode || (() => { try { return localStorage.getItem("bb_group_code") || ""; } catch (e) { return ""; } })();
    const [st, setSt] = useState({ step: "loading" });     // loading | ready | error
    const [walls, setWalls] = useState([]);
    const [caps, setCaps] = useState(B.CAPS);
    const [boards, setBoards] = useState([]);
    const [groups, setGroups] = useState([]);
    const [sel, setSel] = useState(-1);                     // index into walls; -1 = new (unsaved) wall
    const [draft, setDraft] = useState(null);
    const [size, setSize] = useState({ rows: "1", cols: "2" });
    const [note, setNote] = useState(null);                 // {kind, text}
    const [busy, setBusy] = useState("");                   // save | delete
    const [confirmDel, setConfirmDel] = useState(false);
    const [dirty, setDirty] = useState(false);
    const [ident, setIdent] = useState(null);               // {kind, text}
    const [identBusy, setIdentBusy] = useState(false);
    const [placeId, setPlaceId] = useState(() => B.peekPlace(sessionStorage));
    const [picking, setPicking] = useState(null);           // the cell whose picker page is open, else null
    const live = useRef(true);
    const timer = useRef(null);
    useEffect(() => () => { live.current = false; clearTimeout(timer.current); }, []);

    const showWall = (w, i) => { setPicking(null); setSel(i); setDraft(w); setSize({ rows: String(w.rows), cols: String(w.cols) }); setDirty(false); setConfirmDel(false); };
    const newWall = (gs) => {
      const g = (gs || groups)[0];
      const w = { id: null, name: "", group_code: g ? g.code : "", rows: 1, cols: 2, cells: B.cellsOf({ rows: 1, cols: 2 }), names: {} };
      setPicking(null); setSel(-1); setDraft(w); setSize({ rows: "1", cols: "2" }); setDirty(true); setConfirmDel(false);
    };
    useEffect(() => {
      let ok = true;
      setSt({ step: "loading" });
      Promise.all([client().list(), client().boards(), client().groups()]).then(([l, b, g]) => {
        if (!ok || !live.current) return;
        if (!l.ok) { setSt({ step: "error", kind: l.kind }); return; }
        const bs = b.ok ? b.boards : [];
        const gs = B.groupChoices(g.groups, bs, curGroup);
        setBoards(bs); setGroups(gs); setWalls(l.walls); setCaps(l.caps);
        if (l.walls[0]) showWall(l.walls[0], 0); else newWall(gs);
        setSt({ step: "ready" });
      });
      return () => { ok = false; };
    }, [apiBase, token]); // eslint-disable-line react-hooks/exhaustive-deps

    const names = {};
    walls.concat(draft ? [draft] : []).forEach((w) => Object.assign(names, w.names || {}));
    boards.forEach((b) => { names[String(b.id)] = B.boardName(b); });
    const groupBoards = draft ? B.boardsInGroup(boards, draft.group_code) : [];
    const groupName = (code) => { const g = groups.find((x) => String(x.code).toLowerCase() === String(code || "").toLowerCase()); return g ? g.name : code; };
    const placeName = placeId != null ? (names[String(placeId)] || "your new board") : "";
    const canPlace = placeId != null && groupBoards.some((b) => String(b.id) === String(placeId)) && !B.otherWallOf(walls, draft && draft.id, placeId);

    const hold = (secs, msg) => {
      setIdentBusy(true); setIdent(msg);
      clearTimeout(timer.current);
      timer.current = setTimeout(() => { if (live.current) { setIdentBusy(false); setIdent(null); } }, secs * 1000);
    };
    const identifyDone = (r, which, count) => {
      if (!live.current) return;
      if (r.ok) { hold(r.seconds || B.IDENTIFY_SECONDS, { kind: "ok", text: B.identifyStatus(count) }); return; }
      if (r.kind === "rate_limited" && r.retryAfter > 0) { hold(r.retryAfter, { kind: "error", text: B.errorText(r.kind, which, r.retryAfter) }); return; }
      setIdentBusy(false);
      setIdent({ kind: "error", text: B.errorText(r.kind, which, r.retryAfter) });
    };
    const identifyAll = async () => {
      if (identBusy) return;
      setIdentBusy(true); setIdent(null);
      const r = await client().identifyAll(draft.group_code);
      identifyDone(r, "identify_all", r.ok ? r.boards.length : null);
    };
    const identifyOne = async (id) => {
      if (identBusy) return;
      setIdentBusy(true); setIdent(null);
      identifyDone(await client().identifyBoard(id), "identify", 1);
    };

    const backToCell = (cell) => {
      setPicking(null);
      setTimeout(() => {
        const el = cell && document.querySelector(`[data-testid=wall-cellrow-${cell.row}-${cell.col}]`);
        if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
      }, 0);
    };
    const pick = (cell, value) => {
      const r = B.assignCell(draft.cells, cell.row, cell.col, value === "" ? null : value);
      setDraft({ ...draft, cells: r.cells }); setDirty(true);
      setNote(r.moved ? { kind: "ok", text: B.movedText(names[String(value)] || "That board", r.moved) } : null);
      backToCell(cell);
    };
    const place = (cell) => {
      const r = B.assignCell(draft.cells, cell.row, cell.col, placeId);
      setDraft({ ...draft, cells: r.cells }); setDirty(true);
      B.clearPlace(sessionStorage); setPlaceId(null);
      setNote({ kind: "ok", text: (r.moved ? B.movedText(placeName, r.moved) + " " : `Placed ${placeName} at ${B.cellLabel(cell)}. `) + "Tap Save wall to keep it." });
    };
    const applySize = () => {
      const r = B.resize(draft, size.rows, size.cols, caps);
      setDraft(r.wall); setSize({ rows: String(r.wall.rows), cols: String(r.wall.cols) }); setDirty(true);
      const c = B.clearedText(r.cleared, names);
      setNote({ kind: "ok", text: (c ? c + " " : "") + `Now ${r.wall.rows} × ${r.wall.cols}. Tap Save wall to keep it.` });
    };
    const setGroup = (code) => {
      // Boards must show the wall's group: switching groups clears the cells.
      setDraft({ ...draft, group_code: code, cells: B.cellsOf({ rows: draft.rows, cols: draft.cols }) }); setDirty(true);
      setNote(draft.cells.some((c) => c.device_id != null) ? { kind: "ok", text: "Cells cleared: a wall only uses boards that show its group." } : null);
    };
    const save = async () => {
      setBusy("save"); setNote(null);
      const isNew = draft.id == null;
      const r = isNew ? await client().create(draft, caps) : await client().save(draft, caps);
      if (!live.current) return;
      setBusy("");
      if (!r.ok) { setNote({ kind: "error", text: B.errorText(r.kind, "wall", r.retryAfter) }); return; }
      const w = r.wall;
      const next = walls.slice();
      const i = isNew ? next.length : sel;
      next[i] = w; setWalls(next); showWall(w, i);
      setNote({ kind: "ok", text: isNew ? "Wall created." : "Wall saved." });
    };
    const del = async () => {
      if (draft.id == null) { setConfirmDel(false); if (walls[0]) showWall(walls[0], 0); else newWall(); setNote(null); return; }
      setBusy("delete"); setNote(null);
      const r = await client().remove(draft.id);
      if (!live.current) return;
      setBusy("");
      if (!r.ok && r.kind !== "not_found") { setConfirmDel(false); setNote({ kind: "error", text: B.errorText(r.kind) }); return; }
      const next = walls.filter((_, i) => i !== sel);
      setWalls(next);
      if (next[0]) showWall(next[0], 0); else newWall();
      setConfirmDel(false);
      setNote({ kind: "ok", text: "Wall deleted." });
    };

    const model = draft ? B.gridModel(draft) : null;
    const placed = draft ? draft.cells.filter((c) => c.device_id != null).length : 0;
    const sizeChanged = draft && (String(size.rows) !== String(draft.rows) || String(size.cols) !== String(draft.cols));
    const isNew = draft && draft.id == null;
    const atMax = walls.length >= caps.max_walls;

    return (
      <section className="card rounded-xl p-4 bb-wall" data-testid="wall-section" aria-label="Wall" style={{ minWidth: 0, maxWidth: "100%", overflow: "hidden", boxSizing: "border-box" }}>
        <h3 className="font-semibold text-lg">Wall</h3>
        <p className="muted text-sm mt-1" style={WRAP}>Each board is one 128x64 panel. Put boards side by side in a grid to make one bigger display.</p>
        {placeId != null && st.step === "ready" && <p className="text-sm mt-2 bb-wall-note is-ok" data-testid="wall-place-note" role="status" style={WRAP}>
          {canPlace ? `Pick an empty cell for ${placeName}, then tap Save wall.` : `${placeName} isn't in this wall's group. Pick a wall for its group.`}
          {" "}<button type="button" className="btn-alt rounded text-xs" data-testid="wall-place-cancel" style={{ ...BTN, padding: "2px 8px" }}
            onClick={() => { B.clearPlace(sessionStorage); setPlaceId(null); }}>Not now</button></p>}
        {st.step === "loading" && <div className="muted text-sm mt-2" role="status" data-testid="wall-loading">Loading…</div>}
        {st.step === "error" && (
          <div>
            <Note kind="error" testid="wall-load-error">{B.errorText(st.kind)}</Note>
            {st.kind === "signed_out" && navigate && <button type="button" className="btn px-4 py-2 rounded mt-2" style={BTN}
              onClick={() => navigate(window.BBRouter ? window.BBRouter.build("signin", null, { next: "/settings/display" }) : "/signin")}>Sign in</button>}
          </div>
        )}
        {st.step === "ready" && !boards.length && <p className="muted text-sm mt-2" data-testid="wall-no-boards" style={WRAP}>Link a Bragwire Board first. Then you can add it to a wall.</p>}
        {st.step === "ready" && draft && picking && (
          <Picker cell={draft.cells.find((c) => c.row === picking.row && c.col === picking.col) || picking} cols={draft.cols} boards={groupBoards}
            names={names} cells={draft.cells} walls={walls} wallId={draft.id} wallName={draft.name} onPick={pick} onBack={() => backToCell(picking)} />
        )}
        {st.step === "ready" && !picking && walls.length > 0 && (
          <div className="text-sm mt-3" style={{ minWidth: 0 }}>
            <span className="muted">Wall</span>
            {/* A wrapping list of full names, not a select: a long wall name is never cut off. */}
            <ul data-testid="wall-select" aria-label="Wall" data-value={String(sel)} style={{ display: "flex", flexWrap: "wrap", gap: 6, padding: 0, margin: "4px 0 0", minWidth: 0 }}>
              {walls.map((w, i) => (
                <li key={w.id != null ? w.id : i} style={{ listStyle: "none", minWidth: 0, maxWidth: "100%" }}>
                  <button type="button" className="chip px-3 py-2 rounded" data-testid={`wall-choose-${i}`} aria-pressed={String(sel) === String(i) ? "true" : "false"}
                    style={{ ...BTN, ...WRAP, textAlign: "left", fontWeight: String(sel) === String(i) ? 700 : 400, border: String(sel) === String(i) ? "2px solid var(--brand)" : undefined }}
                    onClick={() => { showWall(walls[i], i); setNote(null); }}>{w.name || `Wall ${i + 1}`}</button>
                </li>
              ))}
              {(isNew || !atMax) && (
                <li style={{ listStyle: "none" }}>
                  <button type="button" className="chip px-3 py-2 rounded" data-testid="wall-choose-new" aria-pressed={String(sel) === "-1" ? "true" : "false"}
                    style={{ ...BTN, fontWeight: String(sel) === "-1" ? 700 : 400, border: String(sel) === "-1" ? "2px solid var(--brand)" : undefined }}
                    onClick={() => { newWall(); setNote(null); }}>+ New wall</button>
                </li>
              )}
            </ul>
          </div>
        )}
        {st.step === "ready" && draft && !picking && (
          <div className="mt-3" data-testid="wall-editor" data-new={isNew ? "1" : "0"} style={{ minWidth: 0 }}>
            <label className="text-sm grid gap-1" style={{ minWidth: 0 }}>
              <span className="muted">Wall name</span>
              <input type="text" className="chip px-3 py-2 rounded" data-testid="wall-name" value={draft.name} maxLength={caps.name_max} placeholder="My wall"
                onChange={(e) => { setDraft({ ...draft, name: e.target.value }); setDirty(true); }} style={{ width: "100%", boxSizing: "border-box" }} />
            </label>
            {isNew && groups.length > 1 ? (
              <label className="text-sm grid gap-1 mt-3" style={{ minWidth: 0 }}>
                <span className="muted">Group</span>
                <select className="chip px-3 py-2 rounded" data-testid="wall-group" value={draft.group_code} style={{ maxWidth: "100%" }}
                  onChange={(e) => setGroup(e.target.value)}>
                  {groups.map((g) => <option key={g.code} value={g.code}>{g.name}</option>)}
                </select>
              </label>
            ) : (
              <div className="text-sm mt-3" style={WRAP}><span className="muted">Group: </span><span data-testid="wall-group-name">{groupName(draft.group_code) || "None"}</span></div>
            )}
            <div className="flex flex-wrap gap-3 items-end mt-3" style={{ minWidth: 0 }}>
              <SideInput label="Rows" value={size.rows} max={caps.max_rows} onChange={(v) => setSize({ ...size, rows: v })} testid="wall-rows" />
              <SideInput label="Columns" value={size.cols} max={caps.max_cols} onChange={(v) => setSize({ ...size, cols: v })} testid="wall-cols" />
              <button type="button" className="btn-alt px-3 py-2 rounded" data-testid="wall-resize" disabled={!sizeChanged} style={BTN} onClick={applySize}>Resize</button>
            </div>
            <div className="muted text-xs mt-2" data-testid="wall-summary" style={WRAP}>{model.phrase} · {model.logical_width}x{model.logical_height}</div>
            <div className="flex flex-wrap gap-2 items-center mt-3" style={{ minWidth: 0 }}>
              <button type="button" className="btn-alt px-3 py-2 rounded" data-testid="wall-identify-all" disabled={identBusy || !groupBoards.length} style={BTN}
                onClick={identifyAll}>{identBusy ? "Showing names…" : "Identify screens"}</button>
              <span className="muted text-xs" style={WRAP}>Every board in this group shows its name for {caps.identify_s} seconds.</span>
            </div>
            <Note kind={ident && ident.kind} testid="wall-identify-status">{ident && ident.text}</Note>
            <GridMap cells={draft.cells} rows={draft.rows} cols={draft.cols} names={names} onOpen={(c) => setPicking({ row: c.row, col: c.col })} />
            <ul className="bb-wall-cells mt-2" data-testid="wall-cells" aria-label="Cells" style={{ padding: 0, margin: 0, minWidth: 0 }}>
              {draft.cells.map((c) => (
                <CellRow key={c.row + "-" + c.col} cell={c} cols={draft.cols} names={names} onOpen={(x) => setPicking({ row: x.row, col: x.col })}
                  onIdentify={identifyOne} identifyBusy={identBusy} canPlace={canPlace} onPlace={place} />
              ))}
            </ul>
            <div className="muted text-xs mt-1" style={WRAP}>{placed} of {draft.rows * draft.cols} cells have a board.{draft.group_code && !groupBoards.length ? " None of your boards show this group yet." : ""}</div>
            <Note kind={note && note.kind} testid="wall-note">{note && note.text}</Note>
            <div className="flex flex-wrap gap-2 mt-3" style={{ minWidth: 0 }}>
              <button type="button" className="btn px-4 py-2 rounded" data-testid="wall-save" disabled={!!busy || !dirty || !draft.name.trim() || !draft.group_code} style={BTN}
                onClick={save}>{busy === "save" ? "Saving…" : isNew ? "Create wall" : "Save wall"}</button>
              {!confirmDel && <button type="button" className="btn-alt px-4 py-2 rounded" data-testid="wall-delete" disabled={!!busy} style={BTN}
                onClick={() => (isNew ? del() : setConfirmDel(true))}>{isNew ? "Cancel" : "Delete wall"}</button>}
            </div>
            {isNew && atMax && <p className="muted text-xs mt-2" style={WRAP}>You have the most walls allowed ({caps.max_walls}).</p>}
            {confirmDel && (
              <div className="bb-wall-note text-sm mt-3" role="group" aria-label="Delete wall" data-testid="wall-delete-confirm" style={WRAP}>
                <p style={WRAP}>Delete {draft.name || "this wall"}? Each board goes back to showing on its own.</p>
                <div className="flex flex-wrap gap-2 mt-2">
                  <button type="button" className="btn px-4 py-2 rounded" data-testid="wall-delete-yes" disabled={busy === "delete"} style={BTN} onClick={del}>{busy === "delete" ? "Deleting…" : "Delete wall"}</button>
                  <button type="button" className="btn-alt px-4 py-2 rounded" data-testid="wall-delete-no" disabled={busy === "delete"} style={BTN} onClick={() => setConfirmDel(false)}>Cancel</button>
                </div>
              </div>
            )}
          </div>
        )}
      </section>
    );
  }

  // Pairing success (components/BoardPair.jsx), flag on: place the just-linked board in a wall cell, or link another.
  function AddNextTile({ boardId, navigate }) {
    const on = useWallFlag();
    if (!on) return null;
    return (
      <div className="mt-4 bb-wall-next" data-testid="pair-next-tile" style={{ minWidth: 0 }}>
        <h4 className="font-semibold">Add next tile</h4>
        <p className="text-sm muted mt-1" style={WRAP}>Each board is one 128x64 panel. Place this one in a Wall cell, or link another board.</p>
        <div className="flex flex-wrap gap-2 mt-2" style={{ minWidth: 0 }}>
          <button type="button" className="btn px-4 py-2 rounded" data-testid="pair-place-wall" style={BTN}
            onClick={() => { W().setPlace(sessionStorage, boardId); navigate("/settings/display"); }}>Place in a wall</button>
          <button type="button" className="btn-alt px-4 py-2 rounded" data-testid="pair-another" style={BTN}
            onClick={() => navigate("/pair/enter")}>Link another board</button>
        </div>
      </div>
    );
  }

  window.BBBoardWallUI = { WallSection, AddNextTile, useWallFlag };
})();