{# Spec 157 - Reservations right-sizing page.

   Renders one ``SlotDemandSnapshot`` row per active config: a hero
   stat strip (avg / p95 / peak / idle), the demand-curve chart with
   horizontal reference lines for current + recommended reservation
   size, and a recommendation card carrying the reasoning block + a
   copy-paste ALTER RESERVATION (or CREATE RESERVATION) SQL snippet.

   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">Reservations</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 your effective slot demand over the scan window (avg / p95 / peak / idle), measured from your own jobs, and overlays your current BigQuery reservation size when it's discoverable. Use it to judge whether your reservation is right-sized for the workload's shape.
    </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 reservation 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 %}

    {# 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",
                   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.") }}
    </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 %}

    {# 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)."
        ) }}
      </div>
      <div id="reservations-demand-chart"
           class="h-80 w-full"
           data-series='{{ snapshot.demand_series | tojson }}'
           data-current='{{ (snapshot.primary_reservation_size or 0) | 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 current = parseInt(el.getAttribute('data-current') || '0', 10) || 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' }
          });
        }

        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 %}