{% extends "base.html" %}
{% import "macros/ui.html" as m %}

{% block title %}Dashboard — Ontoref{% endblock title %}
{% block nav_dashboard %}active{% endblock nav_dashboard %}

{% block content %}
<div class="mb-6">
  <div class="flex flex-wrap items-start justify-between gap-2 mb-1">
    <div class="flex flex-wrap items-center gap-2">
      <h1 class="text-2xl font-bold font-mono">{{ slug }}</h1>
      {% if repo_kind %}
      <span class="badge badge-outline badge-sm text-base-content/50">{{ repo_kind }}</span>
      {% endif %}
      {% if card and card.version %}
      <span class="badge badge-ghost badge-sm font-mono">v{{ card.version }}</span>
      {% endif %}
      {% if card and card.status %}
      <span class="badge badge-sm
        {% if card.status == 'active' or card.status == 'stable' %}badge-success
        {% elif card.status == 'wip' or card.status == 'alpha' %}badge-warning
        {% elif card.status == 'deprecated' %}badge-error
        {% else %}badge-ghost{% endif %}">{{ card.status }}</span>
      {% endif %}
    </div>
    {% if showcase or generated %}
    <div class="flex flex-wrap gap-1">
      {% for s in showcase %}
      <a href="{{ s.url }}" target="_blank" rel="noopener" class="btn btn-xs btn-ghost gap-1 border border-base-content/10">
        {% if s.id == "branding" %}🎨{% elif s.id == "web" %}🌐{% elif s.id == "presentation" %}📊{% endif %}
        {{ s.label }}
      </a>
      {% endfor %}
      {% for g in generated %}
      <a href="{{ g.url }}" target="_blank" rel="noopener" class="btn btn-xs btn-ghost gap-1 border border-base-content/10 opacity-70">
        📄 {{ g.label }}
      </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  {% if card and card.tagline %}
  <p class="text-base-content/60 text-sm italic mb-1">{{ card.tagline }}</p>
  {% elif description %}
  <p class="text-base-content/60 text-sm mb-1">{{ description }}</p>
  {% endif %}

  {% if card and card.description %}
  <p class="text-base-content/50 text-xs leading-relaxed mb-2 max-w-2xl">{{ card.description }}</p>
  {% endif %}

  <div class="flex flex-wrap items-center gap-2 mt-1">
    <p class="text-base-content/30 text-xs font-mono truncate" title="{{ project_root }}">{{ project_root }}</p>
    {% if repos %}
    {% for r in repos %}
    <a href="{{ r.url }}" target="_blank" rel="noopener"
       class="badge badge-xs badge-ghost font-mono gap-1 border border-base-content/10 hover:border-primary/40 hover:text-primary transition-colors"
       title="{{ r.url }}">
      <svg class="w-2.5 h-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
      </svg>
      {{ r.name }}
    </a>
    {% endfor %}
    {% endif %}
    {% if card and card.tags %}
    {% for tag in card.tags %}
    <span class="badge badge-xs badge-ghost">{{ tag }}</span>
    {% endfor %}
    {% endif %}
  </div>

  {% if layers or op_modes %}
  <details class="collapse collapse-arrow bg-base-200 rounded-lg mt-3 max-w-2xl">
    <summary class="collapse-title text-xs font-semibold py-2 min-h-0 px-3 cursor-pointer">
      Features &amp; Layers
    </summary>
    <div class="collapse-content px-3 pb-3">
      {% if layers %}
      <p class="text-xs font-medium text-base-content/40 uppercase tracking-wider mb-1.5">Layers</p>
      <div class="space-y-1 mb-3">
        {% for l in layers %}
        <div class="flex gap-2">
          <span class="badge badge-xs badge-ghost font-mono flex-shrink-0 mt-0.5">{{ l.id }}</span>
          <span class="text-xs text-base-content/70">{{ l.description }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      {% if op_modes %}
      <p class="text-xs font-medium text-base-content/40 uppercase tracking-wider mb-1.5">Operational Modes</p>
      <div class="space-y-1">
        {% for m in op_modes %}
        <div class="flex gap-2">
          <span class="badge badge-xs badge-primary font-mono flex-shrink-0 mt-0.5">{{ m.id }}</span>
          <span class="text-xs text-base-content/70">{{ m.description }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </details>
  {% endif %}
</div>

<!-- Daemon stats -->
<div class="stats stats-horizontal shadow w-full mb-4 bg-base-200 overflow-x-auto">
  {{ m::stat(title="Uptime", value=uptime_secs ~ "s", desc="seconds since start") }}
  {{ m::stat(title="Cache entries", value=cache_entries) }}
  {{ m::stat(title="Cache hit rate", value=cache_hit_rate, desc=cache_hits ~ " hits / " ~ cache_misses ~ " misses", accent="success") }}
  {{ m::stat(title="Sessions", value=active_actors, accent="primary") }}
  {{ m::stat(title="Notifications", value=notification_count, accent="warning") }}
</div>

<!-- Project status -->
{% if backlog %}
<div class="stats stats-horizontal shadow w-full mb-8 bg-base-200 overflow-x-auto">
  {{ m::stat(title="Backlog total", value=backlog.total) }}
  {{ m::stat(title="Open", value=backlog.open, accent="warning") }}
  {{ m::stat(title="In progress", value=backlog.inprog, accent="info") }}
  {{ m::stat(title="Done", value=backlog.done, accent="success") }}
  {{ m::stat(title="Critical", value=backlog.critical, accent="error") }}
  {{ m::stat(title="ADRs", value=adr_count) }}
  {{ m::stat(title="Modes", value=mode_count) }}
</div>
{% endif %}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <a href="{{ base_url }}/graph" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-primary">Ontology Graph</h2>
      <p class="text-sm text-base-content/60">Nodes, edges, and relationships from <code>.ontology/core.ncl</code></p>
    </div>
  </a>
  <a href="{{ base_url }}/sessions" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-secondary">Active Sessions</h2>
      <p class="text-sm text-base-content/60">{{ active_actors }} actor(s) currently registered</p>
    </div>
  </a>
  <a href="{{ base_url }}/notifications" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-warning">Notifications</h2>
      <p class="text-sm text-base-content/60">{{ notification_count }} notification(s) in store</p>
    </div>
  </a>
  <a href="{{ base_url }}/modes" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-accent">Reflection Modes</h2>
      <p class="text-sm text-base-content/60">NCL DAG workflows in <code>reflection/modes/</code></p>
      {% if mode_count %}<p class="text-xs text-base-content/40 mt-1">{{ mode_count }} modes</p>{% endif %}
    </div>
  </a>
  <a href="{{ base_url }}/backlog" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-info">Backlog</h2>
      {% if backlog %}
      <p class="text-sm text-base-content/60">{{ backlog.open }} open · {{ backlog.inprog }} in progress · {{ backlog.critical }} critical</p>
      {% else %}
      <p class="text-sm text-base-content/60">Work items in <code>reflection/backlog.ncl</code></p>
      {% endif %}
    </div>
  </a>
  <a href="{{ base_url }}/search" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title">Search</h2>
      <p class="text-sm text-base-content/60">Full-text across nodes, ADRs, and modes</p>
      {% if adr_count %}<p class="text-xs text-base-content/40 mt-1">{{ adr_count }} ADRs</p>{% endif %}
    </div>
  </a>
  <a href="{{ base_url }}/actions" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-primary">Quick Actions</h2>
      <p class="text-sm text-base-content/60">Catalog of runnable tasks and workflows</p>
    </div>
  </a>
  <a href="{{ base_url }}/qa" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title">Q&amp;A Bookmarks</h2>
      <p class="text-sm text-base-content/60">Saved questions and answers about this project</p>
    </div>
  </a>
  <a href="{{ base_url }}/api" class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer">
    <div class="card-body">
      <h2 class="card-title text-secondary">API Catalog</h2>
      <p class="text-sm text-base-content/60">Annotated HTTP surface — methods, auth, actors, params</p>
    </div>
  </a>
</div>

{% if file_versions and file_versions | length > 0 %}
<div class="mt-6">
  <h2 class="text-sm font-semibold text-base-content/50 uppercase tracking-wider mb-2">Ontology File Versions</h2>
  <div class="bg-base-200 rounded-lg p-3 font-mono text-xs grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-x-6 gap-y-1">
    {% for file, ver in file_versions %}
    <div class="flex justify-between gap-2">
      <span class="text-base-content/70 truncate">{{ file }}</span>
      <span class="text-primary font-bold flex-shrink-0">v{{ ver }}</span>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
{% endblock content %}