import {
  html, useState, useEffect, useCallback,
} from './vendor/htm-preact.js';
import { t } 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';

// ── 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,
                             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 [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`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.apps_title')}</h3>
          <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>`}
        </div>
      `}

      ${/* 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`
        <div class="settings-section">
          <h3 class="settings-heading">${t('settings_node.scan_title')}</h3>
          <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>`}
        </div>
      `}

      ${/* Roots management (Electron-only, when node is local) */
        nodeDetected && nodeRoots.length > 0 && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('settings_node.roots')}</h3>
          ${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();
                      } 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();
                } 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>
      `}

      ${/* 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`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.uploads_title')}</h3>
          <div class="settings-row">
            <span class="settings-label">
              ${memberUpload ? t('members.uploads_on') : t('members.uploads_off')}
            </span>
            <button class="admin-btn" disabled=${uploadBusy}
              onClick=${() => setUploads(!memberUpload)}>
              ${uploadBusy ? '...'
                           : (memberUpload ? t('members.uploads_disable')
                                           : t('members.uploads_enable'))}
            </button>
          </div>
          <p class="settings-hint">${t('members.uploads_hint')}</p>
          ${uploadMsg && html`<p class="error-msg">${uploadMsg}</p>`}
        </div>
      `}

      ${/* Upload toggle via loopback when MNP not connected */
        nodeDetected && !connected && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('members.uploads_title')}</h3>
          <div class="settings-row">
            <span class="settings-label">
              ${memberUpload ? t('members.uploads_on') : t('members.uploads_off')}
            </span>
            <button class="admin-btn" disabled=${nodeBusy}
              onClick=${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); }
              }}>
              ${memberUpload ? t('members.uploads_disable')
                             : t('members.uploads_enable')}
            </button>
          </div>
          <p class="settings-hint">${t('members.uploads_hint')}</p>
        </div>
      `}

      ${/* Delete/leave — node detach first (reversible), then hub delete
            (irreversible). */ html`
        <div class="settings-section">
          <h3 class="settings-heading">
            ${isOwner ? t('group.delete_group') : t('group.leave')}
          </h3>
          <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>
        </div>
      `}

      ${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>
      `}

      <div class="settings-section">
        <h3 class="settings-heading">
          ${t('group.tab_members')} (${members.length})
        </h3>
        <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>
        `}
      </div>
    </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 };