const button = document.querySelector('#analyzeBtn');
const statusBox = document.querySelector('#analysisStatus');
const content = document.querySelector('#analysisContent');

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

function renderList(items, ordered = false) {
  const tag = ordered ? 'ol' : 'ul';
  return `<${tag}>${(items || []).map(x => `<li>${escapeHtml(x)}</li>`).join('')}</${tag}>`;
}

function renderAnalysis(a) {
  return `
    <section><h3>一句话摘要</h3><p>${escapeHtml(a.summary)}</p></section>
    <section><h3>核心要点</h3>${renderList(a.key_points)}</section>
    <section><h3>行业信号</h3><p>${escapeHtml(a.industry_signal)}</p></section>
    <section><h3>关键数据</h3>${renderList(a.numbers)}</section>
    <section><h3>延展选题</h3>${renderList(a.content_angles, true)}</section>
    <section><h3>风险提示</h3>${renderList(a.risk_notes)}</section>
    <section><h3>标签</h3><div class="tags">${(a.tags || []).map(x => `<span>${escapeHtml(x)}</span>`).join('')}</div></section>`;
}

button?.addEventListener('click', async () => {
  button.disabled = true;
  statusBox.hidden = false;
  statusBox.className = 'analysis-status loading';
  statusBox.textContent = '千问正在阅读全文并提炼行业信号…';
  try {
    const response = await fetch(`/api/articles/${button.dataset.id}/analyze`, {
      method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({force: button.textContent.includes('重新')})
    });
    const data = await response.json();
    if (!data.ok) throw new Error(data.error || '分析失败');
    content.innerHTML = renderAnalysis(data.analysis);
    statusBox.className = 'analysis-status success';
    statusBox.textContent = data.cached ? '已载入缓存分析' : '分析完成并已保存';
    button.textContent = '重新分析';
  } catch (error) {
    statusBox.className = 'analysis-status error';
    statusBox.textContent = error.message;
  } finally {
    button.disabled = false;
  }
});