const UnclaimedPage = {
  filters: {},

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

  async mount() {
    document.getElementById('page-title').textContent = '待处理工单';
    document.getElementById('page-actions').innerHTML = '';

    const ct = document.getElementById('page-content');
    ct.innerHTML = `
      <div class="filter-bar">
        <select id="u-type" onchange="UnclaimedPage.applyFilters()"><option value="">全部类型</option>${Object.entries(U.TYPE).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}</select>
        <button class="btn btn-o btn-sm" onclick="UnclaimedPage.applyFilters()"><i class="fas fa-filter"></i></button>
        <button class="btn btn-o btn-sm" onclick="UnclaimedPage.reset()"><i class="fas fa-undo"></i></button>
      </div>
      <div id="unclaimed-list"></div>
    `;
    await this.load();
  },

  async load() {
    const list = document.getElementById('unclaimed-list');
    U.loading(list);
    try {
      const params = new URLSearchParams();
      if (this.filters.type) params.set('type', this.filters.type);
      const qs = params.toString();
      const tickets = await API.get('/tickets/unclaimed' + (qs ? '?' + qs : ''));
      this.renderList(list, tickets);
    } catch (e) { list.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
  },

  renderList(ct, tickets) {
    ct.innerHTML = tickets.length === 0
      ? `<div class="empty"><i class="fas fa-check-circle"></i><p>所有工单已处理完毕</p></div>`
      : `<div class="card"><div class="card-h"><span>${tickets.length} 个待处理工单</span><span class="ts tm">按状态优先级排序</span></div><div class="table-wrap"><table><thead><tr>
        <th>#</th><th>类型</th><th>标题</th><th>提交者</th><th>对象/详情</th><th>状态</th><th>优先级</th><th>时间</th><th>操作</th>
      </tr></thead><tbody>${tickets.map(t => `
        <tr>
          <td>${t.id}</td><td>${U.badge(t.type,'type')}</td>
          <td><a href="#" onclick="App.navigate('ticket',${t.id});return false" style="color:var(--p);text-decoration:none;font-weight:600">${U.esc(t.title)}</a></td>
          <td>${U.esc(t.reporter_game_name)}<br><span class="tm ts">UID:${U.esc(t.reporter_game_uid)}</span></td>
           <td>${t.type==='report'?`${U.esc(t.target_game_name||'?')}<br><span class="tm ts">${U.esc(t.reason||'')}</span>`
            :(t.type==='appeal'||t.type==='result_appeal')?`<span class="tm ts">${U.esc(t.reason||'')}</span>`
            :`<span class="tm ts">${U.esc((t.description||'').substring(0,30))}</span>`}</td>
          <td>${U.badge(t.status,'status')}</td>
          <td>${U.badge(t.priority,'priority')}</td>
          <td class="ts">${U.date(t.created_at)}</td>
          <td>
            <button class="btn btn-s btn-sm" onclick="UnclaimedPage.quickClaim(${t.id})"><i class="fas fa-hand-paper"></i> 接单</button>
            <button class="btn btn-o btn-sm" onclick="App.navigate('ticket',${t.id})"><i class="fas fa-eye"></i></button>
          </td>
        </tr>`).join('')}</tbody></table></div></div>`;
  },

  async quickClaim(id) {
    U.modal('接单认领', `<form id="qc-form"><div class="form-group"><label>初始回复 (玩家可见)</label><textarea id="qc-reply" rows="3" placeholder="接单时发送给玩家的回复..."></textarea></div><div class="form-group"><label>处理备注 (内部)</label><textarea id="qc-note" rows="2" placeholder="内部备注，玩家不可见"></textarea></div><div class="modal-f"><button type="button" class="btn btn-o" onclick="App.closeModal()">取消</button><button type="submit" class="btn btn-s"><i class="fas fa-hand-paper"></i> 确认接单</button></div></form>`);
    document.getElementById('qc-form').onsubmit = async e => { e.preventDefault();
      try { await API.post(`/tickets/${id}/claim`, {claim_note: document.getElementById('qc-note').value, initial_reply: document.getElementById('qc-reply').value}); App.closeModal(); this.load(); } catch(ex){alert(ex.message);}
    };
  },

  applyFilters() {
    this.filters.type = document.getElementById('u-type').value;
    this.load();
  },
  reset() { this.filters = {}; this.load(); }
};