{% extends "base.html" %}
{% from "partials/icons.html" import icon %}
{% block title %}Sraosha — Compliance{% endblock %}

{% block breadcrumbs %}
<h1 class="truncate text-sm font-semibold text-gray-900 dark:text-white">Compliance</h1>
<p class="truncate text-xs text-gray-500 dark:text-gray-400">Team validation health over the last 30 days</p>
{% endblock %}

{% block content %}
<script type="application/json" id="compliance-entries-data">{{ entries_json | safe }}</script>
<script>
  function complianceLeaderboard(initialEntries) {
    return {
      entries: initialEntries,
      q: '',
      sortKey: 'score',
      expanded: null,
      get rows() {
        const q = this.q.trim().toLowerCase();
        let e = this.entries.filter((row) => row.team_name.toLowerCase().includes(q));
        if (this.sortKey === 'name') {
          e = [...e].sort((a, b) => a.team_name.localeCompare(b.team_name));
        } else {
          e = [...e].sort((a, b) => {
            const sa = a.display_score;
            const sb = b.display_score;
            if (sa == null && sb == null) return 0;
            if (sa == null) return 1;
            if (sb == null) return -1;
            return sb - sa;
          });
        }
        return e.map((row, i) => ({ ...row, rank: i + 1 }));
      },
    };
  }
</script>

<div class="space-y-8">
  {% if show_estimated_banner %}
  <div class="flex gap-3 rounded-xl px-4 py-3 text-sm {% if snapshot_banner_soft %}border border-sky-200 bg-sky-50/90 text-sky-950 dark:border-sky-800/80 dark:bg-sky-950/35 dark:text-sky-100{% else %}border border-amber-200 bg-amber-50/90 text-amber-950 dark:border-amber-800/80 dark:bg-amber-950/40 dark:text-amber-100{% endif %}">
    {% if snapshot_banner_soft %}{{ icon("clock", "w-5 h-5 flex-shrink-0 mt-0.5 text-sky-600 dark:text-sky-400") }}{% else %}{{ icon("exclamation-triangle", "w-5 h-5 flex-shrink-0 mt-0.5") }}{% endif %}
    <div>
      <p class="font-medium">Scores are estimated from live validation runs</p>
      <p class="mt-1 {% if snapshot_banner_soft %}text-sky-900/90 dark:text-sky-200/90{% else %}text-amber-900/90 dark:text-amber-200/90{% endif %}">No snapshot row exists in <code class="rounded px-1 py-0.5 text-xs {% if snapshot_banner_soft %}bg-sky-100/80 dark:bg-sky-900/50{% else %}bg-amber-100/80 dark:bg-amber-900/60{% endif %}">compliance_scores</code> yet. The Celery beat task <code class="rounded px-1 py-0.5 text-xs {% if snapshot_banner_soft %}bg-sky-100/80 dark:bg-sky-900/50{% else %}bg-amber-100/80 dark:bg-amber-900/60{% endif %}">compliance-compute-daily</code> persists rolling 30-day snapshots for auditing. This banner clears after the first successful write.</p>
    </div>
  </div>
  {% elif snapshot_stale %}
  <div class="flex gap-3 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-200">
    {{ icon("clock", "w-5 h-5 flex-shrink-0 text-gray-500") }}
    <div>
      <p class="font-medium">Compliance snapshots may be stale</p>
      <p class="mt-1 text-gray-600 dark:text-gray-400">Last computed {{ kpis.last_computed_rel or "—" }}. Ensure the periodic compliance job is running.</p>
    </div>
  </div>
  {% endif %}

  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
    <div class="card flex items-start gap-4 p-5 transition-shadow border-emerald-100/80 bg-gradient-to-br from-emerald-50/50 to-white dark:border-emerald-900/40 dark:from-emerald-950/25 dark:to-gray-900">
      <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400">
        {{ icon("chart-bar", "h-6 w-6") }}
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Org average</p>
        <p class="mt-1 text-2xl font-bold tabular-nums tracking-tight text-gray-900 dark:text-white">
          {% if kpis.org_avg is not none %}{{ "%.1f" | format(kpis.org_avg) }}%{% else %}—{% endif %}
        </p>
        <p class="mt-1 text-xs leading-snug text-gray-500 dark:text-gray-400">Mean score across teams with data</p>
      </div>
    </div>
    <div class="card flex items-start gap-4 p-5 transition-shadow border-indigo-100/80 bg-gradient-to-br from-indigo-50/50 to-white dark:border-indigo-900/40 dark:from-indigo-950/30 dark:to-gray-900">
      <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400">
        {{ icon("shield-check", "h-6 w-6") }}
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Teams tracked</p>
        <p class="mt-1 text-2xl font-bold tabular-nums tracking-tight text-gray-900 dark:text-white">{{ kpis.teams_tracked }}</p>
        <p class="mt-1 text-xs leading-snug text-gray-500 dark:text-gray-400">Registered in Sraosha</p>
      </div>
    </div>
    <div class="card flex items-start gap-4 p-5 transition-shadow border-rose-100/80 bg-gradient-to-br from-rose-50/40 to-white dark:border-rose-900/40 dark:from-rose-950/20 dark:to-gray-900">
      <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-400">
        {{ icon("exclamation-triangle", "h-6 w-6") }}
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Needs attention</p>
        <p class="mt-1 text-2xl font-bold tabular-nums tracking-tight text-gray-900 dark:text-white">{{ kpis.teams_needing_attention }}</p>
        <p class="mt-1 text-xs leading-snug text-gray-500 dark:text-gray-400">Score &lt; 70% or owned contracts with no runs</p>
      </div>
    </div>
    <div class="card flex items-start gap-4 p-5 transition-shadow border-violet-100/80 bg-gradient-to-br from-violet-50/40 to-white dark:border-violet-900/40 dark:from-violet-950/25 dark:to-gray-900">
      <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300">
        {{ icon("x-circle", "h-6 w-6") }}
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Violations (30d)</p>
        <p class="mt-1 text-2xl font-bold tabular-nums tracking-tight text-gray-900 dark:text-white">{{ kpis.total_violations_30d }}</p>
        <p class="mt-1 text-xs leading-snug text-gray-500 dark:text-gray-400">Failed + error validation runs</p>
      </div>
    </div>
    <div class="card flex items-start gap-4 p-5 transition-shadow border-sky-100/80 bg-gradient-to-br from-sky-50/40 to-white dark:border-sky-900/40 dark:from-sky-950/20 dark:to-gray-900">
      <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-sky-100 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
        {{ icon("clock", "h-6 w-6") }}
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Last snapshot</p>
        <p class="mt-1 text-lg font-bold leading-tight text-gray-900 dark:text-white">{{ kpis.last_computed_rel or "Never" }}</p>
        <p class="mt-1 text-xs leading-snug text-gray-500 dark:text-gray-400">Latest Celery compliance write</p>
      </div>
    </div>
  </div>

  {% if has_teams and contracts_unlinked > 0 %}
  <div class="flex gap-3 rounded-xl border border-amber-200 bg-amber-50/90 px-4 py-3 text-sm text-amber-950 dark:border-amber-800/80 dark:bg-amber-950/40 dark:text-amber-100">
    {{ icon("exclamation-triangle", "w-5 h-5 flex-shrink-0 mt-0.5") }}
    <div>
      <p class="font-medium">Some contracts are not linked to a team</p>
      <p class="mt-1 text-amber-900/90 dark:text-amber-200/90">{{ contracts_unlinked }} contract(s) have no <code class="rounded bg-amber-100/80 px-1 py-0.5 text-xs dark:bg-amber-900/50">team_id</code> and are excluded from the leaderboard. Edit each contract or set <code class="rounded bg-amber-100/80 px-1 py-0.5 text-xs dark:bg-amber-900/50">x-sraosha.team_id</code> in YAML. <a href="/ui/settings/teams" class="font-medium text-amber-900 underline dark:text-amber-100">Manage teams</a></p>
    </div>
  </div>
  {% endif %}

  {% if not has_teams %}
  <div class="card rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-600 dark:bg-gray-900">
    {{ icon("shield-check", "mx-auto h-12 w-12 text-gray-400") }}
    <h2 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">No teams registered</h2>
    {% if contracts_unlinked > 0 %}
    <p class="mx-auto mt-2 max-w-md text-sm text-gray-500 dark:text-gray-400">You have <span class="font-medium text-gray-700 dark:text-gray-300">{{ contracts_unlinked }}</span> contract(s), but no teams yet. Create teams under <a href="/ui/settings/teams" class="font-medium text-indigo-600 hover:underline">Settings → Teams</a>, then link each contract by setting <code class="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">x-sraosha.team_id</code> to that team&rsquo;s UUID (or open a contract and pick a team).</p>
    {% else %}
    <p class="mx-auto mt-2 max-w-md text-sm text-gray-500 dark:text-gray-400">Create teams under <a href="/ui/settings/teams" class="font-medium text-indigo-600 hover:underline">Settings → Teams</a>, then assign contracts by setting <code class="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800">x-sraosha.team_id</code> or choosing a team when editing a contract. Validation scores roll up only for linked contracts.</p>
    {% endif %}
    <a href="/ui/contracts" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-indigo-500">Browse contracts</a>
  </div>
  {% else %}
  <div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
    <div class="space-y-4 xl:col-span-2"
         x-data="complianceLeaderboard(JSON.parse(document.getElementById('compliance-entries-data').textContent || '[]'))">
      <div class="card overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <div class="flex flex-col gap-4 border-b border-gray-100 px-4 py-4 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 class="text-base font-semibold text-gray-900 dark:text-white">Team leaderboard</h2>
            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Expand a row for per-contract pass rates (rolling 30d)</p>
          </div>
          <div class="flex flex-wrap items-center gap-2">
            <label class="relative flex items-center">
              <span class="sr-only">Search teams</span>
              {{ icon("magnifying-glass", "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400") }}
              <input type="search" x-model="q" placeholder="Filter teams…" class="w-full min-w-[12rem] rounded-lg border border-gray-200 bg-white py-2 pl-8 pr-3 text-sm dark:border-gray-600 dark:bg-gray-800" />
            </label>
            <select x-model="sortKey" class="rounded-lg border border-gray-200 bg-white py-2 pl-3 pr-8 text-sm dark:border-gray-600 dark:bg-gray-800">
              <option value="score">Sort by score</option>
              <option value="name">Sort by name</option>
            </select>
          </div>
        </div>
        <div class="overflow-x-auto">
          <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/80 dark:text-gray-400">
              <tr>
                <th class="px-4 py-3">Rank</th>
                <th class="px-4 py-3">Team</th>
                <th class="px-4 py-3">Source</th>
                <th class="px-4 py-3">Trend</th>
                <th class="px-4 py-3">Score</th>
                <th class="px-4 py-3">Contracts</th>
                <th class="px-4 py-3">Violations (30d)</th>
              </tr>
            </thead>
            <template x-for="entry in rows" :key="entry.team_id">
              <tbody class="border-b border-gray-100 last:border-0 dark:border-gray-800">
                <tr class="cursor-pointer transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
                    @click="expanded = expanded === entry.team_id ? null : entry.team_id">
                  <td class="px-4 py-3">
                    <span class="inline-flex h-7 min-w-[1.75rem] items-center justify-center rounded-md bg-gray-100 text-xs font-semibold tabular-nums text-gray-800 dark:bg-gray-800 dark:text-gray-200" x-text="'#' + entry.rank"></span>
                  </td>
                  <td class="px-4 py-3 font-medium text-gray-900 dark:text-white" x-text="entry.team_name"></td>
                  <td class="px-4 py-3">
                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium"
                      :class="{
                        'bg-indigo-100 text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200': entry.score_source === 'snapshot',
                        'bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-200': entry.score_source === 'live',
                        'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300': entry.score_source === 'none'
                      }"
                      x-text="entry.score_source === 'snapshot' ? 'Snapshot' : (entry.score_source === 'live' ? 'Live' : '—')"></span>
                  </td>
                  <td class="px-4 py-3">
                    <template x-if="entry.sparkline_points">
                      <svg viewBox="0 0 72 20" class="h-5 w-24" preserveAspectRatio="none">
                        <polyline fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400" stroke="currentColor" :points="entry.sparkline_points" />
                      </svg>
                    </template>
                    <template x-if="!entry.sparkline_points">
                      <span class="text-gray-400">—</span>
                    </template>
                  </td>
                  <td class="px-4 py-3">
                    <template x-if="entry.display_score != null">
                      <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold tabular-nums"
                        :class="{
                          'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200': entry.display_score >= 90,
                          'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200': entry.display_score >= 70 && entry.display_score < 90,
                          'bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-200': entry.display_score < 70
                        }"
                        x-text="Number(entry.display_score).toFixed(1) + '%'"></span>
                    </template>
                    <template x-if="entry.display_score == null">
                      <span class="text-gray-400">—</span>
                    </template>
                  </td>
                  <td class="px-4 py-3 text-gray-600 dark:text-gray-300" x-text="entry.contracts_owned"></td>
                  <td class="px-4 py-3 text-gray-600 dark:text-gray-300" x-text="entry.violations_30d"></td>
                </tr>
                <tr x-show="expanded === entry.team_id" x-cloak class="bg-gray-50/80 dark:bg-gray-800/40">
                  <td colspan="7" class="px-4 py-4">
                    <p class="mb-2 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Owned contracts</p>
                    <template x-if="entry.contracts_detail && entry.contracts_detail.length">
                      <ul class="divide-y divide-gray-200 rounded-lg border border-gray-200 dark:divide-gray-700 dark:border-gray-600">
                        <template x-for="c in entry.contracts_detail" :key="c.contract_id">
                          <li class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
                            <a :href="'/ui/contracts/' + c.contract_id" class="font-medium text-indigo-600 hover:underline dark:text-indigo-400" x-text="c.title"></a>
                            <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                              <template x-if="c.pass_rate != null">
                                <span class="rounded-md bg-gray-100 px-2 py-0.5 font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200" x-text="c.pass_rate + '% pass'"></span>
                              </template>
                              <span x-text="c.total_runs + ' runs'"></span>
                            </div>
                          </li>
                        </template>
                      </ul>
                    </template>
                    <template x-if="!entry.contracts_detail || !entry.contracts_detail.length">
                      <p class="text-sm text-gray-500 dark:text-gray-400">No owned contracts.</p>
                    </template>
                  </td>
                </tr>
              </tbody>
            </template>
          </table>
        </div>
        <div x-show="rows.length === 0" x-cloak class="px-4 py-8 text-center text-sm text-gray-500">No teams match your filter.</div>
      </div>
    </div>

    <div class="space-y-6">
      <div class="card rounded-xl border border-gray-200 p-5 dark:border-gray-700 dark:bg-gray-900">
        <h3 class="flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white">
          {{ icon("document", "h-5 w-5 text-gray-500") }}
          How scoring works
        </h3>
        <ul class="mt-3 list-inside list-disc space-y-2 text-sm text-gray-600 dark:text-gray-400">
          <li>Scores use <strong class="text-gray-800 dark:text-gray-200">validation runs</strong> from the last <strong>30 days</strong> (UTC), scoped to contracts owned by each team.</li>
          <li><span class="font-medium text-indigo-700 dark:text-indigo-300">Snapshot</span> rows are written by the scheduled compliance job; <span class="font-medium text-sky-700 dark:text-sky-300">Live</span> is computed directly from the database if no snapshot exists yet.</li>
          <li>Pass rate is <code class="rounded bg-gray-100 px-1 dark:bg-gray-800">passed runs ÷ total runs</code>. Violations count failed and error outcomes.</li>
        </ul>
      </div>

      <div class="card overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <div class="border-b border-gray-100 px-4 py-3 dark:border-gray-700">
          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Lowest pass-rate contracts</h3>
          <p class="text-xs text-gray-500 dark:text-gray-400">Rolling 30d, contracts with an owner team</p>
        </div>
        {% if at_risk %}
        <ul class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for c in at_risk %}
          <li>
            <a href="/ui/contracts/{{ c.contract_id }}" class="flex items-center justify-between gap-2 px-4 py-3 text-sm transition hover:bg-gray-50 dark:hover:bg-gray-800/50">
              <div class="min-w-0">
                <p class="truncate font-medium text-gray-900 dark:text-white">{{ c.title }}</p>
                <p class="truncate text-xs text-gray-500">{{ c.owner_team }}</p>
              </div>
              <div class="flex-shrink-0 text-right">
                <p class="font-semibold tabular-nums {% if c.pass_rate < 70 %}text-rose-600 dark:text-rose-400{% elif c.pass_rate < 90 %}text-amber-600 dark:text-amber-400{% else %}text-emerald-600 dark:text-emerald-400{% endif %}">{{ c.pass_rate }}%</p>
                <p class="text-xs text-gray-400">{{ c.total_runs }} runs</p>
              </div>
            </a>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="px-4 py-8 text-center text-sm text-gray-500">No contracts with runs in the last 30 days.</p>
        {% endif %}
      </div>

      <div class="card overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <div class="border-b border-gray-100 px-4 py-3 dark:border-gray-700">
          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Recent validation failures</h3>
          <p class="text-xs text-gray-500 dark:text-gray-400">Failed or error runs (30d)</p>
        </div>
        {% if recent_failures %}
        <ul class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for f in recent_failures %}
          <li class="flex items-start gap-3 px-4 py-3 text-sm">
            {{ icon("x-circle", "h-5 w-5 flex-shrink-0 text-rose-500 mt-0.5") }}
            <div class="min-w-0 flex-1">
              <a href="/ui/contracts/{{ f.contract_id }}" class="font-medium text-indigo-600 hover:underline dark:text-indigo-400">{{ f.title }}</a>
              <p class="text-xs text-gray-500">{{ f.team or "—" }} · {{ f.status }} · {{ f.when }}</p>
            </div>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="px-4 py-8 text-center text-sm text-gray-500">No failures in the last 30 days.</p>
        {% endif %}
      </div>

      {% if not has_any_runs %}
      <div class="rounded-xl border border-indigo-200 bg-indigo-50/50 p-4 text-sm text-indigo-950 dark:border-indigo-800 dark:bg-indigo-950/30 dark:text-indigo-100">
        <p class="font-medium">No validation activity yet</p>
        <p class="mt-1 text-indigo-900/80 dark:text-indigo-200/80">Trigger runs from CI, the CLI, or <a href="/ui/schedules" class="font-medium underline">schedules</a> to populate compliance metrics.</p>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}