{# 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 and compares it against your current BigQuery reservation (when discoverable). The recommendation suggests a right-sized slot count - reduce if over-provisioned, upgrade if queries are queueing, or consider a reservation if you're on-demand at scale.
    </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. The recommendation card 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; the
       monthly delta is positive for reduce/consider (savings), zero
       for no_change, negative for upgrade (additional cost). #}
    <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'. The recommender uses this as the headroom anchor.") }}
      {{ 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. The recommender soft-warns below 100 jobs; rerun with a longer window or wait for more activity before resizing.
        </p>
      </div>
    {% endif %}

    {# Demand chart - effective slots over time with horizontal
       reference lines for current (red) + recommended (green)
       reservation size when known. #}
    <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. Red = current reservation (when discoverable). Green = recommended target."
        ) }}
      </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 }}'
           data-target='{{ (snapshot.recommendation_target_slots or 0) | tojson }}'>
      </div>
    </div>

    {# Recommendation card. One per snapshot in v1 (multi-reservation
       is a follow-up spec). Carries the reasoning + caveats + the
       copy-paste SQL. Outer style varies by recommendation kind so
       the card reads "savings" vs "additional cost" at a glance. #}
    {% set kind = snapshot.recommendation_kind %}
    {% set accent_emerald = kind in ['reduce', 'consider_reservation', 'split'] %}
    {% set accent_rose    = kind == 'upgrade' %}
    {% set accent_slate   = kind == 'no_change' %}
    <article class="mt-6 ui-pane">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="min-w-0">
          {% if kind == 'reduce' %}
            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
              Reduce reservation
              {% if snapshot.primary_reservation_size %}
                from {{ snapshot.primary_reservation_size }}
              {% endif %}
              to {{ snapshot.recommendation_target_slots }} slots
            </h2>
          {% elif kind == 'upgrade' %}
            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
              Upgrade reservation
              {% if snapshot.primary_reservation_size %}
                from {{ snapshot.primary_reservation_size }}
              {% endif %}
              to {{ snapshot.recommendation_target_slots }} slots
            </h2>
          {% elif kind == 'consider_reservation' %}
            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
              Consider a {{ snapshot.recommendation_target_slots }}-slot Standard reservation
            </h2>
          {% elif kind == 'split' %}
            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
              Split: keep a {{ snapshot.recommendation_target_slots }}-slot reservation, route bursts on-demand
            </h2>
          {% else %}
            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
              No change recommended
            </h2>
          {% endif %}
          {% if snapshot.primary_reservation_id %}
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400 font-mono break-all">{{ snapshot.primary_reservation_id }}</p>
          {% else %}
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Billing posture: on-demand</p>
          {% endif %}
        </div>
        {% if snapshot.monthly_delta_usd is not none and not accent_slate %}
          <div class="text-right">
            <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
              {% if snapshot.monthly_delta_usd >= 0 %}Monthly saving{% else %}Additional monthly cost{% endif %}
            </p>
            <p class="text-2xl font-semibold {{ 'text-emerald-600 dark:text-emerald-400' if snapshot.monthly_delta_usd >= 0 else 'text-rose-600 dark:text-rose-400' }}">
              ${{ '%.0f' | format(snapshot.monthly_delta_usd | abs) }}
            </p>
            {% if snapshot.annual_delta_usd is not none %}
              <p class="text-xs text-slate-500 dark:text-slate-400">
                ~${{ '%.0f' | format(snapshot.annual_delta_usd | abs) }}/yr
              </p>
            {% endif %}
          </div>
        {% endif %}
      </div>

      {# Reasoning block. Same shape as the materialization cards on
         /opportunities so the page reads consistently. #}
      {% if snapshot.reasoning %}
        <div class="mt-4 grid gap-3 sm:grid-cols-2 text-sm">
          {% if snapshot.reasoning.current_state %}
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Current state</p>
              <p class="mt-1 text-slate-800 dark:text-slate-200">{{ snapshot.reasoning.current_state }}</p>
            </div>
          {% endif %}
          {% if snapshot.reasoning.observation %}
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Observation</p>
              <p class="mt-1 text-slate-800 dark:text-slate-200">{{ snapshot.reasoning.observation }}</p>
            </div>
          {% endif %}
          {% if snapshot.reasoning.recommendation %}
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Recommendation</p>
              <p class="mt-1 text-slate-800 dark:text-slate-200">{{ snapshot.reasoning.recommendation }}</p>
            </div>
          {% endif %}
          {% if snapshot.reasoning.expected_benefit %}
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Expected benefit</p>
              <p class="mt-1 text-slate-800 dark:text-slate-200">{{ snapshot.reasoning.expected_benefit }}</p>
            </div>
          {% endif %}
        </div>

        {% if snapshot.caveats %}
          <details class="mt-4">
            <summary class="cursor-pointer text-sm text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100">
              Show caveats ({{ snapshot.caveats | length }})
            </summary>
            <ul class="mt-2 list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-400">
              {% for c in snapshot.caveats %}
                <li>{{ c }}</li>
              {% endfor %}
            </ul>
          </details>
        {% endif %}
      {% endif %}

      {# Apply SQL + rollback - only shown when the recommender
         produced one (no_change leaves both null). #}
      {% if snapshot.apply_sql %}
        <div class="mt-5">
          <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Apply</p>
          <div class="relative border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-x-auto">
            <button type="button"
                    onclick="window.auditCopyById(this, 'reservations-apply-sql')"
                    class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 px-2 py-1 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 class="copy-label">Copy</span>
            </button>
            <pre id="reservations-apply-sql" class="text-sm font-mono leading-relaxed p-3 pr-20 m-0 whitespace-pre"><code class="text-slate-800 dark:text-slate-200">{{ snapshot.apply_sql }}</code></pre>
          </div>
        </div>
      {% endif %}

      {% if snapshot.rollback_sql %}
        <div class="mt-3">
          <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Rollback</p>
          <div class="relative border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-x-auto">
            <button type="button"
                    onclick="window.auditCopyById(this, 'reservations-rollback-sql')"
                    class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 px-2 py-1 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 class="copy-label">Copy</span>
            </button>
            <pre id="reservations-rollback-sql" class="text-sm font-mono leading-relaxed p-3 pr-20 m-0 whitespace-pre"><code class="text-slate-800 dark:text-slate-200">{{ snapshot.rollback_sql }}</code></pre>
          </div>
        </div>
      {% endif %}

      {# Reservation-size unknown fallback. When the IAM grant isn't
         present, the recommender doesn't know the "Z" in "Reduce
         from Z to N"; the user can type it here and the page
         re-renders the savings calc client-side using local storage. #}
      {% if not snapshot.primary_reservation_size and snapshot.primary_reservation_id %}
        <div class="mt-5 ui-pane border-blue-200 dark:border-blue-800 bg-blue-50/60 dark:bg-blue-950/30">
          <p class="text-sm text-blue-800 dark:text-blue-200">
            Your reservation size couldn't be discovered (the optional <code>bigquery.reservations.get</code> permission isn't granted). Type the current slot count to see the savings figure - the value is stored only in your browser.
          </p>
          <label class="mt-3 inline-flex items-center gap-2 text-sm text-slate-800 dark:text-slate-200">
            Current reservation size:
            <input id="reservations-user-size"
                   type="number"
                   min="0"
                   step="100"
                   class="w-32 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-2 py-1 text-sm" />
            <span class="text-xs text-slate-500 dark:text-slate-400">slots</span>
          </label>
          <p id="reservations-user-savings" class="mt-2 text-sm text-emerald-700 dark:text-emerald-400"></p>
        </div>
      {% endif %}
    </article>

    {# 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 target = parseInt(el.getAttribute('data-target') || '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' }
          });
        }
        if (target > 0 && target !== current) {
          markLines.push({
            name: 'Recommended',
            yAxis: target,
            lineStyle: { color: greenColor, type: 'dashed', width: 2 },
            label: { formatter: 'Recommended: ' + target, 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>

    {# User-supplied reservation size fallback. Computes savings
       client-side using the SAME constants as the recommender. #}
    <script>
      (function () {
        var input = document.getElementById('reservations-user-size');
        var output = document.getElementById('reservations-user-savings');
        if (!input || !output) return;
        var target = parseInt({{ (snapshot.recommendation_target_slots or 0) | tojson }}, 10) || 0;
        var STANDARD_PER_SLOT_MONTH = 0.04 * 730.5;
        var storageKey = 'governor-audit-reservation-size';
        try {
          var saved = window.localStorage && window.localStorage.getItem(storageKey);
          if (saved) input.value = saved;
        } catch (e) { /* ignore */ }
        function update() {
          var n = parseInt(input.value, 10);
          if (!n || n <= 0 || !target) {
            output.textContent = '';
            return;
          }
          try { window.localStorage && window.localStorage.setItem(storageKey, String(n)); } catch (e) {}
          var monthly = (n - target) * STANDARD_PER_SLOT_MONTH;
          var annual = monthly * 12;
          if (monthly >= 0) {
            output.textContent = 'Estimated saving: $' + monthly.toFixed(0) + '/mo (~$' + annual.toFixed(0) + '/yr).';
          } else {
            output.textContent = 'Recommended size is larger than your reservation - the page may have classified you as on-demand by mistake.';
          }
        }
        input.addEventListener('input', update);
        update();
      })();
    </script>
  {% endif %}
</section>
{% endblock %}