<div class="ab-table-toolbar mb-3">
  <div class="ab-search"><i class="bi bi-search"></i><input type="text" id="abConvSearch" placeholder="Search conversations..." value="<?= e($_GET['search'] ?? '') ?>"></div>
  <select class="form-select form-select-sm" id="abConvChannel" style="width:auto;">
    <option value="">All Channels</option>
    <option value="chatbot">Chatbot</option>
    <option value="voice_agent">Voice Agent</option>
    <option value="ai_assistant">AI Assistant</option>
  </select>
  <select class="form-select form-select-sm" id="abConvOutcome" style="width:auto;">
    <option value="">All Outcomes</option>
    <option value="lead_created">Lead Created</option>
    <option value="booked">Booked</option>
    <option value="escalated">Escalated</option>
    <option value="resolved">Resolved</option>
    <option value="abandoned">Abandoned</option>
  </select>
</div>

<div class="ab-table-card">
  <div class="table-responsive">
    <table class="table ab-table align-middle">
      <thead><tr><th>Date</th><th>Channel</th><th>Visitor</th><th>Related</th><th>Outcome</th><th></th></tr></thead>
      <tbody>
      <?php foreach ($rows as $c): ?>
        <tr style="cursor:pointer;" class="ab-conv-row" data-id="<?= (int) $c['id'] ?>">
          <td class="ab-cell-sub"><?= e(date('M j, g:i A', strtotime($c['started_at']))) ?></td>
          <td><span class="ab-badge bg-secondary-soft"><?= e(ucwords(str_replace('_',' ',$c['channel']))) ?></span></td>
          <td><?= e($c['visitor_identifier'] ?? '—') ?></td>
          <td><?= e($c['lead_name'] ?: $c['customer_name'] ?: '—') ?></td>
          <td><span class="ab-badge <?= match($c['outcome']){'lead_created'=>'bg-success-soft','booked'=>'bg-primary-soft','escalated'=>'bg-warning-soft','abandoned'=>'bg-danger-soft',default=>'bg-secondary-soft'} ?>"><?= e($c['outcome'] ? ucfirst(str_replace('_',' ',$c['outcome'])) : 'In progress') ?></span></td>
          <td><i class="bi bi-arrow-right"></i></td>
        </tr>
      <?php endforeach; ?>
      <?php if (empty($rows)): ?><tr><td colspan="6" class="text-center p-4 ab-text-muted">No conversations logged yet.</td></tr><?php endif; ?>
      </tbody>
    </table>
  </div>
  <div class="ab-table-pagination">
    <div>Showing <strong><?= (int) $meta['from'] ?>–<?= (int) $meta['to'] ?></strong> of <strong><?= (int) $meta['total'] ?></strong> conversations</div>
  </div>
</div>

<div class="modal fade" id="abConvModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Conversation Transcript</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body" id="abConvModalBody"></div>
</div></div></div>

<script>
function abConvFilter() {
  var p = new URLSearchParams({
    search: document.getElementById('abConvSearch').value,
    channel: document.getElementById('abConvChannel').value,
    outcome: document.getElementById('abConvOutcome').value
  });
  window.location.href = '<?= base_url('conversation-logs') ?>?' + p.toString();
}
document.getElementById('abConvSearch').addEventListener('keydown', function (e) { if (e.key === 'Enter') abConvFilter(); });
document.getElementById('abConvChannel').addEventListener('change', abConvFilter);
document.getElementById('abConvOutcome').addEventListener('change', abConvFilter);

document.querySelectorAll('.ab-conv-row').forEach(function (row) {
  row.addEventListener('click', function () {
    abFetch('<?= base_url('conversation-logs') ?>/' + row.dataset.id).then(function (res) {
      var c = res.data.conversation;
      var msgs = res.data.messages.map(function (m) {
        return '<div class="mb-2"><strong>' + m.sender.toUpperCase() + ':</strong> ' + m.message + '</div>';
      }).join('');
      document.getElementById('abConvModalBody').innerHTML =
        '<p class="ab-cell-sub">' + c.channel + ' · ' + (c.lead_name || c.customer_name || c.visitor_identifier || '') + '</p>' + msgs;
      new bootstrap.Modal(document.getElementById('abConvModal')).show();
    });
  });
});
</script>
