{# _discount_impact.html -- Discount Impact donut + stats panel #}
{# Usage: {% include "django_program/manage/charts/_discount_impact.html" with chart_data=chart_discount_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;">Discount Impact</strong><br>
      <small style="color: var(--color-text-muted); font-size: 0.78rem;">Voucher and discount analysis</small>
    </div>
  </div>
  <div style="display: flex; align-items: flex-start; gap: 1.5rem;">
    <canvas id="chart-discount-impact" width="180" height="180" style="width: 180px; height: 180px; flex-shrink: 0;"></canvas>
    <div id="chart-discount-stats" style="flex: 1; min-width: 0;"></div>
  </div>
</div>

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

  function drawChart() {
    var s = u.setupCanvas(canvas);
    var ctx = s.ctx, w = s.w, h = s.h;

    if (!data || (data.total_gross === 0 && data.total_discount === 0)) {
      u.drawEmpty(ctx, w, h, 'No discount data');
      if (statsEl) statsEl.innerHTML = '';
      return;
    }

    var cx = w / 2, cy = h / 2;
    var outerR = Math.min(w, h) / 2 - 8;
    var innerR = outerR * 0.62;
    var discountVal = data.total_discount || 0;
    var netVal = data.total_net || 0;
    var total = discountVal + netVal;
    if (total === 0) total = 1;

    var segments = [
      { label: 'Discounts', value: discountVal, color: u.COLORS.red },
      { label: 'Net Revenue', value: netVal, color: u.COLORS.emerald }
    ];

    var arcs = [];
    var cumAngle = -Math.PI / 2;
    for (var i = 0; i < segments.length; i++) {
      var sweep = (segments[i].value / total) * Math.PI * 2;
      arcs.push({ start: cumAngle, end: cumAngle + sweep, idx: i });
      cumAngle += sweep;
    }

    function draw(t) {
      var progress = u.easeOutQuart(t);
      var maxAngle = -Math.PI / 2 + Math.PI * 2 * progress;
      ctx.clearRect(0, 0, w, h);

      ctx.save();
      ctx.beginPath();
      ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
      ctx.arc(cx, cy, innerR, 0, Math.PI * 2, true);
      ctx.fillStyle = '#f0f1f4';
      ctx.fill();
      ctx.restore();

      for (var i = 0; i < arcs.length; i++) {
        var drawEnd = Math.min(arcs[i].end, maxAngle);
        if (drawEnd <= arcs[i].start) continue;
        ctx.save();
        ctx.beginPath();
        ctx.arc(cx, cy, outerR, arcs[i].start, drawEnd);
        ctx.arc(cx, cy, innerR, drawEnd, arcs[i].start, true);
        ctx.closePath();
        ctx.fillStyle = segments[i].color;
        ctx.fill();
        ctx.restore();
      }

      if (progress > 0.5) {
        var alpha = Math.min(1, (progress - 0.5) / 0.3);
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = u.COLORS.text;
        ctx.font = '800 18px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText((data.discount_rate || 0).toFixed(1) + '%', cx, cy - 4);
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '600 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.fillText('DISCOUNT', cx, cy + 13);
        ctx.restore();
      }
    }

    u.animate(900, draw, function() {
      canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var mx = e.clientX - rect.left - cx;
        var my = e.clientY - rect.top - cy;
        var dist = Math.sqrt(mx * mx + my * my);
        var angle = Math.atan2(my, mx);
        if (angle < -Math.PI / 2) angle += Math.PI * 2;
        if (dist >= innerR && dist <= outerR) {
          for (var i = 0; i < arcs.length; i++) {
            if (angle >= arcs[i].start && angle < arcs[i].end) {
              canvas.style.cursor = 'pointer';
              var seg = segments[i];
              var pct = (seg.value / total * 100).toFixed(1);
              u.showTooltip(e,
                '<div style="font-weight:700;margin-bottom:2px;">' + seg.label + '</div>' +
                '<div>Amount: <strong>' + u.formatCurrencyFull(seg.value) + '</strong></div>' +
                '<div>' + pct + '% of gross</div>'
              );
              draw(1);
              ctx.save();
              ctx.beginPath();
              ctx.arc(cx, cy, outerR + 3, arcs[i].start, arcs[i].end);
              ctx.arc(cx, cy, innerR - 2, arcs[i].end, arcs[i].start, true);
              ctx.closePath();
              ctx.fillStyle = u.hexToRgba(seg.color, 0.2);
              ctx.fill();
              ctx.restore();
              return;
            }
          }
        }
        canvas.style.cursor = 'default';
        u.hideTooltip();
        draw(1);
      });
      canvas.addEventListener('mouseleave', function() {
        u.hideTooltip();
        canvas.style.cursor = 'default';
        draw(1);
      });
    });

    if (statsEl) {
      var withPct = data.orders_with_discount + data.orders_without_discount > 0
        ? Math.round(data.orders_with_discount / (data.orders_with_discount + data.orders_without_discount) * 100) : 0;
      var html = '';

      html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1rem;">';
      html += '<div style="background:#f8f9fa;border-radius:8px;padding:0.6rem 0.75rem;">' +
        '<div style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:800;color:' + u.COLORS.red + ';">' + u.formatCurrencyFull(data.total_discount) + '</div>' +
        '<div style="font-size:0.72rem;color:#8889a0;margin-top:0.1rem;">Total Discounts</div></div>';
      html += '<div style="background:#f8f9fa;border-radius:8px;padding:0.6rem 0.75rem;">' +
        '<div style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:800;color:' + u.COLORS.emerald + ';">' + u.formatCurrencyFull(data.total_net) + '</div>' +
        '<div style="font-size:0.72rem;color:#8889a0;margin-top:0.1rem;">Net Revenue</div></div>';
      html += '</div>';

      html += '<div style="margin-bottom:0.75rem;">';
      html += '<div style="font-size:0.72rem;color:#8889a0;margin-bottom:0.3rem;">Orders with discount (' + withPct + '%)</div>';
      html += '<div style="display:flex;height:8px;border-radius:4px;overflow:hidden;background:#f0f1f4;">';
      html += '<div style="width:' + withPct + '%;background:' + u.COLORS.violet + ';border-radius:4px 0 0 4px;"></div>';
      html += '</div>';
      html += '<div style="display:flex;justify-content:space-between;margin-top:0.2rem;">';
      html += '<span style="font-size:0.68rem;color:#8889a0;">' + u.formatNumber(data.orders_with_discount) + ' with</span>';
      html += '<span style="font-size:0.68rem;color:#8889a0;">' + u.formatNumber(data.orders_without_discount) + ' without</span>';
      html += '</div></div>';

      if (data.by_voucher && data.by_voucher.length) {
        html += '<div style="font-size:0.72rem;color:#8889a0;margin-bottom:0.3rem;">Top Vouchers</div>';
        var maxVouchers = Math.min(data.by_voucher.length, 5);
        for (var vi = 0; vi < maxVouchers; vi++) {
          var v = data.by_voucher[vi];
          html += '<div style="display:flex;align-items:center;justify-content:space-between;padding:0.25rem 0;' + (vi < maxVouchers - 1 ? 'border-bottom:1px solid #f0f1f4;' : '') + '">';
          html += '<span style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:0.75rem;font-weight:600;color:#1a1a2e;">' + v.code + '</span>';
          html += '<span style="font-size:0.72rem;color:#8889a0;">' + u.formatCurrencyFull(v.discount_total) + ' &middot; ' + v.order_count + ' orders</span>';
          html += '</div>';
        }
      }

      statsEl.innerHTML = html;
    }
  }

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