{% extends "base.html" %}
{% block title %}Settings · kb-mcp admin{% endblock %}
{% block content %}
<header class="page-header">
  <div>
    <h1>Settings & Health</h1>
    <p>Inspect database, environment, and doctor status.</p>
  </div>
</header>

<section class="stats-grid">
  <article class="stat-panel"><span>KB_MCP_HOME</span><strong>{{ kb_home or "default" }}</strong></article>
  <article class="stat-panel"><span>Schema</span><strong>{{ version }}</strong></article>
  <article class="stat-panel"><span>Embeddings</span><strong>{{ "enabled" if embedder_enabled else "disabled" }}</strong></article>
  <article class="stat-panel"><span>Dimension</span><strong>{{ embedder_dim }}</strong></article>
</section>

<div class="split-grid">
  <!-- Left Side: Configuration & Actions -->
  <div class="panel-list">
    <section class="panel">
      <div class="panel-head"><h2>Configuration</h2></div>
      <div class="meta-list">
        <div><span>Config file</span><strong>{{ config_path }}</strong></div>
      </div>
      <div>
        <textarea id="config-editor" class="config-editor">{{ config_content }}</textarea>
        <div class="config-actions">
          <button id="config-save-btn" class="button primary" onclick="saveConfig(this)">
            <span class="button-text">Save Config</span>
            <span class="button-spinner"></span>
          </button>
          <span id="config-save-result"></span>
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="panel-head"><h2>Actions</h2></div>
      <div class="list compact actions-list">
        <div class="list-row">
          <div>
            <div class="row-title">Import from sync directory</div>
            <div class="row-meta">Import markdown files from the vault's <code>sync_dir/md/</code></div>
          </div>
          <button class="button primary" onclick="runVaultAction(this, '/api/vaults/import', 'Import')">
            <span class="button-text">Import</span>
            <span class="button-spinner"></span>
          </button>
        </div>
        <div class="list-row">
          <div>
            <div class="row-title">Git commit</div>
            <div class="row-meta">Export documents to markdown and git commit</div>
          </div>
          <button class="button primary" onclick="runVaultCommit(this)">
            <span class="button-text">Commit</span>
            <span class="button-spinner"></span>
          </button>
        </div>
        <div class="list-row">
          <div>
            <div class="row-title">Rebuild embeddings</div>
            <div class="row-meta">Recompute semantic-search vectors for all documents</div>
          </div>
          <button class="button primary" onclick="runVaultAction(this, '/api/vaults/embed', 'Embed')">
            <span class="button-text">Embed</span>
            <span class="button-spinner"></span>
          </button>
        </div>
      </div>
      <div id="action-result" style="display:none;"></div>
    </section>
  </div>

  <!-- Right Side: Info, Checks & Audits -->
  <div class="panel-list">
    <section class="panel">
      <div class="panel-head"><h2>Storage</h2></div>
      <div class="meta-list">
        <div><span>Database path</span><strong>{{ db_path }}</strong></div>
      </div>
    </section>

    <section class="panel">
      <div class="panel-head"><h2>Doctor checks</h2></div>
      <div class="list compact">
        {% for check in doctor_report.checks %}
        <div class="list-row">
          <div>
            <div class="row-title">{{ check.name }}</div>
            <div class="row-meta">{{ check.detail }}</div>
          </div>
          <span class="status-pill {{ 'status-ok' if check.ok else 'status-bad' }}">{{ "OK" if check.ok else "Fail" }}</span>
        </div>
        {% endfor %}
      </div>
    </section>
  </div>
</div>

<script>
function setButtonLoading(btn, loading) {
  if (!btn) return;
  if (loading) btn.classList.add('loading');
  else btn.classList.remove('loading');
  btn.disabled = loading;
}

function saveConfig(btn) {
  const content = document.getElementById('config-editor').value;
  const resultSpan = document.getElementById('config-save-result');
  setButtonLoading(btn, true);
  resultSpan.textContent = 'Saving…';
  fetch('/api/config', {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({content: content})
  })
    .then(r => r.json())
    .then(data => {
      if (data.ok) {
        resultSpan.textContent = '✓ Saved';
        resultSpan.style.color = 'var(--success)';
        showToast('success', 'Config saved');
      } else {
        resultSpan.textContent = '✗ ' + (data.error || 'Error');
        resultSpan.style.color = 'var(--destructive)';
        showToast('error', 'Save failed', data.error || 'Error');
      }
    })
    .catch(e => {
      resultSpan.textContent = '✗ ' + e.message;
      resultSpan.style.color = 'var(--destructive)';
      showToast('error', 'Save failed', e.message);
    })
    .finally(() => setButtonLoading(btn, false));
}

function runVaultAction(btn, url, label) {
  const resultDiv = document.getElementById('action-result');
  setButtonLoading(btn, true);
  resultDiv.style.display = 'block';
  resultDiv.innerHTML = '<div class="empty-state">Running…</div>';

  fetch(url, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: '{}' })
    .then(r => r.json())
    .then(data => {
      if (data.ok) {
        let html = '<div class="alert success"><strong>Success:</strong><ul>';
        for (const [k, v] of Object.entries(data)) {
          if (k !== 'ok') html += '<li>' + k + ': ' + JSON.stringify(v) + '</li>';
        }
        html += '</ul></div>';
        resultDiv.innerHTML = html;
        showToast('success', label + ' complete');
      } else {
        resultDiv.innerHTML = '<div class="alert error">' + (data.error || 'Unknown error') + '</div>';
        showToast('error', label + ' failed', data.error || 'Unknown error');
      }
    })
    .catch(e => {
      resultDiv.innerHTML = '<div class="alert error">' + e.message + '</div>';
      showToast('error', label + ' failed', e.message);
    })
    .finally(() => setButtonLoading(btn, false));
}

function runVaultCommit(btn) {
  const msg = prompt('Commit message:', 'admin commit');
  if (!msg) return;
  const resultDiv = document.getElementById('action-result');
  setButtonLoading(btn, true);
  resultDiv.style.display = 'block';
  resultDiv.innerHTML = '<div class="empty-state">Running…</div>';

  fetch('/api/vaults/commit', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({message: msg})
  })
    .then(r => r.json())
    .then(data => {
      if (data.ok) {
        resultDiv.innerHTML = '<div class="alert success"><strong>Commit OK:</strong> ' + (data.output || '') + '</div>';
        showToast('success', 'Commit complete');
      } else {
        resultDiv.innerHTML = '<div class="alert error">' + (data.error || 'Unknown error') + '</div>';
        showToast('error', 'Commit failed', data.error || 'Unknown error');
      }
    })
    .catch(e => {
      resultDiv.innerHTML = '<div class="alert error">' + e.message + '</div>';
      showToast('error', 'Commit failed', e.message);
    })
    .finally(() => setButtonLoading(btn, false));
}
</script>
{% endblock %}