{% extends "base.html" %}
{% block title %}Overview · kb-mcp admin{% endblock %}
{% block content %}
<header class="page-header">
  <div>
    <h1>Overview</h1>
    <p>Phase-one control surface for your local knowledge base.</p>
  </div>
  <div class="header-meta">
    <span class="meta-chip">DB: {{ db_path }}</span>
    <span class="meta-chip">{{ "Embeddings on" if embed_enabled else "Embeddings off" }}{% if embed_dim %} · {{ embed_dim }}d{% endif %}</span>
  </div>
</header>

{% if stats.conflicts and stats.conflicts > 0 %}
<section class="alert error" style="margin-bottom: var(--space-5);">
  <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
    <div>
      <strong>⚠️ Git Sync Conflict:</strong>
      There are {{ stats.conflicts }} document(s) containing unresolved merge conflict markers.
    </div>
    <a href="/documents?type=conflict" class="button primary small-button" style="background: var(--destructive); color: var(--destructive-foreground); box-shadow: none;">View Conflicts</a>
  </div>
</section>
{% endif %}

<section class="stats-grid">
  <article class="stat-panel"><span>Active docs</span><strong>{{ stats.documents }}</strong></article>
  <article class="stat-panel"><span>Deleted docs</span><strong>{{ stats.deleted_documents }}</strong></article>
  <article class="stat-panel"><span>Types</span><strong>{{ stats.types }}</strong></article>
  <article class="stat-panel"><span>Links</span><strong>{{ stats.links }}</strong></article>
  <article class="stat-panel"><span>Orphans</span><strong>{{ stats.orphan_documents }}</strong></article>
  <article class="stat-panel"><span>Vectors</span><strong>{{ stats.vectors }}</strong></article>
</section>

<section class="layout-grid">
  <div class="layout-main">
    <section class="panel">
      <div class="panel-head">
        <h2>Recent updates</h2>
      </div>
      <div class="list">
        {% for doc in recent_docs %}
        <a class="list-row" href="/documents/{{ doc.id }}">
          <div>
            <div class="row-title">{{ doc.title }}</div>
            <div class="row-meta">{{ doc.type }} · {{ doc.id }}</div>
          </div>
          <time>{{ doc.updated_at.strftime("%Y-%m-%d %H:%M") }}</time>
        </a>
        {% else %}
        <div class="empty-state">
          <div class="empty-state-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
          </div>
          <div class="empty-state-title">No documents yet</div>
          <a href="/documents/new" class="button primary">Create document</a>
        </div>
        {% endfor %}
      </div>
    </section>

    <section class="panel">
      <div class="panel-head">
        <h2>Doctor</h2>
      </div>
      <div class="doctor-status {{ 'ok' if doctor_report.ok else 'warn' }}">
        {{ "Healthy" if doctor_report.ok else "Needs attention" }}
      </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 class="layout-sidebar">
    <section class="panel">
      <div class="panel-head">
        <h2>Type distribution</h2>
      </div>
      <div class="bar-list">
        {% for type_name, count in type_counts %}
        <div class="bar-row">
          <div class="bar-label">{{ type_name }}</div>
          <div class="bar-track"><div class="bar-fill" style="width: {{ (count / stats.documents * 100) if stats.documents else 0 }}%"></div></div>
          <div class="bar-value">{{ count }}</div>
        </div>
        {% else %}
        <div class="empty-state">
          <div class="empty-state-title">No types yet</div>
          <p>Types will appear once documents are created.</p>
        </div>
        {% endfor %}
      </div>
    </section>

    <section class="panel">
      <div class="panel-head">
        <h2>Top tags</h2>
      </div>
      <div class="tag-cloud">
        {% for tag, count in tag_counts %}
        <span class="tag-pill">{{ tag }} <small>{{ count }}</small></span>
        {% else %}
        <div class="empty-state">
          <div class="empty-state-title">No tags yet</div>
          <p>Tags appear when documents carry them.</p>
        </div>
        {% endfor %}
      </div>
    </section>
  </div>
</section>

{% endblock %}