import {
  html, render, useState, useEffect, useCallback, useRef,
  createContext, useContext,
} from './vendor/htm-preact.js';
import { t, getLocale, setLocale, LOCALES } from './i18n.js';

// ── Constants ────────────────────────────────────────────────────────────────

const HUB = '';
const AUTH_KEY = 'mb_auth';
const THEME_KEY = 'mb_theme';
const IDB_NAME = 'meshbay';
const IDB_VERSION = 1;
const IDB_STORE = 'group_indexes';

// ── IndexedDB cache ─────────────────────────────────────────────────────────

function openDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(IDB_NAME, IDB_VERSION);
    req.onupgradeneeded = () => {
      const db = req.result;
      if (!db.objectStoreNames.contains(IDB_STORE)) {
        db.createObjectStore(IDB_STORE, { keyPath: 'groupId' });
      }
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

async function cacheGroupIndex(groupId, groupName, entries) {
  try {
    const db = await openDB();
    const tx = db.transaction(IDB_STORE, 'readwrite');
    tx.objectStore(IDB_STORE).put({
      groupId, groupName, entries, cachedAt: Date.now(),
    });
    await new Promise((r, rej) => { tx.oncomplete = r; tx.onerror = rej; });
    db.close();
  } catch { /* best-effort */ }
}

async function getCachedGroupIndex(groupId) {
  try {
    const db = await openDB();
    const tx = db.transaction(IDB_STORE, 'readonly');
    const req = tx.objectStore(IDB_STORE).get(groupId);
    const result = await new Promise((r, rej) => { req.onsuccess = () => r(req.result); req.onerror = rej; });
    db.close();
    return result || null;
  } catch { return null; }
}

async function getAllCachedIndexes() {
  try {
    const db = await openDB();
    const tx = db.transaction(IDB_STORE, 'readonly');
    const req = tx.objectStore(IDB_STORE).getAll();
    const result = await new Promise((r, rej) => { req.onsuccess = () => r(req.result); req.onerror = rej; });
    db.close();
    return result || [];
  } catch { return []; }
}

// ── Auth persistence ─────────────────────────────────────────────────────────

// The key that opens a node's keypair bundle, derived once at sign-in. There is
// no global identity to keep: identity keys belong to a node and are fetched from
// it (transport.js), so nothing of that kind lives here.
let _bundleKey = null;
// A one-time pairing code the user just typed, consumed by the next connection
// attempt. Deliberately not persisted: it is single-use and short-lived.
let _pendingJoinCode = null;

function _openKeyDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open('meshbay_keys', 1);
    req.onupgradeneeded = () => req.result.createObjectStore('k');
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}
async function _storeBundleKey(key) {
  try {
    const db = await _openKeyDB();
    const tx = db.transaction('k', 'readwrite');
    tx.objectStore('k').put(key, 'bk');
    await new Promise(r => { tx.oncomplete = r; });
    db.close();
  } catch {}
}
async function _loadBundleKey() {
  try {
    const db = await _openKeyDB();
    const tx = db.transaction('k', 'readonly');
    const g = tx.objectStore('k').get('bk');
    const val = await new Promise(r => { g.onsuccess = () => r(g.result); });
    db.close();
    return val || null;
  } catch { return null; }
}
async function _clearKeyDB() {
  try {
    const db = await _openKeyDB();
    const tx = db.transaction('k', 'readwrite');
    tx.objectStore('k').clear();
    await new Promise(r => { tx.oncomplete = r; });
    db.close();
  } catch {}
}
/**
 * Rough passphrase strength, in bits, and what it is up against.
 *
 * This number carries more weight here than in most applications. The encrypted
 * keypair bundle is protected by PBKDF2-SHA512 (600k) and sits on every node
 * whose group you join, so the people who host your groups can attack it offline
 * (finding C4). PBKDF2 is memory-light, which is exactly what GPUs are good at.
 *
 * The estimate is deliberately conservative — character classes and length, with
 * a penalty for repetition and for the handful of patterns everyone tries. It is
 * a guide, not a guarantee, and it says so in the UI.
 */
function passwordBits(pw) {
  if (!pw) return 0;
  let pool = 0;
  if (/[a-z]/.test(pw)) pool += 26;
  if (/[A-Z]/.test(pw)) pool += 26;
  if (/[0-9]/.test(pw)) pool += 10;
  if (/[^A-Za-z0-9]/.test(pw)) pool += 32;
  let bits = pw.length * Math.log2(pool || 1);

  const unique = new Set(pw).size;
  if (unique < pw.length / 2) bits *= 0.6;          // "aaaaaaaa", "abcabcabc"
  if (/^[0-9]+$/.test(pw)) bits *= 0.5;             // dates, PINs
  if (/(password|motdepasse|azerty|qwerty|123456|meshbay)/i.test(pw)) bits *= 0.3;
  return Math.round(bits);
}

const PASSWORD_MIN_BITS = 60;   // refuse below this
const PASSWORD_MIN_LEN = 12;

/** Public X25519 key from our own secret — never read back from the hub. */
async function _pkXFromSk(skPkcs8B64) {
  const raw = Uint8Array.from(atob(skPkcs8B64), c => c.charCodeAt(0));
  const sk = await crypto.subtle.importKey('pkcs8', raw, { name: 'X25519' }, true, ['deriveBits']);
  const jwk = await crypto.subtle.exportKey('jwk', sk);
  const b64 = jwk.x.replace(/-/g, '+').replace(/_/g, '/');
  const pad = b64.length % 4;
  return pad ? b64 + '='.repeat(4 - pad) : b64;
}

function loadAuth() {
  try {
    return JSON.parse(localStorage.getItem(AUTH_KEY));
  } catch {
    return null;
  }
}

function saveAuth(auth) {
  if (auth) {
    localStorage.setItem(AUTH_KEY, JSON.stringify(auth));
  } else {
    localStorage.removeItem(AUTH_KEY);
    _bundleKey = null;
    _clearKeyDB();
  }
}

// ── Theme ────────────────────────────────────────────────────────────────────

function getInitialTheme() {
  const stored = localStorage.getItem(THEME_KEY);
  if (stored === 'dark' || stored === 'light' || stored === 'system') return stored;
  return 'system';
}

function resolveTheme(pref) {
  if (pref === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return pref;
}

// ── Hub API ──────────────────────────────────────────────────────────────────

async function hubFetch(path, { method = 'GET', body, token } = {}) {
  const headers = {};
  if (body) headers['Content-Type'] = 'application/json';
  if (token) headers['Authorization'] = `Bearer ${token}`;
  const opts = { method, headers };
  if (body) opts.body = JSON.stringify(body);
  const r = await fetch(HUB + path, opts);
  if (!r.ok) {
    const err = await r.json().catch(() => ({ detail: r.statusText }));
    const detail = Array.isArray(err.detail)
      ? err.detail.map(e => e.msg || JSON.stringify(e)).join(', ')
      : (err.detail || r.statusText);
    throw new Error(String(detail));
  }
  return r.json();
}

// ── Router ───────────────────────────────────────────────────────────────────

function useRoute() {
  const [hash, setHash] = useState(window.location.hash.slice(1) || '/');
  useEffect(() => {
    const onHash = () => setHash(window.location.hash.slice(1) || '/');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return hash;
}

function navigate(path) {
  window.location.hash = path;
}

// ── Context ──────────────────────────────────────────────────────────────────

const AuthContext = createContext(null);
function useAuth() { return useContext(AuthContext); }

// ── User Menu ────────────────────────────────────────────────────────────────

function UserMenu({ user, theme, onThemeChange, onLogout }) {
  const [open, setOpen] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const close = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, [open]);

  const resolved = resolveTheme(theme);

  return html`
    <div class="user-menu-wrap" ref=${ref}>
      <button class="user-menu-trigger" onClick=${() => setOpen(o => !o)}>
        <span class="user-menu-avatar">${user.username[0].toUpperCase()}</span>
        <span class="user-menu-name">${user.username}</span>
        <span class="user-menu-caret">${open ? '▴' : '▾'}</span>
      </button>
      ${open && html`
        <div class="user-menu-dropdown">
          <div class="user-menu-header">
            <span class="user-menu-avatar lg">${user.username[0].toUpperCase()}</span>
            <div>
              <div class="user-menu-uname">${user.username}</div>
              <div class="user-menu-role">${user.role || 'user'}</div>
            </div>
          </div>
          <div class="user-menu-divider"></div>
          <button class="user-menu-item" onClick=${(e) => { e.stopPropagation(); setLangOpen(o => !o); }}>
            <span class="umi-icon">${'\u{1F310}'}</span> ${t('usermenu.language')}
            <span class="umi-arrow">${langOpen ? '▴' : '▾'}</span>
          </button>
          ${langOpen && LOCALES.map(l => html`
            <button key=${l.code} class="user-menu-item user-menu-sub"
              onClick=${() => { setLocale(l.code); window.location.reload(); }}>
              <span class="umi-icon">${l.flag}</span> ${l.name}
              ${getLocale() === l.code && html`<span class="umi-check">${'✓'}</span>`}
            </button>
          `)}
          <button class="user-menu-item" onClick=${() => { setOpen(false); navigate('/settings'); }}>
            <span class="umi-icon">${'⚙'}</span> ${t('usermenu.settings')}
          </button>
          <button class="user-menu-item" onClick=${() => {
            onThemeChange(resolved === 'dark' ? 'light' : 'dark');
          }}>
            <span class="umi-icon">${resolved === 'dark' ? '☀' : '☾'}</span>
            ${' '}${resolved === 'dark' ? t('usermenu.theme_light') : t('usermenu.theme_dark')}
          </button>
          <div class="user-menu-divider"></div>
          <button class="user-menu-item user-menu-logout" onClick=${onLogout}>
            <span class="umi-icon">${'⏻'}</span> ${t('usermenu.logout')}
          </button>
        </div>
      `}
    </div>
  `;
}

// ── Nav ──────────────────────────────────────────────────────────────────────

function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount }) {
  return html`
    <nav class="nav">
      <div class="nav-left">
        ${user && html`
          <button class="nav-hamburger" onClick=${onMenuToggle}
            aria-label="${t('nav.toggle_menu')}">≡</button>
        `}
        <a class="nav-brand" href="#/">MeshBay</a>
      </div>
      <div class="nav-right">
        ${user && html`
          <a class="nav-notif" href="#/" title=${t('notif.title')}>
            ${'\u{1F514}'}${unreadCount > 0 && html`<span class="notif-badge">${unreadCount}</span>`}
          </a>
        `}
        ${user ? html`
          <${UserMenu} user=${user} theme=${theme}
            onThemeChange=${onThemeChange} onLogout=${onLogout} />
        ` : html`
          <a class="nav-btn" href="#/login">${t('nav.login')}</a>
        `}
      </div>
    </nav>
  `;
}

// ── Sidebar ──────────────────────────────────────────────────────────────────

function Sidebar({ groups, route, menuOpen, role }) {
  const isStaff = role === 'moderator' || role === 'admin';
  return html`
    <aside class="sidebar ${menuOpen ? 'open' : ''}">
      ${isStaff && html`
        <div class="sidebar-section">
          <div class="sidebar-heading">${t('sidebar.admin')}</div>
          <a class="sidebar-item ${route === '/admin' ? 'active' : ''}"
             href="#/admin">${'\u{1F6E1}'} ${t('admin.title')}</a>
        </div>
      `}
      <div class="sidebar-section">
        <div class="sidebar-heading">${t('sidebar.discover')}</div>
        <a class="sidebar-item ${route === '/explore' ? 'active' : ''}"
           href="#/explore">${t('sidebar.public_groups')}</a>
        <a class="sidebar-item ${route === '/search' ? 'active' : ''}"
           href="#/search">${t('sidebar.search')}</a>
        <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
           href="#/create-group">${t('sidebar.create_group')}</a>
      </div>
      <div class="sidebar-section">
        <div class="sidebar-heading">${t('sidebar.my_groups')}</div>
        ${groups.length === 0
          ? html`<div class="sidebar-empty">${t('sidebar.no_groups')}</div>`
          : groups.map(g => html`
            <a key=${g.id}
               class="sidebar-item ${route === '/group/' + g.id ? 'active' : ''}"
               href="#/group/${g.id}">
              ${g.name}
            </a>
          `)
        }
      </div>
    </aside>
  `;
}

// ── Login Page ───────────────────────────────────────────────────────────────

function LoginPage() {
  const auth = useAuth();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!username || !password) return;
    setError('');
    setLoading(true);
    try {
      await auth.login(username, password);
      navigate('/');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return html`
    <div class="page-center">
      <div class="card login-card">
        <h2>${t('login.title')}</h2>
        <form onSubmit=${onSubmit}>
          <input type="text" placeholder="${t('login.username')}" value=${username}
                 onInput=${e => setUsername(e.target.value)}
                 autocomplete="username" required />
          <input type="password" placeholder="${t('login.password')}" value=${password}
                 onInput=${e => setPassword(e.target.value)}
                 autocomplete="current-password" required />
          ${error && html`<div class="error-msg">${error}</div>`}
          <button type="submit" disabled=${loading}>
            ${loading ? t('login.loading') : t('login.submit')}
          </button>
        </form>
        <div class="login-footer">
          ${t('login.no_account')} <a href="#/register">${t('login.register_link')}</a>
        </div>
      </div>
    </div>
  `;
}

// ── Register Page ────────────────────────────────────────────────────────────

function RegisterPage() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (password !== confirm) { setError(t('register.err_mismatch')); return; }
    if (password.length < PASSWORD_MIN_LEN) {
      setError(t('register.err_min_len', { n: PASSWORD_MIN_LEN })); return;
    }
    // The floor can only live here: with the password split (T1) the hub never
    // sees the password, so it cannot enforce anything about it.
    if (passwordBits(password) < PASSWORD_MIN_BITS) {
      setError(t('register.err_too_weak')); return;
    }
    setError('');
    setLoading(true);
    try {
      if (window.MeshBayKeys) {
        await window.MeshBayKeys.registerUser(username, email, password);
      } else {
        await hubFetch('/v1/users/register', {
          method: 'POST',
          body: { username, email, password, pk_user_ed25519: '', pk_user_x25519: '' },
        });
      }
      setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return html`
      <div class="page-center">
        <div class="card login-card">
          <h2>${t('register.success_title')}</h2>
          <p style="text-align:center; margin-bottom:16px; color:var(--text-secondary)">
            ${t('register.success_msg')}
          </p>
          <a href="#/login" style="display:block; text-align:center">${t('register.go_login')}</a>
        </div>
      </div>
    `;
  }

  return html`
    <div class="page-center">
      <div class="card login-card">
        <h2>${t('register.title')}</h2>
        <form onSubmit=${onSubmit}>
          <input type="text" placeholder="${t('register.username')}" value=${username}
                 onInput=${e => setUsername(e.target.value)}
                 autocomplete="username" required />
          <input type="email" placeholder="${t('register.email')}" value=${email}
                 onInput=${e => setEmail(e.target.value)}
                 autocomplete="email" required />
          <input type="password" placeholder="${t('register.password')}" value=${password}
                 onInput=${e => setPassword(e.target.value)}
                 autocomplete="new-password" required minlength="8" />
          ${password && html`
            <div style="margin:-4px 0 10px">
              <div style="height:4px;background:var(--border);border-radius:2px;overflow:hidden">
                <div style=${`height:100%;width:${Math.min(100, passwordBits(password) / 100 * 100)}%;
                     background:${passwordBits(password) < PASSWORD_MIN_BITS ? 'var(--error)'
                       : passwordBits(password) < 80 ? 'var(--yellow, #f59e0b)' : 'var(--success)'}`}></div>
              </div>
              <p style="font-size:0.8em;color:var(--text-dim);margin-top:4px">
                ${t('register.strength', { bits: passwordBits(password) })}
              </p>
            </div>
          `}
          <input type="password" placeholder="${t('register.confirm')}" value=${confirm}
                 onInput=${e => setConfirm(e.target.value)}
                 autocomplete="new-password" required />
          ${error && html`<div class="error-msg">${error}</div>`}
          <button type="submit" disabled=${loading}>
            ${loading ? t('register.loading') : t('register.submit')}
          </button>
        </form>
        <div class="login-footer">
          ${t('register.has_account')} <a href="#/login">${t('register.login_link')}</a>
        </div>
      </div>
    </div>
  `;
}

// ── Home Page ────────────────────────────────────────────────────────────────

function NotificationFeed({ notifications, onMarkRead }) {
  if (!notifications.length) return null;
  return html`
    <div class="notif-feed">
      <h3>${t('notif.title')}</h3>
      ${notifications.map(n => html`
        <div key=${n.id} class="notif-item ${n.read ? '' : 'notif-unread'}"
          onClick=${() => {
            if (!n.read) onMarkRead(n.id);
            if (n.link) navigate(n.link);
          }}>
          <span class="notif-kind">${n.kind}</span>
          <span class="notif-text">${n.title}</span>
          <span class="notif-time">${new Date(n.created_at).toLocaleDateString()}</span>
        </div>
      `)}
    </div>
  `;
}

function HomePage({ groups, notifications, onMarkRead }) {
  if (groups.length === 0) {
    return html`
      <div>
        <h2>${t('home.welcome')}</h2>
        <${NotificationFeed} notifications=${notifications} onMarkRead=${onMarkRead} />
        <p class="page-message">
          ${t('home.no_groups')}
          ${' '}${t('home.browse_prefix')}<a href="#/explore">${t('home.browse_link')}</a>${t('home.browse_suffix')}
        </p>
      </div>
    `;
  }

  return html`
    <div>
      <h2>${t('home.my_groups')}</h2>
      <${NotificationFeed} notifications=${notifications} onMarkRead=${onMarkRead} />
      <div class="group-grid">
        ${groups.map(g => html`
          <a key=${g.id} class="group-card" href="#/group/${g.id}">
            <h3>${g.name}</h3>
            <span class="badge">${g.visibility}</span>
            ${' '}
            <span class="badge">${g.join_policy}</span>
            ${g.is_admin && html`${' '}<span class="badge">admin</span>`}
          </a>
        `)}
      </div>
    </div>
  `;
}

// ── Explore Page ─────────────────────────────────────────────────────────────

function ExplorePage({ token, myGroupIds }) {
  const [groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [joining, setJoining] = useState(null);

  const doSearch = useCallback((q) => {
    setLoading(true);
    const url = q ? `/v1/groups?q=${encodeURIComponent(q)}` : '/v1/groups';
    hubFetch(url, { token })
      .then(data => setGroups(data.groups || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [token]);

  useEffect(() => { doSearch(''); }, [token]);

  const onSearch = useCallback((e) => {
    const q = e.target.value;
    setSearch(q);
    doSearch(q);
  }, [doSearch]);

  const joinGroup = useCallback(async (gid) => {
    setJoining(gid);
    try {
      await hubFetch(`/v1/groups/${gid}/join`, { method: 'POST', token });
      navigate(`/group/${gid}`);
      setTimeout(() => window.location.reload(), 100);
    } catch (err) {
      if (err.message.includes('Already a member')) {
        navigate(`/group/${gid}`);
      } else {
        alert(err.message);
      }
    } finally {
      setJoining(null);
    }
  }, [token]);

  const isMember = (gid) => myGroupIds && myGroupIds.includes(gid);

  return html`
    <div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
        <h2 style="margin:0">${t('explore.title')}</h2>
        <a class="admin-btn" href="#/create-group">${t('explore.create_group')}</a>
      </div>
      <div class="file-toolbar" style="margin-bottom:16px">
        <input type="text" class="admin-search" placeholder="${t('explore.search')}"
          value=${search} onInput=${onSearch} />
      </div>
      ${loading
        ? html`<p class="page-message">${t('explore.loading')}</p>`
        : groups.length === 0
          ? html`<p class="page-message">${t('explore.empty')}</p>`
          : html`
            <div class="group-grid">
              ${groups.map(g => html`
                <div key=${g.id} class="group-card">
                  <a href="#/group/${g.id}" style="text-decoration:none;color:inherit">
                    <h3>${g.name}</h3>
                    ${g.description && html`<p class="group-card-desc">${g.description}</p>`}
                  </a>
                  <span class="badge">${g.join_policy}</span>
                  ${g.source && g.source !== 'local' && html`
                    ${' '}<span class="badge">${g.source}</span>
                  `}
                  ${' '}
                  ${isMember(g.id)
                    ? html`<span class="badge">${t('explore.member')}</span>`
                    : g.join_policy === 'open' && html`
                      <button class="admin-btn" style="margin-top:8px"
                        disabled=${joining === g.id}
                        onClick=${() => joinGroup(g.id)}>
                        ${joining === g.id ? '...' : t('explore.join')}
                      </button>
                    `
                  }
                </div>
              `)}
            </div>
          `
      }
    </div>
  `;
}

// ── Create Group Page ────────────────────────────────────────────────────────

function CreateGroupPage({ token, onCreated }) {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [visibility, setVisibility] = useState('private');
  const [joinPolicy, setJoinPolicy] = useState('invite');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!name.trim()) return;
    setLoading(true);
    setError('');
    try {
      const body = { name: name.trim(), visibility, join_policy: joinPolicy };
      if (description.trim()) body.description = description.trim().slice(0, 512);
      const data = await hubFetch('/v1/groups', {
        method: 'POST', token, body,
      });

      if (onCreated) onCreated();
      navigate('/');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return html`
    <div class="create-group-page">
      <div class="create-group-card">
        <div class="create-group-header">
          <h2>${t('create_group.title')}</h2>
          <p class="create-group-hint">${t('create_group.hint')}</p>
        </div>
        ${error && html`<div class="error-msg" style="margin-bottom:16px">${error}</div>`}
        <form onSubmit=${onSubmit}>
          <div class="form-field">
            <label class="form-label">${t('create_group.name')}</label>
            <input type="text" placeholder="e.g. Family Photos, Project Files..."
              value=${name} onInput=${e => setName(e.target.value)} required autofocus />
          </div>

          <div class="form-field">
            <label class="form-label">${t('create_group.description')}</label>
            <textarea class="form-textarea" rows="3" maxlength="512"
              placeholder="${t('create_group.description_hint')}"
              value=${description}
              onInput=${e => setDescription(e.target.value)} />
            <div class="form-char-count">${description.length}/512</div>
          </div>

          <div class="form-field">
            <label class="form-label">${t('create_group.visibility')}</label>
            <div class="option-cards">
              <button type="button" class="option-card ${visibility === 'private' ? 'selected' : ''}"
                onClick=${() => setVisibility('private')}>
                <span class="option-icon">🔒</span>
                <span class="option-title">${t('create_group.private')}</span>
                <span class="option-desc">Only invited members can see and access files</span>
              </button>
              <button type="button" class="option-card ${visibility === 'public' ? 'selected' : ''}"
                onClick=${() => setVisibility('public')}>
                <span class="option-icon">🌐</span>
                <span class="option-title">${t('create_group.public')}</span>
                <span class="option-desc">Anyone can discover and browse this group</span>
              </button>
            </div>
          </div>

          <div class="form-field">
            <label class="form-label">${t('create_group.join_policy')}</label>
            <div class="option-cards">
              <button type="button" class="option-card ${joinPolicy === 'invite' ? 'selected' : ''}"
                onClick=${() => setJoinPolicy('invite')}>
                <span class="option-icon">✉</span>
                <span class="option-title">${t('create_group.invite')}</span>
                <span class="option-desc">Members must be invited by an admin</span>
              </button>
              <button type="button" class="option-card ${joinPolicy === 'open' ? 'selected' : ''}"
                onClick=${() => setJoinPolicy('open')}>
                <span class="option-icon">🚪</span>
                <span class="option-title">${t('create_group.open')}</span>
                <span class="option-desc">Anyone can join without approval</span>
              </button>
            </div>
          </div>

          <button class="create-group-submit" type="submit" disabled=${loading}>
            ${loading ? t('create_group.creating') : t('create_group.submit')}
          </button>
        </form>
      </div>
    </div>
  `;
}

// ── Helpers ──────────────────────────────────────────────────────────────────

const FILE_ICONS = {
  video: '\u{1F3AC}', audio: '\u{1F3B5}', image: '\u{1F5BC}',
  document: '\u{1F4C4}', archive: '\u{1F4E6}', other: '\u{1F4CE}',
};

function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}

function formatDate(ts) {
  return new Date(ts * 1000).toLocaleDateString(undefined, {
    year: 'numeric', month: 'short', day: 'numeric',
  });
}

// ── Group Page ──────────────────────────────────────────────────────────────

const CHUNK_SIZE = 1024 * 1024;
const UPLOAD_CHUNK_SIZE = 48 * 1024;
const PIPELINE_WINDOW = 8;

async function pipelinedDownload(transport, gekKey, fileId, totalChunks, onChunk, writable) {
  const results = writable ? null : new Array(totalChunks);
  let nextSend = 0, nextRecv = 0;
  const inflight = new Array(totalChunks);

  const fire = () => {
    while (nextSend < totalChunks && nextSend - nextRecv < PIPELINE_WINDOW) {
      inflight[nextSend] = transport.fetchChunk(fileId, nextSend);
      nextSend++;
    }
  };

  fire();
  while (nextRecv < totalChunks) {
    const chunkMsg = await inflight[nextRecv];
    let plaintext;
    if (gekKey && chunkMsg.ct) {
      plaintext = await window.MeshBayCrypto.decryptChunkBin(
        gekKey, fileId, nextRecv, chunkMsg.nonce, chunkMsg.ct);
    } else if (gekKey && chunkMsg.ct_b64) {
      plaintext = await window.MeshBayCrypto.decryptChunk(
        gekKey, fileId, nextRecv, chunkMsg.nonce_b64, chunkMsg.ct_b64);
    } else {
      plaintext = _b64ToU8(chunkMsg.ct_b64 || chunkMsg.data_b64);
    }
    if (writable) {
      await writable.write(plaintext);
    } else {
      results[nextRecv] = plaintext;
    }
    nextRecv++;
    fire();
    if (onChunk) onChunk(plaintext.byteLength, nextRecv, totalChunks);
  }
  return results;
}

function GroupPage({ groupId, group, token, username, userId, onRefreshAuth }) {
  const [status, setStatus] = useState('idle');
  const [entries, setEntries] = useState([]);
  const [cached, setCached] = useState(false);
  const [error, setError] = useState('');
  const [sortKey, setSortKey] = useState('name');
  const [sortAsc, setSortAsc] = useState(true);
  const [filter, setFilter] = useState('');
  const [currentPath, setCurrentPath] = useState('');
  const [dlState, setDlState] = useState(null);
  const [videoEntry, setVideoEntry] = useState(null);
  const [previewEntry, setPreviewEntry] = useState(null);
  const [tab, setTab] = useState('files');
  const [uploading, setUploading] = useState(false);
  const [menuOpen, setMenuOpen] = useState(null);
  const [isNodeAdmin, setIsNodeAdmin] = useState(false);
  const [needsCode, setNeedsCode] = useState(false);
  const [codeInput, setCodeInput] = useState('');
  const [retryKey, setRetryKey] = useState(0);
  const transportRef = useRef(null);
  const gekRef = useRef(null);
  // One refresh per mount: if a fresh token still says we are not a member, we
  // really are not, and retrying forever would hide that.
  const refreshedRef = useRef(false);

  const submitJoinCode = useCallback((e) => {
    e.preventDefault();
    const code = codeInput.trim();
    if (!code) return;
    _pendingJoinCode = code;
    setCodeInput('');
    setNeedsCode(false);
    setError('');
    setRetryKey(k => k + 1);
  }, [codeInput]);

  useEffect(() => {
    if (menuOpen === null) return;
    const close = () => setMenuOpen(null);
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, [menuOpen]);

  useEffect(() => {
    let cancelled = false;

    getCachedGroupIndex(groupId).then(hit => {
      if (hit && !cancelled) {
        setEntries(hit.entries || []);
        setCached(true);
      }
    });

    const connect = async () => {
      setStatus('discovering');
      setError('');
      gekRef.current = null;
      if (!_bundleKey) _bundleKey = await _loadBundleKey();
      try {
        const nodesData = await hubFetch(`/v1/groups/${groupId}/nodes`, { token });
        if (cancelled) return;
        if (!nodesData.nodes || nodesData.nodes.length === 0) {
          setStatus('offline');
          return;
        }

        // No keys are carried in: the transport fetches this node's identity
        // from the node, or creates one there on a first join.
        const sessionKeys = null;

        setStatus('connecting');
        const nodeId = nodesData.nodes[0].node_id;
        const transport = new window.MeshBayTransport('', token);
        transportRef.current = transport;

        const ack = await transport.connect(
          nodeId, token, groupId, null, sessionKeys, _bundleKey, username,
          userId, _pendingJoinCode);
        _pendingJoinCode = null;
        if (cancelled) return;
        setIsNodeAdmin(!!ack.is_node_admin);

        // A first join to this node generated an identity for it; leave it with
        // the node so any other browser can become the same person here with the
        // passphrase. It is this node's key and no other's.
        if (transport.connected && transport.newNodeBundle) {
          try {
            await transport.storeKeypairBundle(transport.newNodeBundle);
            transport.newNodeBundle = null;
          } catch (e) {
            console.warn('[MeshBay] could not leave our key with the node:', e.message);
          }
        }

        // Import GEK from transport (fetched from node during handshake)
        if (transport.gekRaw && window.MeshBayCrypto) {
          gekRef.current = await window.MeshBayCrypto.importGEK(
            window.MeshBayCrypto.b64encode(transport.gekRaw));
        }

        setStatus('fetching');

        transport.onIndexSync = (msg) => {
          if (cancelled) return;
          const synced = msg.entries || [];
          setEntries(synced);
          setCached(false);
          cacheGroupIndex(groupId, group ? group.name : groupId, synced);
        };

        const indexMsg = await transport.fetchIndex();
        if (cancelled) return;
        const freshEntries = indexMsg.entries || [];
        setEntries(freshEntries);
        setCached(false);
        setStatus('connected');

        cacheGroupIndex(groupId, group ? group.name : groupId, freshEntries);
      } catch (err) {
        if (cancelled) return;

        // Our token predates being added to this group. Refresh once and retry
        // rather than telling someone who was just invited that they are not a
        // member — which is what the node honestly sees, and is useless to them.
        if (err.reason === 'not_a_member' && !refreshedRef.current && onRefreshAuth) {
          refreshedRef.current = true;
          try {
            if (await onRefreshAuth()) return;   // new token → effect re-runs
          } catch { /* fall through to the message below */ }
        }

        // The node has never seen this browser for this account: it needs a
        // one-time code from the operator before it will hand over the group
        // key. Not an error to shout about — a step in joining.
        if (err.reason === 'code_required') setNeedsCode(true);
        setError(err.message);
        setStatus('error');
      }
    };

    if (token && window.MeshBayTransport) {
      connect();
    } else if (!window.MeshBayTransport) {
      setStatus('error');
      setError(t('group.err_transport'));
    }

    return () => {
      cancelled = true;
      if (transportRef.current) {
        transportRef.current.onIndexSync = null;
        transportRef.current.close();
        transportRef.current = null;
      }
    };
  }, [groupId, token, retryKey]);

  const downloadFile = useCallback(async (entry) => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;

    setDlState({ fileId: entry.id, name: entry.name, progress: 0, total: entry.size });

    try {
      const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
      let downloaded = 0;
      const onProgress = (bytes) => {
        downloaded += bytes;
        setDlState(prev => ({ ...prev, progress: downloaded }));
      };

      if (window.showSaveFilePicker) {
        const handle = await window.showSaveFilePicker({ suggestedName: entry.name });
        const writable = await handle.createWritable();
        try {
          await pipelinedDownload(
            transport, gekRef.current, entry.id, totalChunks, onProgress, writable);
          await writable.close();
        } catch (err) {
          await writable.abort();
          throw err;
        }
      } else {
        const chunks = await pipelinedDownload(
          transport, gekRef.current, entry.id, totalChunks, onProgress);
        const blob = new Blob(chunks);
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = entry.name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }
      setDlState(null);
    } catch (err) {
      setDlState(null);
      if (err.name === 'AbortError') return;
      setError(t('group.dl_failed', { err: err.message }));
    }
  }, []);

  const uploadFile = useCallback(async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    setUploading(true);
    setError('');
    try {
      const totalChunks = Math.ceil(file.size / UPLOAD_CHUNK_SIZE);
      for (let i = 0; i < totalChunks; i++) {
        const slice = file.slice(i * UPLOAD_CHUNK_SIZE, (i + 1) * UPLOAD_CHUNK_SIZE);
        const buf = new Uint8Array(await slice.arrayBuffer());
        await transport.uploadChunk(file.name, i, totalChunks, buf);
      }
      await new Promise(r => setTimeout(r, 2500));
      const indexMsg = await transport.fetchIndex();
      if (indexMsg.entries) setEntries(indexMsg.entries);
    } catch (err) {
      setError(err.message);
    } finally {
      setUploading(false);
    }
  }, []);

  const deleteFile = useCallback(async (entry) => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    try {
      // Signs an explicit transcript built by transport.js, not opaque bytes from
      // the node — see MeshBayCrypto.adminTranscript and finding H5.
      // 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;
      await transport.deleteFile(entry.id, signFn);
      const indexMsg = await transport.fetchIndex();
      setEntries(indexMsg.entries || []);
    } catch (err) {
      setError(err.message);
    }
  }, []);

  const refreshIndex = useCallback(async () => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    try {
      const indexMsg = await transport.fetchIndex();
      setEntries(indexMsg.entries || []);
    } catch {}
  }, []);

  const toggleSort = useCallback((key) => {
    setSortAsc(prev => sortKey === key ? !prev : true);
    setSortKey(key);
  }, [sortKey]);

  const dirs = new Set();
  const filteredEntries = entries.filter(e => {
    const ePath = e.path || '';
    if (ePath === currentPath) {
      return !filter || e.name.toLowerCase().includes(filter.toLowerCase());
    }
    if (!currentPath && ePath) {
      dirs.add(ePath.split('/')[0]);
    } else if (currentPath && ePath.startsWith(currentPath + '/')) {
      const rest = ePath.slice(currentPath.length + 1);
      dirs.add(rest.split('/')[0]);
    }
    return false;
  });

  const sorted = [...filteredEntries].sort((a, b) => {
    let cmp = 0;
    if (sortKey === 'name') cmp = a.name.localeCompare(b.name);
    else if (sortKey === 'size') cmp = a.size - b.size;
    else if (sortKey === 'type') cmp = a.type.localeCompare(b.type);
    else if (sortKey === 'date') cmp = a.added_at - b.added_at;
    return sortAsc ? cmp : -cmp;
  });

  const subdirs = [...dirs].sort();

  const baseLabel = {
    idle: t('status.idle'),
    discovering: t('status.discovering'),
    connecting: t('status.connecting'),
    fetching: t('status.fetching'),
    connected: t('status.files', { n: entries.length }),
    offline: t('status.offline'),
    error: t('status.error'),
  }[status] || status;
  const statusLabel = (cached && status !== 'connected')
    ? `${baseLabel} (${t('status.cached', { n: entries.length })})`
    : baseLabel;

  const statusClass = status === 'connected' ? 'status-ok'
    : status === 'error' || status === 'offline' ? 'status-err' : 'status-busy';

  const breadcrumbs = currentPath ? currentPath.split('/') : [];

  return html`
    <div>
      <div class="group-header">
        <div>
          <h2 style="margin-bottom:${group && group.description ? '4px' : '0'}">
            ${group ? group.name : t('group.default_name')}
          </h2>
          ${group && group.description && html`
            <p class="group-desc">${group.description}</p>
          `}
        </div>
        <span class="status-badge ${statusClass}">
          ${(status === 'discovering' || status === 'connecting' || status === 'fetching')
            && html`<span class="spinner"></span>${' '}`}
          ${statusLabel}
        </span>
        ${group && group.is_admin && html`
          <button class="admin-btn danger" style="margin-left:auto"
            onClick=${async () => {
              if (!confirm(t('group.delete_group_confirm', { name: group.name }))) return;
              try {
                await hubFetch('/v1/groups/' + groupId, { method: 'DELETE', token });
                navigate('/');
                window.location.reload();
              } catch (err) { setError(err.message); }
            }}>${t('group.delete_group')}</button>
        `}
      </div>
      ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}
      ${needsCode && html`
        <form class="invite-form" style="margin-bottom:12px" onSubmit=${submitJoinCode}>
          <h4>${t('group.join_code_title')}</h4>
          <p class="settings-hint">${t('group.join_code_hint')}</p>
          <div style="display:flex;gap:8px">
            <input type="text" placeholder="XXXX-XXXX" style="font-family:monospace"
              value=${codeInput} onInput=${e => setCodeInput(e.target.value)} required />
            <button class="admin-btn" type="submit">${t('group.join_code_btn')}</button>
          </div>
        </form>
      `}
      ${dlState && html`
        <div class="dl-bar">
          <span class="dl-name">${dlState.name}</span>
          <div class="dl-progress">
            <div class="dl-fill" style="width:${Math.round(dlState.progress / dlState.total * 100)}%"></div>
          </div>
          <span class="dl-pct">${formatSize(dlState.progress)} / ${formatSize(dlState.total)}</span>
        </div>
      `}
      ${(status === 'connected' || (cached && entries.length > 0)) && html`
        <div class="group-tabs">
          <button class="group-tab ${tab === 'files' ? 'active' : ''}"
            onClick=${() => setTab('files')}>${t('group.tab_files')}</button>
          <button class="group-tab ${tab === 'chat' ? 'active' : ''}"
            onClick=${() => setTab('chat')}>${t('group.tab_chat')}</button>
          <button class="group-tab ${tab === 'members' ? 'active' : ''}"
            onClick=${() => setTab('members')}>${t('group.tab_members')}</button>
        </div>

        ${tab === 'files' && html`
          <div class="file-toolbar">
            <label class="admin-btn upload-btn" style="cursor:pointer;margin-right:8px">
              ${uploading ? t('group.uploading') : t('group.upload')}
              <input type="file" style="display:none" onChange=${uploadFile}
                disabled=${uploading} />
            </label>
            <div class="breadcrumbs">
              <a class="crumb" onClick=${() => setCurrentPath('')}>/</a>
              ${breadcrumbs.map((seg, i) => {
                const path = breadcrumbs.slice(0, i + 1).join('/');
                return html`
                  <span class="crumb-sep">/</span>
                  <a class="crumb" onClick=${() => setCurrentPath(path)}>${seg}</a>
                `;
              })}
            </div>
            <input type="text" class="file-search" placeholder="${t('group.filter')}"
              value=${filter} onInput=${e => setFilter(e.target.value)} />
          </div>
          <table class="file-table">
            <thead>
              <tr>
                <th></th>
                <th class="sortable" onClick=${() => toggleSort('name')}>
                  ${t('group.col_name')} ${sortKey === 'name' ? (sortAsc ? '▲' : '▼') : ''}
                </th>
                <th class="sortable" onClick=${() => toggleSort('size')}>
                  ${t('group.col_size')} ${sortKey === 'size' ? (sortAsc ? '▲' : '▼') : ''}
                </th>
                <th class="sortable th-type" onClick=${() => toggleSort('type')}>
                  ${t('group.col_type')} ${sortKey === 'type' ? (sortAsc ? '▲' : '▼') : ''}
                </th>
                <th class="sortable th-date" onClick=${() => toggleSort('date')}>
                  ${t('group.col_date')} ${sortKey === 'date' ? (sortAsc ? '▲' : '▼') : ''}
                </th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              ${subdirs.map(d => html`
                <tr class="file-row dir-row" onClick=${() =>
                  setCurrentPath(currentPath ? currentPath + '/' + d : d)}>
                  <td>\u{1F4C1}</td>
                  <td>${d}/</td>
                  <td></td>
                  <td class="td-type"></td>
                  <td class="td-date"></td>
                  <td></td>
                </tr>
              `)}
              ${sorted.map(e => {
                const canPreview = ['image', 'video', 'document'].includes(e.type)
                  || e.name.match(/\.(txt|md|json|csv|log|xml|yaml|yml|ini|conf|py|js|html|css|sh|c|h|java|rs|go|rb|toml)$/i);
                return html`
                  <tr class="file-row" key=${e.id}>
                    <td>${FILE_ICONS[e.type] || FILE_ICONS.other}</td>
                    <td class="file-name">
                      ${canPreview
                        ? html`<a class="file-link" onClick=${() => {
                            if (e.type === 'video') setVideoEntry(e);
                            else setPreviewEntry(e);
                          }}>${e.name}</a>`
                        : e.name
                      }
                    </td>
                    <td class="file-size">${formatSize(e.size)}</td>
                    <td class="file-type td-type">${e.type}</td>
                    <td class="file-date td-date">${formatDate(e.added_at)}</td>
                    <td class="file-actions-cell">
                      <button class="file-menu-btn" onClick=${(ev) => {
                        ev.stopPropagation();
                        setMenuOpen(menuOpen === e.id ? null : e.id);
                      }}>${'\u{22EE}'}</button>
                      ${menuOpen === e.id && html`
                        <div class="file-menu">
                          ${canPreview && html`
                            <button onClick=${() => {
                              setMenuOpen(null);
                              if (e.type === 'video') setVideoEntry(e);
                              else setPreviewEntry(e);
                            }}><span class="fmi">${'\u{1F441}'}</span> ${t('group.view')}</button>
                          `}
                          <button onClick=${() => { setMenuOpen(null); downloadFile(e); }}>
                            <span class="fmi">${'\u{2B07}'}</span> ${t('group.download')}
                          </button>
                          ${e.type === 'video' && html`
                            <button onClick=${() => { setMenuOpen(null); setVideoEntry(e); }}>
                              <span class="fmi">${'\u{25B6}'}</span> ${t('group.play')}
                            </button>
                          `}
                          ${(isNodeAdmin || (userId && e.uploader_id === userId)) && status === 'connected' && html`
                            <button class="danger" onClick=${() => {
                              setMenuOpen(null);
                              if (confirm(t('group.delete_confirm', { name: e.name }))) deleteFile(e);
                            }}><span class="fmi">${'\u{1F5D1}'}</span> ${t('group.delete')}</button>
                          `}
                        </div>
                      `}
                    </td>
                  </tr>
                `;
              })}
              ${sorted.length === 0 && subdirs.length === 0 && html`
                <tr><td colspan="6" class="file-empty">
                  ${filter ? t('group.empty_filter') : t('group.empty_dir')}
                </td></tr>
              `}
            </tbody>
          </table>
        `}

        ${tab === 'chat' && status === 'connected' && html`
          <${ChatPanel} transportRef=${transportRef} username=${username}
            entries=${entries} gekRef=${gekRef} onRefreshIndex=${refreshIndex}
            onPreview=${(entry) => {
              if (entry.type === 'video') setVideoEntry(entry);
              else setPreviewEntry(entry);
            }} />
        `}
        ${tab === 'chat' && status !== 'connected' && html`
          <p class="page-message"><span class="spinner"></span>${' '}${t('status.connecting')}</p>
        `}

        ${tab === 'members' && html`
          <${MembersPanel} groupId=${groupId} group=${group} token=${token}
            transportRef=${transportRef} gekRef=${gekRef}
            isNodeAdmin=${isNodeAdmin} userId=${userId} />
        `}
      `}
      ${status === 'offline' && html`
        <p class="page-message">
          ${t('group.offline_title')}
          ${' '}${t('group.offline_hint')}
        </p>
      `}
      ${!cached && (status === 'discovering' || status === 'connecting' || status === 'fetching') && html`
        <p class="page-message">${statusLabel}</p>
      `}
      ${previewEntry && html`
        <${FilePreview}
          entry=${previewEntry}
          transportRef=${transportRef}
          gekRef=${gekRef}
          onClose=${() => setPreviewEntry(null)} />
      `}
      ${videoEntry && html`
        <${VideoPlayer}
          entry=${videoEntry}
          transportRef=${transportRef}
          gekRef=${gekRef}
          onClose=${() => setVideoEntry(null)} />
      `}
    </div>
  `;
}

// ── File Preview (text, images) ─────────────────────────────────────────

const TEXT_EXTS = /\.(txt|md|json|csv|log|xml|yaml|yml|ini|conf|py|js|html|css|sh|c|h|java|rs|go|rb|toml)$/i;
const IMAGE_EXTS = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i;

function FilePreview({ entry, transportRef, gekRef, onClose }) {
  const [phase, setPhase] = useState('loading');
  const [progress, setProgress] = useState(0);
  const [content, setContent] = useState(null);
  const [error, setError] = useState('');
  const blobUrlRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      const transport = transportRef.current;
      if (!transport || !transport.connected) {
        setError(t('video.err_transport'));
        setPhase('error');
        return;
      }
      try {
        const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
        let downloaded = 0;
        const chunks = await pipelinedDownload(
          transport, gekRef.current, entry.id, totalChunks,
          (bytes) => { downloaded += bytes; setProgress(downloaded / entry.size); },
        );
        if (cancelled) return;

        if (entry.name.match(IMAGE_EXTS)) {
          const ext = entry.name.split('.').pop().toLowerCase();
          const mime = ext === 'svg' ? 'image/svg+xml'
            : ext === 'png' ? 'image/png'
            : ext === 'gif' ? 'image/gif'
            : ext === 'webp' ? 'image/webp'
            : 'image/jpeg';
          const blob = new Blob(chunks, { type: mime });
          blobUrlRef.current = URL.createObjectURL(blob);
          setContent({ type: 'image' });
        } else {
          const decoder = new TextDecoder('utf-8', { fatal: false });
          const text = chunks.map(c => decoder.decode(c, { stream: true })).join('');
          setContent({ type: 'text', text: text.slice(0, 500000) });
        }
        setPhase('ready');
      } catch (err) {
        if (!cancelled) { setError(err.message); setPhase('error'); }
      }
    };
    load();
    return () => { cancelled = true; };
  }, [entry]);

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  useEffect(() => {
    return () => {
      if (blobUrlRef.current) {
        URL.revokeObjectURL(blobUrlRef.current);
        blobUrlRef.current = null;
      }
    };
  }, []);

  return html`
    <div class="video-overlay" onClick=${(e) => {
      if (e.target.classList.contains('video-overlay')) onClose();
    }}>
      <div class="video-top-bar">
        <span class="video-title">${entry.name} (${formatSize(entry.size)})</span>
        <button class="video-close" onClick=${onClose} title="${t('video.close')}">✕</button>
      </div>
      ${phase === 'loading' && html`
        <div class="video-loading">
          <div class="video-loading-label">${t('video.loading', { name: entry.name })}</div>
          <div class="video-progress-bar">
            <div class="video-progress-fill" style="width:${Math.round(progress * 100)}%"></div>
          </div>
        </div>
      `}
      ${phase === 'ready' && content?.type === 'image' && html`
        <div class="preview-image-wrap">
          <img class="preview-image" src=${blobUrlRef.current} alt=${entry.name} />
        </div>
      `}
      ${phase === 'ready' && content?.type === 'text' && html`
        <div class="preview-text-wrap">
          <pre class="preview-text">${content.text}</pre>
        </div>
      `}
      ${phase === 'error' && html`
        <div class="video-error">${error}</div>
      `}
    </div>
  `;
}

function _b64ToU8(b64) {
  const bin = atob(b64);
  const arr = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
  return arr;
}

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

function MembersPanel({ groupId, group, token, transportRef, gekRef,
                       isNodeAdmin, userId }) {
  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('');
  const [inviteCode, setInviteCode] = useState(null);
  const [pairCode, setPairCode] = useState('');
  const [pairStatus, setPairStatus] = useState('');
  const [pairing, setPairing] = useState(false);

  // 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 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');
    } catch (err) {
      setPairStatus(err.message);
    } finally {
      setPairing(false);
    }
  }, [pairCode, transportRef, userId]);

  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>`;

  return html`
    <div class="members-panel">
      <table class="admin-table">
        <thead>
          <tr>
            <th>${t('admin.col_username')}</th>
            <th>${t('members.group_role')}</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" style="background:var(--accent);color:var(--accent-text)">${t('members.owner')}</span>`
                  : html`<span class="badge">${t('members.member')}</span>`
                }
              </td>
            </tr>
          `)}
        </tbody>
      </table>
      ${isAdmin && html`
        <form class="invite-form" onSubmit=${doInvite}>
          <h4>${t('members.invite_title')}</h4>
          ${error && html`<p class="error-msg">${error}</p>`}
          ${inviteCode && html`
            <div class="success-msg" style="margin-bottom:8px">
              <p>${t('members.invite_code_ready', { user: inviteCode.username })}</p>
              <p style="font-family:monospace;font-size:1.4em;letter-spacing:2px;margin:6px 0">
                ${inviteCode.code}
              </p>
              <p>${t('members.invite_code_hint')}</p>
            </div>
          `}
          <div style="display:flex;gap:8px">
            <input type="text" placeholder="${t('members.username_placeholder')}"
              value=${inviteUser} onInput=${e => setInviteUser(e.target.value)} required />
            <button class="admin-btn" type="submit" disabled=${inviting}>
              ${inviting ? '...' : t('members.invite_btn')}
            </button>
          </div>
        </form>
      `}
      ${isNodeAdmin && html`
        <form class="invite-form" onSubmit=${doPair}>
          <h4>${t('members.pair_title')}</h4>
          <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>
          `}
          <div style="display:flex;gap:8px">
            <input type="text" placeholder="XXXX-XXXX" style="font-family:monospace"
              value=${pairCode} onInput=${e => setPairCode(e.target.value)} required />
            <button class="admin-btn" type="submit" disabled=${pairing}>
              ${pairing ? '...' : t('members.pair_btn')}
            </button>
          </div>
        </form>
      `}
    </div>
  `;
}

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

function formatTime(ts) {
  const d = new Date(ts * 1000);
  const now = new Date();
  const time = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
  if (d.toDateString() === now.toDateString()) return time;
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + time;
}

function _parsePayload(raw) {
  if (typeof raw === 'string' && raw.startsWith('{')) {
    try { return JSON.parse(raw); } catch { /* not JSON */ }
  }
  return null;
}

function ChatImage({ filename, entries, transportRef, gekRef }) {
  const [blobUrl, setBlobUrl] = useState(null);
  const [loading, setLoading] = useState(true);
  const loadedRef = useRef(false);

  useEffect(() => {
    if (loadedRef.current) return;
    let cancelled = false;
    const load = async () => {
      const transport = transportRef.current;
      if (!transport || !transport.connected) { setLoading(true); return; }
      const entry = entries.find(e => e.name === filename);
      if (!entry) { setLoading(true); return; }
      try {
        const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
        const chunks = await pipelinedDownload(transport, gekRef.current, entry.id, totalChunks);
        if (cancelled) return;
        const ext = filename.split('.').pop().toLowerCase();
        const mime = ext === 'png' ? 'image/png' : ext === 'gif' ? 'image/gif'
          : ext === 'webp' ? 'image/webp' : ext === 'svg' ? 'image/svg+xml' : 'image/jpeg';
        const blob = new Blob(chunks, { type: mime });
        loadedRef.current = true;
        setBlobUrl(URL.createObjectURL(blob));
      } catch { /* ignore */ }
      if (!cancelled) setLoading(false);
    };
    load();
    return () => { cancelled = true; };
  }, [filename, entries.length]);

  useEffect(() => {
    return () => { if (blobUrl) URL.revokeObjectURL(blobUrl); };
  }, [blobUrl]);

  if (loading) return html`<div class="chat-att-thumb"><span class="spinner"></span></div>`;
  if (!blobUrl) return html`<div class="chat-att-img">${'\u{1F5BC}'} ${filename}</div>`;
  return html`<img class="chat-att-thumb" src=${blobUrl} alt=${filename} />`;
}

function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex, onPreview }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [attaching, setAttaching] = useState(false);
  const listRef = useRef(null);
  const bottomRef = useRef(null);
  const loadedRef = useRef(false);

  useEffect(() => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;

    if (!loadedRef.current) {
      loadedRef.current = true;
      transport.fetchChatHistory(0, 200)
        .then(msgs => setMessages(msgs))
        .catch(() => {});
    }

    transport.onChat = (msg) => {
      setMessages(prev => [...prev, {
        sender_id: msg.sender_id,
        sender_name: msg.sender_name || '',
        payload: msg.payload,
        timestamp: msg.timestamp || Date.now() / 1000,
        thread_id: msg.thread_id,
      }]);
    };

    return () => { transport.onChat = null; };
  }, [transportRef.current?.connected]);

  useEffect(() => {
    if (bottomRef.current) {
      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages.length]);

  const sendMessage = useCallback(async () => {
    const text = input.trim();
    if (!text) return;
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;

    setSending(true);
    setInput('');
    try {
      await transport.sendChat(text, 0, null, username);
      setMessages(prev => [...prev, {
        sender_id: username,
        sender_name: username,
        payload: text,
        timestamp: Date.now() / 1000,
        thread_id: null,
      }]);
    } catch {
      setInput(text);
    } finally {
      setSending(false);
    }
  }, [input, username]);

  const attachFile = useCallback(async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    setAttaching(true);
    try {
      const totalChunks = Math.ceil(file.size / UPLOAD_CHUNK_SIZE);
      for (let i = 0; i < totalChunks; i++) {
        const slice = file.slice(i * UPLOAD_CHUNK_SIZE, (i + 1) * UPLOAD_CHUNK_SIZE);
        const buf = new Uint8Array(await slice.arrayBuffer());
        await transport.uploadChunk(file.name, i, totalChunks, buf);
      }
      await new Promise(r => setTimeout(r, 2500));
      if (onRefreshIndex) await onRefreshIndex();
      const ext = file.name.split('.').pop().toLowerCase();
      const ftype = ['jpg','jpeg','png','gif','webp','svg'].includes(ext) ? 'image'
        : ['mp4','webm','mkv','mov','avi'].includes(ext) ? 'video' : 'file';
      const structured = JSON.stringify({
        text: '', attachment: { filename: file.name, size: file.size, type: ftype },
      });
      await transport.sendChat(structured, 0, null, username);
      setMessages(prev => [...prev, {
        sender_id: username, sender_name: username,
        payload: structured, timestamp: Date.now() / 1000, thread_id: null,
      }]);
    } catch (err) {
      alert(err.message);
    } finally {
      setAttaching(false);
    }
  }, [username, onRefreshIndex]);

  const onKeyDown = useCallback((e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }, [sendMessage]);

  return html`
    <div class="chat-panel">
      <div class="chat-messages" ref=${listRef}>
        ${messages.length === 0 && html`
          <div class="chat-empty">${t('chat.empty')}</div>
        `}
        ${messages.map((m, i) => {
          const isOwn = m.sender_name === username || m.sender_id === username;
          const displayName = m.sender_name || '?';
          const showSender = !isOwn && (i === 0 ||
            (messages[i - 1].sender_name || messages[i - 1].sender_id) !== (m.sender_name || m.sender_id));
          const parsed = _parsePayload(m.payload);
          const att = parsed && parsed.attachment;
          return html`
            <div key=${i} class="chat-msg ${isOwn ? 'chat-msg-own' : ''}">
              ${showSender && html`
                <div class="chat-sender">${displayName}</div>
              `}
              <div class="chat-bubble ${isOwn ? 'chat-bubble-own' : ''}">
                ${att ? html`
                  <div class="chat-attachment" style="cursor:pointer" onClick=${() => {
                    if (!onPreview) return;
                    const entry = entries.find(e => e.name === att.filename);
                    if (entry) onPreview(entry);
                  }}>
                    ${att.type === 'image'
                      ? html`<${ChatImage} filename=${att.filename} entries=${entries}
                              transportRef=${transportRef} gekRef=${gekRef} />`
                      : att.type === 'video'
                        ? html`<div class="chat-att-file">${'\u{1F3AC}'} ${att.filename}</div>`
                        : html`<div class="chat-att-file">${'\u{1F4CE}'} ${att.filename}</div>`
                    }
                    <div class="chat-att-size">${formatSize(att.size)}</div>
                  </div>
                ` : html`
                  <span class="chat-text">${m.payload}</span>
                `}
                <span class="chat-time">${formatTime(m.timestamp)}</span>
              </div>
            </div>
          `;
        })}
        <div ref=${bottomRef} />
      </div>
      <div class="chat-input-row">
        <label class="chat-attach" title="${t('chat.attach')}">
          ${attaching ? html`<span class="spinner"></span>` : '\u{1F4CE}'}
          <input type="file" style="display:none" onChange=${attachFile} disabled=${attaching} />
        </label>
        <textarea class="chat-input" rows="1"
          placeholder="${t('chat.placeholder')}"
          value=${input}
          onInput=${e => setInput(e.target.value)}
          onKeyDown=${onKeyDown}
          disabled=${sending} />
        <button class="chat-send" onClick=${sendMessage}
          disabled=${sending || !input.trim()}>
          ${t('chat.send')}
        </button>
      </div>
    </div>
  `;
}

// ── Video Player (MSE streaming) ────────────────────────────────────────

function _mseSupported(codec) {
  if (!window.MediaSource) return false;
  const mime = `video/mp4; codecs="${codec}"`;
  return MediaSource.isTypeSupported(mime);
}

function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
  const [phase, setPhase] = useState('loading');
  const [error, setError] = useState('');
  const videoRef = useRef(null);
  const msRef = useRef(null);
  const sbRef = useRef(null);
  const blobUrlRef = useRef(null);
  const queueRef = useRef([]);
  const appendingRef = useRef(false);
  const endedRef = useRef(false);
  const durationRef = useRef(0);

  const flushQueue = useCallback(() => {
    const sb = sbRef.current;
    if (!sb || appendingRef.current || sb.updating) return;
    if (queueRef.current.length === 0) {
      if (endedRef.current && msRef.current?.readyState === 'open') {
        try { msRef.current.endOfStream(); } catch {}
      }
      return;
    }
    appendingRef.current = true;
    const chunk = queueRef.current.shift();
    try {
      sb.appendBuffer(chunk);
    } catch (e) {
      appendingRef.current = false;
      console.error('[MSE] appendBuffer error:', e);
    }
  }, []);

  useEffect(() => {
    let cancelled = false;
    const transport = transportRef.current;
    if (!transport || !transport.connected) {
      setError(t('video.err_transport'));
      setPhase('error');
      return;
    }

    const onSeeking = () => {
      const v = videoRef.current;
      if (!v || !v.buffered.length) return;
      const target = v.currentTime;
      const end = v.buffered.end(v.buffered.length - 1);
      const start = v.buffered.start(0);
      if (target > end) v.currentTime = Math.max(end - 0.5, start);
      else if (target < start) v.currentTime = start;
    };

    const startStream = async () => {
      transport.onStreamInit = (msg) => {
        if (cancelled) return;
        const mime = `video/mp4; codecs="${msg.codec}"`;

        if (!window.MediaSource || !MediaSource.isTypeSupported(mime)) {
          setError(t('video.err_mse', { codec: msg.codec }));
          setPhase('error');
          return;
        }

        durationRef.current = msg.duration || 0;

        const ms = new MediaSource();
        msRef.current = ms;
        const url = URL.createObjectURL(ms);
        blobUrlRef.current = url;

        ms.addEventListener('sourceopen', () => {
          if (cancelled) return;
          if (durationRef.current > 0) {
            ms.duration = durationRef.current;
          }
          const sb = ms.addSourceBuffer(mime);
          sbRef.current = sb;
          sb.mode = 'sequence';
          sb.addEventListener('updateend', () => {
            appendingRef.current = false;
            flushQueue();
          });
          setPhase('streaming');
          flushQueue();
        });

        if (videoRef.current) {
          videoRef.current.src = url;
          videoRef.current.addEventListener('seeking', onSeeking);
        }
      };

      transport.onStreamData = async (msg) => {
        if (cancelled) return;
        try {
          const plaintext = await window.MeshBayCrypto.decryptChunkBin(
            gekRef.current, entry.id, msg.segment_index, msg.nonce, msg.ct);
          queueRef.current.push(plaintext);
          flushQueue();
        } catch (e) {
          console.error('[MSE] decrypt error:', e);
        }
      };

      transport.onStreamEnd = () => {
        if (cancelled) return;
        endedRef.current = true;
        flushQueue();
      };

      transport.requestStream(entry.id);
    };

    startStream().catch(err => {
      if (!cancelled) { setError(err.message); setPhase('error'); }
    });

    return () => {
      cancelled = true;
      if (videoRef.current) {
        videoRef.current.removeEventListener('seeking', onSeeking);
      }
      if (transport) {
        transport.onStreamInit = null;
        transport.onStreamData = null;
        transport.onStreamEnd = null;
      }
    };
  }, [entry, flushQueue]);

  useEffect(() => {
    if (phase === 'streaming' && videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, [phase]);

  useEffect(() => {
    return () => {
      if (blobUrlRef.current) {
        URL.revokeObjectURL(blobUrlRef.current);
        blobUrlRef.current = null;
      }
    };
  }, []);

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return html`
    <div class="video-overlay" onClick=${(e) => {
      if (e.target.classList.contains('video-overlay')) onClose();
    }}>
      <div class="video-top-bar">
        <span class="video-title">${entry.name} (${formatSize(entry.size)})</span>
        <button class="video-close" onClick=${onClose} title="${t('video.close')}">✕</button>
      </div>

      ${phase === 'loading' && html`
        <div class="video-loading">
          <div class="video-loading-label">
            <span class="spinner"></span>${' '}${t('video.buffering')}
          </div>
        </div>
      `}

      ${(phase === 'streaming' || phase === 'loading') && html`
        <div class="video-container">
          <video ref=${videoRef} controls autoplay />
        </div>
      `}

      ${phase === 'error' && html`
        <div class="video-error">${error}</div>
      `}
    </div>
  `;
}

// ── Search Page (cross-group file search) ───────────────────────────────────

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [searched, setSearched] = useState(false);

  const doSearch = useCallback(async (q) => {
    const term = q.trim().toLowerCase();
    if (!term) { setResults([]); setSearched(false); return; }
    const indexes = await getAllCachedIndexes();
    const hits = [];
    for (const idx of indexes) {
      for (const e of (idx.entries || [])) {
        if (e.name.toLowerCase().includes(term) ||
            (e.path && e.path.toLowerCase().includes(term))) {
          hits.push({ ...e, groupId: idx.groupId, groupName: idx.groupName });
        }
      }
    }
    setResults(hits);
    setSearched(true);
  }, []);

  const onInput = useCallback((e) => {
    const q = e.target.value;
    setQuery(q);
    doSearch(q);
  }, [doSearch]);

  return html`
    <div>
      <h2>${t('search.title')}</h2>
      <div class="file-toolbar" style="margin-bottom:16px">
        <input type="text" class="admin-search" style="width:100%"
          placeholder="${t('search.placeholder')}"
          value=${query} onInput=${onInput} autofocus />
      </div>
      ${searched && results.length === 0 && html`
        <p class="page-message">${t('search.no_results')}</p>
      `}
      ${results.length > 0 && html`
        <table class="file-table">
          <thead>
            <tr>
              <th></th>
              <th>${t('group.col_name')}</th>
              <th>${t('group.col_size')}</th>
              <th>${t('search.col_group')}</th>
              <th>${t('group.col_type')}</th>
            </tr>
          </thead>
          <tbody>
            ${results.map(r => html`
              <tr class="file-row" key=${r.id + r.groupId}>
                <td>${FILE_ICONS[r.type] || FILE_ICONS.other}</td>
                <td class="file-name">
                  <a href="#/group/${r.groupId}" style="color:inherit">${r.name}</a>
                </td>
                <td class="file-size">${formatSize(r.size)}</td>
                <td>
                  <a href="#/group/${r.groupId}" class="badge">${r.groupName || r.groupId.slice(0, 8)}</a>
                </td>
                <td class="file-type">${r.type}</td>
              </tr>
            `)}
          </tbody>
        </table>
        <p class="settings-value" style="margin-top:8px">
          ${t('search.result_count', { n: results.length })}
        </p>
      `}
      ${!searched && html`
        <p class="page-message">${t('search.hint')}</p>
      `}
    </div>
  `;
}

// ── Settings Page ───────────────────────────────────────────────────────────

const THEME_OPTIONS = ['light', 'dark', 'system'];

function SettingsPage({ user, theme, onThemeChange, groups }) {
  const [locale, setLoc] = useState(getLocale);
  const [muted, setMuted] = useState(() => {
    try { return JSON.parse(localStorage.getItem('mb_muted') || '{}'); }
    catch { return {}; }
  });
  const [nodeKey, setNodeKey] = useState('');
  const [currentNodeKey, setCurrentNodeKey] = useState(null);
  const [nodeKeyStatus, setNodeKeyStatus] = useState('');
  const [nodeKeyLoading, setNodeKeyLoading] = useState(false);
  const [pinCount, setPinCount] = useState(
    () => (window.MeshBayTransport?.pinnedNodeCount?.() ?? 0));

  // 11.5.8: node identity pins are refused strictly on change, so users need a
  // deliberate way to accept a legitimate rotation (operator reinstalled a node).
  const clearPins = useCallback(() => {
    window.MeshBayTransport?.clearNodePin?.();
    setPinCount(window.MeshBayTransport?.pinnedNodeCount?.() ?? 0);
  }, []);

  useEffect(() => {
    hubFetch(`/v1/users/${user.username}/pubkeys`, { token: user.token })
      .then(data => {
        if (data.pk_node_ed25519) setCurrentNodeKey(data.pk_node_ed25519);
      })
      .catch(() => {});
  }, [user.username, user.token]);

  const onLocaleChange = useCallback((e) => {
    const code = e.target.value;
    setLocale(code);
    setLoc(code);
    window.location.reload();
  }, []);

  const onThemeSelect = useCallback((e) => {
    onThemeChange(e.target.value);
  }, [onThemeChange]);

  const toggleMute = useCallback((gid) => {
    setMuted(prev => {
      const next = { ...prev, [gid]: !prev[gid] };
      localStorage.setItem('mb_muted', JSON.stringify(next));
      return next;
    });
  }, []);

  const submitNodeKey = useCallback(async () => {
    const key = nodeKey.trim();
    if (!key) return;
    setNodeKeyLoading(true);
    setNodeKeyStatus('');
    try {
      await hubFetch('/v1/users/me/node_key', {
        method: 'PUT', token: user.token,
        body: { pk_node_ed25519: key },
      });
      setCurrentNodeKey(key);
      setNodeKey('');
      setNodeKeyStatus(t('settings.node_key_success'));
    } catch (e) {
      setNodeKeyStatus(e.message);
    } finally {
      setNodeKeyLoading(false);
    }
  }, [nodeKey, user.token]);

  return html`
    <div>
      <h2>${t('settings.title')}</h2>

      <div class="settings-section">
        <h3 class="settings-heading">${t('settings.profile')}</h3>
        <div class="settings-row">
          <span class="settings-label">${t('settings.username')}</span>
          <span class="settings-value">${user.username}</span>
        </div>
        <div class="settings-row">
          <span class="settings-label">${t('settings.role')}</span>
          <span class="settings-value">${user.role || 'user'}</span>
        </div>
      </div>

      <div class="settings-section">
        <h3 class="settings-heading">${t('settings.node_key')}</h3>
        <p style="font-size:0.85em;color:var(--text-dim);margin-bottom:8px">${t('settings.node_key_desc')}</p>
        ${currentNodeKey && html`
          <div class="settings-row" style="margin-top:8px">
            <span class="settings-label">${t('settings.node_key_current')}</span>
            <code class="settings-value" style="font-size:0.8em;word-break:break-all">${currentNodeKey}</code>
          </div>
        `}
        <div style="display:flex;gap:8px;margin-top:10px;align-items:center">
          <input type="text" class="admin-search" style="flex:1;font-family:monospace;font-size:0.85em"
            placeholder=${t('settings.node_key_placeholder')}
            value=${nodeKey} onInput=${e => setNodeKey(e.target.value)}
            onKeyDown=${e => e.key === 'Enter' && submitNodeKey()} />
          <button class="admin-btn" onClick=${submitNodeKey}
            disabled=${nodeKeyLoading || !nodeKey.trim()}>
            ${t('settings.node_key_submit')}
          </button>
        </div>
        ${nodeKeyStatus && html`
          <p style="margin-top:6px;font-size:0.85em;color:${nodeKeyStatus === t('settings.node_key_success') ? 'var(--green, #22c55e)' : 'var(--red, #ef4444)'}">
            ${nodeKeyStatus}
          </p>
        `}
      </div>

      <div class="settings-section">
        <h3 class="settings-heading">${t('settings.node_pins')}</h3>
        <p class="settings-hint">${t('settings.node_pins_hint')}</p>
        <div class="settings-row">
          <span class="settings-label">${t('settings.node_pins_count', { n: pinCount })}</span>
          <button class="btn-secondary" onClick=${clearPins} disabled=${pinCount === 0}>
            ${t('settings.node_pins_clear')}
          </button>
        </div>
      </div>

      <div class="settings-section">
        <h3 class="settings-heading">${t('settings.appearance')}</h3>
        <div class="settings-row">
          <span class="settings-label">${t('settings.theme')}</span>
          <select class="settings-select" value=${theme} onChange=${onThemeSelect}>
            <option value="light">${t('settings.theme_light')}</option>
            <option value="dark">${t('settings.theme_dark')}</option>
            <option value="system">${t('settings.theme_system')}</option>
          </select>
        </div>
        <div class="settings-row">
          <span class="settings-label">${t('settings.language')}</span>
          <select class="settings-select" value=${locale} onChange=${onLocaleChange}>
            ${LOCALES.map(l => html`
              <option key=${l.code} value=${l.code}>${l.name}</option>
            `)}
          </select>
        </div>
      </div>

      ${groups.length > 0 && html`
        <div class="settings-section">
          <h3 class="settings-heading">${t('settings.groups')}</h3>
          ${groups.map(g => html`
            <div class="settings-row" key=${g.id}>
              <span class="settings-label">${g.name}</span>
              <label class="settings-value" style="cursor:pointer">
                <input type="checkbox" checked=${!muted[g.id]}
                  onChange=${() => toggleMute(g.id)} />
                ${' '}${t('settings.notifications')}
              </label>
            </div>
          `)}
        </div>
      `}

      <div class="settings-section">
        <h3 class="settings-heading">${t('settings.about')}</h3>
        <div class="settings-row">
          <span class="settings-label">${t('settings.version')}</span>
          <span class="settings-value">0.1.0</span>
        </div>
        <div class="settings-row">
          <span class="settings-label">${t('settings.protocol')}</span>
          <span class="settings-value">MNP 0.1 / MHP 0.1</span>
        </div>
      </div>
    </div>
  `;
}

// ── Admin Panel ─────────────────────────────────────────────────────────────

function AdminPage({ token }) {
  const [tab, setTab] = useState('stats');
  const [stats, setStats] = useState(null);
  const [users, setUsers] = useState([]);
  const [usersTotal, setUsersTotal] = useState(0);
  const [userSearch, setUserSearch] = useState('');
  const [groups, setGroups] = useState([]);
  const [groupsTotal, setGroupsTotal] = useState(0);
  const [logs, setLogs] = useState([]);
  const [logEvent, setLogEvent] = useState('');
  const [logOffset, setLogOffset] = useState(0);
  const [blocklist, setBlocklist] = useState([]);
  const [detailUser, setDetailUser] = useState(null);
  const [error, setError] = useState('');

  const headers = { Authorization: `Bearer ${token}` };

  const loadStats = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/stats', { token });
      setStats(data);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadUsers = useCallback(async (q = '') => {
    try {
      const data = await hubFetch(`/v1/admin/users?q=${encodeURIComponent(q)}&limit=100`, { token });
      setUsers(data.users);
      setUsersTotal(data.total);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadGroups = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/groups?limit=100', { token });
      setGroups(data.groups);
      setGroupsTotal(data.total);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadLogs = useCallback(async (event = '', offset = 0, append = false) => {
    try {
      let url = `/v1/admin/logs?limit=50&offset=${offset}`;
      if (event) url += `&event=${encodeURIComponent(event)}`;
      const data = await hubFetch(url, { token });
      setLogs(prev => append ? [...prev, ...data.logs] : data.logs);
    } catch (e) { setError(e.message); }
  }, [token]);

  const loadBlocklist = useCallback(async () => {
    try {
      const data = await hubFetch('/v1/admin/blocklist', { token });
      setBlocklist(data.entries);
    } catch (e) { setError(e.message); }
  }, [token]);

  useEffect(() => {
    setError('');
    if (tab === 'stats') loadStats();
    else if (tab === 'users') loadUsers(userSearch);
    else if (tab === 'groups') loadGroups();
    else if (tab === 'logs') { setLogOffset(0); loadLogs(logEvent, 0); }
    else if (tab === 'blocklist') loadBlocklist();
  }, [tab]);

  const patchUser = useCallback(async (userId, patch) => {
    try {
      await hubFetch(`/v1/admin/users/${userId}`, { method: 'PATCH', body: patch, token });
      loadUsers(userSearch);
      if (detailUser && detailUser.id === userId) setDetailUser(null);
    } catch (e) { setError(e.message); }
  }, [token, userSearch, detailUser]);

  const patchGroup = useCallback(async (groupId, patch) => {
    try {
      await hubFetch(`/v1/admin/groups/${groupId}`, { method: 'PATCH', body: patch, token });
      loadGroups();
    } catch (e) { setError(e.message); }
  }, [token]);

  const showUserDetail = useCallback(async (userId) => {
    try {
      const data = await hubFetch(`/v1/admin/users/${userId}`, { token });
      setDetailUser(data);
    } catch (e) { setError(e.message); }
  }, [token]);

  const addToBlocklist = useCallback(async (hash, reason) => {
    try {
      await hubFetch('/v1/admin/blocklist', { method: 'POST', body: { content_hash: hash, reason }, token });
      loadBlocklist();
    } catch (e) { setError(e.message); }
  }, [token]);

  const removeFromBlocklist = useCallback(async (hash) => {
    try {
      await hubFetch(`/v1/admin/blocklist/${hash}`, { method: 'DELETE', token });
      loadBlocklist();
    } catch (e) { setError(e.message); }
  }, [token]);

  const TABS = ['stats', 'users', 'groups', 'logs', 'blocklist'];

  return html`
    <div>
      <h2>${t('admin.title')}</h2>
      ${error && html`<div class="error-msg" style="margin-bottom:12px">${error}</div>`}

      <div class="admin-tabs">
        ${TABS.map(k => html`
          <button key=${k} class="admin-tab ${tab === k ? 'active' : ''}"
            onClick=${() => setTab(k)}>${t('admin.tab_' + k)}</button>
        `)}
      </div>

      ${tab === 'stats' && stats && html`
        <div class="admin-stats">
          ${[['users', 'stat_users'], ['groups', 'stat_groups'],
             ['nodes', 'stat_nodes'], ['online_nodes', 'stat_online']].map(([k, label]) => html`
            <div class="stat-card" key=${k}>
              <div class="stat-value">${stats[k]}</div>
              <div class="stat-label">${t('admin.' + label)}</div>
            </div>
          `)}
        </div>
      `}

      ${tab === 'users' && html`
        <div class="admin-toolbar">
          <input class="admin-search" type="text" placeholder="${t('admin.users_search')}"
            value=${userSearch} onInput=${e => { setUserSearch(e.target.value); loadUsers(e.target.value); }} />
          <span class="settings-value">${usersTotal} total</span>
        </div>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_username')}</th>
            <th>${t('admin.col_role')}</th>
            <th>${t('admin.col_status')}</th>
            <th>${t('admin.col_created')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${users.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_users')}</td></tr>`}
            ${users.map(u => html`
              <tr key=${u.id}>
                <td>${u.username}</td>
                <td>
                  <select class="admin-role-select" value=${u.role}
                    onChange=${e => patchUser(u.id, { role: e.target.value })}>
                    <option value="user">user</option>
                    <option value="moderator">moderator</option>
                    <option value="admin">admin</option>
                  </select>
                </td>
                <td><span class="badge ${u.status === 'active' ? 'badge-ok' : u.status === 'suspended' ? 'badge-err' : ''}">${u.status}</span></td>
                <td>${new Date(u.created_at).toLocaleDateString()}</td>
                <td class="admin-actions">
                  <button class="admin-btn" onClick=${() => showUserDetail(u.id)}>${t('admin.btn_details')}</button>
                  ${u.status === 'active'
                    ? html`<button class="admin-btn danger" onClick=${() => patchUser(u.id, { status: 'suspended' })}>${t('admin.btn_suspend')}</button>`
                    : u.status === 'suspended'
                      ? html`<button class="admin-btn" onClick=${() => patchUser(u.id, { status: 'active' })}>${t('admin.btn_unsuspend')}</button>`
                      : null
                  }
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${tab === 'groups' && html`
        <div class="admin-toolbar">
          <span class="settings-value">${groupsTotal} total</span>
        </div>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_name')}</th>
            <th>${t('admin.col_visibility')}</th>
            <th>${t('admin.col_members')}</th>
            <th>${t('admin.col_status')}</th>
            <th>${t('admin.col_created')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${groups.length === 0 && html`<tr><td colspan="6" class="admin-empty">${t('admin.no_groups')}</td></tr>`}
            ${groups.map(g => html`
              <tr key=${g.id}>
                <td>${g.name}</td>
                <td><span class="badge">${g.visibility}</span></td>
                <td>${g.member_count}</td>
                <td><span class="badge ${g.status === 'active' ? 'badge-ok' : g.status === 'suspended' ? 'badge-err' : ''}">${g.status}</span></td>
                <td>${new Date(g.created_at).toLocaleDateString()}</td>
                <td class="admin-actions">
                  ${g.status === 'active'
                    ? html`<button class="admin-btn danger" onClick=${() => patchGroup(g.id, { status: 'suspended' })}>${t('admin.btn_suspend')}</button>`
                    : g.status === 'suspended'
                      ? html`<button class="admin-btn" onClick=${() => patchGroup(g.id, { status: 'active' })}>${t('admin.btn_unsuspend')}</button>`
                      : null
                  }
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${tab === 'logs' && html`
        <div class="admin-toolbar">
          <select class="admin-select" value=${logEvent} onChange=${e => {
            setLogEvent(e.target.value);
            setLogOffset(0);
            loadLogs(e.target.value, 0);
          }}>
            <option value="">${t('admin.filter_all')}</option>
            ${['login', 'login_fail', 'account_create', 'token_refresh', 'group_create',
               'group_join', 'group_leave', 'node_announce', 'revoke_user', 'revoke_group',
               'admin_user_update', 'admin_group_update'].map(ev => html`
              <option key=${ev} value=${ev}>${ev}</option>
            `)}
          </select>
        </div>
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_time')}</th>
            <th>${t('admin.col_user')}</th>
            <th>${t('admin.col_event')}</th>
            <th>${t('admin.col_ip')}</th>
            <th>${t('admin.col_detail')}</th>
          </tr></thead>
          <tbody>
            ${logs.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_logs')}</td></tr>`}
            ${logs.map(lg => html`
              <tr key=${lg.id}>
                <td style="white-space:nowrap">${new Date(lg.timestamp).toLocaleString()}</td>
                <td>${lg.username || ''}</td>
                <td><span class="badge">${lg.event}</span></td>
                <td>${lg.ip_address}</td>
                <td>${lg.detail || ''}</td>
              </tr>
            `)}
          </tbody>
        </table>
        ${logs.length > 0 && logs.length % 50 === 0 && html`
          <button class="admin-btn admin-load-more" onClick=${() => {
            const next = logOffset + 50;
            setLogOffset(next);
            loadLogs(logEvent, next, true);
          }}>${t('admin.btn_load_more')}</button>
        `}
      `}

      ${tab === 'blocklist' && html`
        <${BlocklistForm} onAdd=${addToBlocklist} />
        <table class="admin-table">
          <thead><tr>
            <th>${t('admin.col_hash')}</th>
            <th>${t('admin.col_reason')}</th>
            <th>${t('admin.col_date')}</th>
            <th>${t('admin.col_added_by')}</th>
            <th>${t('admin.col_actions')}</th>
          </tr></thead>
          <tbody>
            ${blocklist.length === 0 && html`<tr><td colspan="5" class="admin-empty">${t('admin.no_blocked')}</td></tr>`}
            ${blocklist.map(b => html`
              <tr key=${b.hash}>
                <td style="font-family:monospace;font-size:0.8em">${b.hash.slice(0, 16)}...</td>
                <td>${b.reason}</td>
                <td>${new Date(b.added_at).toLocaleDateString()}</td>
                <td>${b.added_by || ''}</td>
                <td>
                  <button class="admin-btn" onClick=${() => removeFromBlocklist(b.hash)}>${t('admin.btn_unblock')}</button>
                </td>
              </tr>
            `)}
          </tbody>
        </table>
      `}

      ${detailUser && html`
        <div class="admin-detail-overlay" onClick=${e => {
          if (e.target.classList.contains('admin-detail-overlay')) setDetailUser(null);
        }}>
          <div class="admin-detail-card">
            <h3>${t('admin.user_detail')}</h3>
            ${[
              ['admin.col_username', detailUser.username],
              ['admin.col_email', detailUser.email],
              ['admin.col_role', detailUser.role],
              ['admin.col_status', detailUser.status],
              ['admin.col_created', new Date(detailUser.created_at).toLocaleString()],
              ['admin.col_groups', detailUser.group_count],
            ].map(([label, val]) => html`
              <div class="admin-detail-row" key=${label}>
                <span class="admin-detail-label">${t(label)}</span>
                <span class="admin-detail-value">${val}</span>
              </div>
            `)}
            <button class="admin-btn" style="margin-top:16px;width:100%"
              onClick=${() => setDetailUser(null)}>${t('admin.btn_close')}</button>
          </div>
        </div>
      `}
    </div>
  `;
}

function BlocklistForm({ onAdd }) {
  const [hash, setHash] = useState('');
  const [reason, setReason] = useState('');

  const submit = (e) => {
    e.preventDefault();
    if (hash.length === 64 && reason) {
      onAdd(hash, reason);
      setHash('');
      setReason('');
    }
  };

  return html`
    <form class="blocklist-form" onSubmit=${submit}>
      <input type="text" placeholder="${t('admin.hash_placeholder')}"
        value=${hash} onInput=${e => setHash(e.target.value)}
        pattern="[0-9a-f]{64}" required />
      <input type="text" placeholder="${t('admin.reason_placeholder')}"
        value=${reason} onInput=${e => setReason(e.target.value)} required />
      <button class="admin-btn" type="submit">${t('admin.btn_block')}</button>
    </form>
  `;
}

// ── App ──────────────────────────────────────────────────────────────────────

function App() {
  const route = useRoute();
  const [theme, setTheme] = useState(getInitialTheme);
  const [user, setUser] = useState(loadAuth);
  const [groups, setGroups] = useState([]);
  const [menuOpen, setMenuOpen] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);

  const resolved = resolveTheme(theme);

  useEffect(() => {
    document.documentElement.className = `theme-${resolved}`;
    localStorage.setItem(THEME_KEY, theme);
  }, [theme, resolved]);

  const fetchNotifications = useCallback(() => {
    if (!user) return;
    hubFetch('/v1/notifications?limit=20', { token: user.token })
      .then(data => {
        setNotifications(data.notifications || []);
        setUnreadCount(data.unread_count || 0);
      })
      .catch(() => {});
  }, [user]);

  useEffect(() => {
    if (!user) { setGroups([]); setNotifications([]); setUnreadCount(0); return; }
    hubFetch('/v1/groups/mine', { token: user.token })
      .then(data => setGroups(data.groups || []))
      .catch(() => setGroups([]));
    fetchNotifications();
  }, [user]);

  const markRead = useCallback((id) => {
    if (!user) return;
    hubFetch(`/v1/notifications/${id}/read`, { method: 'POST', token: user.token })
      .then(() => fetchNotifications())
      .catch(() => {});
  }, [user, fetchNotifications]);

  useEffect(() => { setMenuOpen(false); }, [route]);

  const changeTheme = useCallback((val) => {
    setTheme(val);
  }, []);

  const authCtx = {
    user,
    login: async (username, password) => {
      let token, refreshToken;
      if (window.MeshBayKeys) {
        const data = await window.MeshBayKeys.loginAndRecover(username, password);
        token = data.accessToken;
        refreshToken = data.refreshToken;
        // The only thing sign-in produces: the key that opens a node's bundle.
        // Which identity we use is decided per node, when we get there.
        _bundleKey = data.bundleKey;
        await _storeBundleKey(_bundleKey);
      } else {
        const data = await hubFetch('/v1/users/login', {
          method: 'POST',
          body: { username, password },
        });
        token = data.access_token;
        refreshToken = data.refresh_token;
      }
      const me = await hubFetch('/v1/users/me', { token });
      const u = { username, userId: me.user_id, token, refreshToken, role: me.role };
      setUser(u);
      saveAuth(u);
    },
    logout: () => {
      setUser(null);
      saveAuth(null);
      setGroups([]);
      navigate('/login');
    },
  };

  // Group membership is baked into the access token at login and the hub does not
  // push updates, so someone invited after they signed in carries a token that
  // says they are in nothing. Refreshing re-reads membership from the database.
  const refreshAuth = useCallback(async () => {
    if (!user || !user.refreshToken) return null;
    const data = await hubFetch('/v1/users/token/refresh', {
      method: 'POST', body: { refresh_token: user.refreshToken },
    });
    const u = { ...user, token: data.access_token };
    setUser(u);
    saveAuth(u);
    return data.access_token;
  }, [user]);

  let page;
  if (route === '/login' || route === '/register') {
    page = route === '/register'
      ? html`<${RegisterPage} />`
      : html`<${LoginPage} />`;
  } else if (!user) {
    page = html`<${LoginPage} />`;
  } else if (route === '/search') {
    page = html`<${SearchPage} />`;
  } else if (route === '/explore') {
    page = html`<${ExplorePage} token=${user.token}
      myGroupIds=${groups.map(g => g.id)} />`;
  } else if (route === '/create-group') {
    page = html`<${CreateGroupPage} token=${user.token}
      onCreated=${() => {
        hubFetch('/v1/groups/mine', { token: user.token })
          .then(data => setGroups(data.groups || []))
          .catch(() => {});
      }} />`;
  } else if (route.startsWith('/group/')) {
    const groupId = route.slice(7);
    const group = groups.find(g => g.id === groupId);
    page = html`<${GroupPage}
      groupId=${groupId} group=${group} token=${user.token}
      username=${user.username} userId=${user.userId}
      onRefreshAuth=${refreshAuth} />`;
  } else if (route === '/admin') {
    page = (user.role === 'moderator' || user.role === 'admin')
      ? html`<${AdminPage} token=${user.token} />`
      : html`<${HomePage} groups=${groups} notifications=${notifications} onMarkRead=${markRead} />`;
  } else if (route === '/settings') {
    page = html`<${SettingsPage} user=${user} theme=${theme}
      onThemeChange=${setTheme} groups=${groups} />`;
  } else {
    page = html`<${HomePage} groups=${groups} notifications=${notifications} onMarkRead=${markRead} />`;
  }

  return html`
    <${AuthContext.Provider} value=${authCtx}>
      <${Nav}
        user=${user}
        theme=${theme}
        onThemeChange=${changeTheme}
        onLogout=${authCtx.logout}
        onMenuToggle=${() => setMenuOpen(o => !o)}
        unreadCount=${unreadCount} />
      <div class="layout">
        ${user && html`<${Sidebar}
          groups=${groups}
          route=${route}
          menuOpen=${menuOpen}
          role=${user.role} />`}
        ${menuOpen && html`<div class="overlay visible"
          onClick=${() => setMenuOpen(false)} />`}
        <main class="main">
          ${page}
        </main>
      </div>
    <//>
  `;
}

// ── Boot ─────────────────────────────────────────────────────────────────────

render(html`<${App} />`, document.getElementById('app'));