{% extends "base.html" %}
{% block title %}Personal Knowledge Base — ICDEV™{% endblock %}
{% block content %}
<div class="container-fluid py-4" style="max-width:860px">
  <h5 class="fw-semibold mb-1">📚 Personal Knowledge Base</h5>
  <p class="text-muted small mb-4">URLs and notes you teach your AI coworker. Queried automatically in briefings and coworker sessions.</p>

  <!-- Add URL -->
  <div class="card mb-3" style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)">
    <div class="card-body p-3">
      <div class="fw-semibold small mb-2">Add URL</div>
      <div class="d-flex gap-2 flex-wrap">
        <input id="kb-url" type="url" class="form-control form-control-sm" placeholder="https://..."
               style="background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:inherit;flex:1;min-width:200px">
        <input id="kb-url-title" type="text" class="form-control form-control-sm" placeholder="Label (optional)"
               style="background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:inherit;width:180px">
        <button class="btn btn-primary btn-sm" id="kb-url-add">Fetch &amp; Learn</button>
      </div>
    </div>
  </div>

  <!-- Add Note -->
  <div class="card mb-4" style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)">
    <div class="card-body p-3">
      <div class="fw-semibold small mb-2">Add Note / Paste Text</div>
      <input id="kb-text-title" type="text" class="form-control form-control-sm mb-2" placeholder="Title"
             style="background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:inherit">
      <textarea id="kb-text-body" rows="3" class="form-control form-control-sm mb-2"
                placeholder="Paste content, meeting notes, strategies…"
                style="background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:inherit;resize:none"></textarea>
      <button class="btn btn-outline-primary btn-sm" id="kb-text-add">Save Note</button>
    </div>
  </div>

  <!-- Item list -->
  <div id="kb-list">
    {% if items %}
      {% for item in items %}
      <div class="d-flex align-items-start gap-3 py-2 border-bottom" style="border-color:rgba(255,255,255,.06)" id="kbi-{{ item.id }}">
        <span class="mt-1" style="font-size:.9rem">
          {% if item.source_type == 'url' %}🔗{% elif item.source_type == 'text' %}📝{% else %}📄{% endif %}
        </span>
        <div style="flex:1;min-width:0">
          <div class="fw-semibold small">{{ item.title or item.url or 'Untitled' }}</div>
          {% if item.url %}
          <div class="text-muted" style="font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ item.url }}</div>
          {% endif %}
          {% if item.summary %}
          <div class="text-muted mt-1" style="font-size:.72rem">{{ item.summary[:120] }}{% if item.summary|length > 120 %}…{% endif %}</div>
          {% endif %}
          <span class="badge mt-1" style="font-size:.62rem;
            background:{% if item.status == 'done' %}rgba(52,211,153,.15){% elif item.status == 'error' %}rgba(239,68,68,.15){% else %}rgba(251,191,36,.15){% endif %};
            color:{% if item.status == 'done' %}#6ee7b7{% elif item.status == 'error' %}#fca5a5{% else %}#fcd34d{% endif %}">
            {{ item.status }}
          </span>
        </div>
        <button class="btn btn-link p-0 text-danger del-ki" data-id="{{ item.id }}"
                style="font-size:.85rem;line-height:1;margin-top:.2rem">×</button>
      </div>
      {% endfor %}
    {% else %}
      <div class="text-muted small fst-italic text-center py-4">
        No knowledge items yet. Add a URL or paste some text above.
      </div>
    {% endif %}
  </div>
</div>

{% include "includes/iqe_query_widget.html" %}

<script>
function kbPost(url, body) {
  return fetch(url, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body)
  }).then(r => r.json());
}

document.getElementById('kb-url-add')?.addEventListener('click', () => {
  const url = document.getElementById('kb-url').value.trim();
  const title = document.getElementById('kb-url-title').value.trim();
  if (!url) { document.getElementById('kb-url').focus(); return; }
  const btn = document.getElementById('kb-url-add');
  btn.disabled = true; btn.textContent = 'Fetching…';
  kbPost('/me/api/second-brain/learn/url', {url, title})
    .then(d => {
      if (d.ok) location.reload();
      else { alert('Error: ' + d.error); btn.disabled = false; btn.textContent = 'Fetch & Learn'; }
    });
});

document.getElementById('kb-text-add')?.addEventListener('click', () => {
  const text = document.getElementById('kb-text-body').value.trim();
  const title = document.getElementById('kb-text-title').value.trim();
  if (!text) { document.getElementById('kb-text-body').focus(); return; }
  const btn = document.getElementById('kb-text-add');
  btn.disabled = true; btn.textContent = 'Saving…';
  kbPost('/me/api/second-brain/learn/text', {text, title})
    .then(d => {
      if (d.ok) location.reload();
      else { alert('Error: ' + d.error); btn.disabled = false; btn.textContent = 'Save Note'; }
    });
});

document.querySelectorAll('.del-ki').forEach(b => {
  b.addEventListener('click', function() {
    if (!confirm('Remove this item?')) return;
    fetch('/me/api/second-brain/learn/items/' + this.dataset.id, {method: 'DELETE'})
      .then(() => document.getElementById('kbi-' + this.dataset.id)?.remove());
  });
});
</script>
{% endblock %}