{# Cost-trend line chart. Reused by:
   - templates/jobs/cohort.html - full cohort view at /jobs/{table}
   - templates/opportunities/detail.html - embedded for context
   - templates/failures/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)
     - chart_history_href   : str        (optional; renders a
                                          "View full history" link in
                                          the header when set)

   X axis (spec 162): one tick per EXECUTION (label "YYYY-MM-DD HH:MM"),
   so a query run 18× in a day shows as 18 dots. For tables above
   ``_PER_EXECUTION_CAP`` executions it falls back to one tick per UTC day
   (label "YYYY-MM-DD"); ``granularity`` in each point says which.

   Y axis: USD cost - per execution, or summed over the day in fallback mode.

   Markers: a contrasting scatter point overlays the FIRST occurrence of
   each query_hash (i.e., a version transition starts here).

   Click handler: navigates to /jobs/{first_job_id}?from=cohort (the exact
   execution for per-execution points; the day's first run in fallback).

   Mirrors the dashboard's _trend_chart.html ECharts/ChartUtils setup
   so the colours / axis styling stay consistent with the rest of the
   audit. The chart is always rendered fully expanded; the previous
   ``chart_collapsible`` flag has been removed because the trend is
   small enough not to dominate the page and was burying the data
   behind an unnecessary click. #}
{% set _chart_title = chart_title | default("Cost trend") %}
{% set _gran = (chart_points_payload[0].granularity if chart_points_payload else "execution") %}
{% set _chart_subtitle = chart_subtitle | default(
     "One point per execution." if _gran == "execution"
     else "One point per day (high-frequency table; executions rolled up daily). Days without executions are skipped."
) %}

<div class="ui-pane">
  <div class="flex items-start justify-between gap-3 mb-1">
    <div class="flex flex-col min-w-0">
      <h2 class="ui-section-title">{{ _chart_title }}</h2>
      <p class="ui-card-meta mt-0">{{ _chart_subtitle }}</p>
    </div>
    {% if chart_history_href %}
    <a href="{{ chart_history_href }}"
       class="text-sm text-brand-500 dark:text-brand-300 hover:underline whitespace-nowrap shrink-0">
      View full history &rarr;
    </a>
    {% endif %}
  </div>

  {% if chart_points_payload %}
    <div id="audit-job-cohort-chart"
         class="h-96 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 issueColor = isDark ? '#fb7185' : '#dc2626';    // rose-600 / rose-400

    // Spec 162: per-execution points use a timestamp label
    // ("YYYY-MM-DD HH:MM"); the daily-fallback uses the date. Either way
    // each point is one x-axis category, so the marker/click/tooltip
    // logic (all dataIndex-based) is unchanged.
    var perExecution = points.length && points[0].granularity === 'execution';
    var labels = points.map(function(p) { return p.label || p.day; });
    // Per-item styling: a day with has_issue=true emits a data object
    // whose ``itemStyle.color`` is red, so the point AND the line
    // segment ending at it render in the issue colour. Days without
    // issues stay as bare numbers (inherit the series default blue).
    // ECharts colours each segment by its END point's itemStyle, so
    // contiguous issue days produce a contiguous red run.
    var costs = points.map(function(p) {
      if (p.has_issue) {
        return {
          value: p.cost_usd,
          itemStyle: { color: issueColor, borderColor: issueColor },
          lineStyle: { color: issueColor }
        };
      }
      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 when = p.label || p.day;
          var lines = ['<strong>' + when + '</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 here</span>');
          }
          if (p.has_issue) {
            lines.push('<span style="color:' + issueColor + '">● Tripped an issue</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,
          // Show every label when there are few; thin to ~12 ticks once
          // there are many (per-execution charts can have dozens+), so the
          // axis stays readable while every dot still renders.
          interval: labels.length > 16 ? Math.floor(labels.length / 12) : 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. Tuned smaller (symbolSize 10, scale 2) so the
          // pulse reads as a subtle highlight rather than a big
          // attention-grabbing flare on an otherwise calm trend.
          name: 'Query change',
          type: 'effectScatter',
          data: markerPoints,
          symbol: 'circle',
          symbolSize: 10,
          showEffectOn: 'render',
          rippleEffect: {
            period: 3,        // seconds per ripple cycle (slower = calmer)
            scale: 2,         // ripple expands to 2× the symbol size
            brushType: 'stroke'
          },
          itemStyle: {
            color: markerColor,
            borderColor: '#ffffff',
            borderWidth: 1.5,
            shadowBlur: 4,
            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 %}