const FeatureDetail = {
  id: null,

  async render(id) { this.id = id; return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },

  async mount() {
    const id = this.id;
    document.getElementById('page-title').textContent = `更新 #${id}`;
    document.getElementById('page-actions').innerHTML = '<button class="btn btn-o btn-sm" data-action="App:navigate:features"><i class="fas fa-arrow-left"></i> 返回</button>';
    try {
      const item = await API.get('/features/'+id);
      this.renderDetail(item);
    } catch(e) { document.getElementById('page-content').innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
  },

  renderDetail(i) {
    const sc = i.status==='done'?'var(--s)':i.status==='planned'?'var(--p)':'var(--g5)';
    const sl = i.status==='done'?'已完成':i.status==='planned'?'计划中':'待定';
    const ct = document.getElementById('page-content');
    ct.innerHTML = `<div class="card"><div class="card-h">
      <span><span style="color:${sc};font-size:18px">${i.status==='done'?'\u2713':i.status==='planned'?'\u25C9':'\u25CB'}</span> ${U.esc(i.title)}</span>
      <span>${sl} · ${i.votes_count||0} 票</span>
    </div><div class="card-b">
      ${i.description?`<p style="white-space:pre-wrap;margin-bottom:16px">${U.esc(i.description)}</p>`:''}
      ${i.group_name?`<span class="badge bg-player">${U.esc(i.group_name)}/${U.esc(i.server_name)}</span>`:''}
      <span class="ts tm" style="margin-left:8px">${U.date(i.created_at)}</span>
      <div style="margin-top:12px">
        <button class="btn btn-${i.my_vote?'s':'o'} btn-sm" id="feat-detail-vote"><i class="fas fa-thumbs-up"></i> ${i.my_vote?'已投票':'投票'} (${i.votes_count||0})</button>
      </div>
    </div></div>

    <div class="card"><div class="card-h">讨论 (${(i.comments||[]).length})</div><div class="card-b">
      <div id="feat-comments">${(i.comments||[]).length===0?'<p class="tm">暂无讨论</p>':i.comments.map(c=>`
        <div style="padding:8px 0;border-bottom:1px solid var(--g2)">
          <span class="fb">${U.esc(c.username||'用户')}</span> ${c.role ? U.badge(c.role,'role') : ''}
          <span class="ts tm">${U.date(c.created_at)}</span>
          <div style="margin-top:4px;white-space:pre-wrap">${U.esc(c.content)}</div>
        </div>`).join('')}
      </div>
      <form id="feat-comment-form" class="flex g2" style="margin-top:12px">
        <input id="feat-comment-input" placeholder="添加评论..." style="flex:1;padding:8px 12px;border:1px solid var(--g200);border-radius:var(--r);font-family:inherit">
        <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-reply"></i></button>
      </form>
    </div></div>`;

    document.getElementById('feat-detail-vote').onclick = async () => {
      try { await API.post(`/features/${id}/vote`); this.mount(); } catch(ex){alert(ex.message);}
    };
    document.getElementById('feat-comment-form').onsubmit = async e => {
      e.preventDefault();
      const inp = document.getElementById('feat-comment-input');
      try { await API.post(`/features/${id}/comment`, {content:inp.value}); inp.value=''; this.mount(); } catch(ex){alert(ex.message);}
    };
  }
};