{# Audit Opportunity Explorer — read-only mirror of governor-web's
   /opportunities index. Same visual grammar (ui-shell → page-header →
   summary cards → filter chip strip → table → pagination) without
   PR/GitHub surface or live-refresh machinery. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">

  <div class="ui-page-header">
    <p class="ui-eyebrow">Recommendation Workspace</p>
    <h1 class="ui-page-title">Opportunities</h1>
    <p class="ui-page-subtitle">
      {{ "{:,}".format(summary.total) }} active opportunit{{ "ies" if summary.total != 1 else "y" }}
      across the cached scan window.
      <a href="/admin/settings/detection-rules" class="ml-2 text-brand-500 dark:text-brand-300 hover:underline">Toggle rules &rarr;</a>
    </p>
  </div>

  {# ── Summary cards ── #}
  <div class="mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Total opportunities</p>
      <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">{{ "{:,}".format(summary.total) }}</p>
    </div>
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Estimated savings</p>
      <p class="mt-2 ui-card-value text-emerald-600 dark:text-emerald-400">${{ "{:,.2f}".format(summary.total_savings) }}</p>
      <p class="ui-card-meta">summed across all active findings</p>
    </div>
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">Current cost</p>
      <p class="mt-2 ui-card-value text-slate-900 dark:text-slate-100">${{ "{:,.2f}".format(summary.total_cost) }}</p>
    </div>
    <div class="ui-stat-card p-6">
      <p class="ui-card-label">By severity</p>
      <div class="mt-2 flex flex-wrap gap-2 text-sm">
        {% if summary.by_bucket.critical %}<span class="ui-pill ui-pill-danger">{{ summary.by_bucket.critical }} critical</span>{% endif %}
        {% if summary.by_bucket.high     %}<span class="ui-pill ui-pill-warning">{{ summary.by_bucket.high }} high</span>{% endif %}
        {% if summary.by_bucket.medium   %}<span class="ui-pill ui-pill-neutral">{{ summary.by_bucket.medium }} medium</span>{% endif %}
        {% if summary.by_bucket.low      %}<span class="ui-pill ui-pill-neutral">{{ summary.by_bucket.low }} low</span>{% endif %}
      </div>
    </div>
  </div>

  {# ── Filter chip strip ── #}
  <div class="mt-6 ui-pane">
    <div class="flex flex-wrap items-baseline justify-between gap-3 mb-3">
      <h2 class="ui-section-title text-base">Filter</h2>
      {% if active_filters.rule_type or active_filters.severity or active_filters.dbt_only %}
        <a href="/opportunities" class="text-sm text-slate-500 dark:text-slate-400 hover:underline">Clear filters</a>
      {% endif %}
    </div>

    <div class="flex flex-wrap gap-2">
      {# All chip — clears rule_type but keeps severity/dbt #}
      {% set _other = [] %}
      {% if active_filters.severity %}{% set _ = _other.append('severity=' ~ active_filters.severity) %}{% endif %}
      {% if active_filters.dbt_only %}{% set _ = _other.append('dbt_only=1') %}{% endif %}
      {% set _all_qs = _other | join('&') %}
      <a href="/opportunities{{ ('?' ~ _all_qs) if _all_qs else '' }}"
         class="ui-pill {% if not active_filters.rule_type %}ui-pill-blue{% else %}ui-pill-neutral{% endif %}">
        All
        <span class="ml-1 opacity-70">{{ summary.total }}</span>
      </a>
      {% for chip in chips %}
        {% set _chip_qs = (_other + ['rule_type=' ~ chip.rule_type]) | join('&') %}
        <a href="/opportunities?{{ _chip_qs }}"
           class="ui-pill {% if active_filters.rule_type == chip.rule_type %}ui-pill-blue{% else %}ui-pill-neutral{% endif %} {% if not chip.count %}opacity-50{% endif %}"
           title="{{ chip.rule_type }}">
          {{ chip.label }}
          <span class="ml-1 opacity-70">{{ chip.count }}</span>
        </a>
      {% endfor %}
    </div>

    <div class="mt-3 flex flex-wrap gap-2">
      <span class="text-sm text-slate-500 dark:text-slate-400 self-center">Severity:</span>
      {% set _sev_other = [] %}
      {% if active_filters.rule_type %}{% set _ = _sev_other.append('rule_type=' ~ active_filters.rule_type) %}{% endif %}
      {% if active_filters.dbt_only %}{% set _ = _sev_other.append('dbt_only=1') %}{% endif %}
      {% for bucket in ['critical', 'high', 'medium', 'low'] %}
        {% set _bucket_qs = (_sev_other + ['severity=' ~ bucket]) | join('&') %}
        <a href="/opportunities?{{ _bucket_qs }}"
           class="ui-pill {% if active_filters.severity == bucket %}ui-pill-blue{% else %}ui-pill-neutral{% endif %}">
          {{ bucket | capitalize }}
          <span class="ml-1 opacity-70">{{ summary.by_bucket.get(bucket, 0) }}</span>
        </a>
      {% endfor %}

      <span class="ml-3 text-sm text-slate-500 dark:text-slate-400 self-center">dbt:</span>
      {% set _dbt_other = [] %}
      {% if active_filters.rule_type %}{% set _ = _dbt_other.append('rule_type=' ~ active_filters.rule_type) %}{% endif %}
      {% if active_filters.severity  %}{% set _ = _dbt_other.append('severity=' ~ active_filters.severity) %}{% endif %}
      {% set _dbt_qs = (_dbt_other + ['dbt_only=1']) | join('&') %}
      <a href="/opportunities?{{ _dbt_qs }}"
         class="ui-pill {% if active_filters.dbt_only %}ui-pill-blue{% else %}ui-pill-neutral{% endif %}">
        dbt-originated only
      </a>
    </div>
  </div>

  {# ── Table ── #}
  <div class="mt-6 ui-pane p-0">
    {% if rows %}
    <div class="ui-table-wrap">
      <table class="ui-table">
        <thead>
          <tr class="ui-table-head-row">
            <th class="ui-table-th ui-table-th-left">Rule</th>
            <th class="ui-table-th ui-table-th-left">Affected Table</th>
            <th class="ui-table-th ui-table-th-right">Severity</th>
            <th class="ui-table-th ui-table-th-right">Current Cost</th>
            <th class="ui-table-th ui-table-th-right">Estimated Savings</th>
            <th class="ui-table-th ui-table-th-right">Last Detected</th>
          </tr>
        </thead>
        <tbody>
        {% for row in rows %}
          <tr class="ui-table-row cursor-pointer"
              onclick="window.location='/opportunities/{{ row.id }}'">
            <td class="ui-table-td">
              <span class="ui-cell-title">{{ row.rule_label }}</span>
              {% if row.is_dbt_originated %}
                <span class="ml-1 ui-pill ui-pill-success">dbt</span>
              {% endif %}
            </td>
            <td class="ui-table-td max-w-[320px]" title="{{ row.affected_table }}">
              <span class="block truncate font-mono text-sm">{{ row.dbt_model_name or row.table_short }}</span>
            </td>
            <td class="ui-table-td ui-table-td-right">
              {% if row.severity_bucket == 'critical' %}
                <span class="ui-pill ui-pill-danger">{{ row.severity }}</span>
              {% elif row.severity_bucket == 'high' %}
                <span class="ui-pill ui-pill-warning">{{ row.severity }}</span>
              {% else %}
                <span class="ui-pill ui-pill-neutral">{{ row.severity }}</span>
              {% endif %}
            </td>
            <td class="ui-table-td ui-table-td-right font-mono text-sm">${{ "{:,.4f}".format(row.current_cost) }}</td>
            <td class="ui-table-td ui-table-td-right font-mono text-sm text-emerald-600 dark:text-emerald-400">${{ "{:,.4f}".format(row.expected_savings) }}</td>
            <td class="ui-table-td ui-table-td-right text-sm text-slate-500 dark:text-slate-400">
              {% if row.last_detected %}{{ row.last_detected.strftime("%Y-%m-%d") }}{% else %}—{% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

    {% if pagination.total_pages > 1 %}
    <div class="px-4 py-3 border-t border-slate-200 dark:border-slate-800 flex flex-wrap items-center justify-between gap-3 text-sm">
      <p class="text-slate-500 dark:text-slate-400">
        Showing {{ pagination.start_index }}–{{ pagination.end_index }} of {{ "{:,}".format(filtered_count) }}
      </p>
      <div class="flex items-center gap-1">
        {% set _page_other = [] %}
        {% if active_filters.rule_type %}{% set _ = _page_other.append('rule_type=' ~ active_filters.rule_type) %}{% endif %}
        {% if active_filters.severity  %}{% set _ = _page_other.append('severity=' ~ active_filters.severity) %}{% endif %}
        {% if active_filters.dbt_only  %}{% set _ = _page_other.append('dbt_only=1') %}{% endif %}
        {% if sort_by != 'savings' %}{% set _ = _page_other.append('sort=' ~ sort_by) %}{% endif %}
        {% if sort_dir != 'desc'   %}{% set _ = _page_other.append('direction=' ~ sort_dir) %}{% endif %}

        {% if pagination.has_prev %}
          {% set _prev_qs = (_page_other + ['page=' ~ (pagination.page - 1)]) | join('&') %}
          <a href="/opportunities?{{ _prev_qs }}" class="ui-btn-secondary text-sm">&larr; Prev</a>
        {% endif %}
        <span class="px-3 text-slate-600 dark:text-slate-300">Page {{ pagination.page }} / {{ pagination.total_pages }}</span>
        {% if pagination.has_next %}
          {% set _next_qs = (_page_other + ['page=' ~ (pagination.page + 1)]) | join('&') %}
          <a href="/opportunities?{{ _next_qs }}" class="ui-btn-secondary text-sm">Next &rarr;</a>
        {% endif %}
      </div>
    </div>
    {% endif %}
    {% else %}
      <p class="px-4 py-12 text-center text-sm text-slate-500 dark:text-slate-400">
        No opportunities match the current filters.
      </p>
    {% endif %}
  </div>

</section>
{% endblock %}