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="settings-hint">${msg}</p>`}
    </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,
                             memberUpload, onMemberUpload,
                             enabledApps, onEnabledApps,
                             scanSettings, onScanSettings,
                             tmdbConfig, onTmdbConfig, onTmdbEnabled,
                             musicbrainzConfig, onMusicbrainzConfig, onMusicbrainzEnabled,
                             entries, nodeDirs, videoRoot, onVideoRoot,
                             audioRoot, onAudioRoot, 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);

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

  const [uploadBusy, setUploadBusy] = useState(false);
  const [uploadMsg, setUploadMsg] = useState('');

  /**
   * Close or open uploading for everyone who is not the operator.
   *
   * Signed, like removing a member: the node refuses an unsigned instruction,
   * so this is a request to the node rather than a decision taken here. The
   * button does not move until the node has said it did it.
   */
  const setUploads = useCallback(async (allowed) => {
    const transport = transportRef && transportRef.current;
    setUploadMsg('');
    setUploadBusy(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.setMemberUpload(allowed, signFn);
      if (onMemberUpload) onMemberUpload(allowed);
    } catch (err) {
      setUploadMsg(err.message);
    } finally {
      setUploadBusy(false);
    }
  }, [transportRef, onMemberUpload]);

  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 [mbBusy, setMbBusy] = useState(false);
  const [mbMsg, setMbMsg] = useState('');
  const [mbContactDraft, setMbContactDraft] = 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]);

  /**
   * The node-wide MusicBrainz contact string (docs/musicbay.md §3.2) — not
   * a secret, unlike TMDB's token, but still cleared from the draft field
   * after a save: the node never echoes it back
   * (musicbrainz_config_ack carries only whether one is set), so there is
   * nothing to keep showing.
   */
  const saveMusicbrainzConfig = useCallback(async () => {
    const transport = transportRef && transportRef.current;
    setMbMsg('');
    setMbBusy(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 contact = mbContactDraft.trim();
      await transport.setMusicbrainzConfig(contact || undefined, signFn);
      setMbContactDraft('');
      if (onMusicbrainzConfig) {
        onMusicbrainzConfig({
          contactConfigured: contact
            ? true
            : (musicbrainzConfig ? musicbrainzConfig.contactConfigured : false),
        });
      }
      setMbMsg(t('settings_node.scan_saved'));
    } catch (err) {
      setMbMsg(err.message);
    } finally {
      setMbBusy(false);
    }
  }, [transportRef, onMusicbrainzConfig, mbContactDraft, musicbrainzConfig]);

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

  /**
   * 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('');
    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(t('settings_node.scan_saved'));
    } catch (err) {
      setVideoRootMsg(err.message);
    } 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('');

  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('');
    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(t('settings_node.scan_saved'));
    } catch (err) {
      setAudioRootMsg(err.message);
    } finally {
      setAudioRootBusy(false);
    }
  }, [transportRef, onAudioRoot, audioRootDraft, audioRoot]);

  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: {},
      });

      setInviteCode({ username, code: result.code, expires: result.expires_at });
      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>
                <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>
      `}

      ${/* 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.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>
          <div class="settings-row">
            <label class="settings-label">
              ${t('settings_node.musicbrainz_contact_label')}
              <input type="text" placeholder=${t('settings_node.musicbrainz_contact_placeholder')}
                value=${mbContactDraft} disabled=${mbBusy}
                onInput=${e => setMbContactDraft(e.target.value)} />
            </label>
            <p class="settings-hint">
              ${musicbrainzConfig && musicbrainzConfig.contactConfigured
                ? t('settings_node.musicbrainz_contact_set')
                : t('settings_node.musicbrainz_contact_unset')}
            </p>
          </div>
          <button class="btn btn-small btn-secondary" style="margin-top:8px"
            disabled=${mbBusy} onClick=${() => saveMusicbrainzConfig()}>
            ${mbBusy ? t('settings_node.scan_saving') : t('settings_node.musicbrainz_save')}
          </button>
          ${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')) && 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" />
          `}
      ${/* Roots management (Electron-only, when node is local) — folded into
            the same Directories section as the two root pickers above. */
        nodeDetected && nodeRoots.length > 0 && html`
        <div class="settings-root-row">
          <div class="settings-root-row-title">
            <${Icon} name="server" />
            <h4>${t('settings_node.roots')}</h4>
          </div>
          ${nodeMsg && html`<p class="settings-hint">${nodeMsg}</p>`}
          <div class="node-roots">
            ${nodeRoots.map(r => html`
              <div class="node-root ${!r.available ? 'node-root-unavailable' : ''}"
                   key=${r.name}>
                <div class="node-root-info">
                  <span class="node-root-name">
                    <${Icon} name="folder" />
                    ${r.name}
                  </span>
                  ${r.upload && html`
                    <span class="node-root-badge">${t('node.upload_root')}</span>`}
                  ${!r.available && html`
                    <span class="node-root-badge node-root-badge-warn">
                      ${t('node.unavailable')}</span>`}
                </div>
                ${nodeRoots.length > 1 && !r.upload && html`
                  <button class="btn btn-small btn-danger"
                    disabled=${nodeBusy}
                    onClick=${async () => {
                      if (!confirm(t('node.root_remove_confirm', { name: r.name }))) return;
                      setNodeBusy(true); setNodeMsg('');
                      try {
                        await platform.node.call('DELETE',
                          '/api/groups/' + groupId + '/roots/' + encodeURIComponent(r.name));
                        await platform.node.call('POST', '/api/reload');
                        setNodeMsg(t('node.root_removed'));
                        await loadNodeInfo();
                        // Folders (unlike files) only ever arrive via a full
                        // index_sync, never index_delta (daemon.py's ongoing
                        // push has no `dirs` field) — without this, the
                        // Videos/Music root pickers kept offering a folder
                        // that no longer existed until the page was reloaded.
                        if (onRefreshIndex) await onRefreshIndex();
                      } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
                      finally { setNodeBusy(false); }
                    }}>
                    ${t('node.remove_root')}</button>`}
              </div>
            `)}
            <button class="btn btn-small btn-secondary" style="margin-top:8px"
              disabled=${nodeBusy}
              onClick=${async () => {
                const chosen = await platform.rootPicker.choose();
                if (!chosen) return;
                setNodeBusy(true); setNodeMsg(''); setNodeIndexProgress(null);
                try {
                  await platform.node.call('POST',
                    '/api/groups/' + groupId + '/roots',
                    { path: chosen.path, name: chosen.name });
                  await platform.node.call('POST', '/api/reload');
                  // The root is already scanning in the background on the
                  // node regardless of whether anyone watches this — see
                  // the "closing the client" test in test_hot_reload_*.py.
                  // This is only about not leaving the operator staring at
                  // an unchanged screen while it happens.
                  await platform.watchIndexProgress(groupId, setNodeIndexProgress);
                  setNodeMsg(t('node.root_added'));
                  await loadNodeInfo();
                  // See the matching comment on root removal above — a new
                  // folder needs a full index_sync to show up anywhere that
                  // reads `nodeDirs` (the Videos/Music root pickers), not
                  // just in this section's own node-roots list.
                  if (onRefreshIndex) await onRefreshIndex();
                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
                finally { setNodeBusy(false); }
              }}>
              <${Icon} name="folder-plus" /> ${t('node.add_root')}
            </button>
            ${nodeIndexProgress && nodeIndexProgress.scanning && html`
              <div class="index-progress" style="margin-top:8px">
                <div class="index-progress-bar">
                  <div class="index-progress-fill" style="width:${
                    nodeIndexProgress.total_bytes
                      ? Math.min(100, Math.round(
                          100 * nodeIndexProgress.scanned_bytes / nodeIndexProgress.total_bytes))
                      : 0}%"></div>
                </div>
                <div class="index-progress-label">${t('wizard.indexing_progress', {
                  pct: nodeIndexProgress.total_bytes
                    ? Math.min(100, Math.round(
                        100 * nodeIndexProgress.scanned_bytes / nodeIndexProgress.total_bytes))
                    : 0,
                })}</div>
                ${nodeIndexProgress.current_dir && html`
                  <div class="index-progress-dir">
                    ${t('wizard.indexing_current_dir', { dir: nodeIndexProgress.current_dir })}
                  </div>
                `}
              </div>
            `}
          </div>
        </div>
      `}
        </${CollapsibleSection}>
      `}

      ${/* Operator only, and only with a live connection: the node is what
            holds and enforces this, so there is nothing to show or change
            without one. */ isNodeAdmin && connected && html`
        <${CollapsibleSection} titleKey="members.uploads_title">
          <div class="settings-row">
            <${ToggleSwitch} checked=${memberUpload} disabled=${uploadBusy}
              onChange=${() => setUploads(!memberUpload)}
              label=${memberUpload ? t('members.uploads_on') : t('members.uploads_off')} />
          </div>
          <p class="settings-hint">${t('members.uploads_hint')}</p>
          ${uploadMsg && html`<p class="error-msg">${uploadMsg}</p>`}
        </${CollapsibleSection}>
      `}

      ${/* Upload toggle via loopback when MNP not connected */
        nodeDetected && !connected && html`
        <${CollapsibleSection} titleKey="members.uploads_title">
          <div class="settings-row">
            <${ToggleSwitch} checked=${memberUpload} disabled=${nodeBusy}
              onChange=${async () => {
                setNodeBusy(true); setNodeMsg('');
                try {
                  const newVal = !memberUpload;
                  await platform.node.call('PUT',
                    '/api/groups/' + groupId + '/member-upload',
                    { allowed: newVal });
                  if (onMemberUpload) onMemberUpload(newVal);
                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
                finally { setNodeBusy(false); }
              }}
              label=${memberUpload ? t('members.uploads_on') : t('members.uploads_off')} />
          </div>
          <p class="settings-hint">${t('members.uploads_hint')}</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 (!confirm(t('group.delete_group_confirm', { name: 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.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 };