{# Vertical bar chart — top N most expensive jobs by cost. Built on the
   same ECharts + ChartUtils helpers governor-web uses for the daily
   spend trend (packages/web/.../static/js/dashboard-charts.js). Audit
   shows per-job spend instead of per-day because the audit window
   doesn't have a meaningful date axis (single point-in-time scan). #}
<div class="ui-pane">
  <div class="flex items-center justify-between mb-4">
    <h2 class="ui-section-title">Top {{ chart_jobs | length }} Spenders</h2>
    <p class="ui-card-meta mt-0">The 20 highest-cost query executions in the scan window, coloured by issue count. Select a bar to open its opportunity.</p>
  </div>

  {% if chart_jobs %}
    {# Legend — bar colour encodes how many detection rules fired on
       each job. Pairs with the per-bar tooltip "Issues: N" line. #}
    <div class="flex flex-wrap items-center gap-4 mb-3 text-xs text-slate-500 dark:text-slate-400">
      <span class="inline-flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 bg-brand-500 dark:bg-brand-400"></span>No issues</span>
      <span class="inline-flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 bg-amber-500 dark:bg-amber-400"></span>1–2 issues</span>
      <span class="inline-flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 bg-rose-500 dark:bg-rose-400"></span>3+ issues</span>
    </div>
    <div id="audit-cost-bar-chart"
         class="h-72 w-full"
         data-jobs='{{ chart_jobs_payload | tojson }}'></div>
  {% else %}
    <div class="h-64 flex items-center justify-center text-slate-500 dark:text-slate-400">
      <p class="text-sm">No spend data available yet.</p>
    </div>
  {% endif %}
</div>

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

    var jobs = JSON.parse(el.getAttribute('data-jobs') || '[]');
    if (!jobs.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 emphasisColor = isDark ? ChartUtils.CHART_COLORS.emphasis.dark : ChartUtils.CHART_COLORS.emphasis.light;

    // Per-bar colour encodes issue count: brand (no issues) →
    // amber (1–2 issues) → rose (3+ issues). Visual signal the user can
    // scan at a glance to find the "most-flagged big spenders" without
    // hovering for the tooltip. Light/dark variants hand-picked to match
    // the legend pills above the chart.
    var amberColor = isDark ? '#fbbf24' : '#f59e0b';
    var roseColor = isDark ? '#fb7185' : '#f43f5e';
    function colorForJob(j) {
      var n = (j && j.issues) || 0;
      if (n >= 3) return roseColor;
      if (n >= 1) return amberColor;
      return costColor;
    }

    var labels = jobs.map(function(j) { return j.label; });
    var costs = jobs.map(function(j) {
      return { value: j.cost, itemStyle: { color: colorForJob(j) } };
    });

    var chart = echarts.init(el, isDark ? 'dark' : null);
    chart.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        formatter: function(params) {
          var p = params[0];
          var j = jobs[p.dataIndex] || {};
          var lines = ['<strong>' + p.name + '</strong>'];
          lines.push('Cost: ' + ChartUtils.formatCurrency(p.value));
          if (j.bytes_human) lines.push('Bytes: ' + j.bytes_human);
          if (j.issues > 0) lines.push('Issues: ' + j.issues);
          return lines.join('<br/>');
        }
      },
      grid: { left: 50, right: 30, top: 10, bottom: 60, containLabel: true },
      xAxis: {
        type: 'category',
        data: labels,
        axisLabel: {
          color: axis.textColor,
          fontSize: 10,
          interval: 0,
          rotate: labels.length > 8 ? 35 : 0,
          formatter: function(v) { return v.length > 18 ? v.slice(0, 16) + '…' : v; }
        },
        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: 'bar',
        data: costs,
        // Per-bar colors set via the data objects above; only the
        // shared borderRadius lives here. Emphasis (hover) still uses
        // the global emphasis color so hovering any bar reads the same.
        itemStyle: { borderRadius: 0 },
        emphasis: { itemStyle: { color: emphasisColor } },
        barMaxWidth: 28
      }]
    });

    chart.on('click', function(params) {
      var j = jobs[params.dataIndex];
      if (!j) return;
      // Prefer the opportunity page so the user lands on the highest-
      // severity finding for the clicked job. Falls back to the job
      // detail page when no opportunity references this job.
      if (j.opportunity_id) {
        window.location = '/opportunities/' + encodeURIComponent(j.opportunity_id);
      } else if (j.job_id) {
        window.location = '/jobs/' + encodeURIComponent(j.job_id);
      }
    });
    if (ChartUtils.setupChartResize) {
      ChartUtils.setupChartResize([chart]);
    } else {
      window.addEventListener('resize', function() { chart.resize(); });
    }
  })();
</script>
{% endif %}