{% 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 flex-col md:flex-row md:items-center justify-between gap-4 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 whitespace-nowrap">Recent Execution Logs</h2>
    </div>

    <!-- Filter Toolbar Form -->
    <form id="logs-filter-form" hx-get="/dashboard/logs" hx-target="#logs-table-container" hx-trigger="change, keyup delay:300ms from:#logs-search-input, submit" class="flex flex-wrap items-center gap-2.5">
      <!-- Search Input -->
      <div class="relative min-w-[200px] flex-1 sm:flex-initial">
        <i data-lucide="search" class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500"></i>
        <input type="text" id="logs-search-input" name="q" value="{{ search_query }}" placeholder="Search task, batch ID, or error..." class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white font-mono placeholder:text-slate-600 focus:outline-none focus:border-indigo-500">
      </div>

      <!-- Status Filter Dropdown -->
      <select name="status" class="bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-slate-300 font-mono focus:outline-none focus:border-indigo-500">
        <option value="" {% if not status_filter %}selected{% endif %}>All Statuses</option>
        <option value="SUCCESS" {% if status_filter == 'SUCCESS' %}selected{% endif %}>SUCCESS</option>
        <option value="PARTIAL" {% if status_filter == 'PARTIAL' %}selected{% endif %}>PARTIAL</option>
        <option value="FAILED" {% if status_filter == 'FAILED' %}selected{% endif %}>FAILED</option>
        <option value="SKIPPED_SCHEDULE" {% if status_filter == 'SKIPPED_SCHEDULE' %}selected{% endif %}>SKIPPED_SCHEDULE</option>
      </select>

      <!-- Task ID Filter Dropdown -->
      <select name="task_id" class="bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-slate-300 font-mono focus:outline-none focus:border-indigo-500">
        <option value="" {% if not task_id_filter %}selected{% endif %}>All Tasks</option>
        {% for tid in task_ids %}
        <option value="{{ tid }}" {% if task_id_filter == tid %}selected{% endif %}>{{ tid }}</option>
        {% endfor %}
      </select>

      <!-- Page Size Selector -->
      <select name="page_size" class="bg-slate-950 border border-slate-800 rounded-lg px-2 py-1.5 text-xs text-slate-300 font-mono focus:outline-none focus:border-indigo-500">
        <option value="10" {% if page_size == 10 %}selected{% endif %}>10 per page</option>
        <option value="25" {% if page_size == 25 or not page_size %}selected{% endif %}>25 per page</option>
        <option value="50" {% if page_size == 50 %}selected{% endif %}>50 per page</option>
        <option value="100" {% if page_size == 100 %}selected{% endif %}>100 per page</option>
      </select>

      <!-- Reset Filters Button -->
      <a href="/" hx-get="/dashboard/logs?page=1&page_size=25" hx-target="#logs-table-container" onclick="document.getElementById('logs-filter-form').reset();" class="inline-flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs px-2.5 py-1.5 rounded-lg transition-colors cursor-pointer font-mono">
        <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
        <span>Reset</span>
      </a>
    </form>
  </div>

  <div id="logs-table-container">
    {% include "_logs_table.html" %}
  </div>
</div>
{% endblock %}