{# Single unified scan form. Save (project / region / dbt-only default)
   and run a scan on the chosen lookback in one submit - the only button
   is "Run scan". The page also surfaces the latest stats strip, an ADC
   pill, scan history, and quick links to the dashboard / settings. #}
{% extends "layout.html" %}

{% block content %}
<style>
  /* Running-state styling for the unified scan form. Tailwind's
     ``disabled:*`` variants aren't in this package's precompiled CSS,
     so we hand-roll the visuals. The HTML ``disabled`` attribute is what
     actually blocks interaction; the rules below just make it look right.

     Inputs/selects get a muted slate background (looks "locked"); the
     submit button keeps its brand background and only dims opacity, so
     the spinner card is still visible against the white form surface. */
  @keyframes audit-spin { to { transform: rotate(360deg); } }
  .audit-spin { animation: audit-spin 0.8s linear infinite; }
  .audit-scan-form input:disabled,
  .audit-scan-form select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: rgb(241 245 249);
  }
  .dark .audit-scan-form input:disabled,
  .dark .audit-scan-form select:disabled {
    background-color: rgb(15 23 42);
  }
  .audit-scan-form button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
  .audit-scan-form-locked-label {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .audit-scan-form-grid {
    align-items: stretch;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-scan-fields,
  .audit-query-preview {
    min-width: 0;
    width: 100%;
  }

  .audit-query-preview {
    position: relative;
  }

  /* The code box height is driven by JS (see inline script after the
     form) so it tracks the LEFT scan form column's height precisely.
     Pure-CSS attempts to do this with flex / position:absolute either
     left a gap under the SQL or hid the SQL inside a correctly-sized
     box - the deeply-nested ``<pre>``'s intrinsic content cascade
     turned out to be hard to corral with flex alone in every browser
     SQL render path. The script is tiny + idempotent + listens for
     resize so the height stays in sync when the user adjusts the
     viewport. */

  details.audit-query-preview[open] .audit-query-preview-body {
    display: block;
  }

  .audit-query-preview-code-wrapper {
    position: relative;
  }

  .audit-query-copy-button {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ef;
    color: #334155;
    display: inline-flex;
    gap: 0.35rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0 0.6rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 2;
  }

  /* The code box has a default height as a CSS fallback (in case the
     JS height-sync below doesn't run) but its actual height is set by
     the inline script at the bottom of the form to match the left
     form column. ``overflow-y: auto`` makes the SQL scroll when the
     content is taller than the (form-matched) box height. */
  .audit-query-preview-code {
    height: 18rem;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .audit-query-preview-code pre {
    margin: 0;
    min-width: max-content;
  }

  .audit-query-preview-code::-webkit-scrollbar {
    height: 12px;
    width: 12px;
  }

  .audit-query-preview-code::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid #fff;
  }

  .audit-query-preview-code::-webkit-scrollbar-track {
    background: #f8fafc;
  }

  @media (min-width: 1280px) {
    .audit-scan-form-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
</style>

<section class="ui-shell">
  <div class="flex items-center justify-between gap-4">
    <h1 class="ui-page-title mt-0">Configuration</h1>
    <span class="ui-pill {% if adc_state.ok %}ui-pill-success{% else %}ui-pill-warning{% endif %}">
      {{ adc_state.label }}
    </span>
  </div>

  {# Project / Region surfaced in the global header strip; subtitle removed
     to avoid repeating the same orientation context on every page. #}

  <div class="mt-4 flex flex-wrap gap-6 text-sm">
    <div>
      <span class="text-slate-400 dark:text-slate-500">Last scan:</span>
      <span class="ml-1 text-slate-600 dark:text-slate-300">{{ cache_stats.last_scan_at | timeago }}</span>
    </div>
  </div>

  <div class="mt-4 flex flex-wrap items-center gap-4">
    {% if has_scan_data %}
      <a href="/dashboard" class="ui-btn-primary transition-colors">View dashboard</a>
    {% endif %}
    <a href="/admin/settings" class="ui-btn-secondary transition-colors">Settings</a>
    {% if active_principal %}
      <span class="text-sm text-slate-400 dark:text-slate-500">
        Signed in as <code class="font-mono text-slate-600 dark:text-slate-300">{{ active_principal }}</code>
      </span>
    {% endif %}
  </div>

  {# Auto-refresh while a scan is in flight so the user sees the
     running → succeeded transition without having to reload manually.
     ``scan_in_progress`` is set by the route based on the most-recent
     ScanRun row's status; it drives both the meta refresh AND the
     form's disabled state below. #}
  {% if scan_in_progress %}
    <meta http-equiv="refresh" content="5">
  {% endif %}

  {% if scan_in_progress %}
    {# Spec 151 polish - replace the static "Scan started - running in
       the background" banner with a 4-stage progress bar driven by
       ``scan_current_phase``. Phases are sequential; once we enter
       phase N, phases 1..N are marked complete (green). The active
       phase pulses. Failed scans land back here with status='failed'
       and current_phase set to whichever stage was last entered. #}
    {% set phases = [
      ('fetching',        'Fetching from BigQuery',  'INFORMATION_SCHEMA jobs / columns / storage'),
      ('persisting',      'Persisting jobs',         'Writing rows to the local SQLite cache'),
      ('detection',       'Running detection',       'Cost / performance / SQL-rewrite rules'),
      ('recommendations', 'Building recommendations','Table-level partition + cluster + BigQuery second opinion'),
    ] %}
    {% set _phase_keys = phases | map(attribute=0) | list %}
    {% set _active_index = _phase_keys.index(scan_current_phase) if scan_current_phase in _phase_keys else -1 %}

    {# Linear progress bar - one filled track that grows left→right as
       phases complete, with 4 numbered step markers anchored on top.
       Active phase pulses; completed phases turn green. Labels live
       under each marker. #}
    {% set _completed = (_active_index + 1) if _active_index >= 0 else 0 %}
    {% set _total = phases | length %}
    {% set _pct = (_completed / _total * 100) | round(0, 'floor') %}
    <div class="mt-4 border border-brand-300 dark:border-brand-500/30 bg-brand-50/60 dark:bg-brand-950/30 px-6 py-5">
      <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
          <p class="font-semibold text-brand-700 dark:text-brand-200">Scan in progress</p>
          <p class="mt-1 text-sm text-brand-700/70 dark:text-brand-300/70">Page auto-refreshes every 5 seconds.</p>
        </div>
        <span class="inline-flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300">
          <svg class="h-4 w-4 audit-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
          </svg>
          <span class="font-medium">{{ scan_current_phase | replace('_', ' ') | title if scan_current_phase else 'Starting' }}</span>
          <span class="text-sm text-brand-600/70 dark:text-brand-300/70">· {{ _completed }} / {{ _total }}</span>
        </span>
      </div>

      <div class="relative">
        {# Track #}
        <div class="absolute left-0 right-0 top-3 h-1 bg-slate-200 dark:bg-slate-800"></div>
        {# Filled portion - proportional to completed stages. #}
        <div class="absolute left-0 top-3 h-1 bg-emerald-500 dark:bg-emerald-400 transition-all duration-500"
             style="width: {{ _pct }}%;"></div>

        {# Step markers anchored on the track. #}
        <ol class="relative grid grid-cols-4 gap-3">
          {% for key, title, sub in phases %}
            {% set i = loop.index0 %}
            {% set is_done = _active_index > i %}
            {% set is_active = _active_index == i %}
            <li class="flex flex-col items-center text-center">
              <span class="relative z-10 flex items-center justify-center w-7 h-7 rounded-full ring-4 transition-colors
                {% if is_done %}
                  bg-emerald-500 dark:bg-emerald-400 ring-brand-50 dark:ring-brand-950 text-white
                {% elif is_active %}
                  bg-brand-500 dark:bg-brand-400 ring-brand-50 dark:ring-brand-950 text-white
                {% else %}
                  bg-white dark:bg-slate-900 ring-brand-50 dark:ring-brand-950 text-slate-400 dark:text-slate-500 border border-slate-300 dark:border-slate-700
                {% endif %}">
                {% if is_done %}
                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                {% elif is_active %}
                  <span class="absolute inset-0 rounded-full bg-brand-400 dark:bg-brand-300 animate-ping opacity-60"></span>
                  <span class="relative text-sm font-semibold">{{ loop.index }}</span>
                {% else %}
                  <span class="text-sm font-semibold">{{ loop.index }}</span>
                {% endif %}
              </span>
              <p class="mt-3 text-sm font-medium
                {% if is_done %}text-emerald-700 dark:text-emerald-300
                {% elif is_active %}text-brand-700 dark:text-brand-200
                {% else %}text-slate-500 dark:text-slate-400{% endif %}">
                {{ title }}
              </p>
              <p class="mt-0.5 text-sm
                {% if is_active %}text-slate-600 dark:text-slate-400
                {% else %}text-slate-400 dark:text-slate-500{% endif %}">
                {{ sub }}
              </p>
            </li>
          {% endfor %}
        </ol>
      </div>
    </div>
  {% elif scan_banner %}
    <div class="mt-4 border px-4 py-3 text-sm
      {% if scan_banner.level == 'success' %}
        border-emerald-300 dark:border-emerald-500/30 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300
      {% elif scan_banner.level == 'warning' %}
        border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300
      {% elif scan_banner.level == 'error' %}
        border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 text-red-700 dark:text-red-300
      {% else %}
        border-slate-300 dark:border-slate-500/30 bg-slate-50 dark:bg-slate-950/40 text-slate-700 dark:text-slate-300
      {% endif %}">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p class="font-semibold">{{ scan_banner.headline }}</p>
          {% if scan_banner.detail %}
            <p class="mt-1 text-sm whitespace-pre-line">{{ scan_banner.detail }}</p>
          {% endif %}
        </div>
        {% if scan_banner.level == 'success' and has_scan_data %}
          <a href="/dashboard" class="ui-btn-primary text-sm whitespace-nowrap">View dashboard</a>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if errors and errors.get('_general') %}
    <div class="mt-4 border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-3 text-sm text-red-600 dark:text-red-300 whitespace-pre-line">
      {{ errors['_general'] }}
    </div>
  {% endif %}

  {# ── Unified Run-scan form: saves config + kicks off a scan ── #}
  <div class="mt-8 ui-pane">
    <form method="post" action="/admin/configurations" class="ui-form-scope audit-scan-form space-y-5">
      <div class="audit-scan-form-grid">
        <div class="audit-scan-fields space-y-5">
          {# Spec 150 - optional billing project. Shown FIRST to match the
             onboarding-wizard order (Step 2 Billing comes before Step 3
             Audit Target). When set to a project different from
             gcp_project_id, BigQuery scan jobs run in (and are billed to)
             this project; SQL still reads JOBS_BY_PROJECT of the analysed
             project. Leave blank to bill the analysed project. #}
          <div>
            <label for="billing_project_id" class="block text-sm font-medium text-slate-600 dark:text-slate-300">
              Billing project <span class="text-slate-400 dark:text-slate-500 font-normal">(optional)</span>
            </label>
            <input
              type="text"
              name="billing_project_id"
              id="billing_project_id"
              autocomplete="off"
              list="gcp-project-options"
              value="{{ form_data.billing_project_id if form_data else (config.billing_project_id or '') }}"
              pattern="^[a-z][-a-z0-9]{4,28}[a-z0-9]$"
              placeholder="leave blank to bill the analysed project"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            />
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
              When set to a different project than the analysed project below, governor-audit's BigQuery scans run in (and are billed to) this project.
              Caller needs <code class="font-mono">bigquery.jobs.create</code> on this project and
              <code class="font-mono">bigquery.resourceViewer</code> (or equivalent JOBS_BY_PROJECT read) on the analysed project.
            </p>
            {% if errors and errors.get('billing_project_id') %}
              <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['billing_project_id'] }}</p>
            {% endif %}
          </div>

          <div>
            <label for="gcp_project_id" class="block text-sm font-medium text-slate-600 dark:text-slate-300">
              GCP Project
              {% if gcp_projects %}
                <span class="ml-2 text-sm font-normal text-slate-400 dark:text-slate-500">{{ gcp_projects | length }} accessible</span>
              {% endif %}
            </label>
            <input
              type="text"
              name="gcp_project_id"
              id="gcp_project_id"
              required
              autocomplete="off"
              list="gcp-project-options"
              value="{{ form_data.gcp_project_id if form_data else config.gcp_project_id }}"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            />
            {% if gcp_projects %}
              <datalist id="gcp-project-options">
                {% for project in gcp_projects %}
                  <option value="{{ project.project_id }}">{% if project.display_name %}{{ project.display_name }} · {% endif %}{{ project.project_id }}</option>
                {% endfor %}
              </datalist>
            {% endif %}
            {% if errors and errors.get('gcp_project_id') %}
              <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['gcp_project_id'] }}</p>
            {% endif %}
          </div>

          <div>
            <label for="bigquery_region" class="block text-sm font-medium text-slate-600 dark:text-slate-300">BigQuery Region</label>
            <input
              type="text"
              name="bigquery_region"
              id="bigquery_region"
              required
              autocomplete="off"
              list="bq-region-options"
              value="{{ form_data.bigquery_region if form_data else config.bigquery_region }}"
              placeholder="Type to filter…"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            />
            {# Datalist behaves as a typeahead in every modern browser:
               the user sees the full list on focus, and typing narrows it. #}
            <datalist id="bq-region-options">
              {# Multi-regions #}
              <option value="us">us · multi-region (United States)</option>
              <option value="eu">eu · multi-region (European Union)</option>
              {# US #}
              <option value="us-central1">us-central1 · Iowa</option>
              <option value="us-east1">us-east1 · South Carolina</option>
              <option value="us-east4">us-east4 · Northern Virginia</option>
              <option value="us-east5">us-east5 · Columbus</option>
              <option value="us-south1">us-south1 · Dallas</option>
              <option value="us-west1">us-west1 · Oregon</option>
              <option value="us-west2">us-west2 · Los Angeles</option>
              <option value="us-west3">us-west3 · Salt Lake City</option>
              <option value="us-west4">us-west4 · Las Vegas</option>
              {# North + South America #}
              <option value="northamerica-northeast1">northamerica-northeast1 · Montréal</option>
              <option value="northamerica-northeast2">northamerica-northeast2 · Toronto</option>
              <option value="northamerica-south1">northamerica-south1 · Querétaro</option>
              <option value="southamerica-east1">southamerica-east1 · São Paulo</option>
              <option value="southamerica-west1">southamerica-west1 · Santiago</option>
              {# Europe #}
              <option value="europe-central2">europe-central2 · Warsaw</option>
              <option value="europe-north1">europe-north1 · Finland</option>
              <option value="europe-north2">europe-north2 · Stockholm</option>
              <option value="europe-southwest1">europe-southwest1 · Madrid</option>
              <option value="europe-west1">europe-west1 · Belgium</option>
              <option value="europe-west2">europe-west2 · London</option>
              <option value="europe-west3">europe-west3 · Frankfurt</option>
              <option value="europe-west4">europe-west4 · Netherlands</option>
              <option value="europe-west6">europe-west6 · Zürich</option>
              <option value="europe-west8">europe-west8 · Milan</option>
              <option value="europe-west9">europe-west9 · Paris</option>
              <option value="europe-west10">europe-west10 · Berlin</option>
              <option value="europe-west12">europe-west12 · Turin</option>
              {# Middle East + Africa #}
              <option value="me-central1">me-central1 · Doha</option>
              <option value="me-central2">me-central2 · Dammam</option>
              <option value="me-west1">me-west1 · Tel Aviv</option>
              <option value="africa-south1">africa-south1 · Johannesburg</option>
              {# Asia #}
              <option value="asia-east1">asia-east1 · Taiwan</option>
              <option value="asia-east2">asia-east2 · Hong Kong</option>
              <option value="asia-northeast1">asia-northeast1 · Tokyo</option>
              <option value="asia-northeast2">asia-northeast2 · Osaka</option>
              <option value="asia-northeast3">asia-northeast3 · Seoul</option>
              <option value="asia-south1">asia-south1 · Mumbai</option>
              <option value="asia-south2">asia-south2 · Delhi</option>
              <option value="asia-southeast1">asia-southeast1 · Singapore</option>
              <option value="asia-southeast2">asia-southeast2 · Jakarta</option>
              {# Oceania #}
              <option value="australia-southeast1">australia-southeast1 · Sydney</option>
              <option value="australia-southeast2">australia-southeast2 · Melbourne</option>
            </datalist>
            {% if errors and errors.get('bigquery_region') %}
              <p class="mt-1 text-sm text-red-500 dark:text-red-400">{{ errors['bigquery_region'] }}</p>
            {% endif %}
          </div>

          <div>
            <label for="scan-days" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Period</label>
            <select
              name="days"
              id="scan-days"
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
            >
              {% for d in allowed_scan_days %}
                <option value="{{ d }}" {% if d == default_scan_days %}selected{% endif %}>
                  {% if d == 1 %}Last 24 hours
                  {% elif d == 7 %}Last 7 days
                  {% elif d == 30 %}Last 30 days
                  {% elif d == 180 %}Last 180 days (max)
                  {% else %}Last {{ d }} days{% endif %}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="flex items-start gap-2">
            <input
              type="checkbox"
              name="dbt_only_default"
              id="dbt_only_default"
              {% if (form_data.dbt_only_default if form_data else config.scan_defaults.dbt_only) %}checked{% endif %}
              {% if scan_in_progress %}disabled{% endif %}
              class="mt-0.5"
            />
            <label for="dbt_only_default" class="text-sm text-slate-700 dark:text-slate-300 {% if scan_in_progress %}audit-scan-form-locked-label{% endif %}">
              Default to dbt-only scans
            </label>
          </div>
        </div>

        <details class="audit-query-preview border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-4" open>
          <summary class="cursor-pointer select-none text-sm font-semibold text-slate-700 dark:text-slate-200">
            BigQuery query preview
          </summary>
          <div class="audit-query-preview-body">
            <div class="mt-3 flex gap-2 border-b border-slate-200 dark:border-slate-800 text-sm">
              <button type="button" data-query-tab="jobs" class="border-b-2 border-brand-500 px-2 pb-2 font-semibold text-brand-600 dark:text-brand-300">Jobs</button>
              <button type="button" data-query-tab="columns" class="border-b-2 border-transparent px-2 pb-2 font-semibold text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Columns</button>
              <button type="button" data-query-tab="storage" class="border-b-2 border-transparent px-2 pb-2 font-semibold text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Storage</button>
              <button type="button" data-query-tab="recommendations" class="border-b-2 border-transparent px-2 pb-2 font-semibold text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Recommendations</button>
            </div>
            <div class="audit-query-preview-code-wrapper mt-3">
              <button type="button" id="copy-scan-query" class="audit-query-copy-button text-sm hover:border-brand-500 hover:text-brand-500" title="Copy SQL" aria-label="Copy SQL">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8 7.5A2.5 2.5 0 0110.5 5h6A2.5 2.5 0 0119 7.5v9A2.5 2.5 0 0116.5 19h-6A2.5 2.5 0 018 16.5v-9z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 15.5H5.5A2.5 2.5 0 013 13V4.5A2.5 2.5 0 015.5 2h6A2.5 2.5 0 0114 4.5V5" />
                </svg>
                <span id="copy-scan-query-label">Copy</span>
              </button>
              <div class="audit-query-preview-code border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950">
                <pre class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-100"><code id="scan-query-preview">{{ scan_query_preview.sql }}</code></pre>
              </div>
            </div>
          </div>
        </details>
      </div>

      <div class="flex items-center gap-3 pt-1">
        {% if scan_in_progress %}
          <button type="submit" class="ui-btn-primary transition-colors inline-flex items-center gap-2" disabled aria-busy="true">
            <svg class="h-4 w-4 audit-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <span>Scanning…</span>
          </button>
        {% else %}
          <button type="submit" class="ui-btn-primary transition-colors"
                  onclick="this.disabled=true; this.innerText='Scanning…'; this.form.submit();">
            Run scan
          </button>
        {% endif %}
      </div>
    </form>
  </div>

  <script>
    /* Keep the BigQuery query preview's code box visually aligned with
       the bottom of the scan form on the left. CSS-only attempts to do
       this (flex chains, position:absolute, etc.) either left a gap
       under the SQL or hid the SQL inside a correctly-sized box - the
       <pre>'s intrinsic content cascade was hard to corral in every
       browser. This script measures the form column and applies the
       remaining height to the code box explicitly. Re-runs on resize
       so the alignment survives viewport changes. */
    (function() {
      function syncQueryPreviewHeight() {
        var fields = document.querySelector('.audit-scan-fields');
        var preview = document.querySelector('.audit-query-preview');
        var code = document.querySelector('.audit-query-preview-code');
        if (!fields || !preview || !code) return;

        // If the user collapsed the <details>, leave the height alone -
        // an explicit height would force the closed card to expand.
        if (!preview.hasAttribute('open')) {
          code.style.height = '';
          return;
        }

        var fieldsRect = fields.getBoundingClientRect();
        var codeRect = code.getBoundingClientRect();
        // Available height = distance from the code box's top edge to
        // the bottom of the form column (whichever ends lower / higher
        // depending on viewport). Subtract a small inner padding so
        // the bordered box's bottom edge lines up with the form's
        // last toggle, not the column's geometric bottom.
        var availablePx = fieldsRect.bottom - codeRect.top;
        if (availablePx < 120) availablePx = 120;  // never collapse to nothing
        code.style.height = availablePx + 'px';
      }

      syncQueryPreviewHeight();
      window.addEventListener('resize', syncQueryPreviewHeight);
      // <details> toggle event so closing/opening the card re-syncs.
      var preview = document.querySelector('.audit-query-preview');
      if (preview) preview.addEventListener('toggle', syncQueryPreviewHeight);

      var projectInput = document.getElementById('gcp_project_id');
      var regionInput = document.getElementById('bigquery_region');
      var daysInput = document.getElementById('scan-days');
      var dbtOnlyInput = document.getElementById('dbt_only_default');
      var queryEl = document.getElementById('scan-query-preview');
      var copyButton = document.getElementById('copy-scan-query');
      var copyLabel = document.getElementById('copy-scan-query-label');
      var tabButtons = Array.prototype.slice.call(document.querySelectorAll('[data-query-tab]'));
      var activeTab = 'jobs';
      if (!projectInput || !regionInput || !daysInput || !dbtOnlyInput || !queryEl) return;

      function isoDaysAgo(days) {
        var date = new Date();
        date.setUTCDate(date.getUTCDate() - days);
        return date.toISOString();
      }

      function renderJobsSql(projectId, region, dbtOnly, windowStart, windowEnd) {
        var whereExtra = dbtOnly ? "\n          AND STARTS_WITH(query, @dbt_prefix)" : "";
        return [
          "SELECT",
          "    job_id,",
          "    user_email,",
          "    query,",
          "    creation_time,",
          "    start_time,",
          "    end_time,",
          "    total_slot_ms,",
          "    total_bytes_processed,",
          "    total_bytes_billed,",
          "    destination_table,",
          "    referenced_tables,",
          "    statement_type,",
          "    cache_hit,",
          "    error_result,",
          "    state,",
          "    total_modified_partitions,",
          "    labels,",
          "    query_info.performance_insights AS performance_insights,",
          "    query_info.query_hashes AS query_hashes,",
          "    timeline",
          "FROM `" + projectId + ".region-" + region + "`.INFORMATION_SCHEMA.JOBS_BY_PROJECT",
          "WHERE creation_time BETWEEN TIMESTAMP(\"" + windowStart + "\") AND TIMESTAMP(\"" + windowEnd + "\")",
          "  AND job_type = 'QUERY'",
          "  AND state = 'DONE'",
          "  AND statement_type IS NOT NULL",
          "  AND statement_type != 'SCRIPT'",
          "  AND error_result IS NULL" + whereExtra,
          "ORDER BY creation_time DESC"
        ].join("\n");
      }

      function renderColumnsSql(projectId, region) {
        return [
          "SELECT",
          "    table_schema AS dataset_name,",
          "    table_name,",
          "    column_name,",
          "    data_type,",
          "    ordinal_position",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.COLUMNS",
          "WHERE NOT STARTS_WITH(table_schema, '_')"
        ].join("\n");
      }

      function renderStorageSql(projectId, region) {
        var tableStorage = [
          "SELECT",
          "    project_id,",
          "    table_schema,",
          "    table_name,",
          "    creation_time,",
          "    table_type,",
          "    total_rows,",
          "    total_partitions,",
          "    total_logical_bytes,",
          "    active_logical_bytes,",
          "    long_term_logical_bytes,",
          "    total_physical_bytes,",
          "    active_physical_bytes,",
          "    long_term_physical_bytes,",
          "    time_travel_physical_bytes,",
          "    fail_safe_physical_bytes",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.TABLE_STORAGE",
          "WHERE deleted = false",
          "  AND table_type IN ('BASE TABLE', 'MATERIALIZED VIEW')"
        ].join("\n");
        var schemataOptions = [
          "SELECT",
          "    schema_name,",
          "    option_value AS billing_model",
          "FROM `" + projectId + "`.`region-" + region + "`.INFORMATION_SCHEMA.SCHEMATA_OPTIONS",
          "WHERE option_name = 'storage_billing_model'"
        ].join("\n");
        return tableStorage + "\n\n-- Plus a per-dataset billing-model lookup:\n\n" + schemataOptions;
      }

      function renderRecommendationsSql(projectId, region) {
        // Spec 151 US2 - BigQuery's partition/cluster recommender
        // "second opinion". Requires roles/recommender.bigqueryPartitionClusterViewer.
        // Skipped silently when the grant is missing.
        var recommendations = [
          "SELECT",
          "    recommendation_id,",
          "    target_resources[SAFE_OFFSET(0)] AS target_resource,",
          "    description,",
          "    primary_impact,",
          "    state,",
          "    last_updated_time,",
          "    associated_insights",
          "FROM `" + projectId + ".region-" + region + "`.INFORMATION_SCHEMA.RECOMMENDATIONS",
          "WHERE recommender = 'google.bigquery.table.PartitionClusterRecommender'",
          "  AND state = 'ACTIVE'"
        ].join("\n");
        var insights = [
          "SELECT",
          "    insight_id,",
          "    target_resources[SAFE_OFFSET(0)] AS target_resource,",
          "    insight_subtype,",
          "    description,",
          "    category,",
          "    severity,",
          "    state,",
          "    last_updated_time",
          "FROM `" + projectId + ".region-" + region + "`.INFORMATION_SCHEMA.INSIGHTS",
          "WHERE category = 'PERFORMANCE'"
        ].join("\n");
        return (
          "-- BigQuery's own recommender (second-opinion panel on the\n"
          + "-- Partition & Cluster page). Issued only when the principal\n"
          + "-- running the scan has roles/recommender.bigqueryPartitionClusterViewer.\n"
          + "-- Missing IAM grant -> silently skipped; the audit's own analysis still ships.\n\n"
          + recommendations
          + "\n\n-- Plus paired insights for the same target tables:\n\n"
          + insights
        );
      }

      function setActiveTab(tab) {
        activeTab = tab;
        tabButtons.forEach(function(button) {
          var isActive = button.getAttribute('data-query-tab') === tab;
          button.classList.toggle('border-brand-500', isActive);
          button.classList.toggle('text-brand-600', isActive);
          button.classList.toggle('dark:text-brand-300', isActive);
          button.classList.toggle('border-transparent', !isActive);
          button.classList.toggle('text-slate-500', !isActive);
          button.classList.toggle('dark:text-slate-400', !isActive);
        });
        refreshPreview();
      }

      function refreshPreview() {
        var days = parseInt(daysInput.value || "30", 10);
        var projectId = (projectInput.value || "{{ config.gcp_project_id }}").trim();
        var region = (regionInput.value || "{{ config.bigquery_region }}").trim();
        var dbtOnly = dbtOnlyInput.checked;
        var windowStart = isoDaysAgo(days);
        var windowEnd = new Date().toISOString();
        if (activeTab === 'columns') {
          queryEl.textContent = renderColumnsSql(projectId, region);
        } else if (activeTab === 'storage') {
          queryEl.textContent = renderStorageSql(projectId, region);
        } else if (activeTab === 'recommendations') {
          queryEl.textContent = renderRecommendationsSql(projectId, region);
        } else {
          queryEl.textContent = renderJobsSql(projectId, region, dbtOnly, windowStart, windowEnd);
        }
      }

      tabButtons.forEach(function(button) {
        button.addEventListener('click', function() {
          setActiveTab(button.getAttribute('data-query-tab') || 'jobs');
        });
      });
      [projectInput, regionInput, daysInput, dbtOnlyInput].forEach(function(input) {
        input.addEventListener('input', refreshPreview);
        input.addEventListener('change', refreshPreview);
      });
      function writeClipboard(text, done) {
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(text).then(done).catch(function() {
            fallbackCopy(text, done);
          });
          return;
        }
        fallbackCopy(text, done);
      }

      function fallbackCopy(text, done) {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.setAttribute('readonly', '');
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        document.body.appendChild(textarea);
        textarea.select();
        try {
          document.execCommand('copy');
          done();
        } finally {
          document.body.removeChild(textarea);
        }
      }

      if (copyButton) {
        copyButton.addEventListener('click', function() {
          writeClipboard(queryEl.textContent || "", function() {
            if (copyLabel) copyLabel.textContent = "Copied";
            window.setTimeout(function() {
              if (copyLabel) copyLabel.textContent = "Copy";
            }, 1200);
          });
        });
      }
      refreshPreview();
    })();
  </script>

  {# ── Scan history ── #}
  {% from "components/_section_title.html" import section_title %}
  <div class="mt-8 ui-pane">
    <div class="mb-4">
      {{ section_title(
           "Scan history",
           description="Every scan run against this configuration. Each row shows the lookback window queried and the number of BigQuery jobs ingested.",
           aside=((scans | length) ~ " most recent")
      ) }}
    </div>
    {% if scans %}
    <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">Started</th>
            <th class="ui-table-th ui-table-th-left">Status</th>
            <th class="ui-table-th ui-table-th-left">Project</th>
            <th class="ui-table-th ui-table-th-left">Region</th>
            <th class="ui-table-th ui-table-th-right">Lookback</th>
            <th class="ui-table-th ui-table-th-right">Jobs</th>
            <th class="ui-table-th ui-table-th-left">dbt-only</th>
          </tr>
        </thead>
        <tbody>
          {% for scan in scans %}
          <tr class="ui-table-row">
            <td class="ui-table-td whitespace-nowrap font-mono text-sm">{{ scan.started_at.strftime("%Y-%m-%d %H:%M") }} UTC</td>
            <td class="ui-table-td">
              {% if scan.status == "succeeded" %}
                <span class="ui-pill ui-pill-success">succeeded</span>
              {% elif scan.status == "failed" %}
                <span class="ui-pill ui-pill-danger" title="{{ scan.failure_reason }}">failed</span>
              {% elif scan.status == "running" %}
                <span class="ui-pill ui-pill-blue">running</span>
              {% else %}
                <span class="ui-pill ui-pill-neutral">{{ scan.status }}</span>
              {% endif %}
            </td>
            <td class="ui-table-td font-mono text-sm" title="{{ scan.gcp_project_id }}">
              {{ scan.gcp_project_id or "-" }}
            </td>
            <td class="ui-table-td font-mono text-sm">
              {{ scan.bigquery_region or "-" }}
            </td>
            <td class="ui-table-td ui-table-td-right">{{ scan.requested_lookback_days }}d</td>
            <td class="ui-table-td ui-table-td-right font-mono">
              {% if scan.fetched_job_count is not none %}
                {{ "{:,}".format(scan.fetched_job_count) }}
              {% else %}
                <span class="text-slate-400 dark:text-slate-600">-</span>
              {% endif %}
            </td>
            <td class="ui-table-td">
              {% if scan.dbt_only_filter %}
                <span class="ui-pill ui-pill-success">on</span>
              {% else %}
                <span class="text-slate-400 dark:text-slate-600">-</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
      <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">
        No scans yet. Use the form above to run your first scan.
      </p>
    {% endif %}
  </div>

</section>
{% endblock %}