{# pages/dashboard.html — Tailwind-first dashboard (no legacy classes, no inline styles) #}
{% extends "base.html" %}

{% block title %}{{ title | default("Admin") }} — Dashboard{% endblock %}

{% block content %}
{% set _tile = {
  'Categories': 'bg-teal-500/10 text-teal-500',
  'Products': 'bg-violet-500/10 text-violet-500',
  'Users': 'bg-blue-500/10 text-blue-500',
  'Orders': 'bg-orange-500/10 text-orange-500',
  'Order Items': 'bg-emerald-500/10 text-emerald-500',
  'Admin Field Permissions': 'bg-yellow-500/10 text-yellow-500',
  'Admin Permissions': 'bg-red-500/10 text-red-500',
  'Admin Users': 'bg-indigo-500/10 text-indigo-500',
  'Admin Audit Logs': 'bg-cyan-500/10 text-cyan-500',
  'Admin Roles': 'bg-pink-500/10 text-pink-500'
} %}

<div class="flex flex-col gap-7">
  {# ─── Page Header ─── #}
  <div class="mb-6 flex items-start justify-between border-b-2 border-slate-900 pb-5 dark:border-slate-100">
    <div class="min-w-0 flex-1">
      <h1 class="font-display text-2xl tracking-tight text-slate-900 dark:text-white">Dashboard</h1>
      <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Welcome back, Admin! Here's what's happening with your store today.
      </p>
    </div>
    <div class="flex shrink-0 items-center">
      <span class="badge badge-info">
        <span class="mr-1.5 inline-block size-1.5 animate-pulse rounded-full bg-sky-500"></span>
        System Online
      </span>
    </div>
  </div>

  {# ─── Stat Cards ─── #}
  <div class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
    {% for card in stat_cards %}
    {% set _color = _tile[card.title] | default('bg-teal-500/10 text-teal-500') %}
    <a href="{{ card.url }}" class="group relative flex flex-col gap-3.5 overflow-hidden rounded-xl border border-slate-200 bg-white p-5 no-underline transition-all duration-300 hover:-translate-y-1 hover:border-teal-500/30 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-teal-400/20">
      <div class="flex items-center gap-2.5">
        <div class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg {{ _color }}">
          {{ icon(card.icon, size="20px") }}
        </div>
        <span class="text-xs font-semibold text-slate-400 dark:text-slate-500">{{ card.title }}</span>
      </div>
      <div class="font-display text-3xl font-bold leading-none tracking-[-0.03em] text-slate-900 dark:text-white">{{ card.count }}</div>
      <div class="flex items-center gap-2">
        <span class="text-xs text-slate-400 dark:text-slate-500">Total {{ card.title | lower }}</span>
        {% if card.has_trend %}
        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {% if card.trend_direction == 'up' %}bg-emerald-500/10 text-emerald-600 dark:text-emerald-400{% else %}bg-red-500/10 text-red-600 dark:text-red-400{% endif %}">
          {% if card.trend_direction == 'up' %}{{ icon('arrow-up', size="10px") }}{% else %}{{ icon('arrow-down', size="10px") }}{% endif %}
          {{ card.trend_pct }}%
        </span>
        <span class="ml-1 text-[11px] text-slate-400 dark:text-slate-500">vs last 30 days</span>
        {% endif %}
      </div>
      {# Wave decoration #}
      <svg class="absolute right-0 bottom-0 h-[30px] w-20 opacity-15" viewBox="0 0 80 30" fill="none">
        <path d="M0 20 Q20 5 40 15 T80 10 V30 H0Z" fill="currentColor" opacity="0.3"/>
        <path d="M0 25 Q25 12 50 20 T80 15 V30 H0Z" fill="currentColor" opacity="0.5"/>
      </svg>
    </a>
    {% endfor %}
  </div>

  {# ─── Bottom Grid: Activity + Quick Actions ─── #}
  <div class="grid items-start gap-6 lg:grid-cols-[1fr_340px]">
    {# Recent Activity #}
    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div class="flex items-center justify-between border-b border-slate-200 px-6 py-5 dark:border-slate-800">
        <div class="flex items-center gap-2.5">
          <div class="flex size-9 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
            {{ icon('clock', size="18px") }}
          </div>
          <div>
            <h2 class="font-display text-base font-bold text-slate-900 dark:text-white">Recent Activity</h2>
            <p class="text-xs text-slate-400 dark:text-slate-500">Latest system activities will appear here</p>
          </div>
        </div>
        {% if recent_audit %}
        <a href="{{ admin_path | default('/admin') }}/audit-log/" class="inline-flex items-center gap-1 rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-900 no-underline transition hover:border-emerald-500 dark:border-slate-700 dark:text-slate-100">
          View all
          {{ icon('chevron-right', size="14px") }}
        </a>
        {% endif %}
      </div>

      {% if recent_audit %}
      <div class="divide-y divide-slate-200 dark:divide-slate-800">
        {% for entry in recent_audit %}
        <div class="flex items-start gap-3.5 px-6 py-4 transition hover:bg-emerald-500/5">
          <div class="mt-0.5 shrink-0">
            {% if entry.action == 'CREATE' %}
            <div class="flex size-8 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
              {{ icon('plus', size="16px") }}
            </div>
            {% elif entry.action == 'UPDATE' %}
            <div class="flex size-8 items-center justify-center rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400">
              {{ icon('pencil', size="16px") }}
            </div>
            {% elif entry.action == 'DELETE' %}
            <div class="flex size-8 items-center justify-center rounded-full bg-red-500/10 text-red-600 dark:text-red-400">
              {{ icon('trash', size="16px") }}
            </div>
            {% endif %}
          </div>
          <div class="min-w-0 flex-1">
            <div class="text-sm leading-relaxed text-slate-900 dark:text-slate-100">
              <span class="font-semibold">{{ entry.user_email | default("System") }}</span>
              <span class="text-slate-400 dark:text-slate-500"> {{ entry.action | lower }}d </span>
              <span class="font-semibold">{{ entry.model_name }}</span>
              <span class="font-mono text-xs text-slate-400 dark:text-slate-500"> #{{ entry.object_id }}</span>
            </div>
            <div class="mt-1 font-mono text-xs text-slate-400 dark:text-slate-500">{{ entry.timestamp }}</div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="px-6 py-12 text-center">
        <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-slate-500">
          {{ icon('clock', size="32px") }}
        </div>
        <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">No recent Activity</p>
        <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">System activities will appear here</p>
      </div>
      {% endif %}
    </div>

    {# Quick Actions #}
    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div class="flex items-center gap-2.5 border-b border-slate-200 px-6 py-5 dark:border-slate-800">
        <div class="flex size-9 items-center justify-center rounded-lg bg-yellow-500/10 text-yellow-500">
          {{ icon('bolt', size="18px") }}
        </div>
        <div>
          <h2 class="font-display text-base font-bold text-slate-900 dark:text-white">Quick Actions</h2>
          <p class="text-xs text-slate-400 dark:text-slate-500">Common actions at your fingertips</p>
        </div>
      </div>
      <div class="flex flex-col gap-1 p-2">
        {% set _action_colors = {
          'Categories': 'bg-teal-500/10 text-teal-500',
          'Products': 'bg-violet-500/10 text-violet-500',
          'Users': 'bg-blue-500/10 text-blue-500',
          'Orders': 'bg-orange-500/10 text-orange-500',
          'Order Items': 'bg-emerald-500/10 text-emerald-500',
          'Admin Audit Logs': 'bg-cyan-500/10 text-cyan-500',
          'Audit Logs': 'bg-cyan-500/10 text-cyan-500',
          'Admin Roles': 'bg-pink-500/10 text-pink-500',
          'Roles': 'bg-pink-500/10 text-pink-500',
          'Admin Users': 'bg-indigo-500/10 text-indigo-500',
          'Admin Permissions': 'bg-red-500/10 text-red-500',
          'Permissions': 'bg-red-500/10 text-red-500',
          'Admin Field Permissions': 'bg-yellow-500/10 text-yellow-500',
          'Refresh Tokens': 'bg-purple-500/10 text-purple-500',
          '2FA Tokens': 'bg-teal-500/10 text-teal-500',
          'Login Attempts': 'bg-orange-500/10 text-orange-500'
        } %}
        {% if recent_activity_models %}
        {% for registered in recent_activity_models %}
        {% set _ac = _action_colors[registered.verbose_name_plural] | default('bg-emerald-500/10 text-emerald-600') %}
        <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/" class="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 no-underline transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/5">
          <div class="flex size-[34px] shrink-0 items-center justify-center overflow-hidden rounded-lg {{ _ac }}">
            {{ icon(registered.admin.icon | default('cube'), size="18px") }}
          </div>
          <div class="min-w-0 flex-1">
            <div class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ registered.verbose_name_plural }}</div>
            <div class="mt-px truncate text-xs text-slate-400 dark:text-slate-500">Manage {{ registered.verbose_name | lower }}</div>
          </div>
          {{ icon('chevron-right', size="18px", class="shrink-0 text-slate-400 dark:text-slate-500") }}
        </a>
        {% endfor %}
        {% else %}
        {# Fallback: show first 5 admin-tagged models if no activity yet #}
        {% set ns = namespace(count=0) %}
        {% for registered in registered_models %}
        {% if ns.count < 5 and registered.admin.tag | default('') == 'admin' %}
        {% set ns.count = ns.count + 1 %}
        {% set _ac = _action_colors[registered.verbose_name_plural] | default('bg-emerald-500/10 text-emerald-600') %}
        <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/" class="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 no-underline transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/5">
          <div class="flex size-[34px] shrink-0 items-center justify-center overflow-hidden rounded-lg {{ _ac }}">
            {{ icon(registered.admin.icon | default('cube'), size="18px") }}
          </div>
          <div class="min-w-0 flex-1">
            <div class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ registered.verbose_name_plural }}</div>
            <div class="mt-px truncate text-xs text-slate-400 dark:text-slate-500">Manage {{ registered.verbose_name | lower }}</div>
          </div>
          {{ icon('chevron-right', size="18px", class="shrink-0 text-slate-400 dark:text-slate-500") }}
        </a>
        {% endif %}
        {% endfor %}
        {% endif %}
        {# Extra: System Logs link #}
        <a href="{{ admin_path | default('/admin') }}/audit-log/" class="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 no-underline transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/5">
          <div class="flex size-[34px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-cyan-500/10 text-cyan-500">
            {{ icon('document-text', size="18px") }}
          </div>
          <div class="min-w-0 flex-1">
            <div class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">System Logs</div>
            <div class="mt-px truncate text-xs text-slate-400 dark:text-slate-500">View system audit logs</div>
          </div>
          {{ icon('chevron-right', size="18px", class="shrink-0 text-slate-400 dark:text-slate-500") }}
        </a>
      </div>
    </div>
  </div>

  {# ─── Charts ─── #}
  {% if overview_data and show_charts %}
  <h2 class="font-display text-base font-bold text-slate-900 dark:text-white">Charts</h2>
  <div class="flex flex-col gap-5 rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
    <div class="flex items-center gap-2.5">
      <div class="flex size-9 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
        {{ icon('chart-bar') }}
      </div>
      <span class="font-display text-base font-bold text-slate-900 dark:text-white">System Overview</span>
    </div>
    <div class="flex flex-col gap-7 sm:flex-row sm:items-center">
      <div class="h-40 w-40 shrink-0">
        <canvas id="overviewDonut"></canvas>
      </div>
      <div class="flex flex-1 flex-col gap-2.5">
        {% for item in overview_data %}
        {% if item.value > 0 %}
        <div class="flex items-center justify-between gap-2.5">
          <span class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
            <span class="size-2.5 shrink-0 rounded-full" style="background: {{ item.color }};"></span>
            {{ item.label }}
          </span>
          <span class="font-mono text-sm font-semibold text-slate-900 dark:text-white">{{ item.value }}</span>
        </div>
        {% endif %}
        {% endfor %}
        <div class="flex items-center justify-between border-t border-slate-200 pt-2.5 text-sm font-semibold text-slate-900 dark:border-slate-800 dark:text-white">
          <span>Total</span>
          <span class="font-mono">{{ overview_total }}</span>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const canvas = document.getElementById('overviewDonut');
  if (!canvas) return;

  const data = {{ overview_data | tojson }};
  const labels = data.map(d => d.label);
  const values = data.map(d => d.value);
  const colors = data.map(d => d.color);

  new Chart(canvas, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: values,
        backgroundColor: colors,
        borderWidth: 0,
        hoverOffset: 6
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      cutout: '65%',
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: 'rgba(15, 23, 42, 0.9)',
          titleColor: '#f1f5f9',
          bodyColor: '#94a3b8',
          borderColor: 'rgba(30, 41, 59, 0.5)',
          borderWidth: 1,
          cornerRadius: 8,
          padding: 10,
          bodyFont: { family: "'Inter', sans-serif" }
        }
      }
    }
  });
});
</script>
{% endblock %}