{% extends "base.html" %}
{% block title %}Chatbot Knowledge Base{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div>
    <h4 class="mb-0"><i class="bi bi-robot me-2 text-primary"></i>Chatbot Knowledge Base</h4>
    <small class="text-muted">Curate what the AI support assistant knows about the app. Active entries are used on every chat.</small>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('support.admin_tickets') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-life-preserver me-1"></i>Support Tickets
    </a>
    <a href="{{ url_for('support.admin_knowledge_new') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-circle me-1"></i>Add Entry
    </a>
  </div>
</div>

{% if not groq_ready %}
<div class="alert alert-warning py-2">
  <i class="bi bi-exclamation-triangle"></i>
  The AI assistant is not configured (<code>GROQ_API_KEY</code> is not set), so these entries won't be used until it is enabled.
</div>
{% endif %}

<div class="card shadow-sm">
  <div class="card-body p-0">
    {% if entries %}
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th style="width:60px;">Order</th>
            <th>Topic / Question</th>
            <th>Answer (preview)</th>
            <th class="text-center">Status</th>
            <th class="text-end"></th>
          </tr>
        </thead>
        <tbody>
          {% for e in entries %}
          <tr class="{{ '' if e.active else 'text-muted' }}">
            <td>{{ e.sort_order }}</td>
            <td class="fw-semibold">{{ e.title }}</td>
            <td class="small text-muted text-truncate" style="max-width:360px;">
              {{ e.content[:120] }}{% if e.content|length > 120 %}…{% endif %}
            </td>
            <td class="text-center">
              {% if e.active %}
              <span class="badge bg-success">Active</span>
              {% else %}
              <span class="badge bg-secondary">Inactive</span>
              {% endif %}
            </td>
            <td class="text-end text-nowrap">
              <a href="{{ url_for('support.admin_knowledge_edit', entry_id=e.id) }}"
                 class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>
              <form method="POST" class="d-inline"
                    action="{{ url_for('support.admin_knowledge_delete', entry_id=e.id) }}"
                    onsubmit="return confirm('Delete this knowledge entry?');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="p-4 text-muted text-center">
      No knowledge entries yet.
      <a href="{{ url_for('support.admin_knowledge_new') }}">Add your first one</a> to teach the chatbot about your app.
    </div>
    {% endif %}
  </div>
</div>

<p class="text-muted small mt-2">
  <i class="bi bi-info-circle"></i>
  Tip: write each entry as a clear topic and a concise, factual answer (steps work well).
  Keep entries accurate — the assistant treats them as authoritative.
</p>
{% endblock %}