const ImplementationsPage = {
  async render() {
    return '<div class="loading"><i class="fas fa-spinner"></i><p>加载中...</p></div>';
  },

  async mount() {
    const container = document.getElementById('page-content');
    document.getElementById('page-title').textContent = '实施管理';
    document.getElementById('page-actions').innerHTML = '';

    try {
      const impls = await API.get('/implementations');
      this.renderList(container, impls);
    } catch (err) {
      container.innerHTML = `<div class="alert alert-danger">加载失败: ${err.message}</div>`;
    }
  },

  renderList(container, impls) {
    container.innerHTML = `
      ${impls.length === 0 ? `
        <div class="empty-state">
          <i class="fas fa-code"></i>
          <p>暂无实施记录</p>
        </div>
      ` : `
        <div class="card">
          <div class="table-container">
            <table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>关联投诉</th>
                  <th>关联计划</th>
                  <th>状态</th>
                  <th>实施者</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                ${impls.map(i => `
                  <tr>
                    <td>${i.id}</td>
                    <td><a href="#" onclick="App.navigate('complaint',${i.complaint_id});return false" style="color:var(--primary)">#${i.complaint_id} ${Utils.escapeHtml(i.complaint_title)}</a></td>
                    <td class="text-sm text-muted">${Utils.escapeHtml(i.plan_title)}</td>
                    <td>${Utils.statusBadge(i.status)}</td>
                    <td>${i.implementer_name || '-'}</td>
                    <td class="date">${Utils.formatDate(i.created_at)}</td>
                    <td>
                      <button class="btn btn-sm btn-outline" onclick="App.navigate('complaint',${i.complaint_id})"><i class="fas fa-eye"></i></button>
                    </td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      `}
    `;
  }
};