{# Cost-trend line chart. Reused by:
   - templates/jobs/cohort.html — full cohort view at /jobs/{table}
   - templates/opportunities/detail.html — embedded for context

   Caller sets:
     - chart_points_payload : list[dict] (from
       cohort_view.build_chart_points_payload or
       JobCohortView.chart_points_payload()). REQUIRED.
     - chart_title          : str        (defaults to "Cost trend")
     - chart_subtitle       : str        (default explains skipped-days)

   X axis: dense sequence of UTC days where ≥ 1 execution ran (per
   spec 146 decision — skip days with no executions, do not pretend
   the X axis is a continuous calendar).

   Y axis: USD cost summed over executions on that day.

   Markers: a contrasting scatter point overlays days where the
   execution at that day's first run is the FIRST occurrence of its
   query_hash (i.e., a version transition started here).

   Click handler: navigates to /jobs/{first_job_id_for_that_day}?from=cohort.

   Mirrors the dashboard's _trend_chart.html ECharts/ChartUtils setup
   so the colours / axis styling stay consistent with the rest of the
   audit. #}
{% set _chart_title = chart_title | default("Cost trend") %}
{% set _chart_subtitle = chart_subtitle | default("One point per day. Days without executions are skipped.") %}
{# ``chart_collapsible`` (default false): when true the partial wraps
   the chart in a ``<details>`` so the user has to click to expand.
   Used by the opportunity detail page where the chart is contextual,
   not the page's main feature. The cohort view passes false (default)
   so the chart stays visible. The collapsible variant dispatches a
   window resize event on toggle so the existing
   ``ChartUtils.setupChartResize`` listener re-measures the container
   and renders the line that was queued while the section was closed. #}
{% set _collapsible = chart_collapsible | default(false) %}

{% if _collapsible %}
<details class="ui-pane group audit-cost-trend-collapsible">
  <summary class="cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden flex items-center justify-between">
    <div class="flex flex-col">
      <span class="ui-section-title">{{ _chart_title }}</span>
      <span class="ui-card-meta mt-1">{{ _chart_subtitle }}</span>
    </div>
    <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180"
         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
    </svg>
  </summary>
  <div class="mt-3">
    {% if chart_points_payload %}
      <div id="audit-job-cohort-chart"
           class="h-72 w-full"
           data-points='{{ chart_points_payload | tojson }}'></div>
    {% else %}
      <div class="h-32 flex items-center justify-center text-slate-500 dark:text-slate-400">
        <p class="text-sm">No executions in the current scan window.</p>
      </div>
    {% endif %}
  </div>
</details>
<script>
  // Re-measure the chart on first expand. ECharts in a ``display:none``
  // ancestor (the closed <details>) measured the container at 0×0 on
  // init, so the line queued via setOption never painted. Dispatching
  // a window 'resize' event triggers the existing setupChartResize
  // listener to call chart.resize() — the line then renders.
  (function() {
    var el = document.querySelector('details.audit-cost-trend-collapsible');
    if (!el) return;
    el.addEventListener('toggle', function() {
      if (el.open) {
        // requestAnimationFrame gives the layout engine a tick to
        // settle the now-visible container's actual dimensions
        // before ECharts measures.
        requestAnimationFrame(function() {
          window.dispatchEvent(new Event('resize'));
        });
      }
    });
  })();
</script>
{% else %}
<div class="ui-pane">
  <div class="flex items-center justify-between mb-1">
    <h2 class="ui-section-title">{{ _chart_title }}</h2>
    <p class="ui-card-meta mt-0">{{ _chart_subtitle }}</p>
  </div>

  {% if chart_points_payload %}
    <div id="audit-job-cohort-chart"
         class="h-72 w-full mt-3"
         data-points='{{ chart_points_payload | tojson }}'></div>
  {% else %}
    <div class="h-32 flex items-center justify-center text-slate-500 dark:text-slate-400">
      <p class="text-sm">No executions in the current scan window.</p>
    </div>
  {% endif %}
</div>
{% endif %}

{% if chart_points_payload %}
<script>
  (function() {
    var el = document.getElementById('audit-job-cohort-chart');
    if (!el || typeof echarts === 'undefined' || typeof ChartUtils === 'undefined') return;

    var raw = el.getAttribute('data-points') || '[]';
    var points;
    try { points = JSON.parse(raw); } catch (e) { return; }
    if (!points.length) return;

    var isDark = document.documentElement.classList.contains('dark');
    var axis = ChartUtils.getAxisStyle ? ChartUtils.getAxisStyle(isDark) : {
      textColor: isDark ? '#94a3b8' : '#475569',
      lineColor: isDark ? '#334155' : '#e2e8f0',
      splitColor: isDark ? '#1e293b' : '#f1f5f9'
    };
    var costColor = ChartUtils.CHART_COLORS.cost.light;
    if (isDark && ChartUtils.CHART_COLORS.cost.dark) costColor = ChartUtils.CHART_COLORS.cost.dark;
    var markerColor = isDark ? '#fbbf24' : '#d97706';   // amber, contrasts with the line

    var labels = points.map(function(p) { return p.day; });
    var costs = points.map(function(p) { return p.cost_usd; });

    // Marker scatter overlay: only days where is_version_change_marker
    // is true. ECharts renders scatter as [x, y] pairs.
    var markerPoints = [];
    points.forEach(function(p, idx) {
      if (p.is_version_change_marker) {
        markerPoints.push([idx, p.cost_usd]);
      }
    });

    var chart = echarts.init(el, isDark ? 'dark' : null);
    chart.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'line' },
        formatter: function(params) {
          // Find the line series' point — multi-series tooltips can
          // include the scatter marker too; we always describe the
          // underlying day's data.
          var idx = params[0].dataIndex;
          var p = points[idx] || {};
          var lines = ['<strong>' + p.day + '</strong>'];
          lines.push('Cost: ' + ChartUtils.formatCurrency(p.cost_usd));
          if (p.bytes_human) lines.push('Bytes: ' + p.bytes_human);
          if (p.execution_count > 1) {
            lines.push('Executions: ' + p.execution_count);
          }
          if (p.version_index) {
            lines.push('Query version: v' + p.version_index);
          }
          if (p.is_version_change_marker) {
            lines.push('<span style="color:' + markerColor + '">⬩ Query changed on this day</span>');
          }
          return lines.join('<br/>');
        }
      },
      grid: { left: 50, right: 30, top: 20, bottom: 50, containLabel: true },
      xAxis: {
        type: 'category',
        data: labels,
        axisLabel: {
          color: axis.textColor,
          fontSize: 10,
          interval: 0,
          rotate: labels.length > 8 ? 35 : 0
        },
        axisLine: { lineStyle: { color: axis.lineColor } },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: axis.textColor,
          fontSize: 10,
          formatter: function(v) { return ChartUtils.formatCurrency(v); }
        },
        splitLine: { lineStyle: { color: axis.splitColor } }
      },
      series: [
        {
          name: 'Cost',
          type: 'line',
          data: costs,
          smooth: false,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: costColor },
          lineStyle: { color: costColor, width: 2 }
        },
        {
          // effectScatter draws a pulsing ripple halo around each
          // marker — a built-in animation, no extra deps. We use it
          // here so query-change days catch the eye even at low
          // chart density.
          name: 'Query change',
          type: 'effectScatter',
          data: markerPoints,
          symbol: 'circle',
          symbolSize: 20,
          showEffectOn: 'render',
          rippleEffect: {
            period: 3,        // seconds per ripple cycle (slower = calmer)
            scale: 3.5,       // ripple expands to 3.5× the symbol size
            brushType: 'stroke'
          },
          itemStyle: {
            color: markerColor,
            borderColor: '#ffffff',
            borderWidth: 2,
            shadowBlur: 8,
            shadowColor: markerColor
          },
          z: 5,
          tooltip: { show: false }   // line series's tooltip already describes the day
        }
      ]
    });

    chart.on('click', function(params) {
      var idx = params.dataIndex;
      var p = points[idx];
      if (p && p.first_job_id) {
        window.location = '/jobs/' + encodeURIComponent(p.first_job_id) + '?from=cohort';
      }
    });
    if (ChartUtils.setupChartResize) {
      ChartUtils.setupChartResize([chart]);
    } else {
      window.addEventListener('resize', function() { chart.resize(); });
    }
  })();
</script>
{% endif %}