{# _voucher_performance.html -- Voucher Performance horizontal bars component #}
{# Usage: {% include "django_program/manage/charts/_voucher_performance.html" with chart_data=chart_vouchers_json %} #}

<div class="card card--static">
  <div style="padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light);">
    <div style="font-weight: 700; font-size: 0.95rem; color: var(--color-text);">Voucher Performance</div>
    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Redemption rates by voucher code</div>
  </div>
  <div style="padding: 1rem 1.5rem 1.25rem;">
    <canvas id="chart-voucher-performance" style="width: 100%; height: 240px; display: block;"></canvas>
  </div>
</div>

<script>
(function() {
  var canvas = document.getElementById('chart-voucher-performance');
  if (!canvas) return;
  var u = window._chartUtils;
  if (!u) return;
  var data = JSON.parse('{{ chart_data|escapejs }}');

  function drawVoucherBars() {
    var s = u.setupCanvas(canvas);
    var ctx = s.ctx, w = s.w, h = s.h;
    if (!data || !data.length) { u.drawEmpty(ctx, w, h, 'No vouchers configured'); return; }

    var sorted = data.slice().sort(function(a, b) {
      var ra = a.max > 0 ? a.used / a.max : 0;
      var rb = b.max > 0 ? b.used / b.max : 0;
      return rb - ra;
    });
    var maxItems = Math.min(sorted.length, 8);
    sorted = sorted.slice(0, maxItems);

    var padL = 10, padR = 60, padT = 6, padB = 6;
    var labelW = 100;
    var rowH = Math.min(32, (h - padT - padB) / maxItems);
    var barAreaW = w - padL - labelW - padR;

    function draw(t) {
      var progress = u.easeOutCubic(t);
      ctx.clearRect(0, 0, w, h);

      for (var i = 0; i < maxItems; i++) {
        var d = sorted[i];
        var rowY = padT + i * rowH;
        var barY = rowY + 5;
        var barH = rowH - 12;
        var rate = d.max > 0 ? d.used / d.max : 0;

        ctx.save();
        ctx.fillStyle = u.COLORS.text;
        ctx.font = '600 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        var label = d.code.length > 12 ? d.code.substring(0, 11) + '\u2026' : d.code;
        ctx.fillText(label, padL + labelW - 10, barY + barH / 2);
        ctx.restore();

        var barX = padL + labelW;

        ctx.fillStyle = '#f0f1f4';
        u.roundRect(ctx, barX, barY, barAreaW, barH, 3);
        ctx.fill();

        var fillW = rate * barAreaW * progress;
        if (fillW > 0) {
          var color = rate >= 0.8 ? u.COLORS.emerald : rate >= 0.4 ? u.COLORS.amber : u.COLORS.indigo;
          var fillGrad = ctx.createLinearGradient(barX, 0, barX + fillW, 0);
          fillGrad.addColorStop(0, color);
          fillGrad.addColorStop(1, u.hexToRgba(color, 0.7));
          ctx.fillStyle = fillGrad;
          u.roundRect(ctx, barX, barY, fillW, barH, fillW >= barAreaW - 1 ? 3 : [3, 0, 0, 3]);
          ctx.fill();
        }

        if (progress > 0.7) {
          ctx.save();
          ctx.fillStyle = u.COLORS.textMuted;
          ctx.font = '700 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
          ctx.textAlign = 'left';
          ctx.textBaseline = 'middle';
          var rateStr = d.max > 0 ? Math.round(rate * 100) + '%' : '\u2014';
          ctx.fillText(d.used + '/' + d.max + ' ' + rateStr, barX + barAreaW + 6, barY + barH / 2);
          ctx.restore();
        }
      }
    }

    u.animate(700, draw, function() {
      canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var my = e.clientY - rect.top;
        var hit = null;
        for (var i = 0; i < maxItems; i++) {
          var ry = padT + i * rowH;
          if (my >= ry && my < ry + rowH) { hit = sorted[i]; break; }
        }
        if (hit) {
          canvas.style.cursor = 'pointer';
          var pct = hit.max > 0 ? (hit.used / hit.max * 100).toFixed(1) + '%' : 'N/A';
          u.showTooltip(e,
            '<div style="font-weight:700;margin-bottom:2px;">' + hit.code + '</div>' +
            '<div>Used: <strong>' + hit.used + '</strong> / ' + hit.max + '</div>' +
            '<div>Rate: <strong>' + pct + '</strong></div>' +
            '<div>Revenue impact: <strong>' + u.formatCurrencyFull(hit.impact) + '</strong></div>'
          );
        } else {
          canvas.style.cursor = 'default';
          u.hideTooltip();
        }
      });
      canvas.addEventListener('mouseleave', function() { u.hideTooltip(); canvas.style.cursor = 'default'; });
    });
  }

  requestAnimationFrame(drawVoucherBars);
  window.addEventListener('resize', (function() {
    var timer;
    return function() { clearTimeout(timer); timer = setTimeout(drawVoucherBars, 200); };
  })());
})();
</script>