{% extends "base.html" %}
{% block title %}Wiki — ABREKA{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb"><a href="/">Dashboard</a> / Wiki</div>
{% endblock %}

{% block extra_css %}
  .wiki-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .wiki-toolbar input[type="search"],
  .wiki-toolbar select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
  }
  .wiki-toolbar input[type="search"] { min-width: 240px; }
  .wiki-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .wiki-tags .tag-chip {
    font-size: 12px;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
  }
  .wiki-tags .tag-chip.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
  }
  .new-page-form { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
  .new-page-form input,
  .new-page-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    background: var(--surface);
    font-family: var(--font);
  }
  .new-page-form .row-full { grid-column: 1 / -1; }
  .new-page-form textarea { font-family: var(--mono); min-height: 140px; resize: vertical; }
{% endblock %}

{% block content %}
<h1 class="mb-2">Project Wiki</h1>
<p class="text-muted mb-2">Durable cross-experiment knowledge — facts, EDA, methodology, prior findings.</p>

<form class="wiki-toolbar" method="GET" action="/wiki">
  <input type="search" name="q" value="{{ q }}" placeholder="Search slug, title, summary, tags…">
  {% if tag_filter %}<input type="hidden" name="tag" value="{{ tag_filter }}">{% endif %}
  <button class="btn btn-primary" type="submit">Search</button>
  {% if q or tag_filter %}<a class="btn" href="/wiki">Reset</a>{% endif %}
</form>

{% if all_tags %}
<div class="wiki-tags mb-2">
  <a class="tag-chip {% if not tag_filter %}active{% endif %}" href="/wiki{% if q %}?q={{ q | urlencode }}{% endif %}">all</a>
  {% for tag, count in all_tags.items() | sort %}
  <a class="tag-chip {% if tag_filter == tag %}active{% endif %}"
     href="/wiki?tag={{ tag | urlencode }}{% if q %}&q={{ q | urlencode }}{% endif %}">
    {{ tag }} ({{ count }})
  </a>
  {% endfor %}
</div>
{% endif %}

{% if search_error %}
<div class="card" style="background: #fef2f2; border-color: #fecaca; color: #b91c1c;">{{ search_error }}</div>
{% endif %}

{% if entries %}
<div class="card">
<table>
  <tr>
    <th>Slug</th>
    <th>Title</th>
    <th>Tags</th>
    <th>Summary</th>
    <th>Updated</th>
  </tr>
  {% for e in entries %}
  <tr>
    <td><a class="text-mono" href="/wiki/{{ e.slug }}">{{ e.slug }}</a></td>
    <td>{{ e.title }}</td>
    <td>
      {% for t in e.tags %}<span class="tag-chip" style="font-size: 11px; padding: 1px 6px;">{{ t }}</span>{% endfor %}
    </td>
    <td>{{ e.summary }}</td>
    <td class="text-muted text-sm">{{ e.updated_at[:10] }}</td>
  </tr>
  {% endfor %}
</table>
</div>
{% else %}
<div class="card text-muted">No wiki pages match the current filters.</div>
{% endif %}

<div class="card mt-2" id="new-page-card">
  <h3>Add a Page</h3>
  <p class="text-muted text-sm mb-2">New pages are stored under <code>abreka/wiki/pages/&lt;slug&gt;.md</code>.</p>
  <div class="new-page-form">
    <input id="np-title" placeholder="Title (required)">
    <input id="np-slug" placeholder="Slug (auto-derived from title if blank)">
    <input class="row-full" id="np-summary" placeholder="One-line summary shown in the index">
    <input class="row-full" id="np-tags" placeholder="Tags (comma-separated)">
    <textarea class="row-full" id="np-content" placeholder="Page body (markdown)"></textarea>
    <div class="row-full" style="text-align: right;">
      <button class="btn btn-primary" id="np-create">Create page</button>
    </div>
  </div>
</div>

<script>
document.getElementById('np-create').addEventListener('click', async () => {
  const btn = document.getElementById('np-create');
  const title = document.getElementById('np-title').value.trim();
  const slug = document.getElementById('np-slug').value.trim();
  const summary = document.getElementById('np-summary').value.trim();
  const tags = document.getElementById('np-tags').value.trim();
  const content = document.getElementById('np-content').value;
  if (!title) { alert('Title is required.'); return; }
  btn.disabled = true; btn.textContent = 'Creating…';
  try {
    const res = await fetch('/api/wiki', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({title, slug: slug || undefined, summary, tags, content}),
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Create failed');
    location.href = '/wiki/' + data.slug;
  } catch (e) {
    alert('Failed to create: ' + e.message);
    btn.disabled = false; btn.textContent = 'Create page';
  }
});
</script>
{% endblock %}