type Role = 'admin' | 'user';
type View = 'steam' | 'chat' | 'users' | 'steamAccounts' | 'audit' | 'account';
type Tone = 'muted' | 'ok' | 'warn' | 'error';
type Permission =
  | 'user.manage'
  | 'session.manage'
  | 'audit.view'
  | 'steam.manage'
  | 'steam.account.manage'
  | 'chat.use'
  | 'self.password.change';

type User = {
  id: number;
  username: string;
  displayName: string;
  note: string;
  role: Role;
  disabled: boolean;
  forcePasswordChange: boolean;
  sessionVersion: number;
  createdAt: string;
  updatedAt: string;
  lastLoginAt: string | null;
  lastLoginIp: string | null;
  lastSeenAt: string | null;
  passwordChangedAt: string | null;
  failedLoginCount: number;
  lockedUntil: string | null;
  locked: boolean;
  steamAccountCount: number;
};

type UserSession = {
  id: string;
  userId: number;
  createdAt: string;
  lastSeenAt: string;
  expiresAt: string;
  ip: string | null;
  userAgent: string | null;
};

type SteamAccount = {
  id: number;
  steamId: string;
  label: string;
  accountNameHint: string;
  enabled: boolean;
  createdAt: string;
  updatedAt: string;
  lastLoginAt: string | null;
  lastActiveAt: string | null;
  refreshTokenUpdatedAt: string | null;
  authorizedUserCount: number;
  active: boolean;
};

type AuditLog = {
  id: number;
  actorUserId: number | null;
  actorUsername: string | null;
  action: string;
  targetType: string;
  targetId: string;
  detail: Record<string, unknown>;
  ip: string | null;
  createdAt: string;
};

type SteamStatus = {
  status: string;
  requiresGuard: boolean;
  guardType: 'email' | 'device' | null;
  domain: string | null;
  lastCodeWrong: boolean;
  error: string | null;
  steamId: string | null;
  activeAccount?: Pick<SteamAccount, 'id' | 'steamId' | 'label'> | null;
  accessAllowed?: boolean;
};

type MeResponse = {
  needsSetup: boolean;
  user: User | null;
  permissions: Permission[];
  steam: SteamStatus;
};

type ListEntry = Record<string, unknown> & {
  id: string;
  name?: string;
  avatar?: string;
  preview?: string;
  updatedAt?: string;
  gameName?: string;
  online?: boolean;
  clanId?: string;
  clanid?: string;
};

type MessageItem = ListEntry & {
  type?: string;
  echo?: boolean;
  date?: string;
  sentAt?: string;
  message?: string;
  ordinal?: string | number | null;
};

type InventoryItem = Record<string, unknown> & {
  name?: string;
  use_count?: number | string;
};

type WsPayload = Record<string, unknown> & {
  type?: string;
  id?: string;
  name?: string;
  message?: string;
  ordinal?: string | number | null;
  echo?: boolean;
  date?: string;
  sentAt?: string;
  error?: string;
};

type AppState = {
  me: User | null;
  needsSetup: boolean;
  permissions: Permission[];
  steam: SteamStatus;
  view: View;
  users: User[];
  userSessions: Record<number, UserSession[]>;
  userSteamAccounts: Record<number, SteamAccount[]>;
  steamAccounts: SteamAccount[];
  auditLogs: AuditLog[];
  conversations: ListEntry[];
  friends: ListEntry[];
  groups: ListEntry[];
  emoticons: InventoryItem[];
  stickers: InventoryItem[];
  activeId: string;
  activeName: string;
  historyLimit: number;
  wsPath: string;
  ws: WebSocket | null;
  reconnectTimer: ReturnType<typeof setTimeout> | null;
  statusTimer: ReturnType<typeof setInterval> | null;
  userQuery: string;
  userRole: string;
  userStatus: string;
  auditAction: string;
  auditTargetType: string;
  feedback: string;
  feedbackTone: Tone;
};

const defaultSteamStatus: SteamStatus = {
  status: 'logged_out',
  requiresGuard: false,
  guardType: null,
  domain: null,
  lastCodeWrong: false,
  error: null,
  steamId: null,
  activeAccount: null,
  accessAllowed: false
};

const root = document.querySelector<HTMLElement>('#app');
if (!root) throw new Error('Missing app root');

const state: AppState = {
  me: null,
  needsSetup: false,
  permissions: [],
  steam: defaultSteamStatus,
  view: normalizeView(localStorage.getItem('steam-chat.view')),
  users: [],
  userSessions: {},
  userSteamAccounts: {},
  steamAccounts: [],
  auditLogs: [],
  conversations: [],
  friends: [],
  groups: [],
  emoticons: [],
  stickers: [],
  activeId: localStorage.getItem('steam-chat.target') || '',
  activeName: '',
  historyLimit: clampLimit(localStorage.getItem('steam-chat.history-limit') || 100),
  wsPath: '/ws',
  ws: null,
  reconnectTimer: null,
  statusTimer: null,
  userQuery: '',
  userRole: '',
  userStatus: '',
  auditAction: '',
  auditTargetType: '',
  feedback: '就绪',
  feedbackTone: 'muted'
};

function isRecord(value: unknown): value is Record<string, unknown> {
  return value !== null && typeof value === 'object';
}

function create<K extends keyof HTMLElementTagNameMap>(tag: K, className = '', text = ''): HTMLElementTagNameMap[K] {
  const node = document.createElement(tag);
  if (className) node.className = className;
  if (text) node.textContent = text;
  return node;
}

function clear(node: HTMLElement) {
  node.replaceChildren();
}

function errorMessage(error: unknown): string {
  return error instanceof Error ? error.message : String(error || '');
}

function clampLimit(value: unknown): number {
  const parsed = Number.parseInt(String(value), 10);
  if (!Number.isFinite(parsed) || parsed <= 0) return 100;
  return Math.min(parsed, 500);
}

function normalizeView(value: unknown): View {
  const view = String(value || '');
  return view === 'steam' || view === 'chat' || view === 'users' || view === 'steamAccounts' || view === 'audit' || view === 'account' ? view : 'steam';
}

function asListEntries(value: unknown): ListEntry[] {
  return Array.isArray(value) ? value.filter(isRecord).map((item) => ({ ...item, id: String(item.id || '') })) : [];
}

function asMessages(value: unknown): MessageItem[] {
  return Array.isArray(value) ? value.filter(isRecord).map((item) => ({ ...item, id: String(item.id || '') })) : [];
}

function asInventory(value: unknown): InventoryItem[] {
  return Array.isArray(value) ? value.filter(isRecord) : [];
}

function setFeedback(text: string, tone: Tone = 'muted') {
  state.feedback = text;
  state.feedbackTone = tone;
  const node = document.querySelector<HTMLElement>('#feedback');
  if (node) {
    node.textContent = text;
    node.dataset.tone = tone;
  }
}

function steamLabel(status = state.steam.status): string {
  const labels: Record<string, string> = {
    logged_out: '未连接',
    logging_in: '登录中',
    waiting_guard: '等待验证',
    online: '在线',
    error: '异常',
    reconnecting: '重连中'
  };
  return labels[status] || status;
}

function steamOnline() {
  return state.steam.status === 'online';
}

function steamAccessAllowed() {
  return state.steam.accessAllowed !== false;
}

function hasPermission(permission: Permission) {
  return state.permissions.includes(permission);
}

function displayName(user: User) {
  return user.displayName || user.username;
}

function dateTime(value: unknown): string {
  if (!value) return '无';
  const date = new Date(String(value));
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
}

function compactJson(value: unknown): string {
  if (!isRecord(value) || !Object.keys(value).length) return '{}';
  return JSON.stringify(value);
}

function steamStatusSignature(status = state.steam) {
  return [
    status.status,
    status.requiresGuard,
    status.guardType || '',
    status.domain || '',
    status.lastCodeWrong,
    status.error || '',
    status.steamId || '',
    status.activeAccount?.id || '',
    status.accessAllowed
  ].join('|');
}

function updateSteamStatus(status: SteamStatus) {
  state.steam = { ...defaultSteamStatus, ...status };
  const badge = document.querySelector<HTMLElement>('#steamBadge');
  if (badge) {
    badge.textContent = steamLabel();
    badge.dataset.status = state.steam.status;
  }
  const hint = document.querySelector<HTMLElement>('#steamHint');
  if (hint) hint.textContent = state.steam.error || (state.steam.steamId ? `SteamID ${state.steam.steamId}` : '后台服务已启动');
  const subtitle = document.querySelector<HTMLElement>('#pageSubtitle');
  if (subtitle) subtitle.textContent = pageSubtitle();
  updateChatAvailability();
}

async function api(path: string, options: RequestInit = {}): Promise<unknown> {
  const headers = new Headers(options.headers || {});
  headers.set('Accept', 'application/json');
  if (options.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');
  const response = await fetch(path, {
    ...options,
    headers,
    credentials: 'same-origin'
  });
  const payload: unknown = await response.json().catch((): null => null);
  if (!response.ok) {
    if (response.status === 401 && !path.startsWith('/api/auth/me') && !path.startsWith('/api/auth/login')) {
      stopWebSocket();
      state.me = null;
      state.permissions = [];
      state.needsSetup = false;
      renderLogin();
    }
    throw new Error(isRecord(payload) && typeof payload.error === 'string' ? payload.error : `HTTP ${response.status}`);
  }
  return payload;
}

function jsonBody(body: Record<string, unknown>): RequestInit {
  return {
    method: 'POST',
    body: JSON.stringify(body)
  };
}

function formValue(form: HTMLFormElement, name: string): string {
  const value = new FormData(form).get(name);
  return typeof value === 'string' ? value : '';
}

function authPage(title: string, subtitle: string, form: HTMLElement) {
  stopStatusPolling();
  stopWebSocket();
  clear(root);
  const page = create('main', 'auth-page');
  const panel = create('section', 'auth-panel');
  panel.append(create('h1', '', title), create('p', 'muted', subtitle), form);
  page.append(panel);
  root.append(page);
}

function renderSetup() {
  const form = create('form', 'stack-form') as HTMLFormElement;
  form.innerHTML = `
    <label>管理员账号<input name="username" autocomplete="username" minlength="3" maxlength="64" required></label>
    <label>后台密码<input name="password" type="password" autocomplete="new-password" minlength="8" required></label>
    <button type="submit">初始化后台</button>
    <p class="form-error" id="setupError"></p>
  `;
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const errorNode = form.querySelector<HTMLElement>('#setupError');
    try {
      await api('/api/auth/setup', jsonBody({
        username: formValue(form, 'username'),
        password: formValue(form, 'password')
      }));
      await bootstrap();
    } catch (error) {
      if (errorNode) errorNode.textContent = errorMessage(error);
    }
  });
  authPage('初始化 Steam Chat 后台', '创建第一个管理员后，再进入工作台连接 Steam。', form);
}

function renderLogin() {
  const form = create('form', 'stack-form') as HTMLFormElement;
  form.innerHTML = `
    <label>账号<input name="username" autocomplete="username" required></label>
    <label>密码<input name="password" type="password" autocomplete="current-password" required></label>
    <button type="submit">登录后台</button>
    <p class="form-error" id="loginError"></p>
  `;
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const errorNode = form.querySelector<HTMLElement>('#loginError');
    try {
      await api('/api/auth/login', jsonBody({
        username: formValue(form, 'username'),
        password: formValue(form, 'password')
      }));
      await bootstrap();
    } catch (error) {
      if (errorNode) errorNode.textContent = errorMessage(error);
    }
  });
  authPage('Steam Chat 后台登录', '登录后可使用已连接的 Steam 会话聊天，管理员可管理用户和 Steam 登录。', form);
}

function navButton(view: View, label: string) {
  const button = create('button', state.view === view ? 'is-active' : '', label);
  button.type = 'button';
  button.addEventListener('click', () => {
    state.view = view;
    localStorage.setItem('steam-chat.view', view);
    renderShell();
  });
  return button;
}

function panel(title: string, className = '') {
  const section = create('section', `panel${className ? ` ${className}` : ''}`);
  section.append(create('h2', 'panel-title', title));
  return section;
}

function renderShell() {
  if (!state.me) {
    renderLogin();
    return;
  }
  if (state.me.role !== 'admin' && ['users', 'steamAccounts', 'audit'].includes(state.view)) state.view = 'steam';
  clear(root);
  const shell = create('div', 'admin-shell');
  const sidebar = create('aside', 'admin-sidebar');
  const brand = create('div', 'brand');
  brand.append(create('strong', '', 'Steam Chat'), create('span', '', state.me.username));
  const nav = create('nav');
  nav.append(navButton('steam', 'Steam 连接'), navButton('chat', '聊天'));
  if (hasPermission('user.manage')) nav.append(navButton('users', '用户管理'));
  if (hasPermission('steam.account.manage')) nav.append(navButton('steamAccounts', 'Steam 账户'));
  if (hasPermission('audit.view')) nav.append(navButton('audit', '审计日志'));
  nav.append(navButton('account', '账号'));
  sidebar.append(brand, nav);

  const main = create('main', 'workspace');
  const top = create('header', 'topbar');
  const title = create('div');
  const heading = create('h1', '', pageTitle());
  const subtitle = create('p', 'muted', pageSubtitle());
  subtitle.id = 'pageSubtitle';
  title.append(heading, subtitle);
  const status = create('div', 'top-actions');
  const badge = create('span', 'steam-badge', steamLabel());
  badge.id = 'steamBadge';
  badge.dataset.status = state.steam.status;
  const hint = create('span', 'top-hint', state.steam.error || (state.steam.steamId ? `SteamID ${state.steam.steamId}` : '后台服务已启动'));
  hint.id = 'steamHint';
  const logout = create('button', 'ghost-btn', '退出后台');
  logout.type = 'button';
  logout.addEventListener('click', () => logoutApp());
  status.append(badge, hint, logout);
  top.append(title, status);
  const content = create('section', 'content');
  content.append(renderCurrentView());
  const feedback = create('div', 'feedback', state.feedback);
  feedback.id = 'feedback';
  feedback.dataset.tone = state.feedbackTone;
  main.append(top, content, feedback);
  shell.append(sidebar, main);
  root.append(shell);
  if (state.view === 'chat') void refreshChatData();
  if (state.view === 'users' && hasPermission('user.manage')) {
    void loadSteamAccounts();
    void loadUsers();
  }
  if (state.view === 'steamAccounts') void loadSteamAccounts();
  if (state.view === 'audit') void loadAuditLogs();
  ensureWebSocket();
  startStatusPolling();
}

function pageTitle() {
  if (state.view === 'chat') return '聊天';
  if (state.view === 'users') return '用户管理';
  if (state.view === 'steamAccounts') return 'Steam 账户';
  if (state.view === 'audit') return '审计日志';
  if (state.view === 'account') return '账号';
  return 'Steam 连接';
}

function pageSubtitle() {
  if (state.view === 'chat') {
    if (!steamAccessAllowed()) return '当前后台用户未被授权访问活动 Steam 账户';
    return steamOnline() ? '好友、群组、历史和实时消息' : 'Steam 未在线，聊天操作已禁用';
  }
  if (state.view === 'users') return '后台用户、会话、角色、资料和 Steam 授权';
  if (state.view === 'steamAccounts') return 'Steam 账户资料、连接状态和授权计数';
  if (state.view === 'audit') return '关键管理动作和敏感字段脱敏记录';
  if (state.view === 'account') return '修改当前后台账号密码';
  return state.me?.role === 'admin' ? '管理员在这里完成 Steam 登录和 Guard 验证' : '等待管理员连接 Steam';
}

function renderCurrentView() {
  if (state.view === 'chat') return renderChatView();
  if (state.view === 'users' && hasPermission('user.manage')) return renderUsersView();
  if (state.view === 'steamAccounts' && hasPermission('steam.account.manage')) return renderSteamAccountsView();
  if (state.view === 'audit' && hasPermission('audit.view')) return renderAuditView();
  if (state.view === 'account') return renderAccountView();
  return renderSteamView();
}

function renderSteamView() {
  const view = create('div', 'steam-view');
  const summary = create('section', 'status-panel');
  const statusText = create('strong', '', steamLabel());
  const activeLabel = state.steam.activeAccount
    ? `${state.steam.activeAccount.label || state.steam.activeAccount.steamId} · ${state.steam.activeAccount.steamId}`
    : state.steam.steamId ? `当前 SteamID：${state.steam.steamId}` : '当前没有可用的 Steam 会话';
  const detail = create('p', 'muted', state.steam.error || activeLabel);
  summary.append(statusText, detail);
  view.append(summary);

  if (state.me?.role !== 'admin') {
    const access = panel('访问状态', 'status-note-panel');
    access.append(create('p', state.steam.accessAllowed === false ? 'warn-text' : 'muted', state.steam.accessAllowed === false ? '当前账号未被授权访问活动 Steam 账户。' : '普通用户只能在 Steam 在线且被授权后使用聊天。'));
    view.append(access);
    return view;
  }

  if (state.steam.requiresGuard) {
    const guardPanel = panel('Steam Guard', 'form-panel');
    const guardForm = create('form', 'inline-form') as HTMLFormElement;
    const guardText = state.steam.guardType === 'email'
      ? `邮箱验证码${state.steam.domain ? `：${state.steam.domain}` : ''}`
      : '手机 2FA 验证码';
    const codeLabel = create('label', '', guardText);
    const codeInput = create('input') as HTMLInputElement;
    codeInput.name = 'code';
    codeInput.autocomplete = 'one-time-code';
    codeInput.required = true;
    const submit = create('button', '', '提交验证');
    submit.type = 'submit';
    codeLabel.append(codeInput);
    guardForm.append(codeLabel, submit);
    if (state.steam.lastCodeWrong) guardForm.prepend(create('p', 'warn-text', '上一次验证码被拒绝，请等待新的验证码后再提交。'));
    guardForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      try {
        const result = await api('/api/steam/guard', jsonBody({ code: formValue(guardForm, 'code') }));
        updateSteamStatus(result as SteamStatus);
        renderShell();
      } catch (error) {
        setFeedback(errorMessage(error), 'error');
      }
    });
    guardPanel.append(guardForm);
    view.append(guardPanel);
  } else if (!['logging_in', 'online', 'reconnecting'].includes(state.steam.status)) {
    const loginPanel = panel('登录 Steam', 'form-panel');
    const loginForm = create('form', 'stack-form narrow-form') as HTMLFormElement;
    loginForm.innerHTML = `
      <label>显示名称<input name="label" autocomplete="off" placeholder="例如：客服一号"></label>
      <label>Steam 账号<input name="accountName" autocomplete="username" required></label>
      <label>Steam 密码<input name="password" type="password" autocomplete="current-password" required></label>
      <label>Logon ID<input name="logonID" inputmode="numeric" placeholder="留空使用后台固定值"></label>
      <button type="submit">登录 Steam</button>
    `;
    loginForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      const rawLogonID = formValue(loginForm, 'logonID').trim();
      try {
        const result = await api('/api/steam/login', jsonBody({
          accountName: formValue(loginForm, 'accountName'),
          password: formValue(loginForm, 'password'),
          label: formValue(loginForm, 'label'),
          ...(rawLogonID ? { logonID: Number(rawLogonID) } : {})
        }));
        updateSteamStatus(result as SteamStatus);
        renderShell();
      } catch (error) {
        setFeedback(errorMessage(error), 'error');
      }
    });
    loginPanel.append(loginForm);
    view.append(loginPanel);
  }

  const actions = create('div', 'page-actions');
  const logout = create('button', 'danger-btn', '退出 Steam 并删除 token');
  logout.type = 'button';
  logout.disabled = state.steam.status === 'logged_out';
  logout.addEventListener('click', async () => {
    try {
      const result = await api('/api/steam/logout', { method: 'POST' });
      updateSteamStatus(result as SteamStatus);
      renderShell();
    } catch (error) {
      setFeedback(errorMessage(error), 'error');
    }
  });
  actions.append(logout);
  view.append(actions);
  return view;
}

function renderUsersView() {
  const view = create('div', 'users-view');
  const filterPanel = panel('筛选', 'toolbar-panel');
  const filters = create('form', 'inline-form user-filters') as HTMLFormElement;
  filters.innerHTML = `
    <label>搜索<input name="query" value="${state.userQuery}" placeholder="账号、昵称、备注"></label>
    <label>角色<select name="role"><option value="">全部</option><option value="admin">管理员</option><option value="user">普通用户</option></select></label>
    <label>状态<select name="status"><option value="">全部</option><option value="enabled">启用</option><option value="disabled">禁用</option><option value="locked">锁定</option></select></label>
    <button type="submit">筛选</button>
  `;
  (filters.elements.namedItem('role') as HTMLSelectElement).value = state.userRole;
  (filters.elements.namedItem('status') as HTMLSelectElement).value = state.userStatus;
  filters.addEventListener('submit', async (event) => {
    event.preventDefault();
    state.userQuery = formValue(filters, 'query');
    state.userRole = formValue(filters, 'role');
    state.userStatus = formValue(filters, 'status');
    await loadUsers();
  });
  filterPanel.append(filters);
  const createPanel = panel('新增用户', 'toolbar-panel');
  const form = create('form', 'inline-form user-create') as HTMLFormElement;
  form.innerHTML = `
    <label>账号<input name="username" minlength="3" maxlength="64" required></label>
    <label>昵称<input name="displayName" maxlength="80"></label>
    <label>密码<input name="password" type="password" minlength="8" required></label>
    <label>角色<select name="role"><option value="user">普通用户</option><option value="admin">管理员</option></select></label>
    <label>备注<input name="note" maxlength="500"></label>
    <button type="submit">新增用户</button>
  `;
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    try {
      await api('/api/users', jsonBody({
        username: formValue(form, 'username'),
        displayName: formValue(form, 'displayName'),
        password: formValue(form, 'password'),
        role: formValue(form, 'role') || 'user',
        note: formValue(form, 'note')
      }));
      form.reset();
      await loadUsers();
    } catch (error) {
      setFeedback(errorMessage(error), 'error');
    }
  });
  createPanel.append(form);
  const listPanel = panel('用户列表', 'list-panel');
  const table = create('div', 'user-table');
  table.id = 'userTable';
  listPanel.append(table);
  view.append(filterPanel, createPanel, listPanel);
  renderUserTable(table);
  return view;
}

function renderUserTable(container: HTMLElement) {
  clear(container);
  if (!state.users.length) {
    container.append(create('div', 'empty', '暂无用户'));
    return;
  }
  for (const user of state.users) {
    const row = create('article', 'user-row');
    const info = create('div');
    const status = user.locked ? '锁定' : user.disabled ? '已禁用' : '启用';
    info.append(
      create('strong', '', `${displayName(user)} (${user.username})`),
      create('span', 'muted', `${user.role === 'admin' ? '管理员' : '普通用户'} · ${status} · 授权 ${user.steamAccountCount || 0} 个 Steam 账户`),
      create('span', 'muted', `最近登录 ${dateTime(user.lastLoginAt)} · IP ${user.lastLoginIp || '无'} · 活跃 ${dateTime(user.lastSeenAt)}`),
      create('span', 'muted', user.note ? `备注：${user.note}` : '无备注')
    );
    const actions = create('div', 'row-actions');
    const profile = create('button', 'ghost-btn', '编辑资料');
    profile.type = 'button';
    profile.addEventListener('click', () => editUserProfile(user));
    const role = create('button', 'ghost-btn', user.role === 'admin' ? '降为用户' : '设为管理员');
    role.type = 'button';
    role.disabled = user.id === state.me?.id;
    role.addEventListener('click', () => patchUser(user.id, { role: user.role === 'admin' ? 'user' : 'admin' }));
    const disabled = create('button', 'ghost-btn', user.disabled ? '启用' : '禁用');
    disabled.type = 'button';
    disabled.disabled = user.id === state.me?.id;
    disabled.addEventListener('click', () => patchUser(user.id, { disabled: !user.disabled }));
    const password = create('button', 'ghost-btn', '重置密码');
    password.type = 'button';
    password.addEventListener('click', () => resetUserPassword(user.id));
    const forcePassword = create('button', 'ghost-btn', user.forcePasswordChange ? '取消强制改密' : '要求改密');
    forcePassword.type = 'button';
    forcePassword.addEventListener('click', () => patchUser(user.id, { forcePasswordChange: !user.forcePasswordChange }));
    const sessions = create('button', 'ghost-btn', '会话');
    sessions.type = 'button';
    sessions.addEventListener('click', () => loadUserSessions(user.id));
    const grants = create('button', 'ghost-btn', '授权');
    grants.type = 'button';
    grants.addEventListener('click', () => loadUserSteamAccounts(user.id));
    const remove = create('button', 'danger-btn', '删除');
    remove.type = 'button';
    remove.disabled = user.id === state.me?.id;
    remove.addEventListener('click', () => deleteUser(user.id));
    actions.append(profile, role, disabled, password, forcePassword, sessions, grants, remove);
    row.append(info, actions);
    const detail = renderUserDetail(user);
    if (detail) row.append(detail);
    container.append(row);
  }
}

function renderUserDetail(user: User): HTMLElement | null {
  const sessions = state.userSessions[user.id];
  const grants = state.userSteamAccounts[user.id];
  if (!sessions && !grants) return null;
  const detail = create('div', 'user-detail');
  if (sessions) {
    const block = create('section', 'detail-block');
    const revokeAll = create('button', 'danger-btn', '踢下线全部会话');
    revokeAll.type = 'button';
    revokeAll.addEventListener('click', () => revokeUserSessions(user.id));
    block.append(create('h3', '', '会话'), revokeAll);
    if (!sessions.length) block.append(create('div', 'empty small', '暂无活动会话'));
    for (const session of sessions) {
      const row = create('div', 'session-row');
      row.append(create('span', '', `${dateTime(session.lastSeenAt)} · ${session.ip || '未知 IP'}`), create('span', 'muted', session.userAgent || '无 User-Agent'));
      const revoke = create('button', 'danger-btn', '踢下线');
      revoke.type = 'button';
      revoke.addEventListener('click', () => revokeSession(user.id, session.id));
      row.append(revoke);
      block.append(row);
    }
    detail.append(block);
  }
  if (grants) {
    const form = create('form', 'grant-grid') as HTMLFormElement;
    form.append(create('h3', '', 'Steam 授权'));
    if (!state.steamAccounts.length) form.append(create('div', 'empty small', '暂无 Steam 账户'));
    for (const account of state.steamAccounts) {
      const label = create('label', 'check-row');
      const input = create('input') as HTMLInputElement;
      input.type = 'checkbox';
      input.name = 'steamAccountIds';
      input.value = String(account.id);
      input.checked = grants.some((item) => item.id === account.id);
      label.append(input, create('span', '', `${account.label || account.steamId} · ${account.enabled ? '启用' : '禁用'}`));
      form.append(label);
    }
    const save = create('button', 'primary-btn', '保存授权');
    save.type = 'submit';
    form.append(save);
    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const ids = [...form.querySelectorAll<HTMLInputElement>('input[name="steamAccountIds"]:checked')].map((input) => Number(input.value));
      await saveUserSteamAccounts(user.id, ids);
    });
    detail.append(form);
  }
  return detail;
}

async function loadUsers() {
  if (!hasPermission('user.manage')) return;
  try {
    const params = new URLSearchParams();
    if (state.userQuery) params.set('query', state.userQuery);
    if (state.userRole) params.set('role', state.userRole);
    if (state.userStatus) params.set('status', state.userStatus);
    const payload = await api(`/api/users${params.size ? `?${params}` : ''}`);
    state.users = isRecord(payload) && Array.isArray(payload.users) ? payload.users as User[] : [];
    const table = document.querySelector<HTMLElement>('#userTable');
    if (table) renderUserTable(table);
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function editUserProfile(user: User) {
  const display = window.prompt('昵称', user.displayName);
  if (display === null) return;
  const note = window.prompt('备注', user.note);
  if (note === null) return;
  await patchUser(user.id, { displayName: display, note });
}

async function patchUser(id: number, patch: Record<string, unknown>) {
  try {
    await api(`/api/users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(patch)
    });
    await loadUsers();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function resetUserPassword(id: number) {
  const password = window.prompt('输入新密码，至少 8 位');
  if (!password) return;
  const forcePasswordChange = window.confirm('要求该用户下次登录后修改密码？');
  try {
    await api(`/api/users/${id}/password`, jsonBody({ password, forcePasswordChange }));
    setFeedback('密码已重置', 'ok');
    await loadUsers();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function loadUserSessions(id: number) {
  try {
    const payload = await api(`/api/users/${id}/sessions`);
    state.userSessions[id] = isRecord(payload) && Array.isArray(payload.sessions) ? payload.sessions as UserSession[] : [];
    renderShell();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function revokeSession(userId: number, sessionId: string) {
  try {
    await api(`/api/users/${userId}/sessions/${encodeURIComponent(sessionId)}`, { method: 'DELETE' });
    await loadUserSessions(userId);
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function revokeUserSessions(userId: number) {
  try {
    await api(`/api/users/${userId}/sessions`, { method: 'DELETE' });
    await loadUserSessions(userId);
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function loadUserSteamAccounts(id: number) {
  try {
    await loadSteamAccounts();
    const payload = await api(`/api/users/${id}/steam-accounts`);
    state.userSteamAccounts[id] = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
    renderShell();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function saveUserSteamAccounts(id: number, steamAccountIds: number[]) {
  try {
    const payload = await api(`/api/users/${id}/steam-accounts`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ steamAccountIds })
    });
    state.userSteamAccounts[id] = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
    setFeedback('授权已保存', 'ok');
    await loadUsers();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function deleteUser(id: number) {
  if (!window.confirm('确认删除该后台用户？')) return;
  try {
    await api(`/api/users/${id}`, { method: 'DELETE' });
    await loadUsers();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function renderSteamAccountsView() {
  const view = create('div', 'steam-accounts-view');
  if (hasPermission('steam.manage')) {
    const loginPanel = panel('登录新账户', 'toolbar-panel');
    const loginForm = create('form', 'inline-form steam-account-login') as HTMLFormElement;
    loginForm.innerHTML = `
      <label>显示名称<input name="label" maxlength="80"></label>
      <label>Steam 账号<input name="accountName" autocomplete="username" required></label>
      <label>Steam 密码<input name="password" type="password" autocomplete="current-password" required></label>
      <label>Logon ID<input name="logonID" inputmode="numeric"></label>
      <button type="submit">登录新账户</button>
    `;
    loginForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      const rawLogonID = formValue(loginForm, 'logonID').trim();
      try {
        const status = await api('/api/steam/accounts/login', jsonBody({
          label: formValue(loginForm, 'label'),
          accountName: formValue(loginForm, 'accountName'),
          password: formValue(loginForm, 'password'),
          ...(rawLogonID ? { logonID: Number(rawLogonID) } : {})
        }));
        updateSteamStatus(status as SteamStatus);
        loginForm.reset();
        await loadSteamAccounts();
      } catch (error) {
        setFeedback(errorMessage(error), 'error');
      }
    });
    loginPanel.append(loginForm);
    view.append(loginPanel);
  }
  const listPanel = panel('账户列表', 'list-panel');
  const list = create('div', 'account-table');
  list.id = 'steamAccountTable';
  listPanel.append(list);
  view.append(listPanel);
  renderSteamAccountTable(list);
  return view;
}

function renderSteamAccountTable(container: HTMLElement) {
  clear(container);
  if (!state.steamAccounts.length) {
    container.append(create('div', 'empty', '暂无 Steam 账户'));
    return;
  }
  for (const account of state.steamAccounts) {
    const row = create('article', 'account-row');
    const info = create('div');
    info.append(
      create('strong', '', account.label || account.steamId),
      create('span', 'muted', `${account.steamId} · ${account.active ? '当前活动' : '未连接'} · ${account.enabled ? '启用' : '禁用'} · 授权 ${account.authorizedUserCount || 0} 人`),
      create('span', 'muted', `最近登录 ${dateTime(account.lastLoginAt)} · 活跃 ${dateTime(account.lastActiveAt)} · token ${dateTime(account.refreshTokenUpdatedAt)}`),
      create('span', 'muted', account.accountNameHint ? `账号提示：${account.accountNameHint}` : '无账号提示')
    );
    const actions = create('div', 'row-actions');
    const connect = create('button', 'ghost-btn', '连接');
    connect.type = 'button';
    connect.disabled = account.active || !account.enabled;
    connect.addEventListener('click', () => connectSteamAccount(account.id));
    const edit = create('button', 'ghost-btn', '编辑');
    edit.type = 'button';
    edit.addEventListener('click', () => editSteamAccount(account));
    const toggle = create('button', 'ghost-btn', account.enabled ? '禁用' : '启用');
    toggle.type = 'button';
    toggle.addEventListener('click', () => patchSteamAccount(account.id, { enabled: !account.enabled }));
    const logout = create('button', 'ghost-btn', '退出');
    logout.type = 'button';
    logout.disabled = !account.active;
    logout.addEventListener('click', () => logoutSteamAccount(account.id));
    const remove = create('button', 'danger-btn', '删除');
    remove.type = 'button';
    remove.addEventListener('click', () => deleteSteamAccount(account.id));
    actions.append(connect, edit, toggle, logout, remove);
    row.append(info, actions);
    container.append(row);
  }
}

async function loadSteamAccounts() {
  try {
    const payload = await api('/api/steam/accounts');
    state.steamAccounts = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
    const table = document.querySelector<HTMLElement>('#steamAccountTable');
    if (table) renderSteamAccountTable(table);
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function connectSteamAccount(id: number) {
  try {
    const status = await api(`/api/steam/accounts/${id}/connect`, { method: 'POST' });
    updateSteamStatus(status as SteamStatus);
    await loadSteamAccounts();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function editSteamAccount(account: SteamAccount) {
  const label = window.prompt('显示名称', account.label);
  if (label === null) return;
  const accountNameHint = window.prompt('账号提示', account.accountNameHint);
  if (accountNameHint === null) return;
  await patchSteamAccount(account.id, { label, accountNameHint });
}

async function patchSteamAccount(id: number, patch: Record<string, unknown>) {
  try {
    await api(`/api/steam/accounts/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(patch)
    });
    await loadSteamAccounts();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function logoutSteamAccount(id: number) {
  try {
    const status = await api(`/api/steam/accounts/${id}/logout`, { method: 'POST' });
    updateSteamStatus(status as SteamStatus);
    await loadSteamAccounts();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function deleteSteamAccount(id: number) {
  if (!window.confirm('确认删除该 Steam 账户资料和授权关系？')) return;
  try {
    await api(`/api/steam/accounts/${id}`, { method: 'DELETE' });
    await loadSteamAccounts();
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function renderAuditView() {
  const view = create('div', 'audit-view');
  const filterPanel = panel('筛选', 'toolbar-panel');
  const filters = create('form', 'inline-form audit-filters') as HTMLFormElement;
  filters.innerHTML = `
    <label>动作<input name="action" value="${state.auditAction}" placeholder="例如 user.update"></label>
    <label>目标类型<input name="targetType" value="${state.auditTargetType}" placeholder="user / steam_account"></label>
    <button type="submit">筛选</button>
  `;
  filters.addEventListener('submit', async (event) => {
    event.preventDefault();
    state.auditAction = formValue(filters, 'action');
    state.auditTargetType = formValue(filters, 'targetType');
    await loadAuditLogs();
  });
  filterPanel.append(filters);
  const listPanel = panel('日志列表', 'list-panel');
  const table = create('div', 'audit-table');
  table.id = 'auditTable';
  listPanel.append(table);
  view.append(filterPanel, listPanel);
  renderAuditTable(table);
  return view;
}

function renderAuditTable(container: HTMLElement) {
  clear(container);
  if (!state.auditLogs.length) {
    container.append(create('div', 'empty', '暂无审计日志'));
    return;
  }
  for (const item of state.auditLogs) {
    const row = create('article', 'audit-row');
    row.append(
      create('strong', '', `${dateTime(item.createdAt)} · ${item.action}`),
      create('span', 'muted', `操作者 ${item.actorUsername || item.actorUserId || '系统'} · ${item.targetType}:${item.targetId} · ${item.ip || '无 IP'}`),
      create('code', '', compactJson(item.detail))
    );
    container.append(row);
  }
}

async function loadAuditLogs() {
  try {
    const params = new URLSearchParams();
    if (state.auditAction) params.set('action', state.auditAction);
    if (state.auditTargetType) params.set('targetType', state.auditTargetType);
    const payload = await api(`/api/audit-logs${params.size ? `?${params}` : ''}`);
    state.auditLogs = isRecord(payload) && Array.isArray(payload.auditLogs) ? payload.auditLogs as AuditLog[] : [];
    const table = document.querySelector<HTMLElement>('#auditTable');
    if (table) renderAuditTable(table);
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function renderAccountView() {
  const view = create('div', 'account-view');
  const accountPanel = panel('修改密码', 'form-panel');
  const form = create('form', 'stack-form narrow-form') as HTMLFormElement;
  form.innerHTML = `
    <label>当前密码<input name="oldPassword" type="password" autocomplete="current-password" required></label>
    <label>新密码<input name="newPassword" type="password" autocomplete="new-password" minlength="8" required></label>
    <button type="submit">修改密码</button>
  `;
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    try {
      await api('/api/auth/password', jsonBody({
        oldPassword: formValue(form, 'oldPassword'),
        newPassword: formValue(form, 'newPassword')
      }));
      form.reset();
      setFeedback('密码已修改', 'ok');
    } catch (error) {
      setFeedback(errorMessage(error), 'error');
    }
  });
  accountPanel.append(form);
  view.append(accountPanel);
  return view;
}

function renderChatView() {
  const view = create('div', 'chat-layout');
  const lists = create('aside', 'chat-lists');
  const openForm = create('form', 'open-chat-form') as HTMLFormElement;
  const targetInput = create('input') as HTMLInputElement;
  targetInput.name = 'target';
  targetInput.inputMode = 'numeric';
  targetInput.autocomplete = 'off';
  targetInput.placeholder = 'SteamID64';
  targetInput.value = state.activeId;
  const openButton = create('button', '', '打开');
  openButton.type = 'submit';
  openForm.append(targetInput, openButton);
  openForm.addEventListener('submit', (event) => {
    event.preventDefault();
    openConversation(formValue(openForm, 'target'));
  });
  const tabs = create('div', 'list-sections');
  tabs.id = 'chatListSections';
  renderChatListSections(tabs);
  lists.append(openForm, tabs);

  const thread = create('section', 'thread');
  const head = create('header', 'thread-head');
  head.append(create('div', '', state.activeName || state.activeId || '未选择会话'), create('span', 'muted', state.activeId || '选择好友、群组或输入 SteamID64'));
  const messages = create('div', 'messages');
  messages.id = 'messages';
  const composer = renderComposer();
  thread.append(head, messages, composer);
  view.append(lists, thread);
  setTimeout(() => {
    if (state.activeId) void loadHistory();
    else renderHistory([]);
    updateChatAvailability();
  }, 0);
  return view;
}

function renderChatListSections(container: HTMLElement) {
  clear(container);
  container.append(renderListSection('最近', state.conversations), renderListSection('好友', state.friends), renderListSection('群组', state.groups));
}

function updateChatLists() {
  const tabs = document.querySelector<HTMLElement>('#chatListSections');
  if (tabs) renderChatListSections(tabs);
}

function renderListSection(title: string, items: ListEntry[]) {
  const section = create('section', 'list-section');
  section.append(create('h2', '', title));
  const body = create('div');
  if (!items.length) {
    body.append(create('div', 'empty small', '暂无数据'));
  } else {
    for (const item of items) body.append(renderListItem(item));
  }
  section.append(body);
  return section;
}

function renderListItem(item: ListEntry) {
  const button = create('button', `list-item${item.id === state.activeId ? ' is-active' : ''}`);
  button.type = 'button';
  const avatar = create('span', 'avatar', String(item.name || item.id || '?').slice(0, 1).toUpperCase());
  if (item.avatar) {
    const image = document.createElement('img');
    image.src = item.avatar;
    image.alt = '';
    avatar.replaceChildren(image);
  }
  const body = create('span', 'item-body');
  body.append(create('strong', '', item.name || item.id), create('span', 'muted', item.preview || item.gameName || item.clanId || item.clanid || item.id));
  button.append(avatar, body);
  button.addEventListener('click', () => openConversation(item.id, item.name || item.id));
  return button;
}

function renderComposer() {
  const shell = create('footer', 'composer');
  const disabledNote = create('div', 'offline-note', 'Steam 未在线，聊天发送和素材操作不可用。');
  disabledNote.id = 'offlineNote';
  const picker = create('div', 'picker');
  picker.id = 'picker';
  picker.hidden = true;
  const row = create('div', 'compose-row');
  const pickerButton = create('button', 'icon-btn', '素材');
  pickerButton.id = 'pickerToggle';
  pickerButton.type = 'button';
  pickerButton.addEventListener('click', () => {
    picker.hidden = !picker.hidden;
    renderPicker(picker);
  });
  const fileButton = create('button', 'icon-btn', '图片');
  fileButton.id = 'fileButton';
  fileButton.type = 'button';
  const fileInput = create('input') as HTMLInputElement;
  fileInput.type = 'file';
  fileInput.accept = 'image/*';
  fileInput.multiple = true;
  fileInput.hidden = true;
  fileButton.addEventListener('click', () => fileInput.click());
  fileInput.addEventListener('change', () => {
    sendFiles(fileInput.files);
    fileInput.value = '';
  });
  const input = create('textarea') as HTMLTextAreaElement;
  input.id = 'messageInput';
  input.rows = 1;
  input.placeholder = '发送消息';
  input.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      void sendText();
    }
  });
  const send = create('button', 'primary-btn', '发送');
  send.id = 'sendButton';
  send.type = 'button';
  send.addEventListener('click', () => sendText());
  row.append(pickerButton, fileButton, fileInput, input, send);
  const imageForm = create('form', 'image-url-form') as HTMLFormElement;
  imageForm.innerHTML = '<input name="url" type="url" placeholder="图片 URL"><button type="submit">发送图片</button>';
  imageForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const url = formValue(imageForm, 'url').trim();
    if (!url) return;
    imageForm.reset();
    void sendImage({ url });
  });
  shell.append(disabledNote, picker, row, imageForm);
  return shell;
}

function updateChatAvailability() {
  const disabled = !steamOnline() || !steamAccessAllowed();
  for (const selector of ['#messageInput', '#sendButton', '#pickerToggle', '#fileButton', '.image-url-form input', '.image-url-form button']) {
    document.querySelectorAll<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>(selector).forEach((node) => {
      node.disabled = disabled;
    });
  }
  const note = document.querySelector<HTMLElement>('#offlineNote');
  if (note) {
    note.textContent = !steamAccessAllowed() ? '当前账号未被授权访问活动 Steam 账户。' : 'Steam 未在线，聊天发送和素材操作不可用。';
    note.hidden = !disabled;
  }
}

async function refreshChatData() {
  if (!state.me) return;
  if (!steamAccessAllowed()) {
    state.conversations = [];
    state.friends = [];
    state.groups = [];
    state.emoticons = [];
    state.stickers = [];
    updateChatLists();
    updateChatAvailability();
    return;
  }
  try {
    const conversations = await api(`/conversations?limit=${state.historyLimit}`);
    state.conversations = asListEntries(conversations);
    if (steamOnline()) {
      const [friends, groups, inventory] = await Promise.all([
        api('/api/friends'),
        api('/api/groups'),
        api('/api/emoticons')
      ]);
      state.friends = asListEntries(friends);
      state.groups = asListEntries(groups);
      state.emoticons = isRecord(inventory) ? asInventory(inventory.emoticons) : [];
      state.stickers = isRecord(inventory) ? asInventory(inventory.stickers) : [];
    } else {
      state.friends = [];
      state.groups = [];
      state.emoticons = [];
      state.stickers = [];
    }
    if (state.view === 'chat') {
      updateChatLists();
      updateChatAvailability();
    }
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function openConversation(id: unknown, name = '') {
  const target = String(id || '').trim();
  if (!target) {
    setFeedback('请输入 SteamID64', 'warn');
    return;
  }
  state.activeId = target;
  state.activeName = name || target;
  localStorage.setItem('steam-chat.target', state.activeId);
  if (state.view === 'chat') renderShell();
}

async function loadHistory() {
  const messages = document.querySelector<HTMLElement>('#messages');
  if (!messages) return;
  if (!state.activeId) {
    renderHistory([]);
    return;
  }
  try {
    const history = await api(`/history?id=${encodeURIComponent(state.activeId)}&limit=${state.historyLimit}`);
    renderHistory(asMessages(history));
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function renderHistory(items: MessageItem[]) {
  const messages = document.querySelector<HTMLElement>('#messages');
  if (!messages) return;
  clear(messages);
  if (!items.length) {
    messages.append(create('div', 'empty', '暂无消息'));
    return;
  }
  for (const item of items) messages.append(renderMessage(item));
  messages.scrollTop = messages.scrollHeight;
}

function renderMessage(item: MessageItem) {
  const row = create('article', `msg-row${item.echo ? ' is-self' : ''}`);
  const bubble = create('div', 'bubble');
  const meta = create('div', 'meta');
  meta.append(create('span', '', item.name || (item.echo ? '我' : item.id)), create('span', '', formatTime(item.sentAt || item.date)));
  const content = create('div', 'message-content');
  const message = item.message || '';
  if (item.type === 'image') {
    if (isRemoteImageSource(message)) content.append(imageNode(message));
    else appendMessageText(content, message || '[图片]');
  } else {
    appendMessageText(content, message);
  }
  bubble.append(meta, content);
  row.append(bubble);
  return row;
}

function appendMessageText(container: HTMLElement, text: string) {
  const pattern = /\[sticker\s+type=["']?([^"'\]\s]+)["']?[^\]]*\]\s*\[\/sticker\]|:([A-Za-z0-9_+\-.]+):|(https?:\/\/[^\s<>"']+)/gi;
  let lastIndex = 0;
  for (const match of text.matchAll(pattern)) {
    if (match.index > lastIndex) container.append(document.createTextNode(text.slice(lastIndex, match.index)));
    if (match[1]) {
      const image = document.createElement('img');
      image.className = 'sticker';
      image.src = `/proxy/sticker/${encodeURIComponent(match[1])}`;
      image.alt = match[1];
      container.append(image);
    } else if (match[2]) {
      const image = document.createElement('img');
      image.className = 'emoticon';
      image.src = `https://community.cloudflare.steamstatic.com/economy/emoticon/${encodeURIComponent(match[2])}`;
      image.alt = `:${match[2]}:`;
      container.append(image);
    } else if (match[3]) {
      const link = create('a', '', match[3]);
      link.href = match[3];
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      container.append(link);
    }
    lastIndex = match.index + match[0].length;
  }
  if (lastIndex < text.length) container.append(document.createTextNode(text.slice(lastIndex)));
}

function imageNode(sourceUrl: string) {
  const shell = create('button', 'image-button', '加载图片');
  shell.type = 'button';
  const image = document.createElement('img');
  image.src = `/proxy/image?url=${encodeURIComponent(sourceUrl)}`;
  image.alt = '图片';
  image.onload = () => shell.replaceChildren(image);
  image.onerror = () => shell.textContent = '图片加载失败';
  shell.addEventListener('click', () => openLightbox(image.src));
  return shell;
}

function isRemoteImageSource(value: unknown): value is string {
  return typeof value === 'string' && /^https?:\/\//i.test(value);
}

function formatTime(value: unknown): string {
  if (!value) return '';
  const date = new Date(String(value).replace(' ', 'T'));
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
}

function activeIdOrWarn() {
  if (state.activeId) return state.activeId;
  setFeedback('请选择会话', 'warn');
  return '';
}

async function sendText() {
  const id = activeIdOrWarn();
  const input = document.querySelector<HTMLTextAreaElement>('#messageInput');
  const msg = input?.value.trim() || '';
  if (!id || !msg) return;
  try {
    await api('/message', jsonBody({ id, msg }));
    if (input) input.value = '';
    await loadHistory();
    setFeedback('已发送', 'ok');
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

async function sendImage(payload: Record<string, string>) {
  const id = activeIdOrWarn();
  if (!id) return;
  try {
    await api('/image', jsonBody({ id, ...payload }));
    await loadHistory();
    setFeedback('图片已发送', 'ok');
  } catch (error) {
    setFeedback(errorMessage(error), 'error');
  }
}

function sendFiles(files: FileList | null) {
  if (!files) return;
  [...files].filter((file) => file.type.startsWith('image/')).forEach((file) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (typeof reader.result === 'string') void sendImage({ img: reader.result });
    };
    reader.onerror = () => setFeedback('读取图片失败', 'error');
    reader.readAsDataURL(file);
  });
}

function renderPicker(container: HTMLElement) {
  clear(container);
  const tabs = create('div', 'picker-tabs');
  const emoticons = create('button', '', '表情');
  const stickers = create('button', '', '贴纸');
  const grid = create('div', 'picker-grid');
  function fill(type: 'emoticons' | 'stickers') {
    clear(grid);
    const source = (type === 'emoticons' ? state.emoticons : state.stickers).slice(0, 160);
    if (!source.length) {
      grid.append(create('div', 'empty small', '暂无素材'));
      return;
    }
    for (const item of source) {
      const name = String(item.name || '');
      if (!name) continue;
      const button = create('button');
      button.type = 'button';
      const image = document.createElement('img');
      image.src = type === 'emoticons'
        ? `https://community.cloudflare.steamstatic.com/economy/emoticon/${encodeURIComponent(name)}`
        : `/proxy/sticker/${encodeURIComponent(name)}`;
      image.alt = name;
      button.append(image, create('span', '', name));
      button.addEventListener('click', () => {
        const input = document.querySelector<HTMLTextAreaElement>('#messageInput');
        if (!input) return;
        input.value += type === 'emoticons' ? `:${name}:` : `[sticker type="${name}" limit="0"][/sticker]`;
        input.focus();
      });
      grid.append(button);
    }
  }
  emoticons.type = 'button';
  stickers.type = 'button';
  emoticons.addEventListener('click', () => fill('emoticons'));
  stickers.addEventListener('click', () => fill('stickers'));
  tabs.append(emoticons, stickers);
  container.append(tabs, grid);
  fill('emoticons');
}

function ensureWebSocket() {
  if (!state.me || !steamAccessAllowed() || state.ws || state.reconnectTimer) return;
  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const ws = new WebSocket(`${protocol}//${location.host}${state.wsPath}`);
  state.ws = ws;
  ws.addEventListener('message', (event) => {
    let payload: WsPayload;
    try {
      const parsed: unknown = JSON.parse(String(event.data));
      payload = isRecord(parsed) ? parsed : {};
    } catch {
      return;
    }
    if (payload.type === 'message' || payload.type === 'image') {
      const item: MessageItem = {
        ...payload,
        id: String(payload.id || ''),
        name: typeof payload.name === 'string' ? payload.name : undefined,
        message: typeof payload.message === 'string' ? payload.message : undefined,
        ordinal: typeof payload.ordinal === 'string' || typeof payload.ordinal === 'number' ? payload.ordinal : 0,
        echo: Boolean(payload.echo),
        date: typeof payload.date === 'string' ? payload.date : undefined,
        sentAt: typeof payload.sentAt === 'string' ? payload.sentAt : undefined
      };
      if (item.id === state.activeId) {
        const messages = document.querySelector<HTMLElement>('#messages');
        messages?.append(renderMessage(item));
        if (messages) messages.scrollTop = messages.scrollHeight;
      }
    }
  });
  ws.addEventListener('close', () => {
    state.ws = null;
    if (state.me) {
      state.reconnectTimer = setTimeout(() => {
        state.reconnectTimer = null;
        ensureWebSocket();
      }, 1500);
    }
  });
}

function stopWebSocket() {
  if (state.reconnectTimer) clearTimeout(state.reconnectTimer);
  state.reconnectTimer = null;
  if (state.ws) state.ws.close();
  state.ws = null;
}

function startStatusPolling() {
  if (state.statusTimer || !state.me) return;
  state.statusTimer = setInterval(async () => {
    try {
      const status = await api('/api/steam/status');
      const previousSignature = steamStatusSignature();
      const wasOnline = steamOnline();
      updateSteamStatus(status as SteamStatus);
      if (state.view === 'steam' && steamStatusSignature() !== previousSignature) {
        renderShell();
        return;
      }
      if (state.view === 'chat' && steamOnline() !== wasOnline) await refreshChatData();
    } catch (_) {
      // Authentication errors are handled by api().
    }
  }, 3000);
}

function stopStatusPolling() {
  if (state.statusTimer) clearInterval(state.statusTimer);
  state.statusTimer = null;
}

async function logoutApp() {
  await api('/api/auth/logout', { method: 'POST' }).catch((): null => null);
  stopStatusPolling();
  stopWebSocket();
  state.me = null;
  state.permissions = [];
  renderLogin();
}

async function bootstrap() {
  const mePayload = await api('/api/auth/me') as MeResponse;
  state.needsSetup = Boolean(mePayload.needsSetup);
  state.me = mePayload.user || null;
  state.permissions = Array.isArray(mePayload.permissions) ? mePayload.permissions : [];
  updateSteamStatus(mePayload.steam || defaultSteamStatus);
  if (state.needsSetup) {
    renderSetup();
    return;
  }
  if (!state.me) {
    renderLogin();
    return;
  }
  const [status, config] = await Promise.all([
    api('/api/steam/status').catch((): SteamStatus => state.steam),
    api('/api/config').catch(() => ({ wsPath: '/ws' }))
  ]);
  if (isRecord(status)) updateSteamStatus(status as SteamStatus);
  if (isRecord(config) && typeof config.wsPath === 'string') state.wsPath = config.wsPath;
  renderShell();
}

function openLightbox(src: string) {
  const box = document.querySelector<HTMLElement>('#lightbox');
  const image = document.querySelector<HTMLImageElement>('#lightboxImage');
  if (!box || !image) return;
  image.src = src;
  box.hidden = false;
}

document.querySelector('#lightboxClose')?.addEventListener('click', () => {
  const box = document.querySelector<HTMLElement>('#lightbox');
  const image = document.querySelector<HTMLImageElement>('#lightboxImage');
  if (box) box.hidden = true;
  if (image) image.src = '';
});

document.addEventListener('dragover', (event) => {
  if (state.view === 'chat' && steamOnline()) event.preventDefault();
});

document.addEventListener('drop', (event) => {
  if (state.view !== 'chat' || !steamOnline()) return;
  const files = event.dataTransfer?.files || null;
  if (files && files.length) {
    event.preventDefault();
    sendFiles(files);
  }
});

bootstrap().catch((error) => {
  authPage('启动失败', errorMessage(error), create('div'));
});