{# Spec 157 - Slot capacity page.

   Renders one ``SlotDemandSnapshot`` row per active config: a hero
   stat strip (avg / p95 / peak / idle), billing-mode context from
   reservation_id, and the demand-curve chart with horizontal reference
   lines for current + recommended reservation size.

   Empty state shows when no snapshot has been computed yet
   (typically a fresh install whose first scan hasn't run). Low-data
   state shows a soft caveat when fewer than 100 jobs went into the
   snapshot.
#}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <div class="flex items-center gap-2">
      <h1 class="ui-page-title">Slot Capacity</h1>
      <button type="button" id="reservations-info-toggle"
              class="text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
              aria-label="Show page description"
              aria-expanded="false"
              aria-controls="reservations-info-banner">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9"/>
          <line x1="12" y1="8" x2="12" y2="8.01" stroke-linecap="round"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M11 12h1v4h1"/>
        </svg>
      </button>
    </div>
    <p id="reservations-info-banner" class="hidden text-base text-slate-500 dark:text-slate-400 mt-2">
      Computes effective slot demand over the scan window, shows whether jobs ran on-demand or on reserved slots, and overlays the current BigQuery reservation size when it's discoverable.
    </p>
  </div>

  <script>
    (function () {
      var btn = document.getElementById('reservations-info-toggle');
      var banner = document.getElementById('reservations-info-banner');
      if (!btn || !banner) return;
      btn.addEventListener('click', function () {
        var nowHidden = banner.classList.toggle('hidden');
        btn.setAttribute('aria-expanded', String(!nowHidden));
        btn.setAttribute(
          'aria-label',
          nowHidden ? 'Show page description' : 'Hide page description'
        );
      });
    })();
  </script>

  {% if not snapshot %}
    <div class="mt-6 ui-pane text-center py-10">
      <svg class="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l3-3 4 4 5-5 6 6"/>
      </svg>
      <h2 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">No slot-capacity snapshot yet</h2>
      <p class="mt-2 max-w-md mx-auto text-sm text-slate-600 dark:text-slate-400">
        Run a scan to compute the slot demand curve for your workload. It will appear here once at least one scan has completed.
      </p>
      <a href="/scan" class="mt-4 inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-brand-600 dark:text-brand-300 border border-brand-300 dark:border-brand-700 hover:bg-brand-50 dark:hover:bg-brand-950/40">
        Go to scan
      </a>
    </div>
  {% else %}
    {% from "components/_stat_card.html" import stat_card %}
    {% from "components/_signal_chip.html" import signal_chip %}

    {% set posture = snapshot.billing_posture %}

    <div class="mt-6 ui-pane">
      <div class="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
        <div class="min-w-0">
          <p class="ui-card-label">Billing mode</p>
          <div class="mt-2 flex flex-wrap items-center gap-2">
            {{ signal_chip(posture.mode_label, color=posture.mode_color, title="Derived from JOBS_BY_PROJECT.reservation_id for successful jobs in the scan window.") }}
            {% if posture.reserved_jobs %}
              {{ signal_chip("reserved slots", color="brand") }}
            {% endif %}
            {% if posture.on_demand_jobs %}
              {{ signal_chip("on-demand", color="teal") }}
            {% endif %}
          </div>
          <p class="mt-3 max-w-3xl text-sm text-slate-600 dark:text-slate-400">
            {{ posture.mode_summary }}
          </p>
        </div>
        <div class="min-w-0 lg:max-w-xl">
          <p class="ui-card-label">Primary reservation</p>
          {% if posture.primary_reservation_id %}
            <p class="mt-2 font-mono text-sm text-slate-900 dark:text-slate-100 break-all">
              {{ posture.primary_reservation_id }}
            </p>
            {% if not posture.has_primary_reservation %}
              <p class="mt-2 text-xs text-amber-700 dark:text-amber-300">
                No reservation crossed the 80% primary threshold; this is the largest observed reservation.
              </p>
            {% endif %}
          {% else %}
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">None detected in this scan window.</p>
          {% endif %}
        </div>
      </div>

      <dl class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="min-w-0 border-t border-slate-200 pt-4 dark:border-slate-800">
          <dt class="ui-card-label">Successful jobs</dt>
          <dd class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ posture.total_jobs }}</dd>
        </div>
        <div class="min-w-0 border-t border-slate-200 pt-4 dark:border-slate-800">
          <dt class="ui-card-label">Reserved jobs</dt>
          <dd class="mt-2 text-2xl font-semibold text-brand-500 dark:text-brand-300">
            {{ "%.0f%%" | format(posture.reserved_pct * 100) }}
          </dd>
          <dd class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ posture.reserved_jobs }} jobs</dd>
        </div>
        <div class="min-w-0 border-t border-slate-200 pt-4 dark:border-slate-800">
          <dt class="ui-card-label">On-demand jobs</dt>
          <dd class="mt-2 text-2xl font-semibold text-teal-700 dark:text-teal-300">
            {{ "%.0f%%" | format(posture.on_demand_pct * 100) }}
          </dd>
          <dd class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ posture.on_demand_jobs }} jobs</dd>
        </div>
        <div class="min-w-0 border-t border-slate-200 pt-4 dark:border-slate-800">
          <dt class="ui-card-label">Reservations seen</dt>
          <dd class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ posture.reservation_count }}</dd>
          {% if posture.top_reservations %}
            <dd class="mt-1 text-sm text-slate-500 dark:text-slate-400">
              top: {{ "%.0f%%" | format(posture.top_reservations[0].pct * 100) }} of jobs
            </dd>
          {% else %}
            <dd class="mt-1 text-sm text-slate-500 dark:text-slate-400">on-demand only</dd>
          {% endif %}
        </div>
      </dl>

      {% if posture.primary_reservation_id and not snapshot.reservation_size_known %}
        <div class="mt-5 border-l-4 border-amber-400 bg-amber-50/60 p-4 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-200">
          Reservation usage is known from each job's <code class="font-mono">reservation_id</code>, but the committed slot count was not available. Grant <code class="font-mono">bigquery.reservations.get</code> to draw the current-capacity line on the chart.
        </div>
      {% endif %}
    </div>

    {# Hero stat strip. Slot stats are unitless effective slots, measured
       per-minute over the scan window from the user's own jobs. #}
    <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-4">
      {{ stat_card("Avg slots used", "%.1f" | format(snapshot.avg_slots),
                   tooltip="Average effective slot count across every 1-minute bucket of the scan window (zero-demand minutes included).") }}
      {{ stat_card("P95 slots used", "%.0f" | format(snapshot.p95_slots),
                   tooltip="95th percentile demand - the 'burst floor': 95% of minutes used at most this many slots.") }}
      {{ stat_card("Peak slots used", "%.0f" | format(snapshot.peak_slots),
                   tooltip="Maximum effective slot count in any 1-minute bucket of the scan window.") }}
      {{ stat_card("Idle fraction", ("%.0f%%" | format(snapshot.idle_fraction * 100)),
                   accent="amber",
                   meta=(("~" ~ (snapshot.idle_monthly_usd | format_usd) ~ "/month of committed capacity unused") if snapshot.idle_monthly_usd else None),
                   tooltip="Fraction of 1-minute buckets with zero effective slot usage. High values suggest a bursty workload that could be split between a smaller reservation and on-demand overflow. The dollar figure prices the committed reservation size at the regional Standard slot rate, scaled by the idle fraction.") }}
    </div>

    {% if snapshot.low_data %}
      <div class="mt-4 ui-pane border-amber-200 dark:border-amber-800 bg-amber-50/60 dark:bg-amber-950/30">
        <p class="text-sm text-amber-800 dark:text-amber-200">
          <strong>Low-data caveat:</strong> Only {{ snapshot.low_data_job_count }} jobs in the scan window contributed to this snapshot. Below ~100 jobs the demand curve is noisy; rerun with a longer window or wait for more activity before drawing conclusions.
        </p>
      </div>
    {% endif %}

    {# Recommendation card (spec 163) - the recommender's verdict with its
       dollar impact. The view-model fields (kind / target_slots /
       monthly_delta_usd / reasoning / apply_sql) existed since spec 157
       but were never rendered; this card is the page's actual product.
       Hidden behind show_recommendation (route kill-switch) until the
       recommender is validated on contended workloads. #}
    {% if snapshot.show_recommendation and snapshot.recommendation_kind %}
      {% set _kind = snapshot.recommendation_kind %}
      {% set _target = snapshot.recommendation_target_slots %}
      {% set _delta = snapshot.monthly_delta_usd %}
      {% set _headline = {
           "consider_reservation": ("Consider a " ~ ("{:,}".format(_target) if _target else "right-sized") ~ "-slot reservation"),
           "reduce": ("Reduce the reservation to " ~ ("{:,}".format(_target) if _target else "a smaller size") ~ " slots"),
           "upgrade": ("Increase the reservation to " ~ ("{:,}".format(_target) if _target else "a larger size") ~ " slots"),
           "split": ("Keep a " ~ ("{:,}".format(_target) if _target else "smaller") ~ "-slot floor and let bursts overflow to on-demand"),
           "no_change": "No change recommended",
         }.get(_kind, _kind | replace("_", " ") | capitalize) %}
      <div class="mt-6 ui-pane">
        {% from "components/_section_title.html" import section_title %}
        <div class="mb-3">
          {{ section_title("Recommendation") }}
        </div>
        <div class="flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between">
          <p class="text-lg font-semibold text-slate-900 dark:text-slate-100">{{ _headline }}</p>
          {% if _kind == "no_change" %}
            <p class="text-sm text-slate-500 dark:text-slate-400">current setup fits the observed demand</p>
          {% elif _delta is not none and _delta > 0 %}
            <p class="text-lg font-semibold text-emerald-600 dark:text-emerald-400">
              saves ~{{ _delta | format_usd }}/month
              <span class="text-sm font-normal text-slate-500 dark:text-slate-400">(~{{ snapshot.annual_delta_usd | format_usd }}/year)</span>
            </p>
          {% elif _delta is not none and _delta < 0 %}
            <p class="text-lg font-semibold text-rose-600 dark:text-rose-400">
              ~{{ (-_delta) | format_usd }}/month additional
              <span class="text-sm font-normal text-slate-500 dark:text-slate-400">(capacity, not waste - demand exceeds the current size)</span>
            </p>
          {% endif %}
        </div>

        {% if snapshot.reasoning %}
          <dl class="mt-4 grid gap-3 border-t border-slate-200 pt-4 text-sm dark:border-slate-800 sm:grid-cols-2">
            {% for _key, _label in [("current_state", "Current state"), ("observation", "Observation"), ("recommendation", "Recommendation"), ("expected_benefit", "Expected benefit")] %}
              {% if snapshot.reasoning.get(_key) %}
                <div class="min-w-0">
                  <dt class="ui-card-label">{{ _label }}</dt>
                  <dd class="mt-1 text-slate-700 dark:text-slate-300">{{ snapshot.reasoning[_key] }}</dd>
                </div>
              {% endif %}
            {% endfor %}
          </dl>
        {% endif %}

        {% if snapshot.caveats %}
          <div class="mt-4 border-l-4 border-amber-400 bg-amber-50/60 p-3 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-200">
            <ul class="list-disc list-inside space-y-1">
              {% for caveat in snapshot.caveats %}
                <li>{{ caveat }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if snapshot.apply_sql %}
          <details class="mt-4">
            <summary class="cursor-pointer text-sm font-medium text-brand-600 dark:text-brand-300">Apply / rollback SQL</summary>
            <div class="mt-3 space-y-3">
              <div>
                <div class="flex items-center justify-between">
                  <p class="ui-card-label">Apply</p>
                  <button type="button" class="text-xs font-medium text-brand-600 dark:text-brand-300"
                          onclick="auditCopyById(this, 'reservation-apply-sql')">
                    <span class="copy-label">Copy</span>
                  </button>
                </div>
                <pre id="reservation-apply-sql" class="mt-1 overflow-x-auto bg-slate-50 p-3 font-mono text-xs text-slate-800 dark:bg-slate-900 dark:text-slate-200">{{ snapshot.apply_sql }}</pre>
              </div>
              {% if snapshot.rollback_sql %}
                <div>
                  <div class="flex items-center justify-between">
                    <p class="ui-card-label">Rollback</p>
                    <button type="button" class="text-xs font-medium text-brand-600 dark:text-brand-300"
                            onclick="auditCopyById(this, 'reservation-rollback-sql')">
                      <span class="copy-label">Copy</span>
                    </button>
                  </div>
                  <pre id="reservation-rollback-sql" class="mt-1 overflow-x-auto bg-slate-50 p-3 font-mono text-xs text-slate-800 dark:bg-slate-900 dark:text-slate-200">{{ snapshot.rollback_sql }}</pre>
                </div>
              {% endif %}
            </div>
          </details>
        {% endif %}
      </div>
    {% endif %}

    {# Demand chart - measured effective slots over time, with a
       horizontal reference line for the current reservation size when
       it's known (discoverable via bigquery.reservations.get). #}
    <div class="mt-6 ui-pane">
      {% from "components/_section_title.html" import section_title %}
      <div class="mb-3">
        {{ section_title(
             "Slot demand over the scan window",
             description=("Per-minute effective slot usage, measured from your own jobs. Red line = current reservation size (when discoverable)" ~ ("; green dashed line = recommended size." if snapshot.show_recommendation else "."))
        ) }}
      </div>
      <div id="reservations-demand-chart"
           class="h-80 w-full"
           data-series='{{ snapshot.demand_series | tojson }}'
           data-current='{{ (snapshot.primary_reservation_size if snapshot.reservation_size_known else none) | tojson }}'
           data-recommended='{{ (snapshot.recommendation_target_slots if snapshot.show_recommendation and snapshot.recommendation_kind and snapshot.recommendation_kind != "no_change" else none) | tojson }}'>
      </div>
    </div>


    {# Scan-window meta - lets the user verify they're looking at the
       right snapshot when reservations change over time. #}
    <p class="mt-4 text-xs text-slate-500 dark:text-slate-400">
      Scan window: {{ snapshot.scan_window_start.strftime('%Y-%m-%d %H:%M UTC') }} → {{ snapshot.scan_window_end.strftime('%Y-%m-%d %H:%M UTC') }}
    </p>

    {# ECharts demand chart + copy-by-id helper. #}
    <script>
      (function () {
        if (!window.auditCopyById) {
          window.auditCopyById = function (btn, id) {
            var pre = document.getElementById(id);
            if (!pre) return;
            var text = pre.textContent || '';
            var label = btn.querySelector('.copy-label');
            var done = function () {
              if (!label) return;
              var original = label.textContent;
              label.textContent = 'Copied!';
              setTimeout(function () { label.textContent = original; }, 1500);
            };
            if (navigator.clipboard && navigator.clipboard.writeText) {
              navigator.clipboard.writeText(text).then(done).catch(function () {});
            }
          };
        }

        var el = document.getElementById('reservations-demand-chart');
        if (!el || typeof echarts === 'undefined') return;
        var raw = JSON.parse(el.getAttribute('data-series') || '[]');
        var currentRaw = JSON.parse(el.getAttribute('data-current') || 'null');
        var current = typeof currentRaw === 'number' ? currentRaw : 0;
        var recommendedRaw = JSON.parse(el.getAttribute('data-recommended') || 'null');
        var recommended = typeof recommendedRaw === 'number' ? recommendedRaw : 0;
        var points = raw.map(function (p) {
          return [p[0] * 1000, p[1]];
        });

        var isDark = document.documentElement.classList.contains('dark');
        var axisTextColor = isDark ? '#94a3b8' : '#475569';
        var axisLineColor = isDark ? '#334155' : '#e2e8f0';
        var splitColor = isDark ? '#1e293b' : '#f1f5f9';
        var brandColor = isDark ? '#60a5fa' : '#2563eb';
        var redColor = isDark ? '#fb7185' : '#dc2626';
        var greenColor = isDark ? '#34d399' : '#059669';

        var chart = echarts.init(el, isDark ? 'dark' : null);
        var markLines = [];
        if (current > 0) {
          markLines.push({
            name: 'Current reservation',
            yAxis: current,
            lineStyle: { color: redColor, type: 'solid', width: 2 },
            label: { formatter: 'Current: ' + current, color: redColor, position: 'end' }
          });
        }
        if (recommended > 0 && recommended !== current) {
          markLines.push({
            name: 'Recommended size',
            yAxis: recommended,
            lineStyle: { color: greenColor, type: 'dashed', width: 2 },
            label: { formatter: 'Recommended: ' + recommended, color: greenColor, position: 'end' }
          });
        }

        chart.setOption({
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              if (!params || !params.length) return '';
              var p = params[0];
              var d = new Date(p.value[0]);
              var slots = p.value[1];
              return (
                '<strong>' + d.toISOString().replace('T', ' ').replace(/:\d\d\.\d+Z$/, ' UTC') + '</strong><br/>' +
                'Effective slots: ' + slots.toFixed(1)
              );
            }
          },
          grid: { left: 50, right: 60, top: 16, bottom: 40, containLabel: true },
          xAxis: {
            type: 'time',
            axisLine: { lineStyle: { color: axisLineColor } },
            axisLabel: { color: axisTextColor, fontSize: 11 },
            splitLine: { show: false }
          },
          yAxis: {
            type: 'value',
            name: 'Slots',
            nameTextStyle: { color: axisTextColor, fontSize: 11 },
            axisLine: { lineStyle: { color: axisLineColor } },
            axisLabel: { color: axisTextColor, fontSize: 11 },
            splitLine: { lineStyle: { color: splitColor } }
          },
          series: [{
            name: 'Effective slots',
            type: 'line',
            data: points,
            showSymbol: false,
            smooth: false,
            lineStyle: { color: brandColor, width: 1.5 },
            areaStyle: { color: brandColor, opacity: 0.15 },
            markLine: { silent: true, symbol: 'none', data: markLines }
          }]
        });
        window.addEventListener('resize', function () { chart.resize(); });
      })();
    </script>

  {% endif %}
</section>
{% endblock %}