const ICONS = {'心理测试综合':'📋','人格测试':'🎭','抑郁症测试':'🌧️','焦虑症测试':'😰','强迫症测试':'🔄','躁狂症测试':'🔥','双向情感障碍':'🌓','恐惧症测试':'😨','智商测试':'🧠','情商测试':'💝','其它测试':'📌'};

const CAT_KEYS = {'心理测试综合':'cat-综合','人格测试':'cat-人格','抑郁症测试':'cat-抑郁','焦虑症测试':'cat-焦虑','强迫症测试':'cat-强迫','躁狂症测试':'cat-躁狂','双向情感障碍':'cat-双相','恐惧症测试':'cat-恐惧','智商测试':'cat-智商','情商测试':'cat-情商','其它测试':'cat-其他'};

let scales = [], activeCat = '全部';

async function load() {
  document.getElementById('content').innerHTML = '<div class="loading">加载中…</div>';
  try {
    const r = await fetch('../api/scales');
    scales = await r.json();
    renderCats();
    renderScales();
  } catch(e) {
    document.getElementById('content').innerHTML = '<div class="loading">加载失败，请刷新重试</div>';
  }
}

function renderCats() {
  const cats = [...new Set(scales.map(s=>s.category))];
  const html = ['<button class="cat-btn active" onclick="filter(\'全部\')">全部</button>'];
  cats.forEach(c => {
    html.push(`<button class="cat-btn" onclick="filter('${c}')">${c}</button>`);
  });
  document.getElementById('cats').innerHTML = html.join('');
}

function filter(cat) {
  activeCat = cat;
  document.querySelectorAll('.cat-btn').forEach(b => b.classList.toggle('active', b.textContent === cat));
  renderScales();
}

function renderScales() {
  const filtered = activeCat === '全部' ? scales : scales.filter(s=>s.category===activeCat);
  if (!filtered.length) {
    document.getElementById('content').innerHTML = '<div class="empty">暂无数据</div>';
    return;
  }
  const html = filtered.map(s => `
    <a href="scale-test.html?slug=${s.slug}" class="scale-card">
      <div class="icon ${CAT_KEYS[s.category]||'cat-其他'}">${ICONS[s.category]||'📌'}</div>
      <div class="info">
        <div class="name">${s.name}</div>
        <div class="desc">${s.description||''}</div>
      </div>
      <div class="count">${s.question_count}题</div>
    </a>
  `).join('');
  document.getElementById('content').innerHTML = `<div class="scales">${html}</div>`;
}

load();