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

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

{% block extra_css %}
  .wiki-meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
  .wiki-meta strong { color: var(--text); }
  .wiki-form { display: grid; gap: 8px; }
  .wiki-form input,
  .wiki-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
  }
  .wiki-form textarea {
    font-family: var(--mono);
    min-height: 320px;
    resize: vertical;
  }
  .danger-zone {
    border: 1px dashed #fecaca;
    background: #fef2f2;
  }
{% endblock %}

{% block content %}
<div class="card editable-card" data-endpoint="/api/wiki/{{ page.slug }}">
  <div class="file-path">abreka/wiki/pages/{{ page.slug }}.md</div>
  <div class="view-mode">
    <h1 style="font-size: 22px; margin-bottom: 4px;">{{ page.title or page.slug }}</h1>
    <div class="wiki-meta">
      <strong>slug:</strong> <span class="text-mono">{{ page.slug }}</span>
      &nbsp;&middot;&nbsp;
      <strong>tags:</strong> {{ page.tags | join(', ') if page.tags else "—" }}
      {% if page.summary %}<br><strong>summary:</strong> {{ page.summary }}{% endif %}
      <br><strong>updated:</strong> {{ page.updated_at.isoformat() }}
      {% if page.updated_by_exp %} &middot; <strong>by exp:</strong> {{ page.updated_by_exp }}{% endif %}
      {% if page.created_by_exp %} &middot; <strong>created by exp:</strong> {{ page.created_by_exp }}{% endif %}
    </div>
    <div class="md-content">{{ page.body | md }}</div>
    <div class="text-muted text-sm mt-2">Double-click anywhere above to edit.</div>
  </div>
  <div class="edit-mode">
    <div class="wiki-form">
      <label class="text-sm text-muted">Title</label>
      <input id="wp-title" value="{{ page.title }}">
      <label class="text-sm text-muted">Summary</label>
      <input id="wp-summary" value="{{ page.summary }}">
      <label class="text-sm text-muted">Tags (comma-separated)</label>
      <input id="wp-tags" value="{{ page.tags | join(', ') }}">
      <label class="text-sm text-muted">Body</label>
      <textarea id="wp-body">{{ page.body }}</textarea>
      <div class="edit-actions">
        <button class="btn btn-primary btn-wp-save">Save</button>
        <button class="btn btn-discard">Discard</button>
      </div>
    </div>
  </div>
</div>

<div class="card mt-2 danger-zone">
  <h3>Danger Zone</h3>
  <p class="text-muted text-sm mb-2">Deletion is permanent. Agents cannot run this; only humans can.</p>
  <button class="btn" id="wp-delete" style="background: #fef2f2; color: #b91c1c; border-color: #fecaca;">Delete page</button>
</div>

<script>
(function() {
  const card = document.querySelector('.editable-card');
  const endpoint = card.dataset.endpoint;
  const viewEl = card.querySelector('.view-mode');

  viewEl.addEventListener('dblclick', () => {
    card.classList.add('editing');
  });
  card.querySelector('.btn-discard').addEventListener('click', () => {
    card.classList.remove('editing');
  });

  card.querySelector('.btn-wp-save').addEventListener('click', async (ev) => {
    ev.preventDefault();
    const btn = ev.currentTarget;
    const payload = {
      title: document.getElementById('wp-title').value.trim(),
      summary: document.getElementById('wp-summary').value.trim(),
      tags: document.getElementById('wp-tags').value,
      content: document.getElementById('wp-body').value,
    };
    btn.disabled = true; btn.textContent = 'Saving…';
    try {
      const res = await fetch(endpoint, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Save failed');
      location.reload();
    } catch (e) {
      alert('Failed to save: ' + e.message);
      btn.disabled = false; btn.textContent = 'Save';
    }
  });

  document.getElementById('wp-delete').addEventListener('click', async () => {
    if (!confirm('Delete wiki page "{{ page.slug }}"? This cannot be undone.')) return;
    try {
      const res = await fetch(endpoint, {method: 'DELETE'});
      if (!res.ok) throw new Error((await res.json()).error || 'Delete failed');
      location.href = '/wiki';
    } catch (e) {
      alert('Failed to delete: ' + e.message);
    }
  });
})();
</script>
{% endblock %}