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

  mount() {
    const ct = document.getElementById('page-content');
    document.getElementById('page-title').textContent = '追踪工单';
    document.getElementById('page-actions').innerHTML = '';

    const token = document.cookie.split('; ').find(r => r.startsWith('tracking_token='))?.split('=')[1] || '';

    ct.innerHTML = `
      <div class="card"><div class="card-b">
        <div class="form-group"><label>追踪标识 (从Cookie自动读取)</label><input id="track-token" value="${token}"></div>
        <button class="btn btn-p" onclick="TrackingPage.search()"><i class="fas fa-search"></i> 查询</button>
        <div id="track-result" class="mt-4"></div>
      </div></div>
    `;
  },

  async search() {
    const token = document.getElementById('track-token').value.trim();
    if (!token) return alert('请输入追踪标�?);
    const ct = document.getElementById('track-result');
    U.loading(ct);
    try {
      const tickets = await API.get(`/tickets/tracking?token=${token}`);
      ct.innerHTML = tickets.length ? `
        <div class="table-wrap"><table><thead><tr><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><strong>${U.esc(t.title)}</strong></td>
            <td>${U.badge(t.status,'status')}</td><td class="ts">${U.date(t.created_at)}</td>
          </tr>`).join('')}</tbody></table></div>
        <p class="tm ts mt-4">如需获取更详细的跟踪和回复通知，请<a href="#/register" style="color:var(--p)">注册账号</a></p>
      ` : '<div class="empty"><i class="fas fa-inbox"></i><p>未找到工�?/p></div>';
    } catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
  }
};