{# _revenue_bar.html -- Revenue Over Time bar chart component #}
{# Usage: {% include "django_program/manage/charts/_revenue_bar.html" with chart_data=chart_sales_json %} #}

<div class="card card--static" style="grid-column: 1 / -1;">
  <div style="padding: 1.25rem 1.5rem 0.75rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-light);">
    <div>
      <div style="font-weight: 700; font-size: 0.95rem; color: var(--color-text);">Revenue Over Time</div>
      <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Daily revenue from paid orders (last 30 days)</div>
    </div>
    <div style="display: flex; align-items: center; gap: 1rem;">
      <span style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted);"><span style="width: 10px; height: 10px; border-radius: 2px; background: #4338ca; display: inline-block;"></span> Revenue</span>
      <span style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted);"><span style="width: 10px; height: 10px; border-radius: 50%; background: #0d9488; display: inline-block;"></span> Orders</span>
    </div>
  </div>
  <div style="padding: 1rem 1.5rem 1.25rem;">
    <canvas id="chart-revenue-bar" style="width: 100%; height: 260px; display: block;"></canvas>
  </div>
</div>

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

  function drawRevenueChart() {
    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 sales data for this period'); return; }

    var padL = 60, padR = 16, padT = 16, padB = 36;
    var chartW = w - padL - padR;
    var chartH = h - padT - padB;
    var maxRevenue = Math.max.apply(null, data.map(function(d) { return d.revenue; })) || 1;
    var maxCount = Math.max.apply(null, data.map(function(d) { return d.count; })) || 1;

    var niceMax = Math.ceil(maxRevenue / Math.pow(10, Math.floor(Math.log10(maxRevenue || 1)))) * Math.pow(10, Math.floor(Math.log10(maxRevenue || 1)));
    if (niceMax === 0) niceMax = 100;
    var gridLines = 5;
    var barW = Math.max(4, (chartW / data.length) - 3);

    var grad = ctx.createLinearGradient(0, padT, 0, padT + chartH);
    grad.addColorStop(0, u.COLORS.indigo);
    grad.addColorStop(1, u.COLORS.indigoLight);

    var barRects = [];

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

      ctx.save();
      ctx.setLineDash([3, 3]);
      ctx.strokeStyle = 'rgba(0,0,0,0.06)';
      ctx.lineWidth = 1;
      for (var i = 0; i <= gridLines; i++) {
        var gy = padT + chartH - (chartH * i / gridLines);
        ctx.beginPath();
        ctx.moveTo(padL, gy);
        ctx.lineTo(w - padR, gy);
        ctx.stroke();
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '500 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText(u.formatCurrency(niceMax * i / gridLines), padL - 8, gy);
      }
      ctx.restore();

      barRects = [];
      for (var j = 0; j < data.length; j++) {
        var x = padL + (j + 0.5) * (chartW / data.length) - barW / 2;
        var barH = (data[j].revenue / niceMax) * chartH * progress;
        var y = padT + chartH - barH;

        ctx.fillStyle = grad;
        var r = Math.min(3, barW / 2);
        ctx.beginPath();
        ctx.moveTo(x, y + barH);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.lineTo(x + barW - r, y);
        ctx.quadraticCurveTo(x + barW, y, x + barW, y + r);
        ctx.lineTo(x + barW, y + barH);
        ctx.closePath();
        ctx.fill();

        barRects.push({ x: x, y: y, w: barW, h: barH, idx: j });

        var skip = Math.max(1, Math.ceil(data.length / 12));
        if (j % skip === 0) {
          ctx.save();
          ctx.fillStyle = u.COLORS.textMuted;
          ctx.font = '500 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'top';
          ctx.fillText(u.formatDateShort(data[j].date), x + barW / 2, padT + chartH + 8);
          ctx.restore();
        }
      }

      if (progress > 0.3) {
        var lineProgress = Math.min(1, (progress - 0.3) / 0.7);
        ctx.save();
        ctx.strokeStyle = u.COLORS.teal;
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.setLineDash([]);
        ctx.beginPath();
        var drawCount = Math.floor(data.length * lineProgress);
        for (var k = 0; k <= drawCount && k < data.length; k++) {
          var lx = padL + (k + 0.5) * (chartW / data.length);
          var ly = padT + chartH - (data[k].count / maxCount) * chartH * 0.85;
          if (k === 0) ctx.moveTo(lx, ly);
          else ctx.lineTo(lx, ly);
        }
        ctx.stroke();

        for (var m = 0; m <= drawCount && m < data.length; m++) {
          var dx = padL + (m + 0.5) * (chartW / data.length);
          var dy = padT + chartH - (data[m].count / maxCount) * chartH * 0.85;
          ctx.beginPath();
          ctx.arc(dx, dy, 3, 0, Math.PI * 2);
          ctx.fillStyle = u.COLORS.surface;
          ctx.fill();
          ctx.strokeStyle = u.COLORS.teal;
          ctx.lineWidth = 2;
          ctx.stroke();
        }
        ctx.restore();
      }
    }

    u.animate(800, draw, function() {
      canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var mx = e.clientX - rect.left;
        var my = e.clientY - rect.top;
        var hit = null;
        for (var i = 0; i < barRects.length; i++) {
          var br = barRects[i];
          if (mx >= br.x - 2 && mx <= br.x + br.w + 2 && my >= padT && my <= padT + chartH) {
            hit = br; break;
          }
        }
        if (hit) {
          canvas.style.cursor = 'pointer';
          var d = data[hit.idx];
          u.showTooltip(e,
            '<div style="font-weight:700;margin-bottom:2px;">' + d.date + '</div>' +
            '<div>Revenue: <strong>' + u.formatCurrencyFull(d.revenue) + '</strong></div>' +
            '<div>Orders: <strong>' + u.formatNumber(d.count) + '</strong></div>'
          );
          draw(1);
          ctx.save();
          ctx.fillStyle = u.hexToRgba(u.COLORS.indigo, 0.15);
          ctx.fillRect(hit.x - 2, padT, hit.w + 4, chartH);
          ctx.restore();
        } else {
          canvas.style.cursor = 'default';
          u.hideTooltip();
          draw(1);
        }
      });
      canvas.addEventListener('mouseleave', function() {
        u.hideTooltip();
        canvas.style.cursor = 'default';
        draw(1);
      });
    });
  }

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