// You > Display > My boards (#/settings/display/my-boards) and Admin > Group admin > Board owners.
// Contract: contracts/ESP32_BOARD_OWNER_GROUP.md (blackbook-api #430). Rules + copy: utils/board-owner.js.
// Pages only, no modals. The group picker lists ONLY the groups[] the server returned for that board; the board
// changes on screen only after the server says 200 (no optimistic switch). Errors show inline on the board's row.
(function () {
  const { useState, useEffect, useCallback } = React;
  const B = () => window.BBBoardOwner;

  function SignInButton({ navigate, next }) {
    if (!navigate) return null;
    return (
      <button type="button" className="btn px-3 py-1 rounded bb-myboards-signin" data-testid="myboards-signin"
        onClick={() => navigate(window.BBRouter ? window.BBRouter.build("signin", null, { next }) : "/signin")}>Sign in</button>
    );
  }

  function BoardRow({ board, apiBase, token, navigate, onSaved }) {
    const BO = B();
    const st = BO.pickerState(board);
    const current = (st.choices.find((c) => c.current) || {}).value || "";
    const [pick, setPick] = useState(current);
    const [busy, setBusy] = useState(false);
    const [note, setNote] = useState(null);  // { kind: "ok" | "error", code, text, signIn }
    useEffect(() => { setPick(current); }, [current]);
    const id = board.id;
    const save = async () => {
      if (!pick || busy) return;
      setBusy(true); setNote(null);
      const r = await BO.request(apiBase, token, "PUT", BO.PATHS.group(id), { group_code: pick });
      setBusy(false);
      if (r.ok) {
        const next = BO.applyGroupResult(board, r.j);
        onSaved(next);
        setNote({ kind: "ok", code: "200", text: BO.savedText(r.j, board) });
      } else {
        setNote({ kind: "error", ...BO.groupError(r.status, r.j) });
        setPick(current);
      }
    };
    const selId = `myboards-group-${id}`;
    return (
      <li className="card rounded-xl p-4 bb-myboards-row" data-testid={`myboard-${id}`} data-board-type={BO.isEsp32(board) ? "esp32" : "pi"}>
        <div className="bb-myboards-head">
          <span className="font-semibold bb-myboards-name" data-testid={`myboard-name-${id}`}>{board.name || `Board ${id}`}</span>
          <span className="chip px-2 py-0.5 rounded small" data-testid={`myboard-type-${id}`}>{BO.typeLabel(board)}</span>
        </div>
        <dl className="bb-myboards-facts text-sm">
          <dt className="muted">Showing</dt>
          <dd data-testid={`myboard-group-name-${id}`}>{BO.groupLabel(board.group_name, board.group_code)}</dd>
          <dt className="muted">Owner</dt>
          <dd data-testid={`myboard-owner-${id}`}>{board.owner_handle || "No owner yet"}</dd>
        </dl>
        <div className="bb-myboards-pick">
          <label htmlFor={selId} className="text-sm muted">Group this board shows</label>
          <div className="bb-myboards-pick-row">
            <select id={selId} className="chip px-3 py-2 rounded bb-myboards-select" data-testid={`myboard-select-${id}`}
              value={pick} disabled={!st.enabled || busy} aria-describedby={st.reason ? `${selId}-why` : undefined}
              onChange={(e) => { setPick(e.target.value); setNote(null); }}>
              {st.choices.length === 0 && <option value="">{BO.groupLabel(board.group_name, board.group_code)}</option>}
              {st.choices.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
            </select>
            <button type="button" className="btn px-4 py-2 rounded" data-testid={`myboard-save-${id}`}
              disabled={!st.enabled || busy || !pick || pick === current} onClick={save}>{busy ? "Saving…" : "Save"}</button>
          </div>
          {st.reason && <p id={`${selId}-why`} className="muted text-xs mt-1" data-testid={`myboard-why-${id}`}>{st.reason}</p>}
        </div>
        {note && (
          <div className={`bb-myboards-note text-sm ${note.kind === "error" ? "is-error" : "is-ok"}`} role={note.kind === "error" ? "alert" : "status"}
            data-testid={note.kind === "error" ? `myboard-error-${id}` : `myboard-saved-${id}`} data-code={note.code}>
            <span>{note.text}</span>
            {note.signIn && <SignInButton navigate={navigate} next="/settings/display/my-boards" />}
          </div>
        )}
      </li>
    );
  }

  function MyBoardsPage({ apiBase, token, navigate }) {
    const BO = B();
    const [st, setSt] = useState({ state: "loading", boards: [], err: null });
    const load = useCallback(async () => {
      if (!token) { setSt({ state: "error", boards: [], err: BO.listError(401) }); return; }
      setSt((s) => ({ ...s, state: s.boards.length ? "ready" : "loading" }));
      const r = await BO.request(apiBase, token, "GET", BO.PATHS.myBoards);
      if (r.ok && r.j && Array.isArray(r.j.boards)) setSt({ state: "ready", boards: r.j.boards, err: null });
      else setSt({ state: "error", boards: [], err: BO.listError(r.status) });
    }, [apiBase, token]); // eslint-disable-line react-hooks/exhaustive-deps
    useEffect(() => { load(); }, [load]);
    const onSaved = (next) => setSt((s) => ({ ...s, boards: s.boards.map((b) => (b.id === next.id ? next : b)) }));
    return (
      <div className="grid gap-3 bb-settings-section-body bb-myboards" data-testid="myboards">
        <p className="muted text-sm">Boards on your account. Pick which of your groups an ESP32 board shows; its board and display settings follow your handle in that group.</p>
        {st.state === "loading" && <div className="muted text-sm" role="status" data-testid="myboards-loading">Loading…</div>}
        {st.state === "error" && st.err && (
          <div className="card rounded-xl p-4 bb-myboards-note is-error text-sm" role="alert" data-testid="myboards-error" data-code={st.err.code}>
            <span>{st.err.text}</span>
            {st.err.signIn ? <SignInButton navigate={navigate} next="/settings/display/my-boards" />
              : <button type="button" className="btn-alt px-3 py-1 rounded" onClick={load}>Try again</button>}
          </div>
        )}
        {st.state === "ready" && st.boards.length === 0 && (
          <div className="card rounded-xl p-4 muted text-sm" data-testid="myboards-empty">No boards on your account yet.</div>
        )}
        {st.state === "ready" && st.boards.length > 0 && (
          <ul className="grid gap-3 bb-myboards-list" data-testid="myboards-list">
            {st.boards.map((b) => <BoardRow key={b.id} board={b} apiBase={apiBase} token={token} navigate={navigate} onSaved={onSaved} />)}
          </ul>
        )}
      </div>
    );
  }

  // Admin > Group admin: set an ESP32 board's owner by handle. Rendered only for admins (isAdmin) and only boards the
  // server lists for this admin (GET /admin/fleet/bench is scoped to the admin's group). Pi rows: field off (the Pi's
  // owner follows its handle claim) and a 409 from the server is shown inline the same way.
  function OwnerRow({ row, apiBase, token, onSaved }) {
    const BO = B();
    const [handle, setHandle] = useState("");
    const [busy, setBusy] = useState(false);
    const [note, setNote] = useState(null);
    const isPi = row.type === "pi";
    const id = row.id;
    const save = async (e) => {
      if (e) e.preventDefault();
      if (busy || isPi) return;
      const h = handle.trim();
      if (!h) { setNote({ kind: "error", ...BO.ownerError(400, { detail: "handle required" }) }); return; }
      setBusy(true); setNote(null);
      const r = await BO.request(apiBase, token, "PUT", BO.PATHS.owner(id), { handle: h });
      setBusy(false);
      if (r.ok) {
        onSaved(id, r.j.owner_handle || h);
        setHandle("");
        setNote({ kind: "ok", code: "200", text: r.j.changed === false ? `${r.j.owner_handle || h} already owns this board.` : `Saved. ${r.j.owner_handle || h} owns this board now.` });
      } else {
        setNote({ kind: "error", ...BO.ownerError(r.status, r.j) });
      }
    };
    const inputId = `board-owner-input-${id}`;
    return (
      <li className="bb-owner-row" data-testid={`board-owner-${id}`} data-board-type={row.type || "unknown"}>
        <div className="bb-myboards-head">
          <span className="font-semibold">{row.name}</span>
          <span className="chip px-2 py-0.5 rounded small">{row.type === "esp32" ? "ESP32" : row.type === "pi" ? "Pi" : "Board"}</span>
        </div>
        <div className="text-sm"><span className="muted">Owner: </span><span data-testid={`board-owner-current-${id}`}>{row.owner_handle || "No owner yet"}</span></div>
        {isPi ? (
          <p className="muted text-xs" data-testid={`board-owner-pi-${id}`}>A Pi's owner follows the handle it's signed in with, so it can't be changed here.</p>
        ) : (
          <form className="bb-myboards-pick-row" onSubmit={save}>
            <label htmlFor={inputId} className="sr-only">Owner handle for {row.name}</label>
            <input id={inputId} type="text" className="chip px-3 py-2 rounded bb-owner-input" data-testid={`board-owner-input-${id}`}
              placeholder="Member's handle" autoComplete="off" autoCapitalize="none" spellCheck={false} value={handle}
              onChange={(e) => { setHandle(e.target.value); setNote(null); }} />
            <button type="submit" className="btn px-4 py-2 rounded" data-testid={`board-owner-save-${id}`} disabled={busy}>{busy ? "Saving…" : "Set owner"}</button>
          </form>
        )}
        {note && (
          <div className={`bb-myboards-note text-sm ${note.kind === "error" ? "is-error" : "is-ok"}`} role={note.kind === "error" ? "alert" : "status"}
            data-testid={note.kind === "error" ? `board-owner-error-${id}` : `board-owner-saved-${id}`} data-code={note.code}>{note.text}</div>
        )}
      </li>
    );
  }

  function BoardOwnersCard({ apiBase, token, isAdmin }) {
    const BO = B();
    const [st, setSt] = useState({ state: "loading", rows: [] });
    const load = useCallback(async () => {
      if (!isAdmin || !token) return;
      const [bench, esp] = await Promise.all([
        BO.request(apiBase, token, "GET", BO.PATHS.bench),
        BO.request(apiBase, token, "GET", BO.PATHS.esp32),
      ]);
      if (!bench.ok && !esp.ok) { setSt({ state: "hidden", rows: [], status: bench.status }); return; }
      const rows = BO.adminBoards(bench.ok ? bench.j.devices : [], esp.ok ? esp.j.boards : null);
      setSt({ state: "ready", rows });
    }, [apiBase, token, isAdmin]); // eslint-disable-line react-hooks/exhaustive-deps
    useEffect(() => { load(); }, [load]);
    if (!isAdmin) return null;
    const onSaved = (id, h) => setSt((s) => ({ ...s, rows: s.rows.map((r) => (r.id === id ? { ...r, owner_handle: h } : r)) }));
    return (
      <section className="card rounded-xl p-4 mt-4 bb-board-owners" data-testid="board-owners" aria-labelledby="board-owners-title">
        <h3 id="board-owners-title" className="font-semibold text-lg">Board owners</h3>
        <p className="muted text-xs mt-1 mb-3">An ESP32 board shows its owner's group and display settings. Set the owner to an active member of this group by handle.</p>
        {st.state === "loading" && <div className="muted text-sm" role="status">Loading…</div>}
        {st.state === "hidden" && <div className="muted text-sm" role="status" data-testid="board-owners-error">Couldn't load this group's boards.</div>}
        {st.state === "ready" && st.rows.length === 0 && <div className="muted text-sm" data-testid="board-owners-empty">No boards in this group yet.</div>}
        {st.state === "ready" && st.rows.length > 0 && (
          <ul className="grid gap-3 bb-owner-list" data-testid="board-owners-list">
            {st.rows.map((r) => <OwnerRow key={r.id} row={r} apiBase={apiBase} token={token} onSaved={onSaved} />)}
          </ul>
        )}
      </section>
    );
  }

  window.BBMyBoards = { MyBoardsPage, BoardOwnersCard };
})();