{# Cost-trend line chart. Reused by:
   - 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)

   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} (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. ``chart_collapsible`` is optional; collapsed charts defer
   ECharts initialization until opened so hidden containers do not
   initialize at zero width. #}
{% 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. Red points mark executions that tripped a detection rule." if _gran == "execution"
     else "One point per day (high-frequency table; executions rolled up daily). Days without executions are skipped. Red points mark days when an execution tripped a detection rule."
) %}
{% set _chart_collapsible = chart_collapsible | default(false) %}
{% if chart_open is defined %}
  {% set _chart_open = chart_open %}
{% else %}
  {% set _chart_open = not _chart_collapsible %}
{% endif %}

{% if _chart_collapsible %}
<details id="cost-trend" class="ui-surface p-6 group" data-chart-details{% if _chart_open %} open{% endif %}>
  <summary class="flex flex-wrap items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
    <div class="flex flex-col min-w-0">
      <div class="flex items-center gap-2">
        <h2 class="ui-section-title mt-0 mb-0">{{ _chart_title }}</h2>
        <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" 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>
      </div>
      <p class="ui-card-meta mt-2">{{ _chart_subtitle }}</p>
    </div>
  </summary>
  <div class="mt-4">
{% else %}
<div id="cost-trend" class="ui-pane" data-chart-details>
  <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>
  </div>
{% endif %}

  {% 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 %}
{% if _chart_collapsible %}
  </div>
</details>
{% else %}
</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 shell = el.closest('[data-chart-details]');
    var chart = null;

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

    function renderChart() {
      if (chart) {
        chart.resize();
        return;
      }
      if (!el.clientWidth) 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 point with has_issue=true emits a data object
      // that renders BIGGER, fully opaque, and with a white halo so the red
      // issue points pop against the (deliberately faded) blue base line.
      // Non-issue points stay as bare numbers and inherit the series'
      // semi-transparent blue. ECharts colours each segment by its END
      // point's itemStyle, so contiguous issue points form a red run.
      var costs = points.map(function(p) {
        if (p.has_issue) {
          return {
            value: p.cost_usd,
            symbolSize: 12,
            itemStyle: {
              color: issueColor,
              borderColor: isDark ? '#0f172a' : '#ffffff',
              borderWidth: 2,
              opacity: 1
            },
            lineStyle: { color: issueColor, width: 2.5, opacity: 1 }
          };
        }
        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]);
        }
      });

      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,
            // Sub-cent costs (tiny jobs, slot-priced reservations) all
            // collapse to "$0.00" at 2dp - every gridline reads the same.
            // Widen to 4dp only for small non-zero values.
            formatter: function(v) {
              if (v > 0 && v < 0.01) return '$' + v.toFixed(4);
              return ChartUtils.formatCurrency(v);
            }
          },
          splitLine: { lineStyle: { color: axis.splitColor } }
        },
        series: [
          {
            name: 'Cost',
            type: 'line',
            data: costs,
            smooth: false,
            symbol: 'circle',
            symbolSize: 5,
            // ECharts' default showAllSymbol:'auto' draws symbols ONLY at
            // the thinned axis-label ticks once the category axis is dense
            // - which silently hid most red issue dots (they appeared only
            // on hover via emphasis, looking like a tooltip bug). Every
            // point must render so the red signal is complete.
            showAllSymbol: true,
            // Base line + dots are faded so the (bigger, opaque) red issue
            // points read as the focal signal. Per-point itemStyle on the
            // issue points overrides this opacity back to 1.
            itemStyle: { color: costColor, opacity: 0.45 },
            lineStyle: { color: costColor, width: 2, opacity: 0.4 }
          },
          {
            // 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 2x 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);
        }
      });
      if (ChartUtils.setupChartResize) {
        ChartUtils.setupChartResize([chart]);
      } else {
        window.addEventListener('resize', function() { chart.resize(); });
      }
    }

    if (shell && shell.tagName === 'DETAILS' && !shell.open) {
      shell.addEventListener('toggle', function() {
        if (shell.open) requestAnimationFrame(renderChart);
      });
      return;
    }
    renderChart();
  })();
</script>
{% endif %}