import {
  html, useState, useEffect, useCallback, useMemo, useRef,
} from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { ask } from './ask.js';
import { Icon } from './icon.js';
import { CollapsibleSection, ToggleSwitch } from './settings-ui.js';
import { hubFetch, navigate } from './hub-client.js';
import { availableApps, configurableApps } from './apps.js';
import * as platform from './platform.js';
import { inviteLinkHere, nodePkForLink } from './invite-link.js';

// The account preference behind the "send by e-mail" box. The hub's
// ALLOWED_PREF_KEYS must list it, or every toggle snaps back.
export const INVITE_EMAIL_PREF = 'invite_email';

// How many times the settings page asks the node on this machine before it
// decides there is none. One ask is a 3 s `node:detect`, and a node busy
// indexing a large root can miss it: a single miss used to hide "Add a
// directory" until the page was reloaded. Found live, by a tester adding a
// sixth directory while the others were still indexing.
const NODE_CHECK_ATTEMPTS = 4;
const NODE_CHECK_DELAY_MS = 2000;

/**
 * What the node on this machine says about `groupId`: `{ group }`, with
 * `group` null when that node does not host it, or null when no node answers.
 * A miss is asked again; a machine with no node set up at all is not.
 */
async function readLocalNode(node, groupId, attempts = NODE_CHECK_ATTEMPTS,
                             delayMs = NODE_CHECK_DELAY_MS) {
  for (let i = 0; i < attempts; i++) {
    if (i) await new Promise(r => setTimeout(r, delayMs));
    try {
      const detect = await node.detect();
      if (!detect.detected) {
        if (!detect.configured) return null;
        continue;
      }
      const data = await node.op('groups');
      return { group: (data.groups || []).find(g => g.id === groupId) || null };
    } catch { /* busy, or mid-reload: ask again */ }
  }
  return null;
}

// ── Shared Directories Table ────────────────────────────────────────────

// How often the table asks its node what it could not read.
const TROUBLE_POLL_MS = 10000;

/**
 * A group's root directories, and the operator's controls over them.
 *
 * One component, two modes, because the Create Group wizard and the Settings
 * page were drifting apart while showing the same thing:
 *
 *   mode="live"   — a hosted group. What widens the node's sharing — adding
 *                   a directory, its `writable` and `removable` switches — goes
 *                   through the loopback API only, so only on the node's own
 *                   machine. Removing, ejecting, plugging, pausing and
 *                   resuming are signed ops over MNP, or the loopback API when
 *                   there is no connection.
 *   mode="local"  — the wizard, before the group exists. Changes are held in
 *                   an array the caller owns; nothing is persisted until the
 *                   group is attached.
 *
 * **The list is shown wherever the operator is.** They may be signing in from
 * any browser, and the only thing that reaches their node from there is MNP.
 * An earlier version of this read its roots exclusively from the loopback API,
 * which resolves to "not available" in a browser — so the section rendered for
 * nobody on the web. `mnpRoots` is the source whenever a connection exists; the
 * loopback list is the fallback for a local node that is not currently
 * connected (a group still scanning, say). From a browser the table is read
 * only where it would widen anything (MNP 6.0).
 *
 * Props:
 *   roots          — the node's current roots: { name, path, writable,
 *                    removable, ejected, paused, available, kind }
 *   groupId        — the group id
 *   transport      — MeshBayTransport instance, or null when not connected
 *   signFn         — signing function for admin ops
 *   nodeDetected   — whether the loopback node API answers
 *   onRootsChange  — called after a change, to re-read the loopback list
 *   onRefreshIndex — full index refresh. Not called after a root change: see
 *                    `run()` for why the node's own push is what settles it
 *   mode           — "live" (default) or "local"
 *   localRoots / onLocalRootsChange — the array, in "local" mode
 */
function SharedDirectoriesTable({ roots, groupId, transport, signFn,
                                 nodeDetected: nodeAvail,
                                 onRootsChange, onRefreshIndex,
                                 mode = 'live',
                                 localRoots, onLocalRootsChange }) {
  const isLocal = mode === 'local';
  const serverRoots = isLocal ? (localRoots || []) : (roots || []);
  const [busy, setBusy] = useState(false);
  // `{ text, error }` — a refusal has to look like one. Every message here was
  // a `settings-hint`, which is dim grey body text, so "two roots would both
  // be called uploads" read as a footnote to the section rather than as the
  // reason nothing happened.
  const [msg, setMsg] = useState(null);
  const [indexProgress, setIndexProgress] = useState(null);
  // What the node could not read and the folders it paused by itself, as its
  // loopback API says them; `troubleTick` asks again after a change here.
  const [trouble, setTrouble] = useState(null);
  const [troubleTick, setTroubleTick] = useState(0);
  const say = useCallback((text) => setMsg(text ? { text, error: false } : null), []);
  const refuse = useCallback((text) => setMsg({ text, error: true }), []);

  // Rendered at the foot of the section, under the Add button — the last thing
  // below the control that caused it, rather than above a table the eye has
  // already moved past.
  const message = !msg ? '' : html`
    <p class=${msg.error ? 'error-msg' : 'settings-hint'}
       role=${msg.error ? 'alert' : 'status'}
       style="margin-top:10px">${msg.text}</p>`;

  // A toggle has to move under the finger, and the answer only comes back
  // when the node has signed, written node.toml and pushed the new table.
  // The patch is therefore held until the incoming `roots` actually agrees
  // with it — clearing it when the request resolves (which is what this did)
  // drops it in the frame *before* the new table arrives, so the switch
  // visibly snaps back and then forward again.
  const [optimistic, setOptimistic] = useState({});
  useEffect(() => {
    setOptimistic((prev) => {
      const keys = Object.keys(prev);
      if (!keys.length) return prev;
      const next = {};
      let changed = false;
      for (const name of keys) {
        const server = serverRoots.find(r => r.name === name);
        const patch = prev[name];
        // Gone from the table, or the server now says what we asked for:
        // either way this patch has nothing left to hide.
        const settled = !server
          || Object.keys(patch).every(k => server[k] === patch[k]);
        if (settled) changed = true; else next[name] = patch;
      }
      return changed ? next : prev;
    });
  }, [serverRoots]);

  const displayRoots = serverRoots.map(r =>
    optimistic[r.name] ? { ...r, ...optimistic[r.name] } : r);

  // Paths are the operator's own view and do not cross MNP: the roots table
  // rides in the index payload, which every member receives, and it tells them
  // what exists and whether it is readable — never where on the operator's
  // disk it lives. So the column appears when the answer is actually
  // available (the loopback API, which is already this machine only) and is
  // left out otherwise, rather than printing a row of blanks.
  const hasPaths = displayRoots.some((r) => r.path);

  // Which door a change goes through.
  //
  // Widening what the node shares — a new directory, `writable`, `removable` —
  // only through the loopback API, which exists only on the node's own
  // machine. Over MNP these were signed ops, and a
  // signature proves that the operator's key signed, not that the operator
  // meant it: in a browser that key is driven by code the hub serves.
  //
  // Narrowing — remove, eject, plug, pause, resume — MNP first, then loopback.
  const overMnp = !isLocal && transport && transport.connected;
  const overLoopback = !isLocal && !overMnp && nodeAvail;
  const onNodeMachine = !isLocal && nodeAvail;
  const canEdit = isLocal || overMnp || overLoopback;
  const canWiden = isLocal || onNodeMachine;

  // Paths, so only where the loopback API answers: on the node's own machine.
  // An operator elsewhere sees the folder paused, as any member does.
  useEffect(() => {
    if (!onNodeMachine) { setTrouble(null); return undefined; }
    let stopped = false;
    const read = async () => {
      try {
        const s = await platform.node.op('groupIndexStatus', { groupId });
        const next = { unread: s.unread || [], total: s.unread_total || 0,
                       stalled: s.stalled || [] };
        if (!stopped) {
          setTrouble((prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next);
        }
      } catch { /* busy, or mid-reload: the next poll asks again */ }
    };
    read();
    const id = setInterval(read, TROUBLE_POLL_MS);
    return () => { stopped = true; clearInterval(id); };
  }, [onNodeMachine, groupId, troubleTick]);

  // Deliberately no index refresh after a root change.
  //
  // Adding a root makes the node reload, which rescans — minutes on a real
  // library — and the reload is fire-and-forget for that reason. Fetching the
  // index in the moment after therefore returns the set from *before* it, and
  // `applyIndex` writes that over the roots the ack had just delivered: the
  // new directory appeared for one paint and vanished, which is what "it only
  // shows up after a refresh" was.
  //
  // Nothing is lost by waiting. The ack carries the new table immediately, and
  // the delta the node pushes when the scan finishes carries it again along
  // with the files.
  const run = useCallback(async (work) => {
    setBusy(true); setMsg(null);
    try {
      await work();
      if (onRootsChange) await onRootsChange();
      return true;
    } catch (err) {
      refuse(platform.bridgeMessage(err));
      return false;
    } finally { setBusy(false); setTroubleTick((n) => n + 1); }
  }, [onRootsChange, refuse]);

  const doUpdateRoot = useCallback(async (rootName, updates) => {
    if (isLocal) {
      if (onLocalRootsChange) {
        onLocalRootsChange((localRoots || []).map(r =>
          r.name === rootName ? { ...r, ...updates } : r));
      }
      return;
    }
    setOptimistic(prev => ({
      ...prev, [rootName]: { ...(prev[rootName] || {}), ...updates },
    }));
    const ok = await run(async () => {
      if (onNodeMachine) await platform.node.op('updateRoot', { groupId, rootName, updates });
      else throw new Error(t('settings_node.roots_local_only_hint'));
    });
    // Only a failure clears the patch here; a success waits for the node's
    // own table, so the switch never travels backwards on its way forwards.
    if (!ok) {
      setOptimistic(prev => {
        const next = { ...prev }; delete next[rootName]; return next;
      });
    }
  }, [isLocal, localRoots, onLocalRootsChange, onNodeMachine, groupId, run]);

  const doEjectRoot = useCallback((rootName) => run(async () => {
    if (overMnp) await transport.ejectRoot(groupId, rootName, signFn);
    else if (overLoopback) await platform.node.op('ejectRoot', { groupId, rootName });
    else throw new Error(t('node.root_no_route'));
  }), [overMnp, overLoopback, transport, groupId, signFn, run]);

  const doPlugRoot = useCallback((rootName) => run(async () => {
    if (overMnp) await transport.plugRoot(groupId, rootName, signFn);
    else if (overLoopback) await platform.node.op('plugRoot', { groupId, rootName });
    else throw new Error(t('node.root_no_route'));
  }), [overMnp, overLoopback, transport, groupId, signFn, run]);

  const doPauseRoot = useCallback((rootName) => run(async () => {
    if (overMnp) await transport.pauseRoot(groupId, rootName, signFn);
    else if (overLoopback) await platform.node.op('pauseRoot', { groupId, rootName });
    else throw new Error(t('node.root_no_route'));
  }), [overMnp, overLoopback, transport, groupId, signFn, run]);

  const doResumeRoot = useCallback((rootName) => run(async () => {
    if (overMnp) await transport.resumeRoot(groupId, rootName, signFn);
    else if (overLoopback) await platform.node.op('resumeRoot', { groupId, rootName });
    else throw new Error(t('node.root_no_route'));
  }), [overMnp, overLoopback, transport, groupId, signFn, run]);

  const doRemoveRoot = useCallback(async (rootName) => {
    if (isLocal) {
      if (onLocalRootsChange) {
        onLocalRootsChange((localRoots || []).filter(r => r.name !== rootName));
      }
      return;
    }
    if (!await ask(t('node.root_remove_confirm', { name: rootName }))) return;
    const ok = await run(async () => {
      if (overMnp) await transport.removeRoot(groupId, rootName, signFn);
      else if (overLoopback) {
        await platform.node.op('removeRoot', { groupId, rootName });
        await platform.node.op('reload');
      } else throw new Error(t('node.root_no_route'));
    });
    if (ok) say(t('node.root_removed'));
  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
      transport, groupId, signFn, run]);

  // Adding a root: a native folder picker on the node's own machine, and
  // nothing anywhere else — a path typed into a page is a path a script in the
  // page could have typed.
  const addRootAtPath = useCallback(async (path, name) => {
    if (isLocal) {
      if ((localRoots || []).some(r => r.path === path)) return true;
      const isFirst = (localRoots || []).length === 0;
      // The first directory is writable so a new group can receive an upload
      // without the operator having to find this switch first. Every later
      // one is read-only until they say otherwise.
      if (onLocalRootsChange) {
        onLocalRootsChange([...(localRoots || []),
                            { name, path, writable: isFirst, removable: false }]);
      }
      return true;
    }
    setIndexProgress(null);
    return run(async () => {
      if (!onNodeMachine) throw new Error(t('settings_node.roots_local_only_hint'));
      await platform.node.op('addRoot', { groupId, path, name });
      await platform.node.op('reload');
      await platform.watchIndexProgress(groupId, setIndexProgress);
    });
  }, [isLocal, localRoots, onLocalRootsChange, onNodeMachine, groupId, run]);

  const doPickRoot = useCallback(async () => {
    const chosen = await platform.rootPicker.choose();
    if (!chosen) return;
    const ok = await addRootAtPath(chosen.path, chosen.name);
    if (ok && !isLocal) say(t('node.root_added'));
  }, [addRootAtPath, isLocal]);

  const addControls = !canWiden || !platform.rootPicker.available ? '' : html`
    <button class="btn btn-small btn-secondary" style="margin-top:8px"
      disabled=${busy} onClick=${doPickRoot}>
      <${Icon} name="folder-plus" /> ${t('node.add_root')}
    </button>
  `;
  // Said once, under the table, rather than as a tooltip on each switch: the
  // switches are not broken, they are somewhere else.
  const localOnlyHint = canEdit && !canWiden && html`
    <p class="settings-hint" style="margin-top:8px">
      ${t('settings_node.roots_local_only_hint')}</p>`;

  // A folder the node paused because its disk stopped answering, and the
  // files it gave up on. Under the table, with the paths: this is the list an
  // operator used to need the node's log for.
  const stalledAt = {};
  for (const s of (trouble && trouble.stalled) || []) {
    if (displayRoots.some((r) => r.name === s.root && r.paused)) stalledAt[s.root] = s.path;
  }
  const troubleNote = (isLocal || !trouble) ? '' : html`
    ${Object.entries(stalledAt).map(([name, file]) => html`
      <p class="error-msg" role="status" style="margin-top:10px" key=${name}>
        ${t('node.root_stalled_hint', { name, file })}</p>`)}
    ${trouble.total > 0 && html`
      <details class="unread-files">
        <summary>${t('node.unread_summary', { count: trouble.total })}</summary>
        <ul>
          ${trouble.unread.map((u) => html`
            <li key=${u.path}>
              <span class="unread-path">${u.path}</span>
              <span class="unread-reason">${u.reason === 'no_answer'
                ? t('node.unread_no_answer') : u.reason}</span>
            </li>`)}
        </ul>
        ${trouble.total > trouble.unread.length && html`
          <p class="settings-hint">${t('node.unread_more',
            { count: trouble.total - trouble.unread.length })}</p>`}
      </details>`}
  `;

  if (!displayRoots.length) {
    return html`
      <div class="shared-directories-table">
        <p class="settings-hint">${t('settings_node.shared_directories_hint')}</p>
        ${localOnlyHint}
        ${addControls}
        ${message}
      </div>
    `;
  }

  return html`
    <div class="shared-directories-table">
      <table class="shared-dirs-tbl">
        <thead>
          <tr>
            <th class="sdt-col-dir">${t('node.directory')}</th>
            ${hasPaths && html`<th class="sdt-col-path">${t('node.root_path')}</th>`}
            ${canEdit && html`<th class="sdt-col-toggle">${t('node.root_rw')}</th>`}
            ${canEdit && !isLocal && html`<th class="sdt-col-toggle">${t('node.removable')}</th>`}
            <th class="sdt-col-actions"></th>
          </tr>
        </thead>
        <tbody>
        ${displayRoots.map(r => {
          const rowClass = r.ejected ? 'sdt-row-ejected'
            : (!isLocal && r.available === false) ? 'sdt-row-unavail' : '';
          return html`
          <tr class=${rowClass} key=${r.name}>
            <td class="sdt-col-dir">
              <span class="sdt-dir-name">
                <${Icon} name="folder" />
                ${r.name}
              </span>
              ${r.ejected && html`
                <span class="node-root-badge node-root-badge-warn">${t('group.root_ejected')}</span>`}
              ${!isLocal && r.available === false && !r.ejected && html`
                <span class="node-root-badge node-root-badge-warn">${t('node.unavailable')}</span>`}
              ${!isLocal && r.paused && html`
                <span class="node-root-badge">${t('node.root_paused')}</span>`}
              ${!isLocal && stalledAt[r.name] && html`
                <span class="node-root-badge node-root-badge-warn"
                  title=${stalledAt[r.name]}>${t('node.root_stalled')}</span>`}
            </td>
            ${hasPaths && html`
              <td class="sdt-col-path" title=${r.path || ''}>${r.path || ''}</td>`}
            ${/* The same string as the column head above, and deliberately
                  the same key: below 768px the head is gone — the row is two
                  stacked lines there, not a table row — and a bare switch with
                  nothing beside it says nothing at all. The label is hidden by
                  the stylesheet at every width where the column head is
                  doing the job. */''}
            ${canEdit && html`
              <td class="sdt-col-toggle">
                <${ToggleSwitch} checked=${!!r.writable}
                  disabled=${busy || !!r.ejected || !canWiden}
                  label=${t('node.root_rw')}
                  onChange=${(v) => doUpdateRoot(r.name, { writable: v })} />
              </td>
            `}
            ${canEdit && !isLocal && html`
              <td class="sdt-col-toggle">
                <${ToggleSwitch} checked=${!!r.removable} disabled=${busy || !canWiden}
                  label=${t('node.removable')}
                  onChange=${(v) => doUpdateRoot(r.name, { removable: v })} />
              </td>
            `}
            <td class="sdt-col-actions">
              ${canEdit && !isLocal && html`
                <button class="sdt-action-btn" disabled=${busy || !!r.ejected}
                  title=${r.paused ? t('node.root_resume') : t('node.root_pause')}
                  aria-label=${r.paused ? t('node.root_resume') : t('node.root_pause')}
                  onClick=${() => r.paused ? doResumeRoot(r.name) : doPauseRoot(r.name)}>
                  <${Icon} name=${r.paused ? 'play' : 'pause'} />
                </button>
              `}
              ${canEdit && !isLocal && html`
                <button class="sdt-action-btn" disabled=${busy || !r.removable}
                  title=${r.ejected ? t('group.root_plug') : t('group.root_eject')}
                  onClick=${() => r.ejected ? doPlugRoot(r.name) : doEjectRoot(r.name)}>
                  ${r.ejected ? '\u{1F50C}' : '\u{23CF}'}
                </button>
              `}
              ${canEdit && html`
                <button class="sdt-action-btn sdt-action-danger"
                  disabled=${busy || displayRoots.length < 2}
                  title=${displayRoots.length < 2
                    ? t('node.root_remove_last') : t('node.remove_root')}
                  onClick=${() => doRemoveRoot(r.name)}>
                  \u{2715}
                </button>
              `}
            </td>
          </tr>
        `; })}
        </tbody>
      </table>
      ${troubleNote}
      ${localOnlyHint}
      ${addControls}
      ${message}
      ${indexProgress && indexProgress.scanning && html`
        <div class="index-progress" style="margin-top:8px">
          <div class="index-progress-bar">
            <div class="index-progress-fill" style="width:${
              indexProgress.total_bytes
                ? Math.min(100, Math.round(
                    100 * indexProgress.scanned_bytes / indexProgress.total_bytes))
                : 0}%"></div>
          </div>
          <div class="index-progress-label">${t('wizard.indexing_progress', {
            pct: indexProgress.total_bytes
              ? Math.min(100, Math.round(
                  100 * indexProgress.scanned_bytes / indexProgress.total_bytes))
              : 0,
          })}</div>
        </div>
      `}
    </div>
  `;
}


// ── Members Panel ────────────────────────────────────────────────────────

/**
 * Everything about the group that is not its files or its chat.
 *
 * Was "Members", which was a list with three unrelated forms stacked on top of
 * it and the group's own controls somewhere else entirely — leaving or deleting
 * a group lived in the header, beside its title. One tab now, in sections, with
 * the roster last: it is the part that grows without limit, and burying the
 * controls under two hundred names is how a tab stops being usable.
 */
function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                             isNodeAdmin, userId, operatorPaired, connected,
                             mnpRoots,
                             enabledApps, onEnabledApps,
                             scanSettings, onScanSettings,
                             searchListed,
                             entries, nodeDirs,
                             appSettings,
                             onAppDirectories, onRefreshIndex,
                             onPaired, onLeft }) {
  const [members, setMembers] = useState([]);
  // Asked and not answered — the owner is the only one told (the hub leaves
  // the field out for anyone else).
  const [invited, setInvited] = useState([]);
  const [adminId, setAdminId] = useState('');
  // Nodes other than the owner's that asked to serve this group, and what the
  // owner answered. Only the owner reads it.
  const [hosts, setHosts] = useState([]);
  const [hostBusy, setHostBusy] = useState('');
  const [loading, setLoading] = useState(true);
  const [inviteUser, setInviteUser] = useState('');
  const [inviting, setInviting] = useState(false);
  // Whether the hub mails the invitation. Checked, the hub is handed the code
  // to write it into the mail — so it is the inviter's choice, remembered per
  // account (docs/MESHBAY_DESIGN.md §3.4). Unchecked, the hub never sees it.
  // Off by default: mailing the code is opt-in, not something to do unasked.
  const [inviteByEmail, setInviteByEmail] = useState(false);
  const [error, setError] = useState('');

  // Node loopback state (Electron-only)
  const [nodeDetected, setNodeDetected] = useState(false);
  // A node on this machine is not necessarily the one hosting this group, and
  // the table's loopback door is only a door to *that* node.
  const [nodeHostsGroup, setNodeHostsGroup] = useState(false);
  const [nodeRoots, setNodeRoots] = useState([]);
  const [nodeGroupName, setNodeGroupName] = useState('');
  const [nodeBusy, setNodeBusy] = useState(false);
  const [nodeMsg, setNodeMsg] = useState('');
  // Bytes-based indexing progress while a newly added directory is being
  // scanned — same source as the Create Group wizard's step, see
  // platform.watchIndexProgress.
  const [nodeIndexProgress, setNodeIndexProgress] = useState(null);

  // The roots to show, from whichever source can actually answer.
  //
  // `mnpRoots` comes from the index payload the node pushes over the live
  // connection, and is the only source an operator signing in from an
  // ordinary browser has. `nodeRoots` comes from the loopback API and exists
  // only on the machine running the node. Preferring MNP when connected also
  // keeps this table on the same data Files and the apps read, so an eject
  // shows in one place at the same instant it shows in the other.
  const effectiveRoots = (connected && mnpRoots && mnpRoots.length)
    ? mnpRoots : nodeRoots;

  // Declared here rather than inline at the call site: a function rebuilt on
  // every render is a new prop identity every render, and the callbacks that
  // close over it in the table below are memoised on it.
  const adminSignFn = useCallback((transcript) => {
    const sign = transportRef.current && transportRef.current.signFn;
    if (!sign) throw new Error(t('node.root_no_signing_key'));
    return sign(transcript);
  }, [transportRef]);

  const loadNodeInfo = useCallback(async () => {
    if (!platform.node.available) return;
    const found = await readLocalNode(platform.node, groupId);
    if (!found) { setNodeDetected(false); return; }
    setNodeDetected(true);
    setNodeHostsGroup(Boolean(found.group));
    if (found.group) {
      setNodeRoots(found.group.roots || []);
      setNodeGroupName(found.group.name || '');
    }
  }, [groupId]);

  useEffect(() => { loadNodeInfo(); }, [loadNodeInfo]);

  /**
   * Poll /api/groups until the root count actually matches what an
   * add/remove just did, instead of trusting a single loadNodeInfo() call
   * right after /api/reload. Found live: /api/reload is fire-and-forget on
   * the node (ops.start_reload schedules the real work and returns
   * immediately, deliberately — a brand-new group's initial scan can take
   * minutes, see its own docstring) — and the list this section renders
   * (ops.list_groups) reads the *runtime* root set
   * (groups_ctx[gid]["roots"]), which only gets replaced once
   * _reload_config_inner's retarget actually finishes, not the config-file
   * list add_root/remove_root already updated synchronously. A single
   * fetch right after can land in that gap and show the old count.
   */
  const waitForRootCount = useCallback(async (expectedCount) => {
    for (let i = 0; i < 10; i++) {
      try {
        const data = await platform.node.op('groups');
        const ng = (data.groups || []).find(g => g.id === groupId);
        const roots = (ng && ng.roots) || [];
        if (roots.length === expectedCount) {
          setNodeRoots(roots);
          if (ng) setNodeGroupName(ng.name || '');
          return true;
        }
      } catch { /* keep trying — the node may be mid-reload */ }
      await new Promise(r => setTimeout(r, 400));
    }
    return false;
  }, [groupId]);
  const [inviteCode, setInviteCode] = useState(null);
  const [pairCode, setPairCode] = useState('');
  const [pairStatus, setPairStatus] = useState('');
  const [pairing, setPairing] = useState(false);
  // Your own devices on this node. Not a members feature — it is beside them
  // because this is where a live connection to the node exists.
  const [devices, setDevices] = useState([]);
  const [approveCode, setApproveCode] = useState('');
  const [deviceMsg, setDeviceMsg] = useState('');

  // Pairing lives here rather than in Settings because this is where a live
  // connection to the node exists — and it is offered only when the node itself
  // says this account is its operator (is_node_admin comes from the authenticated
  // handshake_ack, not from the hub).
  const loadDevices = useCallback(async () => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    try {
      const out = await transport.listDevices();
      setDevices(out.devices);
    } catch { /* a node that has none says so by listing none */ }
  }, [transportRef]);

  useEffect(() => { loadDevices(); }, [loadDevices]);

  const approveDevice = useCallback(async (e) => {
    e.preventDefault();
    const code = approveCode.trim();
    if (!code) return;
    setDeviceMsg('');
    try {
      await transportRef.current.approveDevice(userId, code);
      setApproveCode('');
      setDeviceMsg(t('device.approved'));
      await loadDevices();
    } catch (err) { setDeviceMsg(err.message); }
  }, [approveCode, userId, transportRef, loadDevices]);

  const revokeDevice = useCallback(async (device) => {
    if (!await ask(t('device.revoke_confirm'))) return;
    setDeviceMsg('');
    try {
      await transportRef.current.revokeDevice(
        userId, device.pk_ed25519, device.pk_x25519 || '');
      await loadDevices();
    } catch (err) { setDeviceMsg(err.message); }
  }, [userId, transportRef, loadDevices]);

  const doPair = useCallback(async (e) => {
    e.preventDefault();
    const code = pairCode.trim();
    if (!code) return;
    setPairing(true);
    setPairStatus('');
    try {
      const transport = transportRef && transportRef.current;
      if (!transport || !transport.connected) throw new Error('Not connected to the node');
      await transport.pairOperator(userId, code);
      setPairCode('');
      setPairStatus('paired');
      // The node has pinned this key as an operator key; the form has nothing
      // left to do. It used to stay put through a refresh, because what governed
      // it was the account, which pairing does not change.
      if (onPaired) onPaired();
    } catch (err) {
      setPairStatus(err.message);
    } finally {
      setPairing(false);
    }
  }, [pairCode, transportRef, userId]);

  // DEPRECATED: upload toggle removed — per-root writable flag replaces it.

  const [appsBusy, setAppsBusy] = useState(false);
  const [appsMsg, setAppsMsg] = useState('');
  // `availableApps()` rather than the raw registry: an app the reader is not
  // shown must not be turned on for the whole group by falling back to "all of
  // them". Found by adding one that is hidden by default — an ordinary app
  // would never have exposed the difference.
  const activeApps = enabledApps && enabledApps.length
    ? enabledApps : availableApps().map(a => a.key);

  /**
   * Toggle one app in or out of the group's enabled set. Same shape as
   * `setUploads`: signed, and the checkbox does not move until the node has
   * said it did it. Refuses to submit an empty set client-side — the node
   * refuses it too, but there is no reason to make a round trip to learn that.
   */
  const toggleApp = useCallback(async (key) => {
    const next = activeApps.includes(key)
      ? activeApps.filter(k => k !== key)
      : [...activeApps, key];
    if (next.length === 0) {
      setAppsMsg(t('members.apps_need_one'));
      return;
    }
    const transport = transportRef && transportRef.current;
    setAppsMsg('');
    setAppsBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const signFn = transport.signFn;
      await transport.setAppsEnabled(next, signFn);
      if (onEnabledApps) onEnabledApps(next);
    } catch (err) {
      setAppsMsg(err.message);
    } finally {
      setAppsBusy(false);
    }
  }, [transportRef, onEnabledApps, activeApps]);

  const [scanBusy, setScanBusy] = useState(false);
  const [scanMsg, setScanMsg] = useState('');
  const [reconcileMinutes, setReconcileMinutes] = useState(
    scanSettings ? Math.round(scanSettings.reconcile_interval_secs / 60) : 10);
  const [debounceSeconds, setDebounceSeconds] = useState(
    scanSettings ? Math.round(scanSettings.debounce_secs) : 2);
  // The node is the source of truth; once it has answered, the fields track
  // it rather than whatever this browser guessed before connecting.
  useEffect(() => {
    if (!scanSettings) return;
    setReconcileMinutes(Math.round(scanSettings.reconcile_interval_secs / 60));
    setDebounceSeconds(Math.round(scanSettings.debounce_secs));
  }, [scanSettings]);

  /**
   * How often the reconciliation backstop runs, and how long a changed file
   * is left alone before being hashed. Same shape as toggleApp: signed, and
   * the fields do not claim success until the node has confirmed it.
   */
  const saveScanSettings = useCallback(async () => {
    const transport = transportRef && transportRef.current;
    setScanMsg('');
    setScanBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const signFn = transport.signFn;
      await transport.setScanSettings(reconcileMinutes * 60, debounceSeconds, signFn);
      const applied = {
        reconcile_interval_secs: reconcileMinutes * 60,
        debounce_secs: debounceSeconds,
      };
      if (onScanSettings) onScanSettings(applied);
      setScanMsg(t('settings_node.scan_saved'));
    } catch (err) {
      setScanMsg(err.message);
    } finally {
      setScanBusy(false);
    }
  }, [transportRef, onScanSettings, reconcileMinutes, debounceSeconds]);

  // Whether members' cross-group Search lists this group. The switch follows
  // the node's answer: the ack is broadcast and replayed to the requester
  // (transport.js BROADCAST_ACK_TYPES), which is what moves `searchListed`.
  const [listedBusy, setListedBusy] = useState(false);
  const [listedMsg, setListedMsg] = useState('');
  const toggleSearchListed = useCallback(async (next) => {
    const transport = transportRef && transportRef.current;
    setListedMsg('');
    setListedBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      await transport.setSearchListed(next, adminSignFn);
    } catch (err) {
      setListedMsg(err.message);
    } finally {
      setListedBusy(false);
    }
  }, [transportRef, adminSignFn]);

  // ── Per-app settings ────────────────────────────────────────────────
  //
  // What every app's settings pane is given, and the one operation the page
  // performs on their behalf. TMDB, MusicBrainz and each app's folder pickers
  // used to be hand-written sections here, ~470 lines of them, each with its
  // own draft state and save handler saying the same thing about a different
  // key. They live in `<app>-app-settings.js` now; this is the whole of what
  // the page still knows about any of it.

  // Every folder anywhere in the group's shared index. `entries[].path` is a
  // file's containing directory (files-app.js's convention), so every ancestor
  // prefix of it is a real folder; `nodeDirs` covers the ones with nothing in
  // them yet. Derived here rather than in the picker so all of them agree, and
  // so it is computed once per change instead of once per open.
  const folderOptions = useMemo(() => {
    const set = new Set();
    const addAncestors = (path) => {
      if (!path) return;
      const parts = path.split('/');
      for (let i = 1; i <= parts.length; i++) set.add(parts.slice(0, i).join('/'));
    };
    for (const e of (entries || [])) addAncestors(e.path);
    for (const d of (nodeDirs || [])) addAncestors(d);
    return [...set].sort();
  }, [entries, nodeDirs]);

  /**
   * Point one app at folders — the only app-specific operation this page
   * performs, and it is generic.
   *
   * Everything else a pane needs it does itself with the transport it is
   * given. That is the line: what every app has (directories) is here, what
   * one app alone has (a TMDB key, a link-preview switch) is in its own file,
   * and adding an app that only needs directories touches neither.
   */
  const saveAppDirectories = useCallback(async (appKey, paths) => {
    const transport = transportRef && transportRef.current;
    if (!transport || !transport.connected) {
      throw new Error(t('node.root_no_route'));
    }
    await transport.setAppDirectories(appKey, paths, adminSignFn);
    if (onAppDirectories) onAppDirectories(appKey, paths);
  }, [transportRef, adminSignFn, onAppDirectories]);

  const [removing, setRemoving] = useState('');

  /**
   * Take someone out of this group: both halves, in the order that fails safe.
   *
   * The node first, because that is the half that stops the group key being
   * wrapped for them; if the hub removal then fails, they are a member on paper
   * with no key. The other order would leave them able to reach a node that
   * still serves them.
   *
   * **A node that refuses does not cancel the hub half.** It used to: the node
   * call threw, the whole removal ended there, and the person stayed a member
   * everywhere — the list here (the hub answers it), the owner's other
   * sessions, the administrator's view — with nothing said about which half
   * had failed. Someone invited to the wrong group hit it every time, because
   * a node holds no member row for an invitation nobody has redeemed and
   * answered "no such member in that group" to the only button offering to
   * take them back out. The hub half only ever removes access, so it is not
   * the half to skip when the other is in doubt; what the node said is
   * reported once the removal has been done, rather than in place of it.
   *
   * **The node half is `revoke`, and only `revoke`.** It used to unpin as
   * well, and an unpin takes no group: `roster.unpin` deletes the identity and
   * *every* member row the account holds on this node, and `ops.unpin_member`
   * drops the stored keypair bundle with them. So taking somebody out of one
   * group took them out of all of them — and a person removed from a group
   * they had only been invited to lost the one they had been reading all
   * afternoon, six hours before anyone noticed. Nothing on the node said so:
   * the loopback path writes no audit entry, so the journal showed a clean
   * join and then, hours later, a refusal with nothing in between. Their
   * invitation was already spent, so there was no way back that did not start
   * with a new code. Membership is per group; a pinned identity is the
   * person's key for this whole node, and forgetting it is a separate
   * operator decision with its own button (`node-page.js`). The MNP branch
   * below never unpinned, which is the tell that this call was the odd one
   * out rather than the pair of the other.
   */
  const removeMember = useCallback(async (member) => {
    const transport = transportRef && transportRef.current;
    setError('');
    setRemoving(member.user_id);
    let nodeError = '';
    try {
      if (platform.node.available) {
        try {
          await platform.node.op('revokeMember', { userId: member.user_id, groupId });
        } catch { /* best effort — node may not host this group */ }
      } else if (transport && transport.connected && operatorPaired) {
        const signFn = transport.signFn;
        try {
          await transport.revokeMember(member.user_id, signFn);
        } catch (err) { nodeError = err.message; }
      }
      await hubFetch(`/v1/groups/${groupId}/members/${member.username}`, {
        method: 'DELETE', token,
      });
      loadMembers();
      if (nodeError) setError(nodeError);
    } catch (err) {
      setError(nodeError ? `${nodeError} — ${err.message}` : err.message);
    } finally {
      setRemoving('');
    }
  }, [groupId, token, transportRef, operatorPaired]);

  const loadMembers = useCallback(() => {
    setLoading(true);
    hubFetch(`/v1/groups/${groupId}/members`, { token })
      .then(data => {
        setMembers(data.members || []);
        setInvited(data.invited || []);
        setAdminId(data.admin_id || '');
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [groupId, token]);

  useEffect(() => { loadMembers(); }, [loadMembers]);

  // Who the node has admitted to this group. The hub counts someone a member
  // once they accept the invitation; the node, once they present their code.
  // Until then they are not in the group, and are listed as waiting, to the
  // owner only. Null when the roster cannot be read: the hub's list is shown.
  const [admitted, setAdmitted] = useState(null);
  useEffect(() => {
    const transport = transportRef.current;
    if (!connected || !transport || !transport.connected) { setAdmitted(null); return; }
    let cancelled = false;
    transport.groupRoster({ fresh: true })
      .then((roster) => { if (!cancelled) setAdmitted(new Set(roster.byAccount.keys())); })
      .catch(() => { if (!cancelled) setAdmitted(null); });
    return () => { cancelled = true; };
  }, [connected, transportRef, members]);
  const joined = admitted
    ? members.filter(m => m.user_id === adminId || admitted.has(m.user_id))
    : members;
  const awaitingCode = admitted
    ? members.filter(m => m.user_id !== adminId && !admitted.has(m.user_id))
    : [];

  const ownsGroup = Boolean(group && group.is_admin);
  const loadHosts = useCallback(() => {
    if (!ownsGroup) return;
    hubFetch(`/v1/groups/${groupId}/hosts`, { token })
      .then(data => setHosts(data.hosts || []))
      .catch(() => setHosts([]));
  }, [groupId, token, ownsGroup]);

  useEffect(() => { loadHosts(); }, [loadHosts]);

  const decideHost = useCallback(async (host, approve) => {
    setHostBusy(host.node_id);
    setError('');
    try {
      await hubFetch(`/v1/groups/${groupId}/hosts/${host.node_id}`,
                     { method: approve ? 'POST' : 'DELETE', token });
      loadHosts();
    } catch (err) {
      setError(err.message);
    } finally {
      setHostBusy('');
    }
  }, [groupId, token, loadHosts]);

  useEffect(() => {
    hubFetch('/v1/users/me/preferences', { token })
      .then(prefs => setInviteByEmail(prefs[INVITE_EMAIL_PREF] === 'true'))
      .catch(() => {});
  }, [token]);

  const toggleInviteByEmail = useCallback(async (next) => {
    setInviteByEmail(next);
    try {
      await hubFetch(`/v1/users/me/preferences/${INVITE_EMAIL_PREF}`, {
        method: 'PUT', token, body: { value: next ? 'true' : 'false' },
      });
    } catch {
      setInviteByEmail(!next);
    }
  }, [token]);

  const isAdmin = group && group.is_admin;

  const doInvite = useCallback(async (e) => {
    e.preventDefault();
    if (!inviteUser.trim()) return;
    setInviting(true);
    setError('');
    setInviteCode(null);
    try {
      const transport = transportRef && transportRef.current;
      const username = inviteUser.trim();
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node — it must be online to invite');
      }

      // The hub is asked for the account id, and nothing else. It is no longer
      // asked for the invitee's public key: the node wraps the group key itself,
      // for a key the invitee proves possession of when they connect (H3). A hub
      // that answered with the wrong account here would produce an invite whose
      // code it never learns — the code goes to a human, out of band.
      const account = await hubFetch(`/v1/users/${username}/pubkeys`, { token });

      // Signed with the identity this node pinned for us — the only one it
      // will accept, and the only one we hold here.
      const signFn = transport.signFn;
      const result = await transport.createInvite(
        account.user_id, groupId, username, signFn);

      // Membership on the hub is what lets them reach the node at all; the code
      // is what gets them the key.
      await hubFetch(`/v1/groups/${groupId}/members/${username}`, {
        method: 'POST', token, body: {},
      });

      // Send an email notification to the invitee with the code, if the inviter
      // asked for it. The hub decrypts their email server-side — the inviter
      // never sees it — and so the hub reads the code; without the box ticked
      // nothing below runs and the code is shown on this page and nowhere else.
      let emailStatus = inviteByEmail ? 'no_email' : 'not_requested';
      if (inviteByEmail) {
        try {
          const notif = await hubFetch(`/v1/groups/${groupId}/invite-notify`, {
            method: 'POST', token,
            // No group_name: the hub reads it from the group row it has already
            // loaded. Sending one offered a second answer to a settled question,
            // and that answer was the subject line of an email the hub signs.
            body: { username, code: result.code },
          });
          emailStatus = notif.status;
        } catch { /* best effort */ }
      }

      setInviteCode({
        username, code: result.code, expires: result.expires_at,
        emailStatus,
      });
      setInviteUser('');
      loadMembers();
    } catch (err) {
      setError(err.message);
    } finally {
      setInviting(false);
    }
  }, [groupId, token, inviteUser, inviteByEmail, loadMembers, transportRef]);

  // ── Invitation links (docs/MESHBAY_DESIGN.md §3.4) ──────────────────
  //
  // Two halves, in the order that leaves nothing half-made: the node's code
  // first, then the hub's ticket; a ticket the hub then refuses takes the code
  // back with it, since a code nobody can reach the node with only occupies one
  // of the group's twenty places. The address is optional and binds nothing:
  // the link is for whoever opens it first, so it can go by any messaging app.
  // The code reaches the hub only when the box asks the hub to write the mail.
  const [linkEmail, setLinkEmail] = useState('');
  const [linking, setLinking] = useState(false);
  const [linkError, setLinkError] = useState('');
  const [newLink, setNewLink] = useState(null);
  const [linkCopied, setLinkCopied] = useState(false);
  const [links, setLinks] = useState([]);

  const linkSignFn = useCallback(() => {
    const transport = transportRef && transportRef.current;
    return (transport && transport.signFn) || null;
  }, [transportRef]);

  // A redeemed link is not shown: whoever used it is in the members list above,
  // and what belongs here is what the owner can still cancel. The hub leaves
  // them out already; the filter is for the desktop client, whose copy of this
  // interface can be newer than the hub it is signed into.
  const loadLinks = useCallback(() => {
    if (!(group && group.is_admin)) return;
    hubFetch(`/v1/groups/${groupId}/invite-links`, { token })
      .then(data => setLinks((data.links || []).filter(l => l.status !== 'redeemed')))
      .catch(() => {});
  }, [groupId, token, group]);

  useEffect(() => { loadLinks(); }, [loadLinks]);

  const doCreateLink = useCallback(async (e) => {
    e.preventDefault();
    const email = linkEmail.trim();
    const mailIt = inviteByEmail && Boolean(email);
    setLinking(true);
    setLinkError('');
    setNewLink(null);
    setLinkCopied(false);
    try {
      const transport = transportRef && transportRef.current;
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node — it must be online to invite');
      }
      const signFn = linkSignFn();
      const node = await transport.createLinkInvite(groupId, signFn);
      const n = nodePkForLink(transport.nodePk);
      let ticket;
      try {
        ticket = await hubFetch(`/v1/groups/${groupId}/invite-links`, {
          method: 'POST', token,
          body: {
            email, expires_at: node.expires_at, node_invite_id: node.invite_id,
            send_email: mailIt,
            ...(mailIt ? { node_pk: n, code: node.code } : {}),
          },
        });
      } catch (err) {
        try { await transport.cancelLinkInvite(node.invite_id, signFn); } catch { /* expires */ }
        throw err;
      }
      setNewLink({
        link: inviteLinkHere({ g: groupId, t: ticket.ticket, n, c: node.code }),
        emailStatus: ticket.email_status,
      });
      setLinkEmail('');
      loadLinks();
    } catch (err) {
      setLinkError(err.message);
    } finally {
      setLinking(false);
    }
  }, [groupId, token, linkEmail, inviteByEmail, transportRef, linkSignFn, loadLinks]);

  // Node half first, hub half regardless: a node that refuses (offline, or the
  // code already expired there) must not leave the ticket open on the hub.
  const cancelLink = useCallback(async (row) => {
    setLinkError('');
    let nodeError = '';
    try {
      const transport = transportRef && transportRef.current;
      if (!transport || !transport.connected) throw new Error(t('group.offline_title'));
      await transport.cancelLinkInvite(row.node_invite_id, linkSignFn());
    } catch (err) {
      nodeError = err.message;
    }
    try {
      await hubFetch(`/v1/groups/${groupId}/invite-links/${row.link_id}`, {
        method: 'DELETE', token,
      });
    } catch (err) {
      nodeError = nodeError ? `${nodeError} — ${err.message}` : err.message;
    }
    if (nodeError) setLinkError(nodeError);
    loadLinks();
  }, [groupId, token, transportRef, linkSignFn, loadLinks]);

  const copyLink = useCallback(async () => {
    if (!newLink) return;
    try {
      await navigator.clipboard.writeText(newLink.link);
      setLinkCopied(true);
    } catch { /* the field is selectable */ }
  }, [newLink]);

  // The system share sheet, where there is one (phones mostly): the way a link
  // reaches a messaging app without a round trip through the clipboard.
  const canShare = typeof navigator !== 'undefined' && typeof navigator.share === 'function';
  const shareLink = useCallback(async () => {
    if (!newLink) return;
    try {
      await navigator.share({ title: t('members.link_share_title'), url: newLink.link });
    } catch { /* dismissed; the field and Copy are still there */ }
  }, [newLink]);

  if (loading) return html`<p class="page-message">${t('explore.loading')}</p>`;

  const isOwner = Boolean(isAdmin);

  return html`
    <div class="members-panel">
      ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}

      ${/* Inviting needs the node: it is the node that wraps the group key and
            issues the code, not the hub. Public groups admit anyone — no invite.
            The form stays in the DOM so a brief reconnect does not destroy the
            input the user is typing into — controls are disabled instead. */
        isAdmin && group?.join_policy !== 'open' && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.invite_title')}</h3>
          ${!connected ? html`
            <p class="settings-hint">${t('group.offline_title')}</p>
          ` : !operatorPaired ? html`
            <p class="settings-hint">
              ${isNodeAdmin ? t('members.invite_needs_pairing')
                            : t('members.invite_ask_operator')}
            </p>
          ` : ''}
          <form onSubmit=${doInvite}>
            ${inviteCode && html`
              <div class="success-msg" style="margin-bottom:8px">
                <p>${t('members.invite_code_ready', { user: inviteCode.username })}</p>
                <p class="code-display">${inviteCode.code}</p>
                ${inviteCode.emailStatus === 'sent'
                  ? html`<p style="color:var(--success)">${t('members.invite_email_sent')}</p>`
                  : inviteCode.emailStatus !== 'not_requested'
                    && html`<p style="color:var(--text-dim)">${t('members.invite_email_failed')}</p>`
                }
                <p>${t('members.invite_code_hint')}</p>
              </div>
            `}
            <div class="form-row">
              <input type="text" placeholder="${t('members.username_placeholder')}"
                value=${inviteUser} onInput=${e => setInviteUser(e.target.value)}
                disabled=${!connected || !operatorPaired} required />
              <button class="admin-btn" type="submit"
                disabled=${inviting || !connected || !operatorPaired}>
                ${inviting ? '...' : t('members.invite_btn')}
              </button>
            </div>
            <label style="display:flex; gap:8px; align-items:center; margin:6px 0 0;
                          font-size:0.88em; color:var(--text-secondary)">
              <input type="checkbox" checked=${inviteByEmail}
                     onChange=${e => toggleInviteByEmail(e.target.checked)} />
              <span>${t('members.invite_email_opt')}</span>
            </label>
          </form>
        </div>
      `}

      ${isAdmin && group?.join_policy !== 'open' && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.link_title')}</h3>
          <p class="settings-hint">${t('members.link_hint')}</p>
          ${linkError && html`<div class="error-msg" style="margin-bottom:8px">${linkError}</div>`}
          <form onSubmit=${doCreateLink}>
            ${newLink && html`
              <div class="success-msg" style="margin-bottom:8px">
                <p>${t('members.link_ready')}</p>
                <div class="form-row">
                  <input type="text" readonly value=${newLink.link}
                    onFocus=${e => e.target.select()} />
                  <button class="admin-btn" type="button" onClick=${copyLink}>
                    ${linkCopied ? t('members.link_copied') : t('members.link_copy')}
                  </button>
                  ${canShare && html`
                    <button class="admin-btn" type="button" onClick=${shareLink}>
                      ${t('members.link_share')}
                    </button>`}
                </div>
                ${newLink.emailStatus === 'sent'
                  ? html`<p style="color:var(--success)">${t('members.link_email_sent')}</p>`
                  : newLink.emailStatus !== 'not_requested'
                    && html`<p style="color:var(--text-dim)">${t('members.link_email_refused')}</p>`
                }
              </div>
            `}
            <div class="form-row">
              <input type="email" placeholder=${t('members.link_email_placeholder')}
                value=${linkEmail} onInput=${e => setLinkEmail(e.target.value)}
                disabled=${!connected || !operatorPaired} />
              <button class="admin-btn" type="submit"
                disabled=${linking || !connected || !operatorPaired}>
                ${linking ? '...' : t('members.link_btn')}
              </button>
            </div>
            <label style="display:flex; gap:8px; align-items:center; margin:6px 0 0;
                          font-size:0.88em; color:var(--text-secondary)">
              <input type="checkbox" checked=${inviteByEmail}
                     onChange=${e => toggleInviteByEmail(e.target.checked)} />
              <span>${t('members.invite_email_opt')}</span>
            </label>
          </form>
          ${links.length > 0 && html`
            <h4 style="margin-top:12px">${t('members.links_pending')}</h4>
            <ul class="invite-links">
              ${links.map(l => html`
                <li key=${l.link_id} style="display:flex;gap:8px;align-items:center;
                    flex-wrap:wrap;word-break:break-word;margin:4px 0">
                  <span>${l.email || t('members.link_unlabelled',
                    { date: new Date(l.created_at).toLocaleDateString() })}</span>
                  <span style="color:var(--text-dim)">
                    ${l.status === 'expired'
                      ? t('members.link_status_expired')
                      : t('members.link_expires',
                          { date: new Date(l.expires_at).toLocaleDateString() })}
                  </span>
                  ${l.status === 'pending' && html`
                    <button class="admin-btn" type="button"
                      disabled=${!connected || !operatorPaired}
                      onClick=${() => cancelLink(l)}>${t('members.link_cancel')}</button>`}
                </li>
              `)}
            </ul>
          `}
        </div>
      `}

      ${isNodeAdmin && !operatorPaired && connected && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.pair_title')}</h3>
          <p class="settings-hint">${t('members.pair_hint')}</p>
          ${pairStatus && html`
            <p class=${pairStatus === 'paired' ? 'success-msg' : 'error-msg'}>
              ${pairStatus === 'paired' ? t('members.pair_success') : pairStatus}
            </p>
          `}
          <form class="form-row" onSubmit=${doPair}>
            <input type="text" placeholder="XXXX-XXXX" class="code-input"
              value=${pairCode} onInput=${e => setPairCode(e.target.value)} required />
            <button class="admin-btn" type="submit" disabled=${pairing}>
              ${pairing ? '...' : t('members.pair_btn')}
            </button>
          </form>
        </div>
      `}

      ${/* Shared directories — the group's root folders, and the structural
            control everything else in this page sits on top of, so it comes
            first. Rendered whenever the operator has a route to their node:
            a live MNP connection (any browser, anywhere) or the loopback API
            (the node on this machine). It used to require the second, which
            meant it rendered for nobody on the web. */
        isNodeAdmin && (connected || nodeDetected) && html`
        <${CollapsibleSection} titleKey="settings_node.shared_directories_title">
          <p class="settings-hint">${t('settings_node.shared_directories_hint')}</p>
          ${!connected && nodeDetected && html`
            <p class="settings-hint">${t('settings_node.roots_offline_hint')}</p>`}
          <${SharedDirectoriesTable}
            roots=${effectiveRoots}
            groupId=${groupId}
            transport=${transportRef.current}
            signFn=${adminSignFn}
            nodeDetected=${nodeDetected && nodeHostsGroup}
            onRootsChange=${loadNodeInfo}
            onRefreshIndex=${onRefreshIndex} />
        </${CollapsibleSection}>
      `}

      ${/* One collapsible section per application, from the registry.
            Adding an app adds an entry to `apps.js` and a settings file; this
            loop names none of them. The toggle in the header *is* the
            enablement control — a separate checkbox list somewhere else meant
            the operator turned an app on in one place and configured it in
            another, with the two able to disagree.

            Collapsed by default, and the settings inside are not rendered at
            all while the app is off: a form for something that is not running
            is a form whose Save button does nothing anyone can see. */
        isNodeAdmin && connected && configurableApps().map((app) => html`
        <${CollapsibleSection} key=${app.key} defaultOpen=${false} title=${html`
          <span class="settings-meta-title">
            <${Icon} name=${app.icon} />${' '}${t(app.labelKey)}
          </span>
        `} action=${html`
          <${ToggleSwitch} checked=${activeApps.includes(app.key)}
            disabled=${appsBusy}
            onChange=${() => toggleApp(app.key)} />
        `}>
          ${activeApps.includes(app.key)
            ? html`<${app.Settings}
                roots=${effectiveRoots} dirs=${folderOptions}
                settings=${appSettings}
                saveDirectories=${(paths) => saveAppDirectories(app.key, paths)}
                transport=${transportRef.current} signFn=${adminSignFn} />`
            : html`<p class="settings-hint">${t('settings_app.disabled_hint')}</p>`}
        </${CollapsibleSection}>
      `)}

      ${appsMsg && html`<p class="error-msg">${appsMsg}</p>`}

      ${/* Whether this group shows up in members' cross-group Search. A
            listing preference, not a permission: the hint says so, because a
            switch next to "members" and "devices" reads as access control. */
        isNodeAdmin && connected && html`
        <${CollapsibleSection} titleKey="settings_node.search_listed_title"
          defaultOpen=${false}>
          <div class="settings-row">
            <${ToggleSwitch} checked=${searchListed !== false}
              disabled=${listedBusy}
              onChange=${toggleSearchListed}
              label=${t('settings_node.search_listed_label')} />
          </div>
          <p class="settings-hint">${t('settings_node.search_listed_hint')}</p>
          ${listedMsg && html`<p class="error-msg">${listedMsg}</p>`}
        </${CollapsibleSection}>
      `}

      ${/* How hard the node works watching its own disk — indexer.py
            DirectoryIndexer. A performance knob, not a permission: it
            changes nothing about who can see or do what. */
        isNodeAdmin && connected && html`
        <${CollapsibleSection} titleKey="settings_node.scan_title" defaultOpen=${false}>
          <p class="settings-hint">${t('settings_node.scan_hint')}</p>
          <div class="settings-row">
            <label class="settings-label">
              ${t('settings_node.scan_reconcile_label')}
              <input type="number" min="1" max="1440" step="1"
                value=${reconcileMinutes} disabled=${scanBusy}
                onInput=${e => setReconcileMinutes(Number(e.target.value))} />
            </label>
          </div>
          <div class="settings-row">
            <label class="settings-label">
              ${t('settings_node.scan_debounce_label')}
              <input type="number" min="0" max="300" step="1"
                value=${debounceSeconds} disabled=${scanBusy}
                onInput=${e => setDebounceSeconds(Number(e.target.value))} />
            </label>
          </div>
          <button class="btn btn-small btn-secondary" style="margin-top:8px"
            disabled=${scanBusy} onClick=${saveScanSettings}>
            ${scanBusy ? t('settings_node.scan_saving') : t('settings_node.scan_save')}
          </button>
          ${scanMsg && html`<p class="settings-hint">${scanMsg}</p>`}
        </${CollapsibleSection}>
      `}

      ${/* Delete/leave — node detach first (reversible), then hub delete
            (irreversible). Closed by default: a danger-zone action is one
            click away either way, but not the first thing seen on open. */
        html`
        <${CollapsibleSection} defaultOpen=${false}
          title=${isOwner ? t('group.delete_group') : t('group.leave')}>
          <div class="settings-row">
            <span class="settings-label">
              ${isOwner ? t('members.danger_delete_hint')
                        : t('members.danger_leave_hint')}
            </span>
            ${isOwner
              ? html`
                <button class="admin-btn danger" onClick=${async () => {
                  if (!await ask(t('group.delete_group_confirm', {
                    name: group.owner_username ? `${group.name}@${group.owner_username}` : group.name,
                  }))) return;
                  try {
                    // Node detach first (reversible), then hub delete (irreversible)
                    if (nodeDetected && nodeGroupName) {
                      try {
                        await platform.node.op('detachGroup', { name: nodeGroupName });
                      } catch (detachErr) {
                        if (!await ask(t('settings_node.detach_failed_continue'))) return;
                      }
                    }
                    await hubFetch('/v1/groups/' + groupId, { method: 'DELETE', token });
                    navigate('/');
                    window.location.reload();
                  } catch (err) { setError(err.message); }
                }}>${t('group.delete_group')}</button>
              `
              : html`
                <button class="admin-btn danger" onClick=${async () => {
                  if (!await ask(t('group.leave_confirm', {
                    name: group.owner_username ? `${group.name}@${group.owner_username}` : group.name,
                  }))) return;
                  try {
                    await hubFetch('/v1/groups/' + groupId + '/leave',
                                   { method: 'POST', token });
                    if (onLeft) onLeft(groupId);
                  } catch (err) { setError(err.message); }
                }}>${t('group.leave')}</button>
              `}
          </div>
        </${CollapsibleSection}>
      `}

      ${/* Collapsed by default, unlike the sections around it. Nothing here
            needs attention in the ordinary case: the device you are reading
            this on is already linked, and the panel exists for the two rare
            errands — approving another device, or removing one. The prompt
            that *is* actionable, "this browser is not linked to this node
            yet" (device.add_title), lives in group-page.js and is unaffected. */''}
      ${connected && html`
        <${CollapsibleSection} title=${t('device.mine_title')} defaultOpen=${false}>
          <p class="settings-hint">${t('device.mine_hint')}</p>
          ${deviceMsg && html`<p class="settings-hint">${deviceMsg}</p>`}
          ${devices.length === 0
            ? html`<p class="settings-hint">${t('device.mine_empty')}</p>`
            : html`
              <ul class="device-list">
                ${devices.map(d => html`
                  <li class="device-row" key=${d.pk_ed25519}>
                    <span class="device-key">${d.pk_ed25519.slice(0, 16)}…</span>
                    <span class="device-meta">
                      ${d.is_this_one && html`
                        <span class="badge">${t('device.this_one')}</span>${' '}
                      `}
                      ${d.pinned_via}${d.label ? ' · ' + d.label : ''}
                    </span>
                    ${!d.is_this_one && devices.length > 1 && html`
                      <button class="admin-btn" onClick=${() => revokeDevice(d)}>
                        ${t('device.revoke')}
                      </button>
                    `}
                  </li>
                `)}
              </ul>
            `}
          <form onSubmit=${approveDevice} class="settings-subform">
            <p class="settings-hint">${t('device.approve_hint')}</p>
            <div class="form-row">
              <input type="text" placeholder="XXXX-XXXX" class="code-input"
                value=${approveCode} onInput=${e => setApproveCode(e.target.value)} />
              <button class="admin-btn" type="submit">${t('device.approve_btn')}</button>
            </div>
          </form>
        </${CollapsibleSection}>
      `}

      <${CollapsibleSection} title=${`${t('group.tab_members')} (${joined.length})`}>
        <table class="admin-table">
          <thead>
            <tr>
              <th>${t('admin.col_username')}</th>
              <th>${t('members.group_role')}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            ${joined.map(m => html`
              <tr key=${m.user_id}>
                <td>${m.username}</td>
                <td>
                  ${m.user_id === adminId
                    ? html`<span class="badge badge-owner">${t('members.owner')}</span>`
                    : html`<span class="badge">${t('members.member')}</span>`
                  }
                </td>
                <td class="admin-actions">
                  ${isAdmin && m.user_id !== adminId && html`
                    <button class="admin-btn danger" disabled=${removing === m.user_id}
                      onClick=${async () => {
                        if (!await ask(t('members.remove_confirm', { user: m.username }))) return;
                        removeMember(m);
                      }}>
                      ${removing === m.user_id ? '...' : t('members.remove')}
                    </button>
                  `}
                </td>
              </tr>
            `)}
            ${isAdmin && awaitingCode.map(m => html`
              <tr key=${m.user_id}>
                <td>${m.username}</td>
                <td><span class="badge">${t('members.awaiting_code')}</span></td>
                <td class="admin-actions">
                  <button class="admin-btn danger" disabled=${removing === m.user_id}
                    onClick=${async () => {
                      if (!await ask(t('members.remove_confirm', { user: m.username }))) return;
                      removeMember(m);
                    }}>
                    ${removing === m.user_id ? '...' : t('members.remove')}
                  </button>
                </td>
              </tr>
            `)}
            ${invited.map(m => html`
              <tr key=${m.user_id}>
                <td>${m.username}</td>
                <td><span class="badge">${t('members.invited')}</span></td>
                <td class="admin-actions">
                  ${isAdmin && html`
                    <button class="admin-btn danger" disabled=${removing === m.user_id}
                      onClick=${async () => {
                        if (!await ask(t('members.remove_confirm', { user: m.username }))) return;
                        removeMember(m);
                      }}>
                      ${removing === m.user_id ? '...' : t('members.remove')}
                    </button>
                  `}
                </td>
              </tr>
            `)}
          </tbody>
        </table>
        ${isAdmin && joined.length > 1 && html`
          <p class="settings-hint">${t('members.remove_hint')}</p>
        `}
      </${CollapsibleSection}>

      ${ownsGroup && html`
        <${CollapsibleSection} title=${t('hosts.title')}>
          <p class="settings-hint">${t('hosts.hint')}</p>
          ${hosts.length === 0 && html`<p class="settings-hint">${t('hosts.none')}</p>`}
          ${hosts.length > 0 && html`
            <table class="admin-table">
              <tbody>
                ${hosts.map(h => html`
                  <tr key=${h.node_id}>
                    <td>${t('hosts.from', { name: h.username })}
                      <br /><code class="node-key">${h.pk_node}</code></td>
                    <td><span class="badge">${t(`hosts.status_${h.status}`)}</span>
                      ${h.online && html` <span class="badge">${t('hosts.online')}</span>`}</td>
                    <td class="admin-actions">
                      ${h.status !== 'approved' && html`
                        <button class="admin-btn" disabled=${hostBusy === h.node_id}
                          onClick=${() => decideHost(h, true)}>${t('hosts.approve')}</button>`}
                      ${h.status !== 'refused' && html`
                        <button class="admin-btn danger" disabled=${hostBusy === h.node_id}
                          onClick=${() => decideHost(h, false)}>${t('hosts.refuse')}</button>`}
                    </td>
                  </tr>
                `)}
              </tbody>
            </table>
          `}
        </${CollapsibleSection}>
      `}
    </div>
  `;
}

// ── Chat Panel ──────────────────────────────────────────────────────────

/**
 * Message text with its links made clickable.
 *
 * Only http and https, and built as elements rather than markup: a message is
 * something another member wrote, so it must never become HTML. `javascript:`
 * and `data:` are not matched at all, and the anchors carry noopener so the new
 * tab cannot reach back into this one.
 */
const URL_RE = /\bhttps?:\/\/[^\s<>"']+/gi;


export { GroupSettingsPanel, SharedDirectoriesTable };