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

{% block content %}
<div class="flex h-screen overflow-hidden bg-slate-50 dark:bg-slate-950">
  {% include "admin/includes/forge_sidebar.html" %}
  <main class="flex-1 h-screen overflow-hidden flex flex-col">
    {% include "admin/includes/forge_topbar.html" with subtitle="Overview and recent activity" %}
    <section class="flex-1 overflow-y-auto 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>

      {% with stats|slice:":6" as kpis %}
        {% with kpis|length as kpi_count %}
          <div class="grid grid-cols-1 gap-4
            {% if kpi_count == 1 %}
              sm:grid-cols-1
            {% elif kpi_count == 2 %}
              sm:grid-cols-2
            {% elif kpi_count == 3 %}
              sm:grid-cols-2 lg:grid-cols-3
            {% elif kpi_count == 4 %}
              sm:grid-cols-2 lg:grid-cols-4
            {% elif kpi_count == 5 %}
              sm:grid-cols-2 lg:grid-cols-5
            {% else %}
              sm:grid-cols-2 lg:grid-cols-6
            {% endif %}
          ">
        {% for card in kpis %}
          <article class="forge-kpi-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
            <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>
        {% endwith %}
      {% endwith %}

      {% if forge.dashboard_quick_links %}
        <article class="forge-panel-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
          <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 "zap" "h-4 w-4 text-slate-500" %}
              <span>{% trans "Quick links" %}</span>
            </h2>
          </div>
          {% with forge.dashboard_quick_links|slice:":6" as quick_links %}
            {% with quick_links|length as quick_count %}
              <div class="grid grid-cols-1 gap-2
                {% if quick_count == 1 %}
                  sm:grid-cols-1
                {% elif quick_count == 2 %}
                  sm:grid-cols-2
                {% else %}
                  sm:grid-cols-2 lg:grid-cols-3
                {% endif %}
              ">
            {% for link in quick_links %}
              <a
                href="{{ link.url }}"
                class="group flex items-center justify-between gap-3 rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800"
              >
                <span class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200 font-medium">
                  {% if link.icon %}{% forge_icon link.icon "h-4 w-4 text-slate-500" %}{% endif %}
                  <span>{{ link.label }}</span>
                </span>
                {% forge_icon "arrow-right" "h-4 w-4 text-slate-400 group-hover:text-slate-500" %}
              </a>
            {% endfor %}
          </div>
            {% endwith %}
          {% endwith %}
        </article>
      {% endif %}

      {% if forge.dashboard_alerts %}
        <article class="forge-panel-card forge-needs-attention-card rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
          <div class="mb-3 flex shrink-0 items-center justify-between gap-3">
            <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2 min-w-0">
              {% forge_icon "activity" "h-4 w-4 text-slate-500 shrink-0" %}
              <span>{% trans "Needs attention" %}</span>
            </h2>
            <span class="text-xs text-slate-500 whitespace-nowrap">{{ forge.dashboard_alerts|length }}{% trans " alert(s)" %}</span>
          </div>
          <div class="forge-needs-attention-scroll space-y-2">
            {% for alert in forge.dashboard_alerts %}
              <div class="rounded-xl border px-3 py-2.5
                {% if alert.level == 'danger' %}
                  border-rose-200 bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/30
                {% elif alert.level == 'warning' %}
                  border-amber-200 bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20
                {% elif alert.level == 'success' %}
                  border-emerald-200 bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20
                {% else %}
                  border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900/40
                {% endif %}
              ">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <div class="flex items-center gap-2">
                      {% if alert.icon %}{% forge_icon alert.icon "h-4 w-4 text-slate-500" %}{% endif %}
                      <p class="font-semibold text-slate-900 dark:text-slate-100 truncate">{{ alert.title }}</p>
                    </div>
                    {% if alert.description %}
                      <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">{{ alert.description }}</p>
                    {% endif %}
                    {% if alert.count %}
                      <p class="mt-2 text-xs text-slate-500">
                        <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2 py-0.5">{{ alert.count }}</span>
                        <span>{% trans "matching record(s)" %}</span>
                      </p>
                    {% endif %}
                  </div>
                  {% if alert.url %}
                    <a href="{{ alert.url }}" class="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/40 px-2.5 py-1.5 text-xs text-slate-700 dark:text-slate-200 hover:bg-white dark:hover:bg-slate-800">
                      <span>{{ alert.cta|default:_("View") }}</span>
                      {% forge_icon "arrow-right" "h-3.5 w-3.5 text-slate-400" %}
                    </a>
                  {% endif %}
                </div>

                {% if alert.rows %}
                  <details class="mt-2.5 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/60 dark:bg-slate-950/20 px-3 py-2">
                    <summary class="cursor-pointer text-sm text-slate-700 dark:text-slate-200 select-none">
                      {% trans "Show matching records" %}
                    </summary>
                    <ul class="forge-needs-attention-rows mt-2 space-y-1">
                      {% for row in alert.rows %}
                        <li class="flex items-center justify-between gap-3 text-sm">
                          {% if row.url %}
                            <a href="{{ row.url }}" class="text-slate-700 dark:text-slate-200 hover:underline truncate">{{ row.label }}</a>
                          {% else %}
                            <span class="text-slate-700 dark:text-slate-200 truncate">{{ row.label }}</span>
                          {% endif %}
                          {% if row.value %}
                            <span class="text-xs text-slate-500 whitespace-nowrap">{{ row.value }}</span>
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  </details>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </article>
      {% endif %}

      <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>

        {% if recent_records_card %}
          <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">
            <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">
                {% if recent_records_card.icon %}{% forge_icon recent_records_card.icon "h-4 w-4 text-slate-500" %}{% endif %}
                <span>{{ recent_records_card.title }}</span>
              </h2>
              {% if recent_records_card.changelist_url %}
                <a href="{{ recent_records_card.changelist_url }}" class="text-xs forge-accent-text">{% trans "View all" %}</a>
              {% endif %}
            </div>
            <ul class="space-y-2">
              {% for row in recent_records_card.rows %}
                <li class="flex items-center justify-between gap-3 text-sm rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2">
                  <div class="min-w-0">
                    {% if row.pk and recent_records_card.changelist_url %}
                      <span class="block font-medium text-slate-800 dark:text-slate-100 truncate">{{ row.primary }}</span>
                    {% else %}
                      <span class="block font-medium text-slate-800 dark:text-slate-100 truncate">{{ row.primary }}</span>
                    {% endif %}
                    {% if row.secondary %}
                      <span class="block text-xs text-slate-500 truncate">{{ row.secondary }}</span>
                    {% endif %}
                  </div>
                  {% if row.meta %}
                    <span class="text-xs text-slate-500 whitespace-nowrap">{{ row.meta }}</span>
                  {% endif %}
                </li>
              {% empty %}
                <li class="text-sm text-slate-500">{% trans "No records found." %}</li>
              {% endfor %}
            </ul>
          </article>
        {% endif %}
      </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 %}