const HomePage = {
  async render() {
    return `<div id="home-content" style="max-width:800px;margin:0 auto;padding:30px 0">
      <div class="tab-nav">
        <button class="active" data-tab="report"><i class="fas fa-flag"></i> 举报</button>
        <button data-tab="suggestion"><i class="fas fa-lightbulb"></i> 建议</button>
        <button data-tab="appeal"><i class="fas fa-gavel"></i> 申诉</button>
        <button data-tab="tracking"><i class="fas fa-search"></i> 追踪</button>
      </div>
      <div id="home-tab"></div>
    </div>`;
  },

  mount() {
    const tabBtns = document.querySelectorAll('.tab-nav button');
    const tabContent = document.getElementById('home-tab');
    let currentTab = 'report';

    function switchTab(tab) {
      currentTab = tab;
      tabBtns.forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
      if (tab === 'tracking') renderTracking(tabContent);
      else TicketCreate.render(tabContent, { type: tab, prefill: {}, backLink: null });
    }

    function renderTracking(ct) {
      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 || ''}" placeholder="粘贴追踪标识">
          </div>
          <button class="btn btn-p" onclick="HomePage.searchTracking()"><i class="fas fa-search"></i> 查找我的工单</button>
          <div id="track-result" class="mt-4"></div>
        </div></div>`;
    }

    tabBtns.forEach(b => b.onclick = () => switchTab(b.dataset.tab));
    switchTab('report');

    this.searchTracking = async () => {
      const token = document.getElementById('track-token').value.trim();
      if (!token) return alert('请输入追踪标识');
      const ct = document.getElementById('track-result');
      ct.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i></div>';
      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><th>操作</th>
          </tr></thead><tbody>${tickets.map(t => `
            <tr><td>${t.id}</td><td>${U.badge(t.type,'type')}</td><td>${U.esc(t.title)}</td>
            <td>${U.badge(t.status,'status')}</td><td>${U.date(t.created_at)}</td>
            <td><button class="btn btn-o btn-sm" onclick="App.navigate('tracking');App.showTrackDetail(${t.id},'${token}')">查看</button></td></tr>
          `).join('')}</tbody></table></div>` : '<div class="empty"><i class="fas fa-inbox"></i><p>未找到工单</p></div>';
      } catch (ex) { ct.innerHTML = `<div class="alert alert-e">${ex.message}</div>`; }
    };
  },

  showTrackDetail(id, token) {
    U.modal(`工单 #${id}`, `<div id="track-detail-content"></div>`, '700px');
    const ct = document.getElementById('track-detail-content');
    U.loading(ct);
    API.get(`/tickets/tracking?token=${token}`).then(tickets => {
      const t = tickets.find(x => x.id === id);
      if (!t) { ct.innerHTML = '<p>未找到</p>'; return; }
      ct.innerHTML = `
        <div class="detail-section"><h4>基本信息</h4>
          <div class="detail-row"><span class="lbl">标题</span><span class="val fb">${U.esc(t.title)}</span></div>
          <div class="detail-row"><span class="lbl">类型</span><span class="val">${U.badge(t.type,'type')}</span></div>
          <div class="detail-row"><span class="lbl">状态</span><span class="val">${U.badge(t.status,'status')}</span></div>
          <div class="detail-row"><span class="lbl">提交者</span><span class="val">${U.esc(t.reporter_game_name)} (UID: ${U.esc(t.reporter_game_uid)})</span></div>
          ${t.type==='report'?`
          <div class="detail-row"><span class="lbl">被举报人</span><span class="val">${U.esc(t.target_game_name||'?')} (UID: ${U.esc(t.target_game_uid||'?')})</span></div>
          <div class="detail-row"><span class="lbl">原因</span><span class="val">${U.esc(t.reason)}</span></div>`:''}
          ${t.description?`<div class="detail-row"><span class="lbl">详情</span><span class="val">${U.esc(t.description)}</span></div>`:''}
          <div class="detail-row"><span class="lbl">时间</span><span class="val">${U.date(t.created_at)}</span></div>
        </div>
        <p class="tm ts">如需回复，请<a href="#/register" style="color:var(--p)">注册账号</a>后关联此工单。</p>`;
    }).catch(e => { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; });
  }
};