{% extends "base.html" %}
{% block title %}Dashboard — SimpleAudit{% endblock %}
{% block content %}
<h1 class="text-lg font-semibold text-gray-100 mb-6">Dashboard</h1>

<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
  <a href="/dashboard/" class="bg-surface-raised rounded-xl border border-gray-800 p-4 text-center cursor-pointer hover:border-accent/40 hover:bg-surface-overlay transition-colors {% if not current_status %}border-accent/30{% endif %}">
    <span class="text-2xl font-bold text-accent">{{ stats.total }}</span>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wide">Total</p>
  </a>
  <a href="/dashboard/?status=active" class="bg-surface-raised rounded-xl border border-gray-800 p-4 text-center cursor-pointer hover:border-amber-500/40 hover:bg-surface-overlay transition-colors {% if current_status == 'active' %}border-amber-500/30{% endif %}">
    <span class="text-2xl font-bold text-amber-400">{{ stats.active }}</span>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wide">Active</p>
  </a>
  <a href="/dashboard/?status=completed" class="bg-surface-raised rounded-xl border border-gray-800 p-4 text-center cursor-pointer hover:border-emerald-500/40 hover:bg-surface-overlay transition-colors {% if current_status == 'completed' %}border-emerald-500/30{% endif %}">
    <span class="text-2xl font-bold text-emerald-400">{{ stats.completed }}</span>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wide">Completed</p>
  </a>
  <a href="/dashboard/?status=failed" class="bg-surface-raised rounded-xl border border-gray-800 p-4 text-center cursor-pointer hover:border-red-500/40 hover:bg-surface-overlay transition-colors {% if current_status == 'failed' %}border-red-500/30{% endif %}">
    <span class="text-2xl font-bold text-red-400">{{ stats.failed }}</span>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wide">Failed</p>
  </a>
  <a href="/dashboard/?status=archived" class="bg-surface-raised rounded-xl border border-gray-800 p-4 text-center cursor-pointer hover:border-gray-500/40 hover:bg-surface-overlay transition-colors {% if current_status == 'archived' %}border-gray-500/30{% endif %}">
    <span class="text-2xl font-bold text-gray-400">{{ stats.archived }}</span>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wide">Archived</p>
  </a>
</div>

<!-- Runs table -->
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
  <form method="get" action="/dashboard/">
    <div class="flex items-center justify-between mb-3 flex-wrap gap-2">
      <h2 class="text-sm font-semibold text-gray-300">Audit Runs</h2>
      <div class="flex items-center gap-2 flex-wrap">
        <!-- Search input -->
        <input type="hidden" name="status" value="{{ current_status }}">
        <input type="text" name="q" placeholder="Search runs…" value="{{ search_query }}" aria-label="Search audit runs"
               class="w-36 px-2 py-1 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-300 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <!-- Status filter tabs -->
        <div class="flex gap-1 text-xs">
          <a href="/dashboard/{% if search_query %}?q={{ search_query|urlencode }}{% endif %}" class="px-2 py-1 rounded {% if not current_status %}bg-accent/20 text-accent{% else %}text-gray-500 hover:text-gray-300{% endif %}">All</a>
          <a href="/dashboard/?status=active{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="px-2 py-1 rounded {% if current_status == 'active' %}bg-amber-900/40 text-amber-300{% else %}text-gray-500 hover:text-gray-300{% endif %}">Active</a>
          <a href="/dashboard/?status=completed{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="px-2 py-1 rounded {% if current_status == 'completed' %}bg-emerald-900/40 text-emerald-300{% else %}text-gray-500 hover:text-gray-300{% endif %}">Done</a>
          <a href="/dashboard/?status=failed{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="px-2 py-1 rounded {% if current_status == 'failed' %}bg-red-900/40 text-red-300{% else %}text-gray-500 hover:text-gray-300{% endif %}">Failed</a>
          <a href="/dashboard/?status=archived{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="px-2 py-1 rounded {% if current_status == 'archived' %}bg-gray-700/60 text-gray-200{% else %}text-gray-500 hover:text-gray-300{% endif %}">Archived</a>
        </div>
        <button type="submit" class="px-2 py-1 rounded-lg bg-surface-overlay text-gray-500 text-xs hover:text-gray-300 transition-colors" title="Search">⌕</button>
        <a href="{% url 'dashboard_export' %}{% if current_status %}?status={{ current_status }}{% endif %}{% if search_query %}{% if not current_status %}?{% else %}&{% endif %}q={{ search_query|urlencode }}{% endif %}" class="px-2.5 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-gray-200 transition-colors">Export CSV</a>
        <a href="{% url 'new_audit' %}" class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover">+ New Audit</a>
      </div>
    </div>
  </form>
  {% if runs %}
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-gray-800">
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">ID</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Name</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Scenario Set</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Target Model</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Auditor Model</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Judge Model</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Status</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Progress</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Pass Rate</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">Duration</th>
          <th class="text-left px-3 py-2 text-xs font-medium text-gray-500 uppercase">
            {% if current_sort == 'created_at' %}
            <a href="/dashboard/?sort=-created_at{% if current_status %}&status={{ current_status }}{% endif %}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="hover:text-gray-300">Created ↑</a>
            {% else %}
            <a href="/dashboard/?sort=created_at{% if current_status %}&status={{ current_status }}{% endif %}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="hover:text-gray-300">Created ↓</a>
            {% endif %}
          </th>
          <th class="text-right px-3 py-2 text-xs font-medium text-gray-500 uppercase">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for run in runs %}
        <tr class="border-b border-gray-800/50 hover:bg-surface-overlay/50 cursor-pointer" onclick="location='/audits/{{ run.id }}/'">
          <td class="px-3 py-2.5 font-medium text-gray-200">#{{ run.id }}</td>
          <td class="px-3 py-2.5 text-gray-300 max-w-[16rem] truncate" title="{{ run.name }}">{{ run.name }}</td>
          <td class="px-3 py-2.5"><a href="/scenarios/?set={{ run.scenario_set_version.scenario_set_id }}" onclick="event.stopPropagation()" class="text-gray-300 hover:text-accent transition-colors">{{ run.scenario_set_version.scenario_set.name|default:"—" }}</a></td>
          <td class="px-3 py-2.5 text-gray-400 text-xs">{{ run.target_endpoint.display_name|default:"—" }}</td>
          <td class="px-3 py-2.5 text-gray-400 text-xs">{{ run.auditor_endpoint.display_name|default:"—" }}</td>
          <td class="px-3 py-2.5 text-gray-400 text-xs">{{ run.judge_endpoint.display_name|default:"—" }}</td>
          <td class="px-3 py-2.5">
            {% if run.status == "completed" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-900/50 text-emerald-300">completed</span>
            {% elif run.status == "failed" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-red-900/50 text-red-300">failed</span>
            {% elif run.status == "cancelled" %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-800 text-gray-400">cancelled</span>
            {% else %}<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-900/50 text-amber-300">{{ run.get_status_display }}</span>{% endif %}
          </td>
          <td class="px-3 py-2.5 text-gray-400 text-xs whitespace-nowrap">{% if run.total_scenarios > 0 %}{{ run.completed_scenarios }}/{{ run.total_scenarios }}{% else %}—{% endif %}</td>
          <td class="px-3 py-2.5 text-gray-400 text-xs whitespace-nowrap">{% if run.status == "completed" or run.status == "failed" or run.status == "cancelled" %}{% if run.summary_metrics.pass_rate is not None %}{{ run.summary_metrics.pass_rate|floatformat:1 }}%{% elif run.completed_scenarios > 0 %}{% widthratio run.successful_scenarios run.completed_scenarios 100 %}%{% else %}—{% endif %}{% else %}—{% endif %}</td>
          <td class="px-3 py-2.5 text-gray-400 text-xs whitespace-nowrap">{{ run.duration_display|default:"—" }}</td>
          <td class="px-3 py-2.5 text-gray-500 text-xs">{{ run.created_at|date:"M j, H:i" }}</td>
          <td class="px-3 py-2.5 text-right whitespace-nowrap" onclick="event.stopPropagation()">
            {% if run.status != "completed" and run.status != "failed" and run.status != "cancelled" %}
            <form method="post" action="/audits/{{ run.id }}/cancel/" class="inline mr-1" onsubmit="return confirm('Cancel run #{{ run.id }}?')">
              {% csrf_token %}
              <button type="submit" title="Cancel this audit" aria-label="Cancel this audit" class="inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-red-300 hover:bg-red-900/30 transition-colors">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
              </button>
            </form>
            {% endif %}
            <a href="/audits/new/?clone_from={{ run.id }}" title="Clone this audit" aria-label="Clone this audit" class="group/clone inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-accent hover:bg-surface-overlay transition-colors">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            </a>
            <form method="post" action="/audits/{{ run.id }}/archive/" class="inline">
              {% csrf_token %}
              <button type="submit" title="{% if run.archived %}Unarchive this audit{% else %}Archive this audit{% endif %}" aria-label="{% if run.archived %}Unarchive this audit{% else %}Archive this audit{% endif %}" class="group/arch inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-500 hover:text-gray-200 hover:bg-surface-overlay transition-colors">
                {% if run.archived %}
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
                {% else %}
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
                {% endif %}
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="text-sm text-gray-500 py-8 text-center">No audits found.</p>
  {% endif %}

  <!-- Pagination -->
  {% if is_paginated %}
  <div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-800">
    <span class="text-xs text-gray-500">Page {{ page_obj.number }} of {{ paginator.num_pages }} ({{ paginator.count }} runs)</span>
    <div class="flex gap-1">
      {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}{% if current_sort != '-created_at' %}&sort={{ current_sort }}{% endif %}" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">← Prev</a>
      {% endif %}
      {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}{% if current_sort != '-created_at' %}&sort={{ current_sort }}{% endif %}" class="px-2 py-1 rounded text-xs bg-surface-overlay text-gray-400 hover:text-gray-200">Next →</a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}