{# 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">By per-job execution cost · click a bar for the full SQL</p>
  </div>

  {% if chart_jobs %}
    <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;

    var labels = jobs.map(function(j) { return j.label; });
    var costs = jobs.map(function(j) { return j.cost; });

    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,
        itemStyle: { color: costColor, borderRadius: [2, 2, 0, 0] },
        emphasis: { itemStyle: { color: emphasisColor } },
        barMaxWidth: 28
      }]
    });

    chart.on('click', function(params) {
      var j = jobs[params.dataIndex];
      if (j && 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 %}