{% extends "base.html" %}
{% block title %}Stats — MemForge{% endblock %}

{% block content %}
<div class="max-w-3xl">
  <h1 class="text-2xl font-bold mb-6">Statistics</h1>

  <div class="grid grid-cols-2 gap-4 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 shadow-sm">
      <div class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">{{ total }}</div>
      <div class="text-sm text-gray-500 mt-1">Total articles</div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 shadow-sm">
      <div class="text-3xl font-bold text-amber-500">{{ total_drafts }}</div>
      <div class="text-sm text-gray-500 mt-1">Inbox drafts</div>
    </div>
  </div>

  <!-- By type -->
  <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm mb-4">
    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 font-semibold text-sm">By type</div>
    <div class="p-4 space-y-3">
      {% set type_colors = {'decision': 'bg-blue-500', 'pattern': 'bg-green-500', 'gotcha': 'bg-red-500', 'contract': 'bg-purple-500', 'glossary': 'bg-orange-500', 'todo': 'bg-gray-400'} %}
      {% for type, count in type_counts.items() | sort %}
      {% set pct = (count / total * 100) | round(1) if total > 0 else 0 %}
      <div>
        <div class="flex justify-between text-sm mb-1">
          <span class="font-medium">{{ type }}</span>
          <span class="text-gray-500">{{ count }} ({{ pct }}%)</span>
        </div>
        <div class="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
          <div class="h-full {{ type_colors.get(type, 'bg-indigo-500') }} rounded-full"
               style="width: {{ pct }}%"></div>
        </div>
      </div>
      {% else %}
      <p class="text-sm text-gray-400">No articles yet.</p>
      {% endfor %}
    </div>
  </div>

  <!-- Top tags -->
  <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 font-semibold text-sm">Top tags</div>
    <div class="p-4">
      {% if top_tags %}
      <div class="flex flex-wrap gap-2">
        {% for tag, count in top_tags %}
        <a href="/knowledge?tag={{ tag }}"
           class="flex items-center gap-1.5 px-3 py-1 bg-indigo-50 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-full text-sm hover:bg-indigo-100 dark:hover:bg-indigo-900/60">
          <span>#{{ tag }}</span>
          <span class="text-xs text-indigo-400 font-mono">{{ count }}</span>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-sm text-gray-400">No tags yet.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}