// ================================================================
// Command Log Component
// ================================================================

window.renderLog = function(cmds) {
  const el = document.getElementById('log-content');
  if (!cmds.length) {
    el.innerHTML = '<p id="empty-log">No commands sent yet.</p>';
    return;
  }

  const rows = cmds.map(cmd => {
    const p = typeof cmd.payload === 'string' ? JSON.parse(cmd.payload) : cmd.payload;
    let desc = '';
    if (cmd.type === 'build') {
      desc = `Build: ${p.building_id}`;
    } else if (cmd.type === 'recruit') {
      desc = `Recruit: ${p.amount}x ${p.unit_id}`;
    } else if (cmd.type === 'market_offer') {
      desc = `Market: ${p.offer} ${p.offer_type} ➞ ${p.demand} ${p.demand_type}`;
    }
    const statusClass = `status-${cmd.status}`;
    const cancelBtn = `<button class="btn btn-danger btn-sm" onclick="cancelCommand(${cmd.id})">✕</button>`;

    const timeStr = new Date(cmd.created_at + 'Z').toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
    
    return `<tr>
      <td style="color:#888;font-size:0.75rem">#${cmd.id}<br><span style="font-size:0.65rem;color:#555;">${timeStr}</span></td>
      <td>${cmd.town_name || cmd.town_id}</td>
      <td>${desc}</td>
      <td><span class="status-badge ${statusClass}">${cmd.status}</span></td>
      <td style="color:#666;font-size:0.72rem">${cmd.result_msg || ''}</td>
      <td>${cancelBtn}</td>
    </tr>`;
  }).join('');

  el.innerHTML = `<table>
    <thead><tr>
      <th>#</th><th>Town</th><th>Command</th><th>Status</th><th>Result</th><th></th>
    </tr></thead>
    <tbody>${rows}</tbody>
  </table>`;
};