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

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