app.js

const data = window.__GATEWAY_DATA__ || { clusters: [], domains: [], gateways: [], gear: [], summary: {} };
const isMobileViewport = () => window.matchMedia('(max-width: 820px)').matches;
const resultPageSize = () => isMobileViewport() ? 12 : 24;
const state = { view: 'gateways', query: '', cluster: '', domain: '', stage: '', status: '', sort: 'score', detailGateway: '', detailGear: '', detailReturn: null, visibleCount: resultPageSize(), filtersOpen: false, workspace: false };
let lastSurpriseGatewayId = '';
const $ = (selector) => document.querySelector(selector);
const domainById = new Map((data.domains || []).map((domain) => [domain.id, domain]));
const clusterById = new Map((data.clusters || []).map((cluster) => [cluster.id, cluster]));
const wishlistStorageKey = 'world-gateway:wishlist:v1';
const workspaceStorageKey = 'av-cm:workspace:v1';

function loadWishlist() {
  try {
    const saved = JSON.parse(localStorage.getItem(wishlistStorageKey) || '[]');
    return new Set(Array.isArray(saved) ? saved : []);
  } catch {
    return new Set();
  }
}

const wishlist = loadWishlist();

function loadWorkspace() {
  try {
    const saved = JSON.parse(localStorage.getItem(workspaceStorageKey) || '{}');
    const pinned = new Set(Array.isArray(saved.pinned) ? saved.pinned : []);
    const recent = new Map(Object.entries(saved.recent || {}).filter(([, value]) => Number.isFinite(Number(value))));
    return { pinned, recent };
  } catch {
    return { pinned: new Set(), recent: new Map() };
  }
}

const workspace = loadWorkspace();

function saveWorkspace() {
  const recentEntries = [...workspace.recent.entries()]
    .sort(([, left], [, right]) => Number(right) - Number(left))
    .slice(0, 50);
  workspace.recent = new Map(recentEntries);
  try {
    localStorage.setItem(workspaceStorageKey, JSON.stringify({
      pinned: [...workspace.pinned],
      recent: Object.fromEntries(workspace.recent),
    }));
  } catch {
    // Browsing remains available if local storage is disabled.
  }
}

function itemKey(item, view = state.view) {
  if (view === 'domains') return `domain:${item.id}`;
  if (view === 'gateways') return `gateway:${item.id}`;
  if (item.id) return `gear:${item.id}`;
  return `gear:${item.category}:${item.title}:${item.model || ''}`;
}

function gearByKey(key) {
  return data.gear.find((gear) => itemKey(gear, 'gear') === key) || null;
}

function recentAt(item, view = state.view) {
  return Number(workspace.recent.get(itemKey(item, view)) || 0);
}

function isPinned(item, view = state.view) {
  return workspace.pinned.has(itemKey(item, view));
}

function markViewed(item, view = state.view) {
  workspace.recent.set(itemKey(item, view), Date.now());
  saveWorkspace();
}

function markViewedKey(key) {
  workspace.recent.set(key, Date.now());
  saveWorkspace();
}

function usageRecordsForItem(item, view = state.view) {
  const seeded = view === 'gateways' ? (item.usage_records || item.roadmap?.usage_records || []) : (item.usage_records || []);
  return [...seeded].sort((left, right) => String(right.date || '').localeCompare(String(left.date || '')));
}

function usageButton(item, view = state.view, compact = false) {
  const count = usageRecordsForItem(item, view).length;
  return `<span class="usage-button ${compact ? 'is-compact' : ''}" aria-label="${escapeHtml(item.title)} 有 ${count} 条使用记录">✎ ${compact ? (count ? `${count} 条` : '暂无记录') : `已有 ${count} 条记录`}</span>`;
}

function togglePinKey(key) {
  if (workspace.pinned.has(key)) workspace.pinned.delete(key); else workspace.pinned.add(key);
  saveWorkspace();
  render();
}

function pinButton(item, view = state.view, compact = false) {
  const pinned = isPinned(item, view);
  const key = itemKey(item, view);
  const label = pinned ? '已置顶' : '置顶';
  return `<button class="pin-button ${compact ? 'is-compact' : ''} ${pinned ? 'is-pinned' : ''}" type="button" data-pin="${escapeHtml(key)}" aria-pressed="${pinned}" aria-label="${escapeHtml(label)}">${compact ? (pinned ? '★' : '☆') : `${pinned ? '★' : '☆'} ${label}`}</button>`;
}

const labels = {
  active: '在用', owned: '已拥有', 'owned-planned': '计划入手', candidate: '值得了解', wishlist: '愿望清单',
  for_sale: '待售', idle: '闲置', repair: '维修', lent_out: '借出',
  sold: '已售', lost: '丢失/全损', gifted: '已赠', retired: '退役',
  low: '低维护', medium: '中维护', high: '高维护', unknown: '待记录',
  product: '产品', kit: '套装', course: '课程', experience: '体验', practice: '练习', visit: '参访',
};

const viewMeta = {
  domains: { kicker: 'CAPABILITY DOMAINS', title: '领域地图', hero: 'DOMAINS', sort: 'coverage' },
  gateways: { kicker: 'CURATED GATEWAYS', title: '精选入口', hero: 'GATEWAYS', sort: 'score' },
  gear: { kicker: 'MUSE EQUIPMENT ATLAS', title: '装备图谱', hero: 'GEAR FILES', sort: 'domain' },
};

function escapeHtml(value = '') {
  return String(value).replace(/[&<>'"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' })[char]);
}

function money(value) {
  if (value == null) return '价格待补';
  return `¥${Number(value).toLocaleString('zh-CN')}`;
}

function dateLabel(value) {
  if (!value || value === 'unknown') return '日期待补';
  return value.replace(/\s*\(.*\)/, '');
}

function formatGeneratedAt(value) {
  if (!value || value === 'seed') return '等待首次构建';
  const date = new Date(value);
  return `个人地图已同步 · ${date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })}`;
}

function saveWishlist() {
  try {
    localStorage.setItem(wishlistStorageKey, JSON.stringify([...wishlist]));
  } catch {
    // Browsing still works if storage is disabled; the selection just cannot persist.
  }
}

function toggleWishlist(id) {
  if (wishlist.has(id)) wishlist.delete(id); else wishlist.add(id);
  saveWishlist();
  render();
}

function wishlistButton(item, compact = false) {
  const saved = wishlist.has(item.id);
  return `<button class="wishlist-button ${saved ? 'is-saved' : ''} ${compact ? 'is-compact' : ''}" data-wishlist="${escapeHtml(item.id)}" aria-pressed="${saved}">${saved ? '✓ 已收藏' : '+ 愿望清单'}</button>`;
}

function sourceLabel(item) {
  if (item.official_url) return '官方页面 ↗';
  if (String(item.source || '').startsWith('file:')) return '源记录 ↗';
  return '了解更多 ↗';
}

function sourceLink(item, label = sourceLabel(item)) {
  if (!item.source) return '';
  return `<a href="${escapeHtml(item.source)}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>`;
}

function gatewayKind(item) {
  return item.kind || item.guide?.entry_type || 'practice';
}

function quickStartMinutes(item) {
  return Number(String(item.guide?.quick_start?.time || '999').match(/\d+/)?.[0] || 999);
}

function quickStartCostRank(item) {
  const cost = String(item.guide?.quick_start?.cost || '');
  if (/¥0(?:\D|$)|免费/.test(cost)) return 0;
  if (/现有|门票|低成本/.test(cost)) return 1;
  return 2;
}

function domainsForItem(item) {
  if (item.cluster_id && domainById.has(item.id)) return [item];
  const ids = item.domain_ids || (item.domain_id ? [item.domain_id] : []);
  return ids.map((id) => domainById.get(id)).filter(Boolean);
}

function roadmapGatewayForGear(item) {
  const explicit = data.gateways.find((gateway) => gateway.id === item.gateway_id && gateway.roadmap);
  if (explicit) return explicit;
  const domainIds = new Set(item.domain_ids || []);
  const candidates = data.gateways.filter((gateway) => domainIds.has(gateway.domain_id) && gateway.roadmap);
  if (candidates.length === 1) {
    // Only auto-match if gear and gateway share a meaningful substring (≥3 chars).
    const gearText = `${item.title} ${item.category}`.toLowerCase();
    const gwText = `${candidates[0].title} ${candidates[0].id}`.toLowerCase();
    if (shareSubstring(gearText, gwText, 3)) return candidates[0];
  }
  return null;
}

function relatedGatewayIds(item) {
  return [...new Set([
    ...(item.related_gateway_ids || []),
    ...(item.roadmap?.related_gateway_ids || []),
  ])];
}

function relatedGatewayMarkup(item) {
  const primary = roadmapGatewayForGear(item);
  const related = relatedGatewayIds(item)
    .map((id) => data.gateways.find((gateway) => gateway.id === id))
    .filter((gateway) => gateway && gateway.id !== primary?.id);
  const gateways = [primary, ...related].filter(Boolean);
  if (!gateways.length) return '';
  return `<section class="detail-section related-section">
    <div class="detail-section-head"><span>↗</span><div><small>CONNECTED PATHS</small><h4>关联路线</h4></div></div>
    <div class="related-links">${gateways.map((gateway, index) => `<article><span>${index === 0 ? '主路线' : '关联入口'}</span><button type="button" data-gateway-detail="${escapeHtml(gateway.id)}">${escapeHtml(gateway.title)} →</button></article>`).join('')}</div>
  </section>`;
}

function gatewayConnectionsMarkup(item) {
  const relatedIds = [...new Set([
    ...(item.related || []),
    ...(item.roadmap?.related_gateway_ids || []),
  ])];
  const relatedGateways = relatedIds
    .map((id) => data.gateways.find((gateway) => gateway.id === id))
    .filter(Boolean);
  const linkedGear = data.gear.filter((gear) => gear.gateway_id === item.id);
  if (!relatedGateways.length && !linkedGear.length) return '';
  return `<section class="detail-section related-section">
    <div class="detail-section-head"><span>↗</span><div><small>CONNECTED PATHS</small><h4>关联入口与装备</h4></div></div>
    <div class="related-links">${relatedGateways.map((gateway) => `<article><span>关联入口</span><button type="button" data-gateway-detail="${escapeHtml(gateway.id)}">${escapeHtml(gateway.title)} →</button></article>`).join('')}${linkedGear.map((gear) => `<article><span>关联装备</span><button type="button" data-gear-detail="${escapeHtml(itemKey(gear, 'gear'))}">${escapeHtml(gear.title)} →</button></article>`).join('')}</div>
  </section>`;
}

function shareSubstring(a, b, minLen = 3) {
  for (let i = 0; i <= a.length - minLen; i++) {
    if (b.includes(a.slice(i, i + minLen))) return true;
  }
  return false;
}

function clusterIdsForItem(item) {
  return [...new Set(domainsForItem(item).map((domain) => domain.cluster_id).filter(Boolean))];
}

function metricData() {
  const summary = data.summary || {};
  if (state.view === 'domains') {
    const connected = data.domains.filter((domain) => domain.gateway_count && domain.in_use_gear_count).length;
    const practicing = data.domains.filter((domain) => domain.in_use_gear_count).length;
    const uncharted = data.domains.filter((domain) => domain.stage === 'empty').length;
    return [
      ['Capability domains', summary.domain_count || 0, '统一的兴趣与能力地图'],
      ['Connected domains', connected, '同时拥有入口与在用装备'],
      ['Practicing', practicing, '已有在用装备支持'],
      ['Uncharted', uncharted, '留白，等待未来探索'],
    ];
  }
  if (state.view === 'gateways') {
    const entries = data.gateways || [];
    const avg = (field) => entries.length ? entries.reduce((sum, item) => sum + Number(item[field] || 0), 0) / entries.length : 0;
    return [
      ['Curated gateways', entries.length, `${data.summary.recommended_gateway_count || 0} 个新世界推荐`],
      ['Average score', Math.round(avg('gateway_score')), '综合 Gateway Score'],
      ['Wishlist', wishlist.size, '只收藏，不等于计划购买'],
      ['Domains reached', new Set(entries.map((item) => item.domain_id)).size, '入口已经覆盖的领域'],
    ];
  }
  return [
    ['Registered gear', summary.gear_count || 0, `${summary.active_gear_count || 0} 件仍在档`],
    ['Domains supported', data.domains.filter((domain) => domain.in_use_gear_count).length, '在用装备实际支持的能力世界'],
    ['Recorded value', money(summary.active_value_cny || 0), `${summary.priced_gear_count || 0} 件有价格记录`],
    ['Long-term use', data.gear.filter((item) => /^~?201[0-8]/.test(item.acquired)).length, '2018 年及以前购入'],
  ];
}

function renderMetrics() {
  $('#metrics').innerHTML = metricData().map(([label, value, note]) => `
    <article class="metric"><span class="metric-label">${escapeHtml(label)}</span><strong class="metric-value">${escapeHtml(value)}</strong><span class="metric-note">${escapeHtml(note)}</span></article>
  `).join('');
}

function sourceItems() {
  if (state.view === 'domains') return data.domains || [];
  if (state.view === 'gateways') return data.gateways || [];
  return data.gear || [];
}

function itemMatchesDomain(item) {
  if (!state.domain) return true;
  if (state.view === 'domains') return item.id === state.domain;
  if (state.view === 'gateways') return item.domain_id === state.domain;
  return (item.domain_ids || []).includes(state.domain);
}

function itemMatchesCluster(item) {
  return !state.cluster || clusterIdsForItem(item).includes(state.cluster);
}

function currentItems() {
  const query = state.query.toLowerCase().trim();
  return sourceItems().filter((item) => {
    const matchesStatus = state.view === 'domains'
      ? (!state.stage || item.stage === state.stage)
      : state.view === 'gateways' && state.status === 'wishlist'
        ? wishlist.has(item.id)
        : (!state.status || item.status === state.status);
    const itemDomains = domainsForItem(item);
    const domainText = itemDomains.map((domain) => `${domain.title} ${domain.cluster_title}`).join(' ');
    const guideText = item.guide ? JSON.stringify(item.guide) : '';
    const usageText = usageRecordsForItem(item, state.view).map((record) => `${record.stage} ${record.feeling} ${record.next || ''}`).join(' ');
    const haystack = [item.title, item.description, item.category, item.category_label, item.brand, item.model, item.device_type, item.excerpt, item.kind, item.not_for, guideText, usageText, domainText, ...(item.tags || [])].join(' ').toLowerCase();
    const matchesWorkspace = !state.workspace || isPinned(item) || recentAt(item) > 0;
    return itemMatchesCluster(item) && itemMatchesDomain(item) && matchesStatus && matchesWorkspace && (!query || haystack.includes(query));
  }).sort((a, b) => {
    if (Boolean(a.archived) !== Boolean(b.archived)) return a.archived ? 1 : -1;
    const pinDifference = Number(isPinned(b)) - Number(isPinned(a));
    const recentDifference = recentAt(b) - recentAt(a);
    if (state.workspace && pinDifference) return pinDifference;
    if (state.workspace && recentDifference) return recentDifference;
    if (state.sort === 'pinned' && pinDifference) return pinDifference;
    if (state.sort === 'pinned' && recentDifference) return recentDifference;
    if (state.sort === 'recent' && recentDifference) return recentDifference;
    if (state.sort === 'name') return a.title.localeCompare(b.title, 'zh-CN');
    if (state.sort === 'coverage') return (b.in_use_gear_count + b.gateway_count * 4) - (a.in_use_gear_count + a.gateway_count * 4);
    if (state.sort === 'domain') return (domainsForItem(a)[0]?.title || '').localeCompare(domainsForItem(b)[0]?.title || '', 'zh-CN');
    if (state.sort === 'quick') return quickStartMinutes(a) - quickStartMinutes(b) || quickStartCostRank(a) - quickStartCostRank(b) || (b.gateway_score || 0) - (a.gateway_score || 0);
    if (state.sort === 'low-cost') return quickStartCostRank(a) - quickStartCostRank(b) || quickStartMinutes(a) - quickStartMinutes(b) || (b.gateway_score || 0) - (a.gateway_score || 0);
    if (state.sort === 'price') return (b.price_cny || 0) - (a.price_cny || 0);
    if (state.sort === 'oldest') return String(a.acquired).localeCompare(String(b.acquired));
    return (b.gateway_score || 0) - (a.gateway_score || 0);
  });
}

function countForDomain(domain) {
  if (state.view === 'domains') return domain.in_use_gear_count + domain.gateway_count;
  if (state.view === 'gateways') return domain.gateway_count;
  return domain.gear_count;
}

function countForCluster(cluster) {
  return sourceItems().filter((item) => clusterIdsForItem(item).includes(cluster.id)).length;
}

function leaveGatewayDetail({ updateHistory = true, restore = true } = {}) {
  if (!state.detailGateway) return;
  state.detailGateway = '';
  lastSurpriseGatewayId = '';
  if (restore && state.detailReturn) {
    const { view = state.view, cluster, domain, stage, status, query, sort } = state.detailReturn;
    Object.assign(state, { view, cluster, domain, stage, status, query, sort });
    $('#search').value = query;
  }
  state.detailReturn = null;
  $('#content-kicker').textContent = viewMeta[state.view].kicker;
  $('#content-title').textContent = viewMeta[state.view].title;
  document.querySelectorAll('.view-tab').forEach((button) => {
    const active = button.dataset.view === state.view;
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-selected', String(active));
  });
  $('#hero-number').textContent = state.view === 'domains' ? data.summary.domain_count : state.view === 'gateways' ? data.gateways.length : data.summary.gear_count;
  $('#hero-label').textContent = viewMeta[state.view].hero;
  updateSortOptions();
  if (updateHistory && location.hash.startsWith('#gateway/')) history.replaceState(null, '', `${location.pathname}${location.search}`);
}

function leaveGearDetail({ updateHistory = true, restore = true } = {}) {
  if (!state.detailGear) return;
  state.detailGear = '';
  if (restore && state.detailReturn) {
    const { view = state.view, cluster, domain, stage, status, query, sort } = state.detailReturn;
    Object.assign(state, { view, cluster, domain, stage, status, query, sort });
    $('#search').value = query;
  }
  state.detailReturn = null;
  $('#content-kicker').textContent = viewMeta[state.view].kicker;
  $('#content-title').textContent = viewMeta[state.view].title;
  document.querySelectorAll('.view-tab').forEach((button) => {
    const active = button.dataset.view === state.view;
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-selected', String(active));
  });
  $('#hero-number').textContent = state.view === 'domains' ? data.summary.domain_count : state.view === 'gateways' ? data.gateways.length : data.summary.gear_count;
  $('#hero-label').textContent = viewMeta[state.view].hero;
  updateSortOptions();
  if (updateHistory && location.hash.startsWith('#gear/')) history.replaceState(null, '', `${location.pathname}${location.search}`);
}

function leaveActiveDetail(options = {}) {
  if (state.detailGateway) leaveGatewayDetail(options);
  else if (state.detailGear) leaveGearDetail(options);
}

function selectDomain(domainId) {
  leaveActiveDetail({ restore: false });
  state.domain = domainId;
  const domain = domainById.get(domainId);
  if (domain) markViewed(domain, 'domains');
  state.visibleCount = resultPageSize();
  if (isMobileViewport()) state.filtersOpen = false;
  render();
  revealResults();
}

function revealResults() {
  requestAnimationFrame(() => document.querySelector('.content-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
}

function syncMobileFilterUi() {
  const toggle = $('#mobile-filter-toggle');
  const activeCount = [state.cluster, state.domain, state.stage || state.status].filter(Boolean).length;
  $('.side-panel').classList.toggle('is-filter-open', state.filtersOpen);
  toggle.setAttribute('aria-expanded', String(state.filtersOpen));
  $('#mobile-filter-state').textContent = state.filtersOpen ? '收起' : activeCount ? `${activeCount} 项已选` : '展开';
}

function renderStickyContext() {
  const context = $('#sticky-context');
  const item = state.detailGateway
    ? data.gateways.find((gateway) => gateway.id === state.detailGateway)
    : state.detailGear ? gearByKey(state.detailGear) : null;
  $('.shell').classList.toggle('has-detail-context', Boolean(item));
  if (!item) {
    context.hidden = true;
    context.innerHTML = '';
    return;
  }
  const isGearDetail = Boolean(state.detailGear);
  const parentLabel = isGearDetail ? '装备图谱' : '精选入口';
  context.hidden = false;
  context.innerHTML = `<button type="button" data-context-back>${parentLabel}</button><span aria-hidden="true">›</span><strong aria-current="page">${escapeHtml(item.title)}</strong>`;
  context.querySelector('[data-context-back]')?.addEventListener('click', isGearDetail ? closeGearDetail : closeGatewayDetail);
}

function renderFilters() {
  syncMobileFilterUi();
  const clusters = (data.clusters || []).filter((cluster) => state.view === 'domains' || countForCluster(cluster) > 0);
  $('#clusters').innerHTML = `<button class="cluster-option ${!state.cluster ? 'is-active' : ''}" data-cluster=""><span>全部</span><small>${sourceItems().length}</small></button>` + clusters.map((cluster) => `
    <button class="cluster-option ${state.cluster === cluster.id ? 'is-active' : ''}" data-cluster="${escapeHtml(cluster.id)}"><span>${escapeHtml(cluster.mark)} · ${escapeHtml(cluster.title)}</span><small>${countForCluster(cluster)}</small></button>
  `).join('');

  const domains = (data.domains || []).filter((domain) => {
    const matchesCluster = !state.cluster || domain.cluster_id === state.cluster;
    const matchesStage = state.view !== 'domains' || !state.stage || domain.stage === state.stage;
    return matchesCluster && matchesStage && (state.view === 'domains' || countForDomain(domain) > 0);
  });
  $('#categories').innerHTML = `<button class="filter-option ${!state.domain ? 'is-active' : ''}" data-domain=""><span>全部领域</span><small>${state.view === 'domains' ? domains.length : sourceItems().filter(itemMatchesCluster).length}</small></button>` + domains.map((domain) => `
    <button class="filter-option ${state.domain === domain.id ? 'is-active' : ''}" data-domain="${escapeHtml(domain.id)}"><span>${escapeHtml(domain.title)}</span><small>${countForDomain(domain)}</small></button>
  `).join('');

  const statusBlock = $('#status-block');
  statusBlock.hidden = false;
  $('#status-label').textContent = state.view === 'domains' ? '阶段' : '状态';
  if (state.view === 'domains') {
    const stages = [
      ['connected', '入口 × 实践'], ['practicing', '正在实践'], ['gateway', '已有入口'], ['empty', '待探索'],
    ];
    $('#statuses').innerHTML = `<button class="filter-option ${!state.stage ? 'is-active' : ''}" data-stage=""><span>全部阶段</span></button>` + stages.map(([id, label]) => {
      const count = data.domains.filter((domain) => domain.stage === id && (!state.cluster || domain.cluster_id === state.cluster)).length;
      return `<button class="filter-option ${state.stage === id ? 'is-active' : ''}" data-stage="${id}"><span>${label}</span><small>${count}</small></button>`;
    }).join('');
  } else {
    const statusScope = sourceItems().filter((item) => itemMatchesCluster(item) && itemMatchesDomain(item));
    const statuses = state.view === 'gateways'
      ? ['owned', 'owned-planned', 'candidate']
      : ['active', 'for_sale', 'repair', 'lent_out', 'sold', 'lost', 'gifted', 'retired'];
    const wishlistFilter = state.view === 'gateways'
      ? `<button class="filter-option wishlist-filter ${state.status === 'wishlist' ? 'is-active' : ''}" data-status="wishlist"><span>愿望清单</span><small>${statusScope.filter((item) => wishlist.has(item.id)).length}</small></button>`
      : '';
    $('#statuses').innerHTML = `<button class="filter-option ${!state.status ? 'is-active' : ''}" data-status=""><span>全部状态</span><small>${statusScope.length}</small></button>${wishlistFilter}` + statuses
      .map((id) => `<button class="filter-option ${state.status === id ? 'is-active' : ''}" data-status="${id}"><span>${labels[id] || id}</span><small>${statusScope.filter((item) => item.status === id).length}</small></button>`).join('');
  }

  $('#surprise-domain').hidden = state.view !== 'domains';
  $('#surprise-gateway').hidden = state.view !== 'gateways';

  document.querySelectorAll('[data-cluster]').forEach((button) => button.addEventListener('click', () => {
    leaveActiveDetail({ restore: false });
    state.cluster = button.dataset.cluster;
    state.domain = '';
    state.visibleCount = resultPageSize();
    render();
    revealResults();
  }));
  document.querySelectorAll('[data-domain]').forEach((button) => button.addEventListener('click', () => {
    selectDomain(button.dataset.domain);
  }));
  document.querySelectorAll('[data-stage]').forEach((button) => button.addEventListener('click', () => {
    leaveActiveDetail({ restore: false });
    state.stage = button.dataset.stage;
    state.domain = '';
    state.visibleCount = resultPageSize();
    if (isMobileViewport()) state.filtersOpen = false;
    render();
    revealResults();
  }));
  document.querySelectorAll('[data-status]').forEach((button) => button.addEventListener('click', () => {
    leaveActiveDetail({ restore: false });
    state.status = button.dataset.status;
    state.visibleCount = resultPageSize();
    if (isMobileViewport()) state.filtersOpen = false;
    render();
    revealResults();
  }));
}

function miniList(items, emptyText) {
  return items.length ? items.slice(0, 3).map((item) => `<span>${escapeHtml(item)}</span>`).join('') : `<span class="muted-item">${emptyText}</span>`;
}

function domainCard(domain) {
  const stageLabel = ({ connected: '入口 × 实践', practicing: '正在实践', gateway: '已有入口', empty: '待探索' })[domain.stage] || '领域';
  return `<article class="domain-card ${domain.stage === 'empty' ? 'is-empty' : ''}">
    <div class="domain-head"><span class="domain-mark">${escapeHtml(domain.mark)}</span><span class="domain-kicker">${escapeHtml(domain.cluster_title)}</span><span class="domain-stage stage-${escapeHtml(domain.stage)}">${escapeHtml(stageLabel)}</span>${pinButton(domain, 'domains', true)}</div>
    <h3>${escapeHtml(domain.title)}</h3>
    <p class="domain-description">${escapeHtml(domain.description)}</p>
    <div class="domain-counts">
      <div><strong>${domain.gateway_count}</strong><span>精选入口</span></div>
      <div><strong>${domain.in_use_gear_count}</strong><span>在用装备</span></div>
      <div><strong>${domain.gear_count}</strong><span>全部档案</span></div>
    </div>
    <div class="domain-relations">
      <div><small>入口</small><p>${miniList(domain.gateway_titles, '尚未定义精选入口')}</p></div>
      <div><small>装备</small><p>${miniList(domain.gear_titles, '尚无对应装备')}</p></div>
    </div>
    <div class="domain-actions">
      <button data-open-view="gateways" data-open-domain="${escapeHtml(domain.id)}" ${domain.gateway_count ? '' : 'disabled'}>查看入口</button>
      <button data-open-view="gear" data-open-domain="${escapeHtml(domain.id)}" ${domain.gear_count ? '' : 'disabled'}>查看装备</button>
    </div>
  </article>`;
}

function gatewayCard(item, index) {
  const domain = domainById.get(item.domain_id);
  const relatedGear = domain?.in_use_gear_count || 0;
  const guide = item.guide || {};
  const quick = guide.quick_start || {};
  const kind = gatewayKind(item);
  return `<article class="gateway-card" data-index="${String(index + 1).padStart(2, '0')}">
    <div class="card-top"><span class="category-tag">${escapeHtml(domain?.title || item.category)} · ${escapeHtml(labels[kind] || kind)}</span><div class="card-tools"><span class="status-badge ${escapeHtml(item.status)}">${escapeHtml(labels[item.status] || item.status)}</span>${pinButton(item, 'gateways', true)}</div></div>
    <h3>${escapeHtml(item.title)}</h3>
    <div class="gateway-hook"><span>WHY IT'S FUN</span><p>${escapeHtml(guide.hook || item.excerpt)}</p></div>
    ${quick.action ? `<div class="quick-preview"><div><span>${escapeHtml(quick.time || '马上开始')}</span><span>${escapeHtml(quick.cost || '低成本')}</span></div><p>${escapeHtml(quick.action)}</p></div>` : ''}
    <div class="score-row">
      <div class="score-ring" style="--score:${Number(item.gateway_score) || 0}"><span><strong>${Number(item.gateway_score) || 0}</strong><small>SCORE</small></span></div>
      <div class="indices">
        <div class="index-line"><span>世界开启</span><div class="track"><i style="width:${Number(item.world_opening_index) * 20}%"></i></div><b>${Number(item.world_opening_index)}</b></div>
        <div class="index-line"><span>毕业指数</span><div class="track"><i style="width:${Number(item.graduation_index) * 20}%"></i></div><b>${Number(item.graduation_index)}</b></div>
      </div>
    </div>
    <div class="relation-line"><span>${escapeHtml(domain?.mark || '域')}</span><p>连接到 ${relatedGear} 件在用装备</p></div>
    <button class="roadmap-button" data-gateway-detail="${escapeHtml(item.id)}"><span>ROADMAP</span>打开完整路线图 →</button>
    <div class="card-foot"><span>${escapeHtml(labels[item.maintenance] || item.maintenance)} · ${escapeHtml(item.price_band || '价格待记录')}</span><span class="card-links">${usageButton(item, 'gateways', true)}${wishlistButton(item, true)}</span></div>
  </article>`;
}

function gearCard(item) {
  const domains = domainsForItem(item);
  const roadmapGateway = roadmapGatewayForGear(item);
  return `<article class="gear-card">
    <div class="card-top"><span class="gear-mark">${escapeHtml(domains[0]?.mark || item.category_mark)}</span><div class="card-tools"><span class="status-badge ${escapeHtml(item.status)}">${escapeHtml(labels[item.status] || item.status_raw)}</span>${pinButton(item, 'gear', true)}</div></div>
    <h3><button class="gear-title-link" type="button" data-gear-detail="${escapeHtml(itemKey(item, 'gear'))}">${escapeHtml(item.title)}</button></h3>
    <p class="gear-meta">${escapeHtml(item.category_label)}档案 · ${escapeHtml(item.device_type.replaceAll('_', ' ') || item.brand || '设备')}</p>
    <div class="domain-tags">${domains.map((domain) => `<span>${escapeHtml(domain.title)}</span>`).join('')}</div>
    <p class="card-excerpt">${escapeHtml(item.excerpt)}</p>
    ${usagePreviewMarkup(item, 'gear')}
    ${roadmapGateway ? `<button class="roadmap-button gear-roadmap-button" data-gateway-detail="${escapeHtml(roadmapGateway.id)}" data-gear-viewed="${escapeHtml(itemKey(item, 'gear'))}"><span>ROADMAP</span>打开设备路线图 →</button>` : ''}
    <div class="card-foot"><span><span class="price">${escapeHtml(money(item.price_cny))}</span> · ${escapeHtml(dateLabel(item.acquired))}</span><span class="card-links">${usageButton(item, 'gear', true)}</span></div>
  </article>`;
}

function renderRelationshipSummary() {
  const summary = $('#relationship-summary');
  if (state.detailGateway) {
    summary.hidden = true;
    return;
  }
  const domain = domainById.get(state.domain);
  const cluster = clusterById.get(state.cluster);
  if (domain) {
    summary.hidden = false;
    summary.innerHTML = `<span class="domain-mark">${escapeHtml(domain.mark)}</span><div><strong>${escapeHtml(domain.title)}</strong><p>${escapeHtml(domain.description)}</p></div><div class="summary-count"><b>${domain.gateway_count}</b> 入口 · <b>${domain.in_use_gear_count}</b> 在用装备</div>`;
    return;
  }
  if (cluster) {
    summary.hidden = false;
    summary.innerHTML = `<span class="domain-mark">${escapeHtml(cluster.mark)}</span><div><strong>${escapeHtml(cluster.title)}</strong><p>${escapeHtml(cluster.description)}</p></div><div class="summary-count"><b>${cluster.domain_count}</b> 领域 · <b>${cluster.empty_domain_count}</b> 待探索</div>`;
    return;
  }
  summary.hidden = true;
}

function bindCardActions() {
  document.querySelectorAll('[data-open-view]').forEach((button) => button.addEventListener('click', () => {
    const domain = domainById.get(button.dataset.openDomain);
    if (domain) markViewed(domain, 'domains');
    state.domain = button.dataset.openDomain;
    switchView(button.dataset.openView, { preserveDomain: true });
  }));
  document.querySelectorAll('[data-gateway-detail]').forEach((button) => button.addEventListener('click', () => {
    if (button.dataset.gearViewed) markViewedKey(button.dataset.gearViewed);
    openGatewayDetail(button.dataset.gatewayDetail);
  }));
  document.querySelectorAll('[data-gear-detail]').forEach((button) => button.addEventListener('click', () => {
    openGearDetail(button.dataset.gearDetail);
  }));
  document.querySelectorAll('[data-wishlist]').forEach((button) => button.addEventListener('click', () => {
    toggleWishlist(button.dataset.wishlist);
  }));
  document.querySelectorAll('[data-pin]').forEach((button) => button.addEventListener('click', () => {
    togglePinKey(button.dataset.pin);
  }));
}

function milestoneStatus(status) {
  return ({ achieved: '已完成', current: '进行中', next: '下一步' })[status] || status;
}

function roadmapPlaybookMarkup(roadmap) {
  const sections = roadmap.playbook || [];
  if (!sections.length) return '';
  const sources = roadmap.playbook_sources || [];
  return `<section class="detail-section playbook-section">
    <div class="detail-section-head"><span>03</span><div><small>${escapeHtml(roadmap.playbook_label || 'PRACTICE PLAYBOOK')}</small><h4>${escapeHtml(roadmap.playbook_title || '实践手册')}</h4></div></div>
    <div class="playbook-grid">${sections.map((section) => `<article class="playbook-card">
      <header><span>${escapeHtml(section.eyebrow || 'STEP')}</span><div><h5>${escapeHtml(section.title)}</h5>${section.summary ? `<p>${escapeHtml(section.summary)}</p>` : ''}</div></header>
      <div class="playbook-items">${(section.items || []).map((item) => `<div class="playbook-item"><div><h6>${escapeHtml(item.title)}</h6>${item.meta ? `<span>${escapeHtml(item.meta)}</span>` : ''}</div><p>${escapeHtml(item.detail)}</p></div>`).join('')}</div>
    </article>`).join('')}</div>
    ${sources.length ? `<div class="playbook-sources"><span>核验来源${roadmap.playbook_checked_at ? ` · ${escapeHtml(roadmap.playbook_checked_at)}` : ''}</span>${sources.map((source) => `<a href="${escapeHtml(source.url)}" target="_blank" rel="noreferrer">${escapeHtml(source.title)} ↗</a>`).join('')}</div>` : ''}
  </section>`;
}

function usagePreviewMarkup(item, view = state.view) {
  const records = usageRecordsForItem(item, view);
  const latest = records[0];
  if (!latest) return '';
  return `<div class="usage-preview"><span>最近感受 · ${escapeHtml(latest.stage)}</span><p>${escapeHtml(latest.feeling)}</p></div>`;
}

function usageRecordsMarkup(item, view = 'gateways') {
  const records = usageRecordsForItem(item, view);
  return `<section class="detail-section usage-section">
    <div class="detail-section-head"><span>✎</span><div><small>FIELD NOTES</small><h4>使用记录</h4></div></div>
    <p class="usage-intro">把每个阶段真实发生的变化留下来：听到了什么、做到了什么，以及身体或环境带来了什么边界。</p>
    ${records.length ? `<div class="usage-record-list">${records.map((record) => `<article class="usage-record"><div class="usage-record-meta"><span>${escapeHtml(record.stage)}</span><time>${escapeHtml(record.date || '日期待补')}</time></div><p>${escapeHtml(record.feeling)}</p>${record.next ? `<small>下一步 · ${escapeHtml(record.next)}</small>` : ''}</article>`).join('')}</div>` : '<p class="usage-empty">还没有记录。下一次体验结束后，先写下一个具体变化。</p>'}
    <p class="usage-source-note">使用记录由 AI 对话后写入项目数据文件，网页只负责呈现。</p>
  </section>`;
}

function starterGatewayDetailMarkup(item, domain, guide) {
  const quick = guide.quick_start || {};
  const knowledge = guide.starter_knowledge || [];
  const kind = gatewayKind(item);
  return `
    <header class="detail-hero">
      <div><span class="category-tag">${escapeHtml(domain?.title || item.category)} · ${escapeHtml(labels[kind] || kind)}</span><h3>${escapeHtml(item.title)}</h3><p>${escapeHtml(guide.hook || item.excerpt)}</p><div class="detail-actions">${usageButton(item, 'gateways')}${wishlistButton(item)}${pinButton(item, 'gateways')}${item.official_url ? `<a href="${escapeHtml(item.official_url)}" target="_blank" rel="noreferrer">查看官方页面 ↗</a>` : ''}</div></div>
      <div class="detail-score"><strong>${item.gateway_score}</strong><span>GATEWAY SCORE</span></div>
    </header>
    ${guide.payoff || guide.spark ? `<section class="gateway-attraction">
      ${guide.payoff ? `<article><span>第一次会获得</span><p>${escapeHtml(guide.payoff)}</p></article>` : ''}
      ${guide.spark ? `<article><span>有趣之处</span><p>${escapeHtml(guide.spark)}</p></article>` : ''}
    </section>` : ''}
    ${quick.action ? `<section class="quick-start-panel">
      <div class="quick-start-meta"><span>QUICK START</span><strong>${escapeHtml(quick.time || '现在')}</strong><strong>${escapeHtml(quick.cost || '低成本')}</strong></div>
      <div><h4>先赢一次，再决定要不要深入</h4><p>${escapeHtml(quick.action)}</p><div class="first-win"><span>完成标志</span>${escapeHtml(quick.win || '完成一次可观察、可复述的体验。')}</div></div>
    </section>` : ''}
    ${knowledge.length ? `<section class="detail-section knowledge-section">
      <div class="detail-section-head"><span>01</span><div><small>STARTER KNOWLEDGE</small><h4>先懂这三个，体验会立刻变好</h4></div></div>
      <div class="knowledge-grid">${knowledge.map((entry) => `<article><span>KNOW</span><h5>${escapeHtml(entry.term)}</h5><p>${escapeHtml(entry.explain)}</p></article>`).join('')}</div>
    </section>` : ''}
    ${item.not_for ? `<section class="buying-boundary"><span>先别投入，如果</span><p>${escapeHtml(item.not_for)}</p></section>` : ''}
    ${guide.upgrade_when ? `<section class="upgrade-gate"><span>什么时候值得花钱 / 升级</span><p>${escapeHtml(guide.upgrade_when)}</p></section>` : ''}
    <section class="now-callout"><span>路线图状态</span><p>这个入口已经可以开始第一次体验；分支与里程碑会在真实反馈积累后再补充。</p></section>
    ${usageRecordsMarkup(item, 'gateways')}
    <footer class="detail-foot"><span>${escapeHtml(labels[item.maintenance] || item.maintenance)} · ${escapeHtml(item.price_band || '价格待记录')}</span>${sourceLink(item)}</footer>`;
}

function gatewayDetailMarkup(item) {
  const domain = domainById.get(item.domain_id);
  const roadmap = item.roadmap;
  const guide = item.guide || {};
  if (!roadmap) return starterGatewayDetailMarkup(item, domain, guide);
  const quick = guide.quick_start || {};
  const knowledge = guide.starter_knowledge || [];
  const kind = gatewayKind(item);
  const hasPlaybook = Boolean(roadmap.playbook?.length);
  const milestoneStep = hasPlaybook ? '04' : '03';
  const branchStep = hasPlaybook ? '05' : '04';
  const alternativeStep = hasPlaybook ? '06' : '05';
  return `
    <header class="detail-hero">
      <div><span class="category-tag">${escapeHtml(domain?.title || item.category)} · ${escapeHtml(labels[kind] || kind)}</span><h3>${escapeHtml(item.title)}</h3><p>${escapeHtml(guide.hook || roadmap.summary)}</p><div class="detail-actions">${usageButton(item, 'gateways')}${wishlistButton(item)}${pinButton(item, 'gateways')}${item.official_url ? `<a href="${escapeHtml(item.official_url)}" target="_blank" rel="noreferrer">查看官方页面 ↗</a>` : ''}</div></div>
      <div class="detail-score"><strong>${item.gateway_score}</strong><span>GATEWAY SCORE</span></div>
    </header>
    ${guide.payoff || guide.spark ? `<section class="gateway-attraction">
      ${guide.payoff ? `<article><span>第一次会获得</span><p>${escapeHtml(guide.payoff)}</p></article>` : ''}
      ${guide.spark ? `<article><span>有趣之处</span><p>${escapeHtml(guide.spark)}</p></article>` : ''}
    </section>` : ''}
    ${quick.action ? `<section class="quick-start-panel">
      <div class="quick-start-meta"><span>QUICK START</span><strong>${escapeHtml(quick.time || '现在')}</strong><strong>${escapeHtml(quick.cost || '低成本')}</strong></div>
      <div><h4>先赢一次，再决定要不要深入</h4><p>${escapeHtml(quick.action)}</p><div class="first-win"><span>完成标志</span>${escapeHtml(quick.win || '完成一次可观察、可复述的体验。')}</div></div>
    </section>` : ''}
    ${knowledge.length ? `<section class="detail-section knowledge-section">
      <div class="detail-section-head"><span>01</span><div><small>STARTER KNOWLEDGE</small><h4>先懂这三个，体验会立刻变好</h4></div></div>
      <div class="knowledge-grid">${knowledge.map((entry) => `<article><span>KNOW</span><h5>${escapeHtml(entry.term)}</h5><p>${escapeHtml(entry.explain)}</p></article>`).join('')}</div>
    </section>` : ''}
    <section class="now-callout"><span>现在最值得做</span><p>${escapeHtml(roadmap.recommended_now)}</p></section>
    ${item.not_for ? `<section class="buying-boundary"><span>先别买，如果</span><p>${escapeHtml(item.not_for)}</p></section>` : ''}
    <section class="detail-section">
      <div class="detail-section-head"><span>02</span><div><small>START</small><h4>从第一次体验走到真实感觉</h4></div></div>
      <ol class="first-steps">${roadmap.first_steps.map((step) => `<li>${escapeHtml(step)}</li>`).join('')}</ol>
    </section>
    ${roadmapPlaybookMarkup(roadmap)}
    <section class="detail-section">
      <div class="detail-section-head"><span>${milestoneStep}</span><div><small>MILESTONES</small><h4>里程碑</h4></div></div>
      <div class="milestone-list">${roadmap.milestones.map((milestone) => `<article class="milestone ${escapeHtml(milestone.status)}"><i></i><div><span>${escapeHtml(milestoneStatus(milestone.status))}</span><h5>${escapeHtml(milestone.title)}</h5><p>${escapeHtml(milestone.evidence)}</p></div></article>`).join('')}</div>
    </section>
    <section class="detail-section">
      <div class="detail-section-head"><span>${branchStep}</span><div><small>BRANCHES</small><h4>打开后的分叉</h4></div></div>
      <div class="branch-grid">${roadmap.branches.map((branch) => `<article><h5>${escapeHtml(branch.title)}</h5><p>${escapeHtml(branch.description)}</p><span>下一步 · ${escapeHtml(branch.next_action)}</span></article>`).join('')}</div>
    </section>
    <section class="detail-section">
      <div class="detail-section-head"><span>${alternativeStep}</span><div><small>ALTERNATIVES</small><h4>有没有更好的选择？</h4></div></div>
      <div class="alternative-list">${roadmap.alternatives.map((alternative) => `<article><div><h5>${escapeHtml(alternative.title)}</h5><span>更适合：${escapeHtml(alternative.best_for)}</span></div><p>${escapeHtml(alternative.verdict)}</p></article>`).join('')}</div>
    </section>
    ${guide.upgrade_when ? `<section class="upgrade-gate"><span>什么时候值得花钱 / 升级</span><p>${escapeHtml(guide.upgrade_when)}</p></section>` : ''}
    ${gatewayConnectionsMarkup(item)}
    ${usageRecordsMarkup(item, 'gateways')}
    <footer class="detail-foot"><span>${escapeHtml(labels[item.maintenance] || item.maintenance)} · ${escapeHtml(item.price_band || '价格待记录')}${item.checked_at ? ` · 核验 ${escapeHtml(item.checked_at)}` : ''}</span>${sourceLink(item)}</footer>`;
}

function gearDetailMarkup(item) {
  const domain = domainsForItem(item)[0];
  return `
    <header class="detail-hero gear-detail-hero">
      <div><span class="category-tag">${escapeHtml(domain?.title || item.category)} · 装备档案</span><h3>${escapeHtml(item.title)}</h3><p>${escapeHtml(item.excerpt || '这件装备的具体使用、感受与边界，留在自己的经验里。')}</p><div class="detail-actions">${usageButton(item, 'gear')}${wishlistButton(item)}${pinButton(item, 'gear')}</div></div>
      <div class="detail-score gear-detail-score"><strong>${escapeHtml(labels[item.status] || item.status_raw || '待记录')}</strong><span>GEAR RECORD</span></div>
    </header>
    <section class="detail-section gear-facts">
      <div class="detail-section-head"><span>01</span><div><small>GEAR PROFILE</small><h4>装备档案</h4></div></div>
      <div class="gear-fact-grid"><article><span>品牌</span><strong>${escapeHtml(item.brand || '待记录')}</strong></article><article><span>型号</span><strong>${escapeHtml(item.model || '待记录')}</strong></article><article><span>状态</span><strong>${escapeHtml(labels[item.status] || item.status_raw || '待记录')}</strong></article><article><span>领域</span><strong>${escapeHtml(domain?.title || item.category || '待记录')}</strong></article></div>
    </section>
    ${relatedGatewayMarkup(item)}
    ${usageRecordsMarkup(item, 'gear')}
    <footer class="detail-foot"><span>${escapeHtml(dateLabel(item.acquired))}${item.price_cny != null ? ` · ${escapeHtml(money(item.price_cny))}` : ''}</span>${sourceLink(item)}</footer>`;
}

function openGatewayDetail(id, { updateHash = true } = {}) {
  const item = data.gateways.find((gateway) => gateway.id === id);
  if (!item) return;
  markViewed(item, 'gateways');
  state.detailReturn = {
    view: state.view,
    cluster: state.cluster,
    domain: state.domain,
    stage: state.stage,
    status: state.status,
    query: state.query,
    sort: state.sort,
  };
  state.view = 'gateways';
  state.detailGateway = id;
  state.detailGear = '';
  state.domain = item.domain_id;
  document.querySelectorAll('.view-tab').forEach((button) => {
    const active = button.dataset.view === 'gateways';
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-selected', String(active));
  });
  $('#hero-number').textContent = data.gateways.length;
  $('#hero-label').textContent = viewMeta.gateways.hero;
  updateSortOptions();
  $('#content-kicker').textContent = 'GATEWAY JOURNEY';
  $('#content-title').textContent = '入口路线图';
  if (updateHash) history.pushState(null, '', `#gateway/${encodeURIComponent(id)}`);
  render();
  requestAnimationFrame(() => document.querySelector('.content-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
}

function openGearDetail(key, { updateHash = true } = {}) {
  const item = gearByKey(key);
  if (!item) return;
  markViewed(item, 'gear');
  state.detailReturn = {
    view: state.view,
    cluster: state.cluster,
    domain: state.domain,
    stage: state.stage,
    status: state.status,
    query: state.query,
    sort: state.sort,
  };
  state.view = 'gear';
  state.detailGateway = '';
  state.detailGear = key;
  state.domain = '';
  document.querySelectorAll('.view-tab').forEach((button) => {
    const active = button.dataset.view === 'gear';
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-selected', String(active));
  });
  $('#hero-number').textContent = data.summary.gear_count || data.gear.length;
  $('#hero-label').textContent = viewMeta.gear.hero;
  updateSortOptions();
  $('#content-kicker').textContent = 'GEAR RECORD';
  $('#content-title').textContent = '装备档案';
  if (updateHash) history.pushState(null, '', `#gear/${encodeURIComponent(key)}`);
  render();
  requestAnimationFrame(() => document.querySelector('.content-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
}

function closeGatewayDetail() {
  leaveGatewayDetail();
  render();
}

function closeGearDetail() {
  leaveGearDetail();
  render();
}

function renderCards() {
  const detail = $('#gateway-detail');
  const cards = $('#cards');
  const detailItem = state.detailGateway ? data.gateways.find((item) => item.id === state.detailGateway) : null;
  const detailGearItem = state.detailGear ? gearByKey(state.detailGear) : null;
  if (detailItem || detailGearItem) {
    detail.hidden = false;
    cards.hidden = true;
    $('#result-tools').hidden = true;
    $('#sort-label').hidden = true;
    $('#result-count').textContent = detailItem ? '路线图' : '装备档案';
    detail.innerHTML = detailItem ? gatewayDetailMarkup(detailItem) : gearDetailMarkup(detailGearItem);
    detail.querySelectorAll('[data-wishlist]').forEach((button) => button.addEventListener('click', () => toggleWishlist(button.dataset.wishlist)));
    detail.querySelectorAll('[data-pin]').forEach((button) => button.addEventListener('click', () => togglePinKey(button.dataset.pin)));
    detail.querySelectorAll('[data-gateway-detail]').forEach((button) => button.addEventListener('click', () => openGatewayDetail(button.dataset.gatewayDetail)));
    detail.querySelectorAll('[data-gear-detail]').forEach((button) => button.addEventListener('click', () => openGearDetail(button.dataset.gearDetail)));
    return;
  }
  detail.hidden = true;
  cards.hidden = false;
  $('#result-tools').hidden = false;
  $('#sort-label').hidden = false;
  const workspaceCount = sourceItems().filter((item) => isPinned(item) || recentAt(item) > 0).length;
  const workspaceToggle = $('#workspace-toggle');
  workspaceToggle.classList.toggle('is-active', state.workspace);
  workspaceToggle.setAttribute('aria-pressed', String(state.workspace));
  $('#workspace-count').textContent = workspaceCount;
  const items = currentItems();
  const visibleItems = items.slice(0, state.visibleCount);
  const remaining = items.length - visibleItems.length;
  $('#result-count').textContent = remaining > 0 ? `已显示 ${visibleItems.length} / ${items.length}` : `${items.length} 个结果`;
  $('#mobile-result-count').textContent = items.length;
  $('#cards').className = `cards ${state.view === 'domains' ? 'domain-grid' : state.view === 'gateways' ? 'gateway-grid' : 'gear-grid'}`;
  $('#cards').innerHTML = items.length
    ? visibleItems.map((item, index) => state.view === 'domains' ? domainCard(item) : state.view === 'gateways' ? gatewayCard(item, index) : gearCard(item)).join('') + (remaining > 0 ? `<button class="load-more" type="button" data-load-more><span>继续探索</span>再显示 ${Math.min(resultPageSize(), remaining)} 个<small>还剩 ${remaining} 个结果</small></button>` : '')
    : state.workspace
      ? `<div class="empty"><strong>这里还没有常看项目</strong><p>打开一个领域或路线图，或在卡片右上角点“置顶”，它就会留在这里。</p></div>`
      : `<div class="empty"><strong>这里暂时没有内容</strong><p>换个关键词或清除筛选条件再看看。</p></div>`;
  bindCardActions();
  cards.querySelector('[data-load-more]')?.addEventListener('click', () => {
    state.visibleCount += resultPageSize();
    renderCards();
  });
}

function updateSortOptions() {
  const workspaceOptions = '<option value="recent">最近查看</option><option value="pinned">已置顶</option>';
  if (state.view === 'domains') $('#sort').innerHTML = `${workspaceOptions}<option value="coverage">覆盖度</option><option value="name">名称</option>`;
  if (state.view === 'gateways') $('#sort').innerHTML = `${workspaceOptions}<option value="score">最值得探索</option><option value="quick">最快获得反馈</option><option value="low-cost">最低投入</option><option value="name">名称</option><option value="domain">领域</option>`;
  if (state.view === 'gear') $('#sort').innerHTML = `${workspaceOptions}<option value="domain">领域</option><option value="name">名称</option><option value="price">价格</option><option value="oldest">入手最早</option>`;
  if (![...$('#sort').options].some((option) => option.value === state.sort)) state.sort = viewMeta[state.view].sort;
  $('#sort').value = state.sort;
}

function render() {
  renderMetrics();
  renderFilters();
  renderRelationshipSummary();
  renderCards();
  renderStickyContext();
}

function switchView(view, { reveal = false, preserveDomain = false, preserveHash = false } = {}) {
  state.view = view;
  state.detailGateway = '';
  state.detailGear = '';
  state.detailReturn = null;
  if (!preserveHash && (location.hash.startsWith('#gateway/') || location.hash.startsWith('#gear/'))) history.replaceState(null, '', `${location.pathname}${location.search}`);
  if (!preserveDomain) {
    state.domain = '';
    state.cluster = '';
  } else {
    state.cluster = domainById.get(state.domain)?.cluster_id || state.cluster;
  }
  state.stage = '';
  state.status = '';
  state.query = '';
  state.visibleCount = resultPageSize();
  if (isMobileViewport()) state.filtersOpen = false;
  $('#search').value = '';
  state.sort = workspace.recent.size > 0 ? 'recent' : viewMeta[view].sort;
  document.querySelectorAll('.view-tab').forEach((button) => {
    const active = button.dataset.view === view;
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-selected', String(active));
  });
  $('#content-kicker').textContent = viewMeta[view].kicker;
  $('#content-title').textContent = viewMeta[view].title;
  $('#hero-number').textContent = view === 'domains' ? data.summary.domain_count : view === 'gateways' ? data.gateways.length : data.summary.gear_count;
  $('#hero-label').textContent = viewMeta[view].hero;
  updateSortOptions();
  render();
  if (reveal) requestAnimationFrame(() => document.querySelector('.content-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
}

$('#updated').textContent = formatGeneratedAt(data.generatedAt);
$('#domain-tab-count').textContent = data.summary.domain_count || data.domains.length || 0;
$('#gateway-tab-count').textContent = data.gateways.length || 0;
$('#gear-tab-count').textContent = data.summary.gear_count || data.gear.length || 0;
if (data.library?.feedback_url) $('#gateway-feedback-link').href = data.library.feedback_url;
$('#footer-year').textContent = new Date().getFullYear();
document.querySelectorAll('.view-tab').forEach((button) => button.addEventListener('click', () => switchView(button.dataset.view, { reveal: true })));
$('#search').addEventListener('input', (event) => {
  const wasDetail = Boolean(state.detailGateway || state.detailGear);
  leaveActiveDetail({ restore: false });
  if (wasDetail) {
    state.cluster = '';
    state.domain = '';
    state.stage = '';
    state.status = '';
  }
  state.query = event.target.value;
  state.visibleCount = resultPageSize();
  if (wasDetail) render(); else renderCards();
});
$('#sort').addEventListener('change', (event) => { state.sort = event.target.value; state.visibleCount = resultPageSize(); renderCards(); });
$('#workspace-toggle').addEventListener('click', () => {
  state.workspace = !state.workspace;
  state.visibleCount = resultPageSize();
  if (state.workspace) state.sort = 'recent';
  renderCards();
});
$('#mobile-filter-toggle').addEventListener('click', () => {
  state.filtersOpen = !state.filtersOpen;
  syncMobileFilterUi();
});
$('#mobile-results-button').addEventListener('click', () => {
  state.filtersOpen = false;
  syncMobileFilterUi();
  revealResults();
});
$('#clear-filters').addEventListener('click', () => {
  leaveActiveDetail({ restore: false });
  state.cluster = '';
  state.domain = '';
  state.stage = '';
  state.status = '';
  state.query = '';
  state.visibleCount = resultPageSize();
  $('#search').value = '';
  render();
  revealResults();
});
$('#surprise-domain').addEventListener('click', () => {
  leaveActiveDetail({ restore: false });
  const blindSpots = data.domains.filter((domain) => domain.stage === 'empty');
  if (!blindSpots.length) return;
  const otherClusters = blindSpots.filter((domain) => domain.cluster_id !== state.cluster);
  const differentDomain = blindSpots.filter((domain) => domain.id !== state.domain);
  const candidates = otherClusters.length ? otherClusters : differentDomain.length ? differentDomain : blindSpots;
  const domain = candidates[Math.floor(Math.random() * candidates.length)];
  state.cluster = domain.cluster_id;
  state.domain = domain.id;
  state.stage = 'empty';
  state.query = '';
  state.visibleCount = resultPageSize();
  $('#search').value = '';
  render();
  requestAnimationFrame(() => document.querySelector('.content-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
});
$('#surprise-gateway').addEventListener('click', () => {
  leaveActiveDetail({ restore: false });
  // Always pick from all gateways — don't let leftover domain filter narrow the pool.
  const pool = (data.gateways || []).filter((g) => g.guide?.quick_start?.action);
  if (!pool.length) return;
  const top = [...pool].sort((a, b) => quickStartCostRank(a) - quickStartCostRank(b) || quickStartMinutes(a) - quickStartMinutes(b)).slice(0, Math.min(10, pool.length));
  if (!top.length) return;
  const fresh = top.length > 1 ? top.filter((g) => g.id !== lastSurpriseGatewayId) : top;
  const gateway = fresh[Math.floor(Math.random() * fresh.length)] || top[0];
  if (gateway && gateway.id) {
    lastSurpriseGatewayId = gateway.id;
    openGatewayDetail(gateway.id);
  }
});
document.addEventListener('keydown', (event) => {
  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); $('#search').focus(); }
  if (event.key === 'Escape' && document.activeElement === $('#search')) { $('#search').value = ''; state.query = ''; $('#search').blur(); renderCards(); }
});

function gatewayIdFromHash() {
  return location.hash.startsWith('#gateway/') ? decodeURIComponent(location.hash.slice(9)) : '';
}

function gearKeyFromHash() {
  return location.hash.startsWith('#gear/') ? decodeURIComponent(location.hash.slice(6)) : '';
}

function showGatewayFromHash() {
  const id = gatewayIdFromHash();
  const gateway = data.gateways.find((item) => item.id === id);
  if (!gateway) return false;
  state.domain = '';
  state.cluster = '';
  switchView('gateways', { preserveDomain: true, preserveHash: true });
  openGatewayDetail(id, { updateHash: false });
  return true;
}

function showGearFromHash() {
  const key = gearKeyFromHash();
  const gear = gearByKey(key);
  if (!gear) return false;
  state.domain = '';
  state.cluster = '';
  switchView('gear', { preserveDomain: true, preserveHash: true });
  openGearDetail(key, { updateHash: false });
  return true;
}

window.addEventListener('hashchange', () => {
  if (!showGatewayFromHash() && !showGearFromHash()) {
    if (state.detailGateway) closeGatewayDetail();
    else if (state.detailGear) closeGearDetail();
  }
});

if (!showGatewayFromHash() && !showGearFromHash()) switchView('gateways');