{% extends "base.html" %}
{% block title %}Dashboard — LynxManager{% endblock %}

{% block content %}

<div class="flex items-baseline justify-between mb-6">
  <h1 class="text-2xl font-bold text-slate-900">Dashboard</h1>
  <div class="text-sm text-slate-500">
    {{ total_sources }} source{{ '' if total_sources == 1 else 's' }},
    {{ total_chunks }} chunks indexed
  </div>
</div>

<!-- Doctor summary card -->
<div class="mb-6 p-4 bg-white border border-slate-200 rounded shadow-sm">
  <div class="flex items-center justify-between mb-2">
    <div class="font-semibold text-slate-900">Health check</div>
    <a href="/doctor" class="text-xs text-indigo-600 hover:underline">View full report →</a>
  </div>
  <div class="flex gap-4 text-sm">
    <div class="flex items-center gap-1">
      <span class="text-green-600 font-bold">✓</span>
      <span>{{ doctor_counts.ok }} ok</span>
    </div>
    {% if doctor_counts.warn %}
      <div class="flex items-center gap-1">
        <span class="text-amber-600 font-bold">⚠</span>
        <span>{{ doctor_counts.warn }} warning{{ '' if doctor_counts.warn == 1 else 's' }}</span>
      </div>
    {% endif %}
    {% if doctor_counts.error %}
      <div class="flex items-center gap-1">
        <span class="text-red-600 font-bold">✗</span>
        <span>{{ doctor_counts.error }} error{{ '' if doctor_counts.error == 1 else 's' }}</span>
      </div>
    {% endif %}
  </div>
  <div class="mt-2 text-xs">
    {% if doctor_worst == "ok" %}
      <span class="text-green-700">All checks passing — Lynx is healthy.</span>
    {% elif doctor_worst == "warn" %}
      <span class="text-amber-700">Some warnings — review the Doctor page.</span>
    {% else %}
      <span class="text-red-700">Errors detected — fix them via the Doctor page.</span>
    {% endif %}
  </div>
</div>

<!-- Sources grid -->
<div class="flex items-baseline justify-between mb-3">
  <h2 class="text-lg font-semibold text-slate-900">Sources</h2>
  {% if sources %}
    <a href="/sources/new" class="text-sm text-indigo-600 hover:underline">+ Add source</a>
  {% endif %}
</div>

{% if not sources %}
  <div class="p-8 bg-white border border-dashed border-slate-300 rounded text-center">
    <div class="text-4xl mb-2">📚</div>
    <div class="text-slate-700 font-medium mb-1">No sources configured yet</div>
    {% if not manager_error %}
      <div class="text-sm text-slate-500 mb-4 max-w-md mx-auto">
        Lynx needs at least one source — your code, a docs site, or a folder of PDFs —
        to be useful. The guided form explains each option.
      </div>
      <a href="/sources/new"
         class="inline-block px-5 py-2 bg-indigo-600 text-white rounded font-medium hover:bg-indigo-700">
        + Add your first source
      </a>
    {% endif %}
  </div>
{% else %}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
  {% for s in sources %}
    {% if s.health == "corrupt" %}
    <div class="p-4 bg-red-50 border border-red-200 rounded shadow-sm">
      <div class="flex items-start justify-between mb-2">
        <div>
          <span class="font-semibold text-red-900">{{ s.name }}</span>
          <div class="text-xs text-red-600 mt-0.5">type: {{ s.type }}</div>
        </div>
        <span class="badge bg-red-100 text-red-800" title="The vector index can't be read (incompatible version or truncated store)">⚠ corrupt index</span>
      </div>
      {% if s.path %}
        <div class="text-xs font-mono text-slate-600 truncate mb-1" title="{{ s.path }}">{{ s.path }}</div>
      {% endif %}
      <p class="text-xs text-red-700 mb-1">{{ s.error }}</p>
      <p class="text-xs text-slate-600 mb-2">The index is only derived data — reset it to rebuild from your files.</p>
      <div id="reset-status-{{ s.name }}">
        <button
          hx-post="/api/sources/{{ s.name }}/reset"
          hx-target="#reset-status-{{ s.name }}"
          hx-swap="innerHTML"
          class="px-3 py-1.5 text-sm rounded bg-red-600 text-white hover:bg-red-700">
          Reset index
        </button>
      </div>
    </div>
    {% else %}
    <div class="p-4 bg-white border border-slate-200 rounded shadow-sm hover:shadow transition">
      <div class="flex items-start justify-between mb-2">
        <div>
          <a href="/sources/{{ s.name }}" class="font-semibold text-slate-900 hover:text-indigo-600">{{ s.name }}</a>
          <div class="text-xs text-slate-500 mt-0.5">type: {{ s.type }}</div>
        </div>
        <div class="space-y-1 text-right">
          {% if s.locked %}
            <span class="badge bg-amber-100 text-amber-800" title="ChromaDB locked by another process (likely `lynx serve` is running)">🔒 locked</span>
          {% endif %}
          {% if s.drift_severity == "critical" %}
            <span class="badge bg-red-100 text-red-800">drift: critical</span>
          {% elif s.drift_severity == "warning" %}
            <span class="badge bg-amber-100 text-amber-800">drift: warning</span>
          {% endif %}
        </div>
      </div>

      <dl class="text-sm space-y-1">
        {% if s.path %}
          <div class="flex justify-between gap-2">
            <dt class="text-slate-500">Path</dt>
            <dd class="font-mono text-xs truncate" title="{{ s.path }}">{{ s.path }}</dd>
          </div>
        {% endif %}
        {% if s.chunk_count is not none %}
          <div class="flex justify-between gap-2">
            <dt class="text-slate-500">Chunks</dt>
            <dd>{{ s.chunk_count }}</dd>
          </div>
        {% endif %}
        {% if s.last_update %}
          <div class="flex justify-between gap-2">
            <dt class="text-slate-500">Last update</dt>
            <dd class="text-xs">{{ s.last_update.split('T')[0] }}</dd>
          </div>
        {% endif %}
        {% if s.graph %}
          <div class="flex justify-between gap-2">
            <dt class="text-slate-500">Graph</dt>
            <dd class="text-xs">{{ s.graph.nodes }} nodes, {{ s.graph.edges }} edges</dd>
          </div>
        {% endif %}
      </dl>
    </div>
    {% endif %}
  {% endfor %}
  </div>
{% endif %}

{% endblock %}