{% extends "layout.html" %}
{% block title %}Dashboard - MailCadence Admin{% endblock %}
{% block content %}
<!-- Top Header & Action Toolbar -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-2 border-b border-slate-800">
  <div>
    <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-2">
      <i data-lucide="layout-dashboard" class="w-6 h-6 text-indigo-400"></i>
      Dashboard & Observability
    </h1>
    <p class="text-xs text-slate-400 mt-1">Real-time metrics, execution status, and automated dispatch control.</p>
  </div>

  <div>
    <form hx-post="/dispatch/run" hx-target="body" hx-swap="outerHTML" hx-indicator="#dispatch-spinner" class="flex items-center gap-3 bg-slate-900 border border-slate-800 rounded-xl p-2 px-3 shadow-sm">
      <label class="inline-flex items-center gap-2 cursor-pointer text-xs font-medium text-slate-300">
        <input type="checkbox" name="dry_run" value="true" class="w-4 h-4 rounded bg-slate-950 border-slate-700 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-slate-900">
        <span>Dry Run</span>
      </label>
      <button type="submit" class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors shadow-sm">
        <i data-lucide="play" class="w-3.5 h-3.5"></i>
        <span>Run Dispatch Now</span>
      </button>
      <span id="dispatch-spinner" class="htmx-indicator inline-flex items-center gap-1.5 text-xs text-amber-400 font-mono">
        <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
        <span>Running dispatch...</span>
      </span>
    </form>
  </div>
</div>

{% if message %}
<div class="alert-success flex items-center gap-2">
  <i data-lucide="check-circle" class="w-4 h-4 shrink-0"></i>
  <span>{{ message }}</span>
</div>
{% endif %}
{% if error %}
<div class="alert-error flex items-center gap-2">
  <i data-lucide="alert-circle" class="w-4 h-4 shrink-0"></i>
  <span>{{ error }}</span>
</div>
{% endif %}

<!-- 4 Primary KPI Metric Cards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-sm flex flex-col justify-between">
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wider text-slate-400">Total Executions</span>
      <div class="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400">
        <i data-lucide="activity" class="w-4 h-4"></i>
      </div>
    </div>
    <div class="mt-4">
      <div class="text-2xl font-bold font-mono text-white">{{ stats.total_executions }}</div>
      <div class="text-xs text-slate-500 mt-1 font-mono">Tasks: {{ stats.total_tasks }} | Schedules: {{ stats.total_schedules }}</div>
    </div>
  </div>

  <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-sm flex flex-col justify-between">
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wider text-slate-400">Emails Sent</span>
      <div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
        <i data-lucide="mail-check" class="w-4 h-4"></i>
      </div>
    </div>
    <div class="mt-4">
      <div class="text-2xl font-bold font-mono text-white">{{ stats.total_emails_sent }}</div>
      <div class="text-xs text-emerald-400 mt-1 font-mono">Successful Runs: {{ stats.success_count }}</div>
    </div>
  </div>

  <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-sm flex flex-col justify-between">
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wider text-slate-400">Failed Runs</span>
      <div class="w-8 h-8 rounded-lg bg-rose-500/10 border border-rose-500/20 flex items-center justify-center text-rose-400">
        <i data-lucide="alert-triangle" class="w-4 h-4"></i>
      </div>
    </div>
    <div class="mt-4">
      <div class="text-2xl font-bold font-mono text-white">{{ stats.failed_count }}</div>
      <div class="text-xs text-rose-400 mt-1 font-mono">Requires attention</div>
    </div>
  </div>

  <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-sm flex flex-col justify-between">
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wider text-slate-400">Avg Duration</span>
      <div class="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400">
        <i data-lucide="clock" class="w-4 h-4"></i>
      </div>
    </div>
    <div class="mt-4">
      <div class="text-2xl font-bold font-mono text-white">{{ stats.avg_duration_ms }} ms</div>
      <div class="text-xs text-slate-500 mt-1 font-mono">Execution latency</div>
    </div>
  </div>
</div>

<!-- Recent Execution Audit Logs Section -->
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
  <div class="p-4 border-b border-slate-800/80 flex items-center justify-between bg-slate-900/80">
    <div class="flex items-center gap-2">
      <i data-lucide="list-checks" class="w-4 h-4 text-indigo-400"></i>
      <h2 class="text-sm font-semibold text-white">Recent Execution Logs</h2>
    </div>
    <span class="text-xs font-mono text-slate-400">Showing last 50 entries</span>
  </div>

  {% if logs %}
  <div class="overflow-x-auto">
    <table class="w-full text-left text-xs divide-y divide-slate-800/70">
      <thead class="bg-slate-950/60 text-slate-400 font-mono uppercase tracking-wider sticky top-0">
        <tr>
          <th class="py-3 px-4">ID</th>
          <th class="py-3 px-4">Task ID</th>
          <th class="py-3 px-4">Batch ID</th>
          <th class="py-3 px-4">Status</th>
          <th class="py-3 px-4">Sent</th>
          <th class="py-3 px-4">Duration</th>
          <th class="py-3 px-4">Attempts</th>
          <th class="py-3 px-4">Executed At</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-800/50 text-slate-300">
        {% for log in logs %}
        <tr class="hover:bg-slate-800/40 transition-colors">
          <td class="py-3 px-4 font-mono text-slate-500">{{ log.id }}</td>
          <td class="py-3 px-4 font-mono font-medium text-white">{{ log.task_id }}</td>
          <td class="py-3 px-4 font-mono text-slate-400">{{ log.batch_id or "-" }}</td>
          <td class="py-3 px-4">
            {% if log.status == 'SUCCESS' %}
              <span class="badge-success"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>SUCCESS</span>
            {% elif log.status == 'FAILED' %}
              <span class="badge-failed"><span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>FAILED</span>
            {% elif log.status == 'PARTIAL' %}
              <span class="badge-partial"><span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>PARTIAL</span>
            {% else %}
              <span class="badge-skipped"><span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>{{ log.status }}</span>
            {% endif %}
          </td>
          <td class="py-3 px-4 font-mono">{{ log.sent_count }}</td>
          <td class="py-3 px-4 font-mono text-slate-400">{{ log.duration_ms }} ms</td>
          <td class="py-3 px-4 font-mono text-slate-400">{{ log.attempt_count }}</td>
          <td class="py-3 px-4 font-mono text-slate-400 whitespace-nowrap">{{ log.executed_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="p-12 text-center text-slate-500 flex flex-col items-center justify-center gap-2">
    <i data-lucide="inbox" class="w-8 h-8 text-slate-600"></i>
    <p class="text-sm font-medium">No execution logs available yet.</p>
    <p class="text-xs">Run a manual dispatch or wait for scheduled triggers.</p>
  </div>
  {% endif %}
</div>
{% endblock %}