{% extends "base.html" %}
{% block title %}Sraosha — {{ check.name }}{% endblock %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
{% endblock %}

{% block breadcrumbs %}
<div class="flex min-w-0 flex-col gap-1">
  <a href="/ui/data-quality" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Data Quality</a>
  <h1 class="truncate text-sm font-semibold text-gray-900 dark:text-white">{{ check.name }}</h1>
</div>
{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex flex-wrap gap-2">
      {% if latest_run %}
      {% if latest_run.status == 'passed' %}
      <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">passed</span>
      {% elif latest_run.status == 'failed' %}
      <span class="rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800 dark:bg-rose-950 dark:text-rose-200">failed</span>
      {% else %}
      <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-200">{{ latest_run.status }}</span>
      {% endif %}
      {% endif %}
    </div>
    <div class="flex flex-wrap gap-2">
      <button type="button" hx-post="/ui/data-quality/{{ check.id }}/run" hx-swap="none"
              class="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
        Run now
      </button>
      <a href="/ui/data-quality/{{ check.id }}/edit"
         class="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">Edit</a>
      <form method="post" action="/ui/data-quality/{{ check.id }}/delete" class="inline"
            onsubmit="return confirm('Delete this check and all runs?');">
        <button type="submit" class="inline-flex items-center gap-1.5 rounded-xl border border-rose-200 bg-white px-3 py-2 text-sm font-medium text-rose-600 dark:border-rose-900 dark:bg-gray-800">Delete</button>
      </form>
    </div>
  </div>

  <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
    <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <p class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Pass rate (latest)</p>
      <p class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">{% if stats.pass_rate is not none %}{{ stats.pass_rate }}%{% else %}—{% endif %}</p>
    </div>
    <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <p class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Total runs</p>
      <p class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.total_runs }}</p>
    </div>
    <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <p class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Avg duration</p>
      <p class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">{% if stats.avg_duration_ms is not none %}{{ stats.avg_duration_ms | round(0) | int }}ms{% else %}—{% endif %}</p>
    </div>
    <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
      <p class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Connection</p>
      <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">{{ connection.name if connection else '—' }}</p>
      <p class="text-xs text-gray-500">{{ connection.server_type if connection else '' }}</p>
    </div>
  </div>

  {% include "partials/dq_schedule_card.html" %}

  {% if chart_labels and chart_labels | length > 0 %}
  <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
    <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Runs trend</h2>
    <canvas id="dq-chart" height="120"></canvas>
  </div>
  <script>
    const ctx = document.getElementById('dq-chart');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: {{ chart_labels | tojson }},
        datasets: [
          { label: 'Passed', data: {{ chart_passed | tojson }}, backgroundColor: 'rgb(16, 185, 129)' },
          { label: 'Warned', data: {{ chart_warned | tojson }}, backgroundColor: 'rgb(245, 158, 11)' },
          { label: 'Failed', data: {{ chart_failed | tojson }}, backgroundColor: 'rgb(244, 63, 94)' },
        ]
      },
      options: {
        responsive: true,
        scales: {
          x: { stacked: true },
          y: { stacked: true, beginAtZero: true }
        }
      }
    });
  </script>
  {% endif %}

  <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
    <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent runs</h2>
    </div>
    {% if runs %}
    <table class="min-w-full divide-y divide-gray-200 text-left text-sm dark:divide-gray-700">
      <thead class="bg-gray-50 text-xs uppercase text-gray-500 dark:bg-gray-800 dark:text-gray-400">
        <tr>
          <th class="px-4 py-2">Time</th>
          <th class="px-4 py-2">Status</th>
          <th class="px-4 py-2">Checks</th>
          <th class="px-4 py-2">Duration</th>
          <th class="px-4 py-2 text-right"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for r in runs %}
        <tr>
          <td class="px-4 py-2 text-gray-600 dark:text-gray-300">{{ r.run_at.strftime('%Y-%m-%d %H:%M') }} UTC</td>
          <td class="px-4 py-2">{{ r.status }}</td>
          <td class="px-4 py-2">{{ r.checks_passed }}/{{ r.checks_total }} <span class="text-gray-400">({{ r.checks_warned }} warn, {{ r.checks_failed }} fail)</span></td>
          <td class="px-4 py-2">{% if r.duration_ms %}{{ r.duration_ms }}ms{% else %}—{% endif %}</td>
          <td class="px-4 py-2 text-right">
            <a href="/ui/data-quality/{{ check.id }}/runs/{{ r.id }}" class="text-xs font-medium text-indigo-600 dark:text-indigo-400">View</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="px-4 py-8 text-center text-sm text-gray-500">No runs yet.</p>
    {% endif %}
  </div>

  {% if latest_run and latest_run.results_json %}
  <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
    <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Latest results</h2>
    <pre class="max-h-96 overflow-auto rounded-lg bg-gray-50 p-3 text-xs text-gray-800 dark:bg-gray-950 dark:text-gray-200">{{ latest_run.results_json | tojson(indent=2) }}</pre>
  </div>
  {% endif %}
</div>
{% endblock %}