import {
  html, useState, useEffect, useCallback, useMemo, useRef,
} from './vendor/htm-preact.js';
import { t, getLocale, LOCALES } from './i18n.js';
import { Icon } from './icon.js';
import { hubFetch, navigate } from './hub-client.js';
import { APPS } from './apps.js';
import * as platform from './platform.js';

// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB
// expects — the two don't share a format (MeshBay's "en" vs TMDB's
// required region, "en-US"). Used only to pre-fill the TMDB language field
// with the operator's own current UI language, a reasonable default they
// can still change; the node never guesses this on its own.
const TMDB_LANGUAGE_BY_LOCALE = {
  en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN',
  ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL',
};

/**
 * A settings-section that folds — every section but the ones that are
 * really just a form to fill in (invite, pair-operator, approve-device):
 * hiding an input the operator is mid-typing-into behind a click they'd
 * have to undo is friction with nothing to show for it, but a section that
 * is only ever glanced at once it's configured (TMDB, scan tuning, the
 * danger zone) benefits from staying out of the way otherwise. `title` (an
 * already-built string/vnode) wins over `titleKey` when both are given —
 * the members-table heading needs a live count baked in, not just a
 * lookup.
 */
function CollapsibleSection({ titleKey, title, defaultOpen = true, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return html`
    <div class="settings-section">
      <button type="button" class="settings-collapsible-header"
        onClick=${() => setOpen((v) => !v)} aria-expanded=${open}>
        <h3 class="settings-heading">${title != null ? title : t(titleKey)}</h3>
        <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} />
      </button>
      ${open && html`<div class="settings-collapsible-body">${children}</div>`}
    </div>
  `;
}

/**
 * A modern on/off switch — replaces a plain checkbox or a "Turn on/off"
 * button wherever the setting itself is a straight binary (uploads
 * allowed, TMDB/MusicBrainz enabled). Still a real <input type="checkbox">
 * under the hood (keyboard/screen-reader behaviour for free), just
 * restyled — see .toggle-switch in style.css.
 */
function ToggleSwitch({ checked, onChange, disabled, label }) {
  return html`
    <label class="toggle-switch ${disabled ? 'toggle-switch-disabled' : ''}">
      <input type="checkbox" checked=${checked} disabled=${disabled}
        onChange=${(e) => onChange(e.target.checked)} />
      <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
      ${label != null && html`<span class="toggle-switch-label">${label}</span>`}
    </label>
  `;
}

/**
 * Which folder is an app's entry point for this group — the shared shape
 * behind both the Videos and Music root pickers (docs/musicbay.md's
 * amended §2.1): a depth-indented <select> over every folder the group's
 * index already knows about, a Save button that only enables once the
 * draft actually differs, and a confirm prompt only when replacing an
 * *already-set* root (setting one for the first time has nothing to lose).
 */
function RootFolderRow({
  icon, titleKey, hintKey, folders, value, draft, onDraftChange,
  busy, msg, onSave, noneKey, saveKey,
}) {
  return html`
    <div class="settings-root-row">
      <div class="settings-root-row-title">
        <${Icon} name=${icon} />
        <h4>${t(titleKey)}</h4>
      </div>
      <p class="settings-hint">${t(hintKey)}</p>
      <div class="settings-row">
        <label class="settings-label">
          <select value=${draft} disabled=${busy} onChange=${e => onDraftChange(e.target.value)}>
            <option value="">${t(noneKey)}</option>
            ${folders.map(p => html`
              <option key=${p} value=${p}>
                ${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}
              </option>
            `)}
          </select>
        </label>
      </div>
      <button class="btn btn-small btn-secondary" style="margin-top:8px"
        disabled=${busy || draft === (value || '')} onClick=${onSave}>
        ${busy ? t('settings_node.scan_saving') : t(saveKey)}
      </button>
      ${msg && html`<p class=${msg.ok ? 'success-msg' : 'error-msg'} style="margin-top:8px">
        ${msg.text}</p>`}
    </div>
  `;
}

/**
 * Which folder(s) are the Photos app's entry points for this group — a
 * *set*, unlike RootFolderRow's single value above (docs/photos.md §2.1: a
 * photo library is routinely scattered across several folders). An
 * add/remove list rather than a `<select>`: pick a folder to add from the
 * same `rootFolderOptions` the Videos/Music pickers use, list what is
 * already configured with a remove button each, and one Save signs the
 * whole resulting set in one op (same shape as the app-enable checkboxes
 * below — several changes staged, one signature).
 */
function PhotoRootsRow({ folders, value, busy, msg, onSave }) {
  const [draft, setDraft] = useState(value || []);
  useEffect(() => { setDraft(value || []); }, [value]);
  const [addSelection, setAddSelection] = useState('');

  const available = folders.filter((p) => !draft.includes(p));
  const addRoot = () => {
    if (!addSelection || draft.includes(addSelection)) return;
    setDraft((prev) => [...prev, addSelection].sort());
    setAddSelection('');
  };
  const removeRoot = (path) => setDraft((prev) => prev.filter((p) => p !== path));

  const unchanged = draft.length === (value || []).length
    && draft.every((p) => (value || []).includes(p));

  return html`
    <div class="settings-root-row">
      <div class="settings-root-row-title">
        <${Icon} name="image" />
        <h4>${t('settings_node.photo_roots_title')}</h4>
      </div>
      <p class="settings-hint">${t('settings_node.photo_roots_hint')}</p>
      ${draft.length === 0 && html`
        <p class="settings-hint">${t('settings_node.photo_roots_none')}</p>
      `}
      ${draft.length > 0 && html`
        <ul class="settings-root-list">
          ${draft.map((p) => html`
            <li key=${p} class="settings-root-list-item">
              <span>${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}</span>
              <button class="link-btn" disabled=${busy} onClick=${() => removeRoot(p)}
                title=${t('settings_node.photo_roots_remove')}>
                <${Icon} name="close" /></button>
            </li>
          `)}
        </ul>
      `}
      <div class="settings-row">
        <label class="settings-label">
          <select value=${addSelection} disabled=${busy || available.length === 0}
            onChange=${(e) => setAddSelection(e.target.value)}>
            <option value="">${t('settings_node.photo_roots_add_placeholder')}</option>
            ${available.map((p) => html`
              <option key=${p} value=${p}>
                ${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}
              </option>
            `)}
          </select>
        </label>
        <button class="btn btn-small btn-secondary" disabled=${busy || !addSelection}
          onClick=${addRoot}>${t('settings_node.photo_roots_add')}</button>
      </div>
      <button class="btn btn-small btn-secondary" style="margin-top:8px"
        disabled=${busy || unchanged} onClick=${() => onSave(draft)}>
        ${busy ? t('settings_node.scan_saving') : t('settings_node.photo_roots_save')}
      </button>
      ${msg && html`<p class=${msg.ok ? 'success-msg' : 'error-msg'} style="margin-top:8px">
        ${msg.text}</p>`}
    </div>
  `;
}

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

/**
 * 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. Every change is a signed operator op sent
 *                   over MNP, or the loopback API when the node is on this
 *                   machine and there is no live 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.
 *
 * **Both paths matter and neither is optional.** The operator of a node is not
 * necessarily sitting at it: 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, while the controls it replaced had worked there. `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).
 *
 * Props:
 *   roots          — the node's current roots: { name, path, writable,
 *                    removable, ejected, 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
 *   readOnly       — suppress every edit control
 *   onRootsChange  — called after a change, to re-read the loopback list
 *   onRefreshIndex — full index refresh, needed after an add or a remove
 *   mode           — "live" (default) or "local"
 *   localRoots / onLocalRootsChange — the array, in "local" mode
 */
function SharedDirectoriesTable({ roots, groupId, transport, signFn,
                                 nodeDetected: nodeAvail, readOnly,
                                 onRootsChange, onRefreshIndex,
                                 mode = 'live',
                                 localRoots, onLocalRootsChange }) {
  const isLocal = mode === 'local';
  const serverRoots = isLocal ? (localRoots || []) : (roots || []);
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState('');
  const [indexProgress, setIndexProgress] = useState(null);
  const [pathDraft, setPathDraft] = useState('');
  const [addingByPath, setAddingByPath] = useState(false);

  // 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);

  // Which door a change goes through. MNP first: it is the only one that
  // exists for an operator on the web, and it is signed, which the loopback
  // API is not (it is authorized by being on localhost with the run token).
  const overMnp = !isLocal && transport && transport.connected;
  const overLoopback = !isLocal && !overMnp && nodeAvail;
  const canEdit = !readOnly && (isLocal || overMnp || overLoopback);

  const rootUrl = (name, suffix = '') =>
    '/api/groups/' + groupId + '/roots/' + encodeURIComponent(name) + suffix;

  const run = useCallback(async (work, { refreshIndex = false } = {}) => {
    setBusy(true); setMsg('');
    try {
      await work();
      if (onRootsChange) await onRootsChange();
      if (refreshIndex && onRefreshIndex) await onRefreshIndex();
      return true;
    } catch (err) {
      setMsg(platform.bridgeMessage(err));
      return false;
    } finally { setBusy(false); }
  }, [onRootsChange, onRefreshIndex]);

  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 (overMnp) await transport.updateRoot(groupId, rootName, updates, signFn);
      else if (overLoopback) await platform.node.call('PATCH', rootUrl(rootName), updates);
      else throw new Error(t('node.root_no_route'));
    });
    // 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, overMnp, overLoopback,
      transport, groupId, signFn, run]);

  const doEjectRoot = useCallback((rootName) => run(async () => {
    if (overMnp) await transport.ejectRoot(groupId, rootName, signFn);
    else if (overLoopback) await platform.node.call('PUT', rootUrl(rootName, '/eject'));
    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.call('PUT', rootUrl(rootName, '/plug'));
    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 (!confirm(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.call('DELETE', rootUrl(rootName));
        await platform.node.call('POST', '/api/reload');
      } else throw new Error(t('node.root_no_route'));
    }, { refreshIndex: true });
    if (ok) setMsg(t('node.root_removed'));
  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
      transport, groupId, signFn, run]);

  // Adding a root needs a directory that exists on the *node's* filesystem.
  // With the node on this machine that is a native folder picker; from any
  // other browser the operator has to type the path, because nothing in a web
  // page can browse a remote disk. Both end at the same signed op.
  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 (overMnp) {
        await transport.addRoot(groupId, path, { name }, signFn);
      } else if (overLoopback) {
        await platform.node.call('POST', '/api/groups/' + groupId + '/roots',
                                 { path, name });
        await platform.node.call('POST', '/api/reload');
        await platform.watchIndexProgress(groupId, setIndexProgress);
      } else throw new Error(t('node.root_no_route'));
    }, { refreshIndex: true });
  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
      transport, groupId, signFn, 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) setMsg(t('node.root_added'));
  }, [addRootAtPath, isLocal]);

  const doAddByPath = useCallback(async () => {
    const path = pathDraft.trim();
    if (!path) return;
    // The name is the node's business — it derives the basename and refuses a
    // duplicate. Sending one guessed from a string typed here would be a
    // second opinion about something already decided in one place.
    const ok = await addRootAtPath(path, '');
    if (ok) { setPathDraft(''); setAddingByPath(false); if (!isLocal) setMsg(t('node.root_added')); }
  }, [pathDraft, addRootAtPath, isLocal]);

  const addControls = !canEdit ? '' : html`
    ${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>
    ` : addingByPath ? html`
      <div class="sdt-add-row">
        <input class="sdt-add-input" type="text" value=${pathDraft}
          placeholder=${t('node.root_path_placeholder')}
          disabled=${busy}
          onInput=${(e) => setPathDraft(e.target.value)}
          onKeyDown=${(e) => { if (e.key === 'Enter') doAddByPath(); }} />
        <button class="btn btn-small btn-secondary" disabled=${busy || !pathDraft.trim()}
          onClick=${doAddByPath}>${t('node.add_root')}</button>
        <button class="btn btn-small" disabled=${busy}
          onClick=${() => { setAddingByPath(false); setPathDraft(''); }}>
          ${t('settings.cancel')}</button>
      </div>
      <p class="settings-hint">${t('node.root_path_hint')}</p>
    ` : html`
      <button class="btn btn-small btn-secondary" style="margin-top:8px"
        disabled=${busy} onClick=${() => setAddingByPath(true)}>
        <${Icon} name="folder-plus" /> ${t('node.add_root')}
      </button>
    `}
  `;

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

  return html`
    <div class="shared-directories-table">
      ${msg && html`<p class="settings-hint">${msg}</p>`}
      <table class="shared-dirs-tbl">
        <thead>
          <tr>
            <th class="sdt-col-dir">${t('node.directory')}</th>
            <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>`}
            </td>
            ${/* Two roots can never share a name, so the name is the identity —
                  but it is the *basename*, and two libraries under different
                  parents look identical without this. */''}
            <td class="sdt-col-path" title=${r.path || ''}>${r.path || ''}</td>
            ${canEdit && html`
              <td class="sdt-col-toggle">
                <${ToggleSwitch} checked=${!!r.writable} disabled=${busy || !!r.ejected}
                  onChange=${(v) => doUpdateRoot(r.name, { writable: v })} />
              </td>
            `}
            ${canEdit && !isLocal && html`
              <td class="sdt-col-toggle">
                <${ToggleSwitch} checked=${!!r.removable} disabled=${busy}
                  onChange=${(v) => doUpdateRoot(r.name, { removable: v })} />
              </td>
            `}
            <td class="sdt-col-actions">
              ${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>
      ${addControls}
      ${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,
                             tmdbConfig, onTmdbConfig, onTmdbEnabled,
                             musicbrainzConfig, onMusicbrainzEnabled,
                             entries, nodeDirs, videoRoot, onVideoRoot,
                             audioRoot, onAudioRoot,
                             photoRoots, onPhotoRoots, onRefreshIndex,
                             onPaired, onLeft }) {
  const [members, setMembers] = useState([]);
  const [adminId, setAdminId] = useState('');
  const [loading, setLoading] = useState(true);
  const [inviteUser, setInviteUser] = useState('');
  const [inviting, setInviting] = useState(false);
  const [error, setError] = useState('');

  // Node loopback state (Electron-only)
  const [nodeDetected, setNodeDetected] = 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 sk = transportRef.current && transportRef.current.sessionKeys
      && transportRef.current.sessionKeys.skEdB64;
    if (!sk || !window.MeshBayKeys) {
      throw new Error(t('node.root_no_signing_key'));
    }
    return window.MeshBayKeys.signBytes(sk, transcript);
  }, [transportRef]);

  const loadNodeInfo = useCallback(async () => {
    if (!platform.node.available) return;
    try {
      const detect = await platform.node.detect();
      if (!detect.detected) { setNodeDetected(false); return; }
      setNodeDetected(true);
      const data = await platform.node.call('GET', '/api/groups');
      const groups = data.groups || [];
      const ng = groups.find(g => g.id === groupId);
      if (ng) {
        setNodeRoots(ng.roots || []);
        setNodeGroupName(ng.name || '');
      }
    } catch { setNodeDetected(false); }
  }, [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.call('GET', '/api/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 (!confirm(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('');
  const activeApps = enabledApps && enabledApps.length ? enabledApps : APPS.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 sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      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 sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      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]);

  const [tmdbBusy, setTmdbBusy] = useState(false);
  const [tmdbMsg, setTmdbMsg] = useState('');
  const [tmdbTokenDraft, setTmdbTokenDraft] = useState('');
  const [tmdbEnabledBusy, setTmdbEnabledBusy] = useState(false);
  const tmdbEnabled = tmdbConfig ? tmdbConfig.enabled : true;
  // Pre-filled from the operator's own current UI language the first time
  // this renders with nothing configured yet — a sensible default, not a
  // claim about what the node is actually using until they hit Save.
  const [tmdbLanguage, setTmdbLanguage] = useState(
    () => (tmdbConfig && tmdbConfig.language)
      || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US');
  useEffect(() => {
    if (tmdbConfig && tmdbConfig.language) setTmdbLanguage(tmdbConfig.language);
  }, [tmdbConfig && tmdbConfig.language]);

  /**
   * Whether TMDB is used at all — per-group (2026-08-24, used to be bundled
   * into the same signed op as the token/language below): a real
   * media-library group and a test/demo group on the same node need not
   * share this decision. Saves immediately on toggle, same as an ordinary
   * checkbox-style setting elsewhere — there is nothing else on the form to
   * batch it with any more.
   */
  const saveTmdbEnabled = useCallback(async (nextEnabled) => {
    const transport = transportRef && transportRef.current;
    setTmdbMsg('');
    setTmdbEnabledBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      await transport.setTmdbEnabled(nextEnabled, signFn);
      if (onTmdbEnabled) onTmdbEnabled(nextEnabled);
    } catch (err) {
      setTmdbMsg(err.message);
    } finally {
      setTmdbEnabledBusy(false);
    }
  }, [transportRef, onTmdbEnabled]);

  /**
   * An optional custom API token, and the language TMDB is queried in —
   * node-wide, not per-group (docs/mediacenter.md §5.5): one shared
   * credential and cache. Same shape as saveScanSettings: signed, and the
   * button does not claim success until the node confirms it. The token
   * field is cleared after a save either way: it is never echoed back by
   * the node (tmdb_config_ack carries only whether one is set, never the
   * value), so there is nothing to keep showing.
   */
  const saveTmdbConfig = useCallback(async () => {
    const transport = transportRef && transportRef.current;
    setTmdbMsg('');
    setTmdbBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      const token = tmdbTokenDraft.trim();
      await transport.setTmdbConfig(token || undefined, tmdbLanguage, signFn);
      setTmdbTokenDraft('');
      if (onTmdbConfig) {
        onTmdbConfig({
          tokenCustomized: token
            ? true
            : (tmdbConfig ? tmdbConfig.tokenCustomized : false),
          language: tmdbLanguage,
        });
      }
      setTmdbMsg(t('settings_node.scan_saved'));
    } catch (err) {
      setTmdbMsg(err.message);
    } finally {
      setTmdbBusy(false);
    }
  }, [transportRef, onTmdbConfig, tmdbTokenDraft, tmdbConfig, tmdbLanguage]);

  // A node that has never had a language explicitly set would otherwise
  // query TMDB with none at all — which TMDB itself resolves to English,
  // regardless of who the operator is — even though this form already
  // *suggests* their own UI language as the value. Applied once,
  // automatically, the first time the operator (the only one who can sign
  // this) is actually connected to see it: a real default tied to whoever
  // runs this particular node, never a single hardcoded language for every
  // node. `tmdbConfig.language` being set at all — from this or from an
  // explicit save — is what stops it from ever firing again, so "unless
  // manually changed" holds regardless of which of the two set it first.
  const autoLanguageSetRef = useRef(false);
  useEffect(() => {
    if (!isNodeAdmin || !connected || !tmdbConfig || tmdbConfig.language) return;
    if (autoLanguageSetRef.current) return;
    autoLanguageSetRef.current = true;
    saveTmdbConfig();
  }, [isNodeAdmin, connected, tmdbConfig, saveTmdbConfig]);

  const [mbMsg, setMbMsg] = useState('');
  const [mbEnabledBusy, setMbEnabledBusy] = useState(false);
  const mbEnabled = musicbrainzConfig ? musicbrainzConfig.enabled : true;

  /**
   * Whether MusicBrainz is used at all — per-group from the start
   * (docs/musicbay.md §3.2/§6). Same shape as saveTmdbEnabled.
   */
  const saveMusicbrainzEnabled = useCallback(async (nextEnabled) => {
    const transport = transportRef && transportRef.current;
    setMbMsg('');
    setMbEnabledBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      await transport.setMusicbrainzEnabled(nextEnabled, signFn);
      if (onMusicbrainzEnabled) onMusicbrainzEnabled(nextEnabled);
    } catch (err) {
      setMbMsg(err.message);
    } finally {
      setMbEnabledBusy(false);
    }
  }, [transportRef, onMusicbrainzEnabled]);

  // Every folder anywhere in the group's shared index, deepest included —
  // `entries[].path` is each file's containing directory (files-app.js's own
  // convention), so every ancestor prefix of it is a real folder, and
  // `nodeDirs` covers ones with nothing in them yet. A flat, depth-indented
  // <select> rather than a live folder browser: choosing an app's root is a
  // rare, one-off decision, not something worth a whole navigable tree for.
  // Shared between the Videos and Music root pickers below — same folder
  // set either way.
  const rootFolderOptions = 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]);

  const [videoRootDraft, setVideoRootDraft] = useState(videoRoot || '');
  useEffect(() => { setVideoRootDraft(videoRoot || ''); }, [videoRoot]);
  const [videoRootBusy, setVideoRootBusy] = useState(false);
  const [videoRootMsg, setVideoRootMsg] = useState(null);

  /**
   * Which folder is the Videos app's entry point for this group — same
   * shape as toggleApp/saveScanSettings: signed, and the picker does not
   * claim success until the node confirms it.
   *
   * Changing an *already-set* root is destructive to every member's Videos
   * tab (a different set of files, possibly none in common) — the operator
   * confirms that explicitly. Setting it for the first time is not: there is
   * nothing yet to lose.
   */
  const saveVideoRoot = useCallback(async () => {
    const next = videoRootDraft;
    const current = videoRoot || '';
    if (next === current) return;
    if (current && !confirm(t('settings_node.video_root_change_confirm'))) return;
    const transport = transportRef && transportRef.current;
    setVideoRootMsg(null);
    setVideoRootBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      await transport.setVideoRoot(next, signFn);
      if (onVideoRoot) onVideoRoot(next);
      setVideoRootMsg({ text: t('settings_node.scan_saved'), ok: true });
    } catch (err) {
      setVideoRootMsg({ text: err.message, ok: false });
    } finally {
      setVideoRootBusy(false);
    }
  }, [transportRef, onVideoRoot, videoRootDraft, videoRoot]);

  // Same shape as the Videos root above — the Music app's own entry point
  // (docs/musicbay.md's amended §2.1).
  const [audioRootDraft, setAudioRootDraft] = useState(audioRoot || '');
  useEffect(() => { setAudioRootDraft(audioRoot || ''); }, [audioRoot]);
  const [audioRootBusy, setAudioRootBusy] = useState(false);
  const [audioRootMsg, setAudioRootMsg] = useState(null);

  const saveAudioRoot = useCallback(async () => {
    const next = audioRootDraft;
    const current = audioRoot || '';
    if (next === current) return;
    if (current && !confirm(t('settings_node.audio_root_change_confirm'))) return;
    const transport = transportRef && transportRef.current;
    setAudioRootMsg(null);
    setAudioRootBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      await transport.setAudioRoot(next, signFn);
      if (onAudioRoot) onAudioRoot(next);
      setAudioRootMsg({ text: t('settings_node.scan_saved'), ok: true });
    } catch (err) {
      setAudioRootMsg({ text: err.message, ok: false });
    } finally {
      setAudioRootBusy(false);
    }
  }, [transportRef, onAudioRoot, audioRootDraft, audioRoot]);

  // Photos app's own entry points — a set (docs/photos.md §2.1), unlike
  // videoRoot/audioRoot above. No "removing a root is destructive" confirm
  // dialog: removing one root only drops that root's albums from view, it
  // does not replace the whole tab's content the way changing video_root
  // does.
  const [photoRootsBusy, setPhotoRootsBusy] = useState(false);
  const [photoRootsMsg, setPhotoRootsMsg] = useState(null);

  const savePhotoRoots = useCallback(async (nextRoots) => {
    const transport = transportRef && transportRef.current;
    setPhotoRootsMsg(null);
    setPhotoRootsBusy(true);
    try {
      if (!transport || !transport.connected) {
        throw new Error('Not connected to the node');
      }
      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      await transport.setPhotoRoots(nextRoots, signFn);
      if (onPhotoRoots) onPhotoRoots(nextRoots);
      setPhotoRootsMsg({ text: t('settings_node.scan_saved'), ok: true });
    } catch (err) {
      setPhotoRootsMsg({ text: err.message, ok: false });
    } finally {
      setPhotoRootsBusy(false);
    }
  }, [transportRef, onPhotoRoots]);

  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.
   */
  const removeMember = useCallback(async (member) => {
    const transport = transportRef && transportRef.current;
    setError('');
    setRemoving(member.user_id);
    try {
      if (platform.node.available) {
        try {
          await platform.node.call('POST',
            `/api/members/${member.user_id}/revoke?group_id=${groupId}`);
        } catch { /* best effort — node may not host this group */ }
        try {
          await platform.node.call('POST',
            `/api/members/${member.user_id}/unpin`);
        } catch { /* best effort */ }
      } else if (transport && transport.connected && operatorPaired) {
        const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
        const signFn = (sk && window.MeshBayKeys)
          ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
          : null;
        await transport.revokeMember(member.user_id, signFn);
      }
      await hubFetch(`/v1/groups/${groupId}/members/${member.username}`, {
        method: 'DELETE', token,
      });
      loadMembers();
    } catch (err) {
      setError(err.message);
    } finally {
      setRemoving('');
    }
  }, [groupId, token, transportRef, operatorPaired]);

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

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

  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 sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
      const signFn = (sk && window.MeshBayKeys)
        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
        : null;
      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.
      // The hub decrypts their email server-side — the inviter never sees it.
      let emailStatus = 'no_email';
      try {
        const notif = await hubFetch(`/v1/groups/${groupId}/invite-notify`, {
          method: 'POST', token,
          body: { username, code: result.code, group_name: group?.name || '' },
        });
        emailStatus = notif.status;
      } catch { /* best effort */ }

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

  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.emailSent
                  ? html`<p style="color:var(--success)">${t('members.invite_email_sent')}</p>`
                  : 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>
          </form>
        </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}
            onRootsChange=${loadNodeInfo}
            onRefreshIndex=${onRefreshIndex} />
        </${CollapsibleSection}>
      `}

      ${/* Which group "applications" members see. New ones (Videos, Music,
            Photos) show up here automatically as they register in apps.js —
            nothing about this section changes to add one. */
        isNodeAdmin && connected && html`
        <${CollapsibleSection} titleKey="members.apps_title">
          <p class="settings-hint">${t('members.apps_hint')}</p>
          <ul class="apps-toggle-list">
            ${APPS.filter(a => !a.alwaysEnabled).map(a => html`
              <li key=${a.key} class="settings-row">
                <label class="settings-label">
                  <input type="checkbox" checked=${activeApps.includes(a.key)}
                    disabled=${appsBusy}
                    onChange=${() => toggleApp(a.key)} />
                  ${' '}${t(a.labelKey)}
                </label>
              </li>
            `)}
          </ul>
          ${appsMsg && html`<p class="error-msg">${appsMsg}</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}>
      `}

      ${/* The on/off switch is per-group (2026-08-24); the custom token and
            query language stay node-wide, one shared credential/cache
            (docs/mediacenter.md §5.5). Both are new outbound third-party
            traffic the node did not have before the Videos app, so both are
            signed operator settings, not display preferences — but two
            independent ones now, saved separately. */
        isNodeAdmin && connected && html`
        <${CollapsibleSection} defaultOpen=${false} title=${html`
          <span class="settings-meta-title">
            <${Icon} name="server" />${' '}${t('settings_node.tmdb_title')}
            <span class="settings-meta-badge ${tmdbEnabled ? 'on' : ''}">
              ${tmdbEnabled ? t('settings_node.tmdb_enabled') : t('settings_node.tmdb_disabled')}
            </span>
          </span>
        `}>
          <p class="settings-hint">${t('settings_node.tmdb_hint')}</p>
          <div class="settings-row">
            <${ToggleSwitch} checked=${tmdbEnabled} disabled=${tmdbEnabledBusy}
              onChange=${(v) => saveTmdbEnabled(v)}
              label=${tmdbEnabled ? t('settings_node.tmdb_enabled') : t('settings_node.tmdb_disabled')} />
          </div>
          <div class="settings-row">
            <label class="settings-label">
              ${t('settings_node.tmdb_token_label')}
              <input type="password" placeholder=${t('settings_node.tmdb_token_placeholder')}
                value=${tmdbTokenDraft} disabled=${tmdbBusy}
                onInput=${e => setTmdbTokenDraft(e.target.value)} />
            </label>
            <p class="settings-hint">
              ${tmdbConfig && tmdbConfig.tokenCustomized
                ? t('settings_node.tmdb_token_customized')
                : t('settings_node.tmdb_token_default')}
            </p>
          </div>
          <div class="settings-row">
            <label class="settings-label">
              ${t('settings_node.tmdb_language_label')}
              <select value=${tmdbLanguage} disabled=${tmdbBusy}
                onChange=${e => setTmdbLanguage(e.target.value)}>
                ${LOCALES.map(l => html`
                  <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}>
                    ${l.name}
                  </option>
                `)}
              </select>
            </label>
            <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p>
          </div>
          <button class="btn btn-small btn-secondary" style="margin-top:8px"
            disabled=${tmdbBusy} onClick=${() => saveTmdbConfig()}>
            ${tmdbBusy ? t('settings_node.scan_saving') : t('settings_node.tmdb_save')}
          </button>
          ${tmdbMsg && html`<p class="settings-hint">${tmdbMsg}</p>`}
        </${CollapsibleSection}>
      `}

      ${/* Same two-part shape as TMDB above: the on/off switch is per-group,
            the contact string stays node-wide (docs/musicbay.md §3.2) —
            one operator identity, not a per-group concern. Unlike TMDB
            there is no token field: MusicBrainz's read endpoints need no
            credential, just a descriptive User-Agent contact. */
        isNodeAdmin && connected && html`
        <${CollapsibleSection} defaultOpen=${false} title=${html`
          <span class="settings-meta-title">
            <${Icon} name="music" />${' '}${t('settings_node.musicbrainz_title')}
            <span class="settings-meta-badge ${mbEnabled ? 'on' : ''}">
              ${mbEnabled ? t('settings_node.musicbrainz_enabled') : t('settings_node.musicbrainz_disabled')}
            </span>
          </span>
        `}>
          <p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
          <div class="settings-row">
            <${ToggleSwitch} checked=${mbEnabled} disabled=${mbEnabledBusy}
              onChange=${(v) => saveMusicbrainzEnabled(v)}
              label=${mbEnabled ? t('settings_node.musicbrainz_enabled') : t('settings_node.musicbrainz_disabled')} />
          </div>
          ${mbMsg && html`<p class="settings-hint">${mbMsg}</p>`}
        </${CollapsibleSection}>
      `}

      ${/* Which folder is the Videos app's entry point for this group —
            per-group like uploads, not node-wide like TMDB (mediacenter.md
            §5.6). Until one is chosen, the Videos tab says so instead of
            listing anything, and the node runs no TMDB/thumbnail work for
            this group at all (daemon.py's _enrich_new_video_entries). */
        isNodeAdmin && connected
          && ((nodeDetected && nodeRoots.length > 0)
              || activeApps.includes('video') || activeApps.includes('music')
              || activeApps.includes('photo')) && html`
        <${CollapsibleSection} titleKey="settings_node.directories_title">
          <p class="settings-hint">${t('settings_node.directories_hint')}</p>

          ${activeApps.includes('video') && html`
            <${RootFolderRow} icon="video"
              titleKey="settings_node.video_root_title" hintKey="settings_node.video_root_hint"
              folders=${rootFolderOptions} value=${videoRoot}
              draft=${videoRootDraft} onDraftChange=${setVideoRootDraft}
              busy=${videoRootBusy} msg=${videoRootMsg} onSave=${saveVideoRoot}
              noneKey="settings_node.video_root_none" saveKey="settings_node.video_root_save" />
          `}
          ${activeApps.includes('music') && html`
            <${RootFolderRow} icon="music"
              titleKey="settings_node.audio_root_title" hintKey="settings_node.audio_root_hint"
              folders=${rootFolderOptions} value=${audioRoot}
              draft=${audioRootDraft} onDraftChange=${setAudioRootDraft}
              busy=${audioRootBusy} msg=${audioRootMsg} onSave=${saveAudioRoot}
              noneKey="settings_node.audio_root_none" saveKey="settings_node.audio_root_save" />
          `}
          ${activeApps.includes('photo') && html`
            <${PhotoRootsRow}
              folders=${rootFolderOptions} value=${photoRoots}
              busy=${photoRootsBusy} msg=${photoRootsMsg} onSave=${savePhotoRoots} />
          `}
      ${/* Root management moved to SharedDirectoriesTable above. */''}
        </${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 (!confirm(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.call('POST', '/api/groups/detach',
                          { name: nodeGroupName });
                      } catch (detachErr) {
                        if (!confirm(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 (!confirm(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}>
      `}

      ${connected && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('device.mine_title')}</h3>
          <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>
        </div>
      `}

      <${CollapsibleSection} title=${`${t('group.tab_members')} (${members.length})`}>
        <table class="admin-table">
          <thead>
            <tr>
              <th>${t('admin.col_username')}</th>
              <th>${t('members.group_role')}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            ${members.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=${() => {
                        if (!confirm(t('members.remove_confirm', { user: m.username }))) return;
                        removeMember(m);
                      }}>
                      ${removing === m.user_id ? '...' : t('members.remove')}
                    </button>
                  `}
                </td>
              </tr>
            `)}
          </tbody>
        </table>
        ${isAdmin && members.length > 1 && html`
          <p class="settings-hint">${t('members.remove_hint')}</p>
        `}
      </${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 };