{# _aov_line.html -- Average Order Value line chart with gradient fill #}
{# Usage: {% include "django_program/manage/charts/_aov_line.html" with chart_data=chart_aov_json %} #}

<div class="card card--static" style="padding: 1.25rem 1.5rem;">
  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
    <div>
      <strong style="font-size: 0.95rem;">Average Order Value</strong><br>
      <small style="color: var(--color-text-muted); font-size: 0.78rem;">Per-order average over time</small>
    </div>
  </div>
  <canvas id="chart-aov-line" width="400" height="200" style="width: 100%; height: 200px;"></canvas>
</div>

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

  var LINE_COLOR = '#7c3aed';

  function drawChart() {
    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 order data available'); return; }

    var padL = 60, padR = 16, padT = 20, padB = 36;
    var chartW = w - padL - padR;
    var chartH = h - padT - padB;
    var maxAov = Math.max.apply(null, data.map(function(d) { return d.aov; })) || 1;
    var niceMax = Math.ceil(maxAov / 50) * 50;
    if (niceMax === 0) niceMax = 100;
    var gridLines = 4;

    var points = data.map(function(d, i) {
      var x = padL + (data.length === 1 ? chartW / 2 : (i / (data.length - 1)) * chartW);
      var y = padT + chartH - (d.aov / niceMax) * chartH;
      return { x: x, y: y };
    });

    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();

      var skip = Math.max(1, Math.ceil(data.length / 8));
      for (var i = 0; i < data.length; i++) {
        if (i % 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[i].date), points[i].x, padT + chartH + 8);
          ctx.restore();
        }
      }

      var drawCount = Math.floor(points.length * progress);
      if (drawCount < 1) return;

      var grad = ctx.createLinearGradient(0, padT, 0, padT + chartH);
      grad.addColorStop(0, u.hexToRgba(LINE_COLOR, 0.25));
      grad.addColorStop(1, u.hexToRgba(LINE_COLOR, 0.02));

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(points[0].x, padT + chartH);
      for (var i = 0; i <= drawCount && i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
      }
      var lastDrawn = Math.min(drawCount, points.length - 1);
      ctx.lineTo(points[lastDrawn].x, padT + chartH);
      ctx.closePath();
      ctx.fillStyle = grad;
      ctx.fill();
      ctx.restore();

      ctx.save();
      ctx.strokeStyle = LINE_COLOR;
      ctx.lineWidth = 2.5;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.setLineDash([]);
      ctx.beginPath();
      for (var i = 0; i <= drawCount && i < points.length; i++) {
        if (i === 0) ctx.moveTo(points[i].x, points[i].y);
        else ctx.lineTo(points[i].x, points[i].y);
      }
      ctx.stroke();
      ctx.restore();

      if (progress > 0.6) {
        var dotAlpha = Math.min(1, (progress - 0.6) / 0.3);
        ctx.save();
        ctx.globalAlpha = dotAlpha;
        for (var i = 0; i < points.length; i++) {
          ctx.beginPath();
          ctx.arc(points[i].x, points[i].y, 4, 0, Math.PI * 2);
          ctx.fillStyle = u.COLORS.surface;
          ctx.fill();
          ctx.strokeStyle = LINE_COLOR;
          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 hit = null;
        var minDist = Infinity;
        for (var i = 0; i < points.length; i++) {
          var dx = Math.abs(mx - points[i].x);
          if (dx < minDist && dx < 30) { minDist = dx; hit = i; }
        }
        if (hit !== null) {
          canvas.style.cursor = 'pointer';
          var d = data[hit];
          u.showTooltip(e,
            '<div style="font-weight:700;margin-bottom:2px;">' + d.date + '</div>' +
            '<div>AOV: <strong>' + u.formatCurrencyFull(d.aov) + '</strong></div>' +
            '<div>Orders: <strong>' + u.formatNumber(d.count) + '</strong></div>'
          );
          draw(1);
          ctx.save();
          ctx.beginPath();
          ctx.arc(points[hit].x, points[hit].y, 6, 0, Math.PI * 2);
          ctx.fillStyle = u.hexToRgba(LINE_COLOR, 0.2);
          ctx.fill();
          ctx.beginPath();
          ctx.arc(points[hit].x, points[hit].y, 4, 0, Math.PI * 2);
          ctx.fillStyle = LINE_COLOR;
          ctx.fill();
          ctx.restore();
        } else {
          canvas.style.cursor = 'default';
          u.hideTooltip();
          draw(1);
        }
      });
      canvas.addEventListener('mouseleave', function() {
        u.hideTooltip();
        canvas.style.cursor = 'default';
        draw(1);
      });
    });
  }

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