{% extends "admin/base_site.html" %}
{% load i18n forge_icons %}

{% block content %}
<div class="flex bg-slate-50 dark:bg-slate-950">
  {% include "admin/includes/forge_sidebar.html" %}
  <main class="flex-1 min-h-screen">
    {% include "admin/includes/forge_topbar.html" with subtitle="Overview and recent activity" %}
    <section class="px-4 md:px-6 py-6 space-y-6">
      <div class="flex items-center justify-end">
        <a href="{% url 'admin:forge-applications' %}" class="inline-flex items-center gap-2 rounded-md forge-accent-bg text-white px-3 py-2 text-sm">
          {% forge_icon "layers" "h-4 w-4" %}
          <span>Open applications</span>
        </a>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 gap-4">
        {% for card in stats %}
          <article class="forge-kpi-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 md:col-span-1 xl:col-span-2">
            <div class="flex items-start justify-between gap-3">
              <p class="text-xs uppercase tracking-wide text-slate-500 flex items-center gap-2">
                <span class="forge-kpi-icon-chip">
                  {% forge_icon card.icon "h-3.5 w-3.5" %}
                </span>
                <span>{{ card.label }}</span>
              </p>
              {% if card.trend %}
                <span class="forge-kpi-trend">{{ card.trend }}</span>
              {% endif %}
            </div>
            <p class="forge-kpi-value text-3xl font-semibold text-slate-900 dark:text-slate-100 mt-3">{{ card.value }}</p>
            <div class="mt-2 pt-2 border-t border-slate-200 dark:border-slate-700">
              {% if card.hint %}
                <p class="text-xs text-slate-500">{{ card.hint }}</p>
              {% elif card.trend %}
                <p class="text-xs text-slate-500">Trend updated from current data</p>
              {% else %}
                <p class="text-xs text-slate-500">Updated just now</p>
              {% endif %}
            </div>
          </article>
        {% endfor %}
      </div>

      <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">
        <article class="forge-panel-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 xl:col-span-7">
          <div class="mb-3 flex items-center justify-between">
            <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
              {% forge_icon "users" "h-4 w-4 text-slate-500" %}
              <span>Recent users</span>
            </h2>
            {% if recent_users_url %}
              <a href="{{ recent_users_url }}" class="text-xs forge-accent-text">View all</a>
            {% endif %}
          </div>
          <ul class="space-y-2">
            {% for user_obj in recent_users %}
              <li class="flex items-center justify-between rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm">
                <span class="text-slate-700 dark:text-slate-200 font-medium">{{ user_obj.get_username }}</span>
                <span class="text-slate-500">{{ user_obj.date_joined|date:"M j, Y" }}</span>
              </li>
            {% empty %}
              <li class="text-sm text-slate-500">No users yet.</li>
            {% endfor %}
          </ul>
        </article>

        <article class="forge-panel-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 xl:col-span-5">
          <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 mb-3 flex items-center gap-2">
            {% forge_icon "layers" "h-4 w-4 text-slate-500" %}
            <span>Model groups</span>
          </h2>
          <ul class="space-y-2">
            {% for item in model_counts %}
              <li class="flex items-center justify-between text-sm rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2">
                <span class="text-slate-700 dark:text-slate-200">{{ item.app_label|forge_labelize }}</span>
                <span class="text-slate-500 text-xs bg-slate-100 dark:bg-slate-800 rounded-full px-2 py-1">{{ item.total }}</span>
              </li>
            {% empty %}
              <li class="text-sm text-slate-500">No model metadata found.</li>
            {% endfor %}
          </ul>
        </article>
      </div>

      <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">
        <article class="forge-panel-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 xl:col-span-7">
          <div class="mb-3 flex items-center justify-between">
            <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
              {% forge_icon "activity" "h-4 w-4 text-slate-500" %}
              <span>Recent activity</span>
            </h2>
          </div>
          <ul class="space-y-2 max-h-72 overflow-auto pr-1">
            {% for action in recent_actions %}
              <li class="flex items-start justify-between gap-3 rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm">
                <div>
                  <p class="text-slate-700 dark:text-slate-200">
                    <span class="font-medium">{{ action.user }}</span>
                    <span class="text-slate-500">{{ action.action_label|lower }}</span>
                    <span class="font-medium">{{ action.object_repr }}</span>
                  </p>
                  <p class="text-xs text-slate-500">{{ action.content_type|capfirst }}</p>
                </div>
                <span class="text-xs text-slate-500 whitespace-nowrap">{{ action.action_time|date:"M j, g:i a" }}</span>
              </li>
            {% empty %}
              <li class="text-sm text-slate-500">No admin actions recorded yet.</li>
            {% endfor %}
          </ul>
        </article>

        {% if dashboard_cards %}
          {% for card in dashboard_cards %}
            {% if card.key == "system-health" %}
              <div class="xl:col-span-5">
                {{ card.html|safe }}
              </div>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>

      {% if dashboard_cards %}
        <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">
          {% for card in dashboard_cards %}
            {% if card.key != "system-health" %}
              <div class="xl:col-span-6">
                {{ card.html|safe }}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </section>
  </main>
</div>
{% endblock %}