<ul class="nav ab-tabs mb-3">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tdAssistant">AI Assistant</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tdChatbot">Chatbot</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tdVoice">Voice Agent</a></li>
</ul>

<div class="tab-content">
  <?php foreach (['ai_assistant' => 'tdAssistant', 'chatbot' => 'tdChatbot', 'voice_agent' => 'tdVoice'] as $feature => $tabId): ?>
  <div class="tab-pane fade <?= $feature==='ai_assistant'?'show active':'' ?>" id="<?= $tabId ?>">
    <div class="d-flex justify-content-end gap-2 mb-3">
      <a href="<?= base_url('training-data/' . $feature . '/export') ?>" class="btn btn-light-soft btn-sm"><i class="bi bi-download me-1"></i>Export JSONL</a>
      <button class="btn btn-primary btn-sm ab-new-example" data-feature="<?= $feature ?>"><i class="bi bi-plus-lg me-1"></i>Add Example</button>
    </div>
    <div class="ab-table-card">
      <div class="table-responsive">
        <table class="table ab-table">
          <thead><tr><th>Prompt</th><th>Ideal Response</th><th>Notes</th><th></th></tr></thead>
          <tbody>
          <?php foreach ($examples[$feature] as $ex): ?>
            <tr><td class="small"><?= e(mb_strimwidth($ex['prompt_text'], 0, 80, '…')) ?></td><td class="small"><?= e(mb_strimwidth($ex['ideal_response'], 0, 80, '…')) ?></td><td class="ab-cell-sub"><?= e($ex['notes'] ?? '') ?></td>
              <td><button class="btn btn-icon btn-light-soft btn-sm ab-delete-example" data-id="<?= (int) $ex['id'] ?>"><i class="bi bi-trash text-danger"></i></button></td></tr>
          <?php endforeach; ?>
          <?php if (empty($examples[$feature])): ?><tr><td colspan="4" class="text-center p-4 ab-text-muted">No examples yet.</td></tr><?php endif; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <?php endforeach; ?>
</div>

<div class="modal fade" id="abExampleModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Add Training Example</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body">
    <form id="abExampleForm">
      <input type="hidden" name="feature" id="abExampleFeature">
      <div class="mb-2"><label class="form-label ab-req">Prompt</label><textarea class="form-control" name="prompt_text" rows="2" required></textarea></div>
      <div class="mb-2"><label class="form-label ab-req">Ideal Response</label><textarea class="form-control" name="ideal_response" rows="3" required></textarea></div>
      <div class="mb-0"><label class="form-label">Notes</label><input class="form-control" name="notes"></div>
    </form>
  </div>
  <div class="modal-footer"><button class="btn btn-light-soft" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" id="abExampleSaveBtn">Save</button></div>
</div></div></div>

<script>
document.querySelectorAll('.ab-new-example').forEach(function (btn) {
  btn.addEventListener('click', function () {
    document.getElementById('abExampleForm').reset();
    document.getElementById('abExampleFeature').value = btn.dataset.feature;
    new bootstrap.Modal(document.getElementById('abExampleModal')).show();
  });
});

document.getElementById('abExampleSaveBtn').addEventListener('click', function () {
  var form = document.getElementById('abExampleForm');
  abFetch('<?= base_url('training-data') ?>', { method: 'POST', body: Object.fromEntries(new FormData(form).entries()) })
    .then(function (res) { abToast(res.message); bootstrap.Modal.getInstance(document.getElementById('abExampleModal')).hide(); setTimeout(function () { window.location.reload(); }, 600); })
    .catch(function (err) { abShowFormErrors(form, err.errors); abToast(err.message || 'Save failed.', 'danger'); });
});

document.querySelectorAll('.ab-delete-example').forEach(function (btn) {
  btn.addEventListener('click', function () {
    if (!confirm('Delete this example?')) return;
    abFetch('<?= base_url('training-data') ?>/' + btn.dataset.id, { method: 'DELETE' })
      .then(function (res) { abToast(res.message); setTimeout(function () { window.location.reload(); }, 600); })
      .catch(function (err) { abToast(err.message, 'danger'); });
  });
});
</script>
